General integration
This guide sets out how to integrate the Rokt Web SDK via Google Tag Manager (GTM).
#
About Google Tag ManagerUnderstanding the data layer
The data layer should have been implemented on your web page by your developers.
A data layer is an object that contains all of the information that you want to share with Google Tag Manager. Information such as events or variables can be shared to Google Tag Manager via the data layer, and triggers can be set up in Google Tag Manager based on the values of variables (e.g., fire a remarketing tag when purchase_total > $100) or based on the specific events. Variable values can also be shared through to other tags (e.g., add purchase_total into the value field of a tag).
Refer to the GTM developer guide for comprehensive details on how the data layer works.
Example of a data layer:
window.dataLayer = window.dataLayer || []
window.dataLayer.push({ 'email':'jenny.smith@rokt.com', 'consumer': { 'firstname' : 'Jenny', 'lastname' : 'Smith' }, 'ecommerce': { 'transaction': { 'amount' : '12.36' } }, 'event':'gtm.transactionComplete'});
#
Identifying your variable nameVariables are set up in your GTM and are matched to the data layer. Refer to the GTM developer guide for more details about variables.
The structure of your data layer on your page affects the data layer variable name in your GTM. See the following examples.
Example data layer script 1:
window.dataLayer.push({ 'email':'jenny.smith@rokt.com'});
Data layer variable name: email
Example data layer script 2:
window.dataLayer.push({ 'consumer': { 'firstname' : 'Jenny' }});
Data layer variable name: consumer.firstname
Example data layer script 3:
window.dataLayer.push({ 'ecommerce': { 'transaction': { 'amount' : '12.36' } }});
Data layer variable name: ecommerce.transaction.amount
#
Setting up variables in GTMIn Google Tag Manager, go to Variables > User-defined variables.
Name your variable.
In the example below, the name is
dl_email
Set Variable Type as Data Layer Variable.
Enter the Data Layer Variable Name. See the examples above to identify the variable name based on your data layer structure.
Click Save.
Example:
#
Setting up the Rokt integration in GTM- From Google Tag Manager, go to Tags.
- Click New.
- For Tag Type, select Custom HTML.
- Add in the Rokt integration code. If you don't have your custom snippet, you can use the snippet found in Getting Started.
- Paste your Rokt integration code with the variable you have set up (e.g., email:
{{dl_email}}
).
note
Please make sure the document.write checkbox is enabled, otherwise Google will prevent the changes from being published
- Add a trigger.
- Save and publish.
#
Testing the integration- Check your Google Tag Manager. You should see the Rokt integration (custom HTML) firing successfully.
- Click the Rokt integration that was fired. The specified data should appear in the script.