Integrate Your Data With Google Tag Manager

At Stormly we make it easy for you to integrate with Google Tag Manager, while allowing you to fully customize what you track.

Here's how to get started with tracking custom events using GTM.

Create a Custom Tag

First create a custom tag, by follow the steps below:

  1. Create a new tag
  2. Change the tag title to something descriptive i.e. Stormly – General Library – All Pages
  3. Select the tag type as Custom HTML
  4. Paste the Stormly tracking code inside the HTML field. This code you get when you create the free project in Stormly. Just navigate to https://www.stormly.com/projects, and click Setup Data on the current project. The code looks something like this: <script type="text/javascript">(function(e,t,n,r,i,s,o){e["StormlyObject"]=i;e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},s=t.createElement(n),o=t.getElementsByTagName(n)[0];s.async=1;s.src=r;o.parentNode.insertBefore(s,o)}) (window,document,"script","//cdn.stormly.com/assets/tracking/t.js","stormly"); stormly("create", "YOUR_STORMLY_KEY", {domain: "tt7bxiq.t.stormly.com", anonymizeIP: false, storeOnlyOneCookie: true}); </script>
  5. Click advanced settings and change the tag firing option to Once per Page
  6. Click on the triggering option and select All Pages default trigger
  7. Save and preview the tag to make sure it is firing

Tracking click events

The next step is to track the actual behavior events. In the example below, we will trigger a tracking event on a link click.

  1. Click Triggers from the left menu in tag manager
  2. Create a new trigger
  3. Rename the trigger
  4. Select the trigger type as Just Links
  5. Configure the trigger as displayed in the image below. Note that the Page path and Click ID have to be customized to your own page structure and element IDs:



  6. Save the trigger

Now we will create the link click tag, that will send data to Stormly. Follow the steps below to create the tag.

  1. Create a new tag
  2. Rename the tag
  3. Select the tag type as Custom HTML
  4. Copy and paste the code below into the HTML field:
    <script>stormly.track("Item Read More", {category: "tutorial", words: 800});</script>
    Notice the second argument containing the category = tutorial and words = 800 attributes. This can be used to give an event more context, but can be left out if not needed.
  5. Click Advanced settings > Tag sequencing and select the Stormly library to fire before the event tag.



  6. Add the trigger we have created earlier
  7. Save the tag
  8. Refresh the preview mode and test your tag
  9. Open Stormly, and load the "Event Trends" report to see which events are active and the number of times it fired. Make sure to set the date range to Today, otherwise no results are available

Repeat this process for all other event behaviors that you'd to track, and you're set!
Note: Tracked data becomes available in Stormly within seconds usually, but new projects become "active" only once at least 50 unique users are tracked.

There are two other tracking functions that you can use, but are not required:

  1. Setting attributes on users, such as their favorite color: <script>stormly("set", {favoriteColor: "blue", favoriteHolidayDestination: "Spain"});</script>
  2. Identifying an anonymous user, so that the same user on different devices can be linked as one, by assigning the logged in ID from your database: <script>stormly("identify", "user-12345");</script>