Integrate with Google Tag Manager

Create a Custom Tag

First create a custom tag by following the steps below:

1. Create a new tag.
2. Change the tag title to something descriptive, e.g. Stormly – General Library – All Pages
3. Select the tag type as Custom HTML
4. Paste the Stormly tracking code inside the HTML field. Navigate to stormly.com/projects, click Setup Data on the current project. The code looks 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, pageviewTracking: true, clickTracking: true, 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 History Changes As Pageviews

When you use frontend libraries like React or Vue, there are no individual pageview loads in the sense of a complete page reloading on navigation. To automatically track pageviews whenever the browser history changes, use the following steps:

1. In most cases, first disable automatic pageview tracking from the Stormly library itself, otherwise you'd get two pageviews tracked on initial page loads. Check your network console on a fresh page load — if you see two requests to *.t.stormly.com with payload _type: pageview, go back to the custom tag and replace pageviewTracking: true with pageviewTracking: false.
2. Create a new tag called "Stormly - Pageview - History Change"
3. Select the tag type as Custom HTML
4. Paste the code inside the HTML field as-is:

   <script type="text/javascript">stormly('pageview');</script>

5. Click Advanced settings → Tag sequencing and select the Stormly library to fire before this tag.
6. Click on the triggering option and click the top-right (+) icon to create a new trigger.
7. Click on the empty Trigger Configuration area, select "History Change" under the "Other" category.
8. Save the new trigger — it will be automatically selected for your new tag.
9. Here's how your configuration should look:
10. Once saved and submitted, you will have automatic pageview tracking based on history changes.

Custom Event Tracking

Our automatic tracking takes care of the majority of tracking. But in case you'd like to track additional custom events and properties, use the following steps.

Tracking click 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 and rename it
3. Select the trigger type as Just Links
4. 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:
   
5. Save the trigger

Now create the link click tag that will send data to Stormly:

1. Create a new tag and rename it
2. Select the tag type as Custom HTML
3. Copy and paste the code below into the HTML field:
   

   <script>stormly("event", "Item Read More", {category: "tutorial", words: 800});</script>

   The second argument containing category and words gives the event more context, but can be left out if not needed.
4. Click Advanced settings → Tag sequencing and select the Stormly library to fire before the event tag:
   
5. Add the trigger we created earlier
6. Save the tag, refresh preview mode and test
7. Open Stormly and load the "Event Trends" report. Set the date range to Today to see the events immediately.

Repeat this process for all other event behaviors you'd like 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.

Other tracking functions

There are two other tracking functions 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 the same user on different devices can be linked as one:

   <script>stormly("identify", "user-12345");</script>