Customer Support

Set up web tracking with GTM

How it works

This guide will provide step-by-step instructions on how you can set up your Data Talks Web Tracking using Google Tag Manager (GTM). To do so, you need to create and configure our web behavioral GTM container.

In this guide we are going to create a new container, attach the Snowplow Custom Templates and create a functioning tag for the Page View events. In addition, the document provides the optional configuration required in order to capture the email of a logged in user.

Requirements

  • Google Account
  • Add the container code into your website
  • Capture email address (optional)
    • Add the Data Layer code into your website
    • Provide the required values to the Data Layer

Create an account

  1. First, go to https://tagmanager.google.com to start the setup for the Google Tag Manager (GTM) and login with your Google account.
Create an account in GTM set up
GTM Landing page
  1. After logging in, you need to create your account in GTM. NOTE: If you already have a container created for your account, you can skip this step and proceed directly to “Templates menu” below.
    1. Fill the Account Name, Country and the Container Name fields accordingly. We will choose “Web” as the Target Platform.
    2. Accept the Data Processing Terms by marking the checkbox at the bottom left and then Accept the GTM Terms of Service by pressing the Yes button on the top right corner.
How to create an account in GTM
Create Account

Templates menu

  1. On the Tag Templates menu, we select “Search Gallery”, and we search for the “Snowplow Analytics” tag template. Then we add it to the workspace by clicking “Add to workspace” and proceed with adding when the popup appears (we do not want to confuse it with the “Snowplow Analytics v3“).
  2. We need to make an extra configuration on this template. So, after adding the template, we access it and click on the “Permissions” tab.
    1. Inside the Injects scripts we need to add the CDN (https://*.collector.datatalks.se/*), this will provide the sp file that’s required for tracking.
Add tag template for snowplow
Add Tag Template
Add CDN to inject script
Add CDN to injected scripts
  1. Similarly, we do for the Variable Templates, only this time we search for the “Snowplow Analytics Settings” and add it to the workspace (carefully to not mistake it with the “Snowplow Analytics v3 Settings). No extra configuration steps required for this template.
enable variable template for snowplow
Variable Template

Variables menu

  1. We click “New” in the User-Defined Variables (name this variable Snowplow Analytics Settings).
    1. In the variable configuration we select from the Custom Templates the “Snowplow Analytics Settings”, then we configure the values. Once we are done, we click “Save”.
SettingsValue
Application Settings
Application IDPlease request the specific ID for your website (e.g. club-website) from Data Talks. No special characters are allowed.
PlatformWeb
Privacy
Respect “Do Not Track”False
Cookie Settings
State Storage StrategyCookie and Local Storage
Cookie Domainauto
Cookie Namesp
Cookie Lifetime2 years
Cookie SameSiteLax
Cookie SecureTrue
Session Cookie Timeout1800 (seconds)
Maximum Local Storage Queue Size1000 (events)
Dispatching
Dispatch MethodPOST
Encode into Base64True
Page Unload Pause Length500 (milliseconds)
Tracker Endpoint ProtocolUse page protocol
Buffer Size1
POST Path/com.snowplowanalytics.snowplow/tp2
Maximum POST Payload Size40000 (bytes)
Predefined Contexts
Predefined Contextsgeolocation
create a new user defined variable after the snowplow set up
Snowplow Analytics Settings User-Defined Variable

Capture email address of logged in user (optional)

  1. We need to create another variable in order to get a user’s login email as it’s identification.
    1. We click “New” in the User-Defined Variables (this variable needs to be named userId).
    2. In the variable configuration we select from the Page Variables the “Data Layer Variable”, then we configure the values. Once we are done, we click “save”.
SettingsValue
Data Layer Variable NameuserId
Data Layer VersionVersion 2
Adding a data layer user defined variable
Data Layer User-Defined Variable
  1. The following code needs to be inserted within the <head> of the page of the website in order to set the email address as the userId value.

window.addEventListener(“load”, function(){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
“event” : “login”,
“userId”: “email-address-value-in-string-format”
});
});

Triggers menu

  1. We click “New” → “Page View”.
    1. Select the “This trigger fires on” to the option “All Page Views”. Name this trigger “Page Views”.
Chose your trigger from trigger menu
Page View Trigger

Capture email address of logged in user (optional)

  1. We click “New” to create another trigger and select “Custom Event”.
  2. We add to the Event Name field “login”.
  3. Set the “This trigger fires on” to the option “All Custom Events”.
Set up capture email addresses
Login Trigger

Tags menu

  1. We click “New” → “Tag Configuration” and from the Custom tags section we select “Snowplow Analytics”. Name this tag “Page View”.
    1. We configure the tag based on the following configurations.
SettingsValue
Tracker Namecf
Collector Endpoint Hostnamecollector.datatalks.se
Tag TypePage View
Page View Configuration
Enable Page Activity TrackingYes
Minimum Visit Length10 (seconds)
Heartbeat Interval10 (second)
Use Callback FunctionNo
Custom Page Title**Leave blank**
Add Custom Context FunctionNo
Additional Tracking Parameters
Add Custom ContextsNo
Set Custom Timestamp **Leave blank**
Tracker Configuration Parameters
Snowplow Analytics Settings{{Snowplow Analytics Settings}}
Enable Overriding Settings For This TagDo not check box
Advanced Configuration > JavaScript Tracker
Global Method Namesnowplow
Self-hosted Library URLURL to the sp file (https://tracking.collector.datatalks.se/sp_v2.min.js)
  1. At the “Triggering” we select “Page Views”.
Set up web trackin with GTM, triggers and pageviews
Page View Tag

Capture email address of logged in user (optional)

  1. We click “New” → “Tag Configuration” and from the Custom tags section we select “Snowplow Analytics”.
  2. We name the tag “setUserId” and continue the configuration based on the following table. 
SettingsValue
Tracker Namecf
Collector Endpoint Hostnamecollector.datatalks.se
Tag Type[Custom Command]
Command NamesetUserId
Command argument{{userId}}
Tracker Analytics Settings{{Snowplow Analytics Settings}}
Global Method Namesnowplow
Self-hosted Library URLURL to the sp file (https://tracking.collector.datatalks.se/sp_v2.min.js)
  1. At the “Triggering” we select “login”.
Pick your login trigger
setUserId Tag
  1. Additionally, we need to make few adjustments into the Page View tag in order to make the setUserId tag work properly. At the bottom of the Tag Configuration, at the Advanced Settings → Tag Sequencing, we make the following adjustments.
SettingsValue
Fire a tag before Page View fires:heavy_check_mark:
Setup TagsetUserId
Don’t fire Page View if setUserId fails or is paused:heavy_check_mark:

Overview

  1. We select “Submit” → “Create Version”.
    1. We provide a name and a description for the version of the container and click “Create”.
Set up web trackin with GTM, select name and description for the container
Create version
  1. From the 3-dot menu within the version page we select “Publish”.
Set up web trackin with GTM, publiching a change
Publish container version
Set up web trackin with GTM, replayed successfull container
Container version replayed successfully

Form Tracking

This section provides the instructions for form tracking. We will have to repeat some of the steps from the pageviews, but with different configurations. Keep in mind that this is a complete custom implementation of the form tracking and it can be used independently from other tags.

Variables

  1. We start by creating a new User-Defined Variable of type Custom JavaScript and we name the variable “form-tracking”. We insert the following code into the variable’s field.

function(){
return snowplow(‘enableFormTracking’);
}

Set up web trackin with GTM, form tracking user defined variable
form-tracking User-Defined Variable

Triggers

  1. We create a new Page View trigger, but this time on the “The trigger fires on” we select “Some Page Views”. When we select that choice, three fields will be prompted. We assign each field with the values in the following table.
SettingsValue
First FieldPage URL
Second Fieldcontains
Third Fielddemo
  1. The Third Field needs to contain the unique word included within the contact form Page URL (for example, demo or contact). That way, this trigger will be fired only when a user lands on this page.
Adding a form submit trigger in GTM
Form Submit Trigger

Tags

  1. We create a new tag, similarly to the Page View tag, of type “Snowplow Analytics” using the following table to configure it.
SettingsValue
Tracker Namecf
Collector Endpoint Hostnamecollector.datatalks.se
Tag TypePage View
Enable Page Activity TrackingNo
Custom Page Title**Leave blank**
Add Custom Context FunctionNo
Add Custom ContextsNo
Set Custom Timestamp **Leave blank**
Snowplow Analytics Settings{{form-tracking}}
Global Method Namesnowplow
Self-hosted library URLhttps://tracking.collector.datatalks.se/sp_v2.min.js
  1. Finally, we attach to this tag the Form Submit trigger we created earlier, and save it.
Set up web trackin with GTM, Form tracking Google Tag manager
Form tracking Tag

Overview

  1. As a final step, we need to create a new version and publish it, in order to apply form tracking on our website. We follow the exact same steps from the ‘Overview’ section above.
Set up web trackin with GTM, published container
Deployed new version with Form tracking

Powered by BetterDocs

Arrow-up