Skip to main content

General integration

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

caution

For optimal performance, Rokt recommends a direct integration of the Rokt Web SDK. Review the instructions for a direct integration for partners and advertisers.

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':'jenny.smith@rokt.com',    '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':'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 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.

Example:

Variables in GTM

Setting up the Rokt snippet 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 snippet. If you don't have your custom snippet, check with your Rokt account manager.
  3. Paste your Rokt snippet with the variable you have set up (e.g., email: {{dl_email}}).

Setup Rokt Tag in GTM

  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 snippet (custom HTML) firing successfully.

Test GTM

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

Test GTM

Was this article helpful?