Google Tag Manager (GTM) is a free tool that allows you to manage and deploy marketing tags (snippets of code or tracking pixels) on your website (or mobile app) without having to modify the code. GTM requires little to no coding and is deployed in minutes. Once installed, you can use GTM to send events and attributes to Sprig. Installing with GTM will allow you to:

  • Identify users that are completing an action.

  • Create events for the actions your users are taking.

  • Filter to a specific audience based on user attributes.

Advantages of using Google Tag Manager (GTM)

✅ Low code

✅ Included with Google Analytics

✅ Free

Is GTM Already Deployed?

If you don't have the Chrome Tag Assistant extension installed, you can check if GTM is installed by invoking the inspect option in your web browser.

  1. To open the Inspect window in Chrome, Firefox and Edge, press Control+Shift+I (or Option+Command+I on Chrome and Safari for Mac).

  2. Make sure you are on the Elements tab (or Inspector tab in Firefox), then press Control+F (or Command+F for Mac) to open the search field. Firefox displays the search field by default.

  3. Search for the string GTM. If GTM is already deployed, you should get results similar to the following:
    <script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXXX-X"></script>. The container id XXXXXX-X is specific to your deployment.

Installing June with GTM

Once GTM is installed there are three steps are needed to add June to GTM:

  1. Track when a page is a viewed on your app

  2. Identify when a user log in

  3. Track fine grained actions - track events (optional)

1. Using GTM to track pageviews

Page views indicate when a specific URL in your product was visited. You can track all your application page views and pass them to June this way:

  1. Log in to June here

  2. Go to the developer quick start page and make sure you’re logged in (If you are logged in your company name will show in the top right corner)

  3. Click Install tracking script to see your script

  4. Click Copy in the top right

  5. Now head to Google Tag Manager and pick an account

  6. Click Tags > New

  7. Click Untitled Tag and name it “June page views”

  8. Click Tag Configuration

  9. Click the Search (🔍)

  10. Search for “Custom HTML” and select it

  11. Paste the tracking script (copied in step 4) in the HTML section, like this:

12. Click Triggering > Select All pages

13. Click Save

🗑 Remove Test environments

In case you don’t want to track your Test/Staging environment you can add some exceptions.

For that in the Triggering section, Click Add Exception > + > Page view > Some page views > Page URL contains “a keyword specific to your test environment”

2. Identify your users with GTM

Identifying your users means revealing who they are. with some unique individual information.

For that step you’ll need the help of an engineer to implement dataLayer.push.

Is your data layer ready?

To pull user information from your product into GTM you need to have it in your data layer.

The data layer is a layer in-between your product and GTM. Anything that is stored in it can be pulled by GTM automatically, without the support of an engineer this time.

Implementing and pushing data from your app to the dataLayer requires the support from an engineer though (the function is called dataLayer.push).

Here is some doc to share with your engineering team.

Suggested data layer

To get started we suggest the following dataLayer.push function

dataLayer.push({
event: ‘log-in’
user_id: ‘unique unique pulled from your database’
email: ‘email provided by users when they signed up’
});

Other optional user information you may pass too:

  • name

  • email

  • role

  • industry

  • plan: free, trialing, paid

Implement a login tag with the identify

To identify your users you need to use a strategic event which is triggered at the beginning of their sessions. For that we’ll use the Login event.

Here is how to implement it:

  1. In GTM, Click Tags > New

  2. Click Untitled Tag and name it “June - identify users”

  3. Click Tag Configuration

  4. Search for “Custom HTML” and select it

  5. Paste the identify you can find here with your unique user information

  6. Add the relevant field that you captured in the dataLayer.push function, at minimum you should have “user_id”

⚠️ Don’t forget to put the identify code in between the script bracket, like this:

<script> identify code </script>

Now we’re going to create a trigger when the user log in:

  1. Click Triggering > Click “+

  2. Click Untitled Trigger and name “User log in”

  3. Click Trigger configuration > Search for Custom Event and select it

  4. Name the event “log-in”

  5. Click Save

Create variables

A variable is a field of information that can be transferred from your data layer to GTM.

Together let’s create the “user_id” variable.

You can repeat the same process for as many variables as you have (ex: “email”):

  1. In the left sidebar click on Variables

  2. Next to “User-Defined Variables” click New

  3. Click Undefined Variable and name it “user_id variable”

  4. Edit Variable Configuration

  5. Search for “Data Layer Variable” and select it

  6. Under “Data Layer Variable Name” type “user_id”

  7. Click Save

⚠️ Make sure to reproduce this process for each of your variable. At the end it may look like this:

3. Track events (optional)

Events are fine grained actions that can happen on your website. For instance a click. This step is optional but will help you get a deeper sense about what’s happening in your product.

Together let’s create an event when a user uses your core feature:

  1. Clicks on Tags

  2. Click Undefined Tag and name it “Feature - Name 1”, Name 1 being the name of this feature

  3. Paste your tracking call script

  4. Make sure to rename the event ‘Purchase Item’ with the name of your feature

5. Click Triggering

6. Click Undefined Trigger and name it “Feature 1 trigger”, with “Feature 1” being the name of your feature

7. Search for “Custom event’ and select it

8. Pick the exact same of the event passed in your dataLayer

For each tag you add you should add a dedicated trigger.

Properties

Similar to adding extra information about users from the data layer, you can pass extra information about an event in the data layer too.

Deploy

When you’re done creating your tags, triggers and variables you can publish your changes by clicking Submit.

Debug

To make sure your tags are triggered properly you can use the GTM debugging mode.

  1. Click Preview

  2. Follow this guide

Thanks Cesar from Taster for the helps to put this guide together 😃

Did this answer your question?