Skip to main content

General integration

This guide sets out how to integrate the Rokt Web SDK via Google Tag Manager (GTM).

About Google Tag Manager#

Understanding 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':'',    'consumer': {        'firstname' : 'Jenny',        'lastname' : 'Smith'    },    'ecommerce': {        'transaction': {            'amount' : '12.36'        }    },    'event':'gtm.transactionComplete'});

Identifying your variable name#

Variables 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':''});

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 GTM#

  1. In Google Tag Manager, go to Variables > User-defined variables.

  2. Name your variable.

    In the example below, the name is dl_email

  3. Set Variable Type as Data Layer Variable.

  4. Enter the Data Layer Variable Name. See the examples above to identify the variable name based on your data layer structure.

  5. Click Save.


Variables in GTM

Setting up the Rokt integration in GTM#

  1. From Google Tag Manager, go to Tags.
  2. Click New.

Setup Rokt Tag in GTM

  1. For Tag Type, select Custom HTML.
  2. Add in the Rokt integration code. If you don't have your custom snippet, you can use the snippet found in Getting Started.
  3. Paste your Rokt integration code with the variable you have set up (e.g., email: {{dl_email}}).

Setup Rokt Tag in GTM


Please make sure the document.write checkbox is enabled, otherwise Google will prevent the changes from being published

  1. Add a trigger.

Setup Rokt Tag in GTM

  1. Save and publish.

Testing the integration#

  1. Check your Google Tag Manager. You should see the Rokt integration (custom HTML) firing successfully.

Test GTM

  1. Click the Rokt integration that was fired. The specified data should appear in the script.

Test GTM

Was this article helpful?