Skip to main content

Google Tag Manager Integration for Ecommerce

This page explains how to implement the Rokt SDK for Ecommerce using Google Tag Manager to deliver more relevant customer experiences at checkout. The SDK allows you to trigger and track these experiences (like displaying offers on confirmation pages) by firing on configured pages and passing user and transaction data back to Rokt for personalization and measurement.

You'll learn how to create variables in Google Tag Manager based on your data layer, and how to create tags to initialize the Rokt SDK and insert placements.

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

Identify your variable names​

Variables are set up in your GTM account 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.

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({
    'user': {
        'firstname' : 'Jenny'
    }
});

Data layer variable name: user.firstname

Example data layer script 3:

window.dataLayer.push({
    'ecommerce': {
        'transaction': {
            'amount' : '12.36'
        }
    }
});

Data layer variable name: ecommerce.transaction.amount

Create your variables in Google Tag Manager​

  1. Log in to your Google Tag Manager container.
  2. Click Variables.
  3. Under User-defined variables, click New.
  4. Enter a name for your variable.
  5. Click Choose a variable type to begin setup...
  6. Under Page Variables select Data Layer Variable.
  7. Enter the Data Layer Variable Name. See the examples above to identify the variable name based on your data layer structure.
  8. Click Save.

Rokt suggests creating variables for the following attributes:

  • email
  • firstname
  • lastname
  • mobile
  • age
  • gender
  • billingaddress1
  • billingaddress2
  • confirmationref
  • billingzipcode
  • amount
  • paymenttype
  • ccbin
  • country
  • language
  • currency

Create your tags​

You will need to create individual tags to handle each of the core functions of the Rokt SDK, including:

  • Initializing the Rokt SDK
  • Identifying your users
  • Tracking page views
  • Inserting a placement

You must also configure specific triggers that define when these tags are executed, as described in the instructions for each tag below.

Initialize the Rokt SDK​

To create a tag to initialize the SDK:

  1. Log in to your Google Tag Manager Container, and click Tags in the left hand navigation.

  2. Click New and select Tag Configuration. Google Tag Manager

  3. Select Tag Configuration and go to "Discover more tag types in the Community Template Gallery" Google Tag Manager

  4. In the search bar, search for Rokt. Google Tag Manager

  5. From the search results, select mParticle by Rokt - Initialization Template.

  6. Enter your configuration settings:

    • Under mParticle by Rokt API Key, enter the API key provided to you by your Rokt account manager.
    • If you set up a custom domain for a first party domain integration, enter your new domain name under First Party Domain Name.
    • If you are ready to use your tag for production data, set Environment to Production under More Integration Options. Leave this set to Development if you are still testing your tag.
    • If you would like to allow/disallow cookies, select the appropriate option from the More Integrations dropdown.
    • If you want to set a custom firing schedule for the tag, open the Advanced Settings dropdown and configure options such as Firing Priority, Firing Options, or Tag Sequencing.
    • Use the Additional Tag Metadata dropdown to specify additional variables to be included in event data upon a tag firing.

  7. In the Triggering menu, click the + button to configure a trigger or select one from the options available.

  8. Select All Pages to ensure the initialization tag fires on all pages, and add any exceptions if necessary.

  9. Click Save.

Identify the User​

You should also create a tag that identifies the current user to Rokt. Make sure to include this tag in your site so it is fired as soon as the user provides their email address.

  1. Click Tags in the left hand navigation from your Google Tag Manager Container.

  2. Click New and select Tag Configuration.

  3. In the search bar, search for Rokt.

  4. From the search results, select mParticle by Rokt - IDSync Template.

  5. Select Identify from the IDSync Event Type. Google Tag Manager

  6. Expand the Identify Options section, and enter the data variable representing the field you want to use to identify your users.

    • If you want to use your user's raw, unhashed email address, enter the data variable for this field under Email.
    • If you want to use your user's SHA256 hashed email address, enter the data variable for this field under Other.

  7. Configure a trigger to fire this tag as soon as the user provides their email address. The trigger you use will depend on your specific integration, but (as an example), you could create a trigger that fires the tag when a user provides an email address via a form submission:

    • From Trigger Configuration, select Form Submission Email.
    • Click into the trigger to reach the Trigger Configuration page, then click the edit icon.
    • Under This trigger fires on, select Some Forms.
    • Select the data layer variable you created to store your user's email address.
    • For the condition, select matches RegEx and enter the regular expression .+@.+\..+.

    Google Tag Manager

caution

The exact trigger configuration you use for the identify user tag will depend on your integration. If you have questions about how best to implement this tag so that your users are successfully identified before logging events, speak to your Rokt Account Manager. Additionally, ensure the initialization tag is always fired first before this tag.

Track Page Views​

You should log page views as soon as each page in the user's transaction journey is loaded. To create a tag to log a page view:

  1. Click Tags in the left hand navigation from your Google Tag Manager Container.
  2. Click New and select Tag Configuration.
  3. In the search bar, search for Rokt.
  4. From the search results, select mParticle by Rokt - Event - Screen View Template.
  5. Enter a descriptive name for your tag, like "Track Page View".
  6. Under Screen Name, enter "page view".
  7. Under Page URL, enter the data variable for the URL of the current page.
  8. Under Custom Attributes, enter any additional data variables as key/value pairs to provide additional details about the page being viewed.
  9. Configure a trigger so that this tag is fired on every page in the transaction journey (after the initialization tag).
note

The Screen Name field should always be populated with "page view". The Page URL field and Custom Attributes can be used to supply specific information relevant to the exact page being viewed.

caution

The exact trigger configuration you use for the track page views tag will depend on your integration. If you have questions about how best to implement this tag so that your pages are tracked correctly, speak to your Rokt Account manager.

Insert a Placement​

In addition to creating a tag to initialize the ROKT SDK, Rokt ecommerce integrations also require a tag to insert placements.

  1. Click Tags in the left hand navigation from your Google Tag Manager Container.

  2. Click New and select Tag Configuration.

  3. In the search bar, search for Rokt.

  4. From the search results, select "mParticle by Rokt - selectPlacement".

  5. Enter a descriptive name for your tag, like "Insert Placement".

  6. Under Core Attributes and Custom Attributes, set each attribute you want to forward to Rokt with the variable you created based on your site's data layer.

  7. To configure when the tag is triggered, select Triggering.

  8. Click the + button to add a new trigger.

  9. Click Trigger Configuration. The next steps vary depending on whether your site is a multipage application (MPA) or a single page application (SPA):

    • Trigger configuration for multipage applications​

      1. Select Page View from the list.
      2. Change the trigger firing rules to Some Page Views.
      3. Enter the URL parameter(s) that identify each unique page where the tag should fire. For example, if your confirmation page is example.com/cart/payment/shipping the identifying parameter can be any of cart, payment, or shipping.

    • Trigger configuration for single page applications​

      1. Select History Change from the list.
      2. Change the trigger firing rules to Some History Changes.
      3. Enter the URL parameter that identifies the page where the tag should fire. For example, if your confirmation page is example.com/cart/payment/shipping the identifying parameter can be any of cart, payment, or shipping.

  10. Click Save.

Was this article helpful?