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.
To open the Inspect window in Chrome, Firefox and Edge, press Control+Shift+I (or Option+Command+I on Chrome and Safari for Mac).
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.
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:
Track when a page is a viewed on your app
Identify when a user log in
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:
Log in to June here
Go to the developer quick start page , pick the SDK option and make sure you’re logged in (If you are logged in your company name will show in the top right corner)
Click Install tracking script to see your script
Click Copy in the top right
Now head to Google Tag Manager and pick an account
Click Tags > New
Click Untitled Tag and name it “June page views”
Click Tag Configuration
Click the Search (🔍)
Search for “Custom HTML” and select it
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).
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:
In GTM, Click Tags > New
Click Untitled Tag and name it “June - identify users”
Click Tag Configuration
Search for “Custom HTML” and select it
Paste the identify you can find here with your unique user information
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:
Click Triggering > Click “+”
Click Untitled Trigger and name “User log in”
Click Trigger configuration > Search for Custom Event and select it
Name the event “log-in”
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”):
In the left sidebar click on Variables
Next to “User-Defined Variables” click New
Click Undefined Variable and name it “user_id variable”
Edit Variable Configuration
Search for “Data Layer Variable” and select it
Under “Data Layer Variable Name” type “user_id”
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:
Clicks on Tags
Click Undefined Tag and name it “Feature - Name 1”, Name 1 being the name of this feature
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.
Click Preview
Follow this guide
Thanks Cesar from Taster for the helps to put this guide together 😃