Skip to main content

Google Tag Manager

Initial Setup

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 (GTM). 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'
});

Identify 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

Set 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

Integrating via the Rokt Tag Template

Rokt’s ability to match referrals to conversion events can drastically improve your campaign performance. Using the template for Google Tag Manager, you can configure the Rokt snippet without needing to change the code on your page. Once installed, the template accesses the data layer and event triggering to match referrals to conversion events.You can configure the template to include a variety of attributes related to conversion.

Tag template setup

  1. Add the Rokt Tag Integration template to your website.
  • Within your Google Tag Manager Container navigate to Templates.
  • Select Search Gallery.

Test GTM

  1. Search for Rokt in the search box and select the Rokt Tag Integration.

Test GTM

  • Click Add to workspace.

Test GTM

  1. Configure the Tag template, setting up the data attributes and firing rules.
  • Choose Tags and select New.

Test GTM

  • Name the tag “Rokt Tag Template”, then select Tag Configuration.
  • Scroll to the Custom section and choose the Rokt Tag Template.

Test GTM

  1. Configure your account details and preferences.
  • Enter your Rokt Account ID, provided by your Rokt account manager.
  • Ensure the sandbox checkbox is selected.
  1. Configure your data attributes.
  • For each of the attributes click the add icon beside the text box to expand the list of attributes in your data layer.
  • Choose the appropriate variable in your data layer for the appropriate field. For example, click the add icon for the email field and then select the correct email variable in your data layer.
  • Once connected you should see your variable name appear in the input box (see circle #1 in the image below).
  • If the appropriate variable is not showing in your data layer check out our documentation on setting up attributes in the Google Tag Manager data layer here, and check with your Rokt account manager for next steps.

Test GTM

  1. Configure a trigger to determine when the Rokt Tag Template should fire. Click on Triggering rules to add one.
  • If your webapp is a Single Page Application (Created with React, Angular, Vue, ...) Click the plus on the top right and then choose a trigger type of History Change.

    Test GTM

    • Change the trigger firing rules to “Some History Changes”.
    • Change the condition to Page URL contains and enter the URL provided to you by your Rokt account manager.
    • Click Save.

Test GTM

  • If your webapp is not a Single Page Application, Click the plus icon in the top right to create a new trigger, name it and choose a trigger type of Page View.

    Test GTM

    • Change the trigger firing rules to “Some Page Views".
    • Change the condition to Page URL contains and enter the URL provided to you by your Rokt account manager.
    • Click Save.

Test GTM

  1. Save the Rokt Tag Template.

Test GTM

Testing the integration

  1. Ensure that the Rokt Tag Template is unpaused and choose Preview.

Test GTM

  1. Enter your confirmation page URL (for example, this url) and choose Connect.
  • A new window will open with the Tag Assistant.

  • Open developer tools and inspect network activity by right clicking any part of the page and clicking Inspect.

  • Go to the network tab in the panel that opens up and reload the page (cmd/ctrl + R).

  • In the search panel search ‘domain:*.rokt.com’.

    Test GTM

  1. If there are search results, i.e. items that appear, then that confirms the template has been set up. Reach out to your Rokt account manager to let them know the template has been implemented and tested with successful results.
note

If the results are blank like the image below step 6, then it hasn’t been properly configured. Reach out to your Rokt account manager for further guidance.

Integrating via a Custom HTML Tag

Custom HTML tag setup

  1. From Google Tag Manager, go to Tags.
  2. Click New. Setup Rokt Tag in GTM
  3. For Tag Type, select Custom HTML.
  4. Add the Rokt integration code. If you don't have your custom snippet, you can use the snippet found in Getting Started.
  5. Paste your Rokt integration code with the variable you have set up (e.g., email: {{dl_email}}). Setup Rokt Tag in GTM
note

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

  2. Save and publish.

Testing the integration

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

  2. Click the Rokt integration that was fired. The specified data should appear in the script. Test GTM

Integrate the Rokt ID with Google Tag Manager

note

The following are instructions to integrate Rokt ID on your landing page with Google Tag Manager. If you'd like more information on Rokt ID, please see here.

If you'd like to integrate the Rokt ID on your landing page directly, please see this integration guide.

  1. From Google Tag Manager, go to Tags.

  2. Click New, then Tag Configuration. rokt-id-2

  3. For tag Type, select Custom HTML.

  4. Add in the Rokt ID tag snippet by pasting the following into the HTML field: <script src="https://apps.rokt.com/integrations/referral-tag/referral-tag.js" async></script> rokt-id-3

  5. Setup a trigger to fire the Rokt ID tag on the correct page. This will most likely be your landing page.

    1. Click the Plus icon in the top right to create a new trigger and then name it. If your webapp is a Single Page Application, choose the trigger type History Change, otherwise pick Page View. rokt-id-4
    2. Change the trigger firing rules to Some History Changes or Some Page Views.
    3. Change the condition to Page URL contains and enter the URL provided to you by your Rokt account manager.
    4. Click Save. rokt-id-5
  6. Save the Rokt ID tag and publish. rokt-id-6

Testing and validation

  1. From Google Tag Manager go to your workspace and choose Preview.

    1. Enter the URL of your site.
    2. Choose Connect. This should open a new window running the newly set up Rokt ID tag. rokt-id-7
  2. Copy the URL of the newly opened window and forward this to your Rokt account manager. They perform the testing and QA for the Rokt ID tag integration.

Integrate Rokt ID tag on the conversion page

With the Rokt ID tag successfully implemented on your landing page, the unique identifier is stored as a first-party cookie. When a customer completes a conversion event, the Rokt Web SDK retrieves the unique Rokt ID and attributes conversion.

We recommend installing the Rokt Web SDK using the Rokt Google Tag Template if Google Tag Manager is in use. Otherwise, please integrate the Rokt Web SDK directly on-page.

GDPR and CCPA Compliance

Under the GDPR or ePrivacy, any website that uses cookies or tracking technology must obtain user consent. Advertisers should ensure consent is obtained when using the Rokt ID solution, and should block the Rokt script from running where users have opted out of cookies or tracking technology in order to meet their compliance obligations.

Under the CCPA, covered businesses must disclose to users details of the use of such technology.

Cookie consent can be implemented with any Consent Management Platform or Tag Manager, including Google Tag Manager. If other conversion attribution tags are conditionally allowed based on cookie consent, please implement the Rokt ID tag in a similar fashion. If the Rokt ID tag is the first which needs to be conditionally turned off and you are unsure of how to implement it, please reach out to your Rokt account manager.

For more information on the Rokt ID solution described in this section, please refer to our Cookie Policy.