Skip to main content

Rokt Tracking ID integration

Integrating the Rokt Web SDK on your site allows Rokt to accurately attribute conversions and optimize your brand’s campaigns.

We recommend integrating the Web SDK natively on your site to ensure the Rokt Web SDK is fully loaded before the customer navigates away from the page. However, in the event resourcing and bandwidth are unavailable, the Rokt Web SDK can be integrated through Google Tag Manager.

Before you begin#

To get started with Rokt Tracking ID and Google Tag Manager, make sure:

  • Google Tag Manager is installed and running on your site
  • Your Rokt account manager has provided your unique Rokt Account ID

If you need to install Google Tag Manager on your site, you can follow these instructions:

  1. Create an account with GTM. A new container is created by default.

  2. Copy and paste the container snippets into your site. Detailed instructions can be found here.

    1. The container will have a unique ID (e.g., GTM-XXXXXXX). Make a note of this ID for later.

    2. To ensure the Rokt Web SDK is not fired twice, remove any existing Rokt integrations that you previously integrated directly on your site.

      Variables in GTM

  3. Publish (via the “Submit” button in the top-right-hand corner) in the GTM dashboard and check the live site. Changes may take a few minutes to propagate.

  4. To validate a proper installation:Navigate to your site (on the page where you have installed the GTM snippets in Step 2).Open up the developer tools (Right click, then select Inspect Elements).

    1. Navigate to the Network tab and filter for gtm.js.Reload the page.
    2. A successful installation results in a network call with the name:
      1. gtm.js?id=GTM-XXXXXXX (should match the ID from step 2a)

You can also refer to the Google Tag Manager support section here.

Integrating the Rokt Web SDK#

To set up the Rokt Web SDK, you need to create a custom HTML tag in GTM. Once you are in the GTM dashboard, make sure you are in the Workspace section.

  1. From the left navigation, select Tags.

  2. Select New.

  3. Give your tag a unique name (e.g., Rokt Web SDK or Rokt Confirmation Page Tag).

  4. Select Tag Configuration, then choose Custom HTML as the tag type.

  5. Copy and paste the Rokt Web SDK snippet into the empty input field (this should have been provided to you by the account manager at Rokt).

    1. If you already know what data points you want to integrate with Rokt, you can add them now. If not, you can save the tag and add the data points later on.
  6. Select Triggering, which displays another menu with a list of triggers to fire the tag.

    1. If you already have a trigger defined for the page where you want to load Rokt, go ahead and select this trigger.

    2. If you do not have a trigger defined, click the plus sign (+) to add a trigger.

      1. Name the trigger (e.g., confirmation page or signup page).
      2. Select Trigger Configuration.
      3. Select Page View.
      4. Select Some Page Views (do not select All Page Views or the tag will load on all pages).
      5. In the subsequent conditional events, select:[Page URL] > [contains] > type in URL path of the page
      6. Click Save.
    3. Select the trigger you have just created in the Choose a trigger overlay.

      Variables in GTM

    Rokt Tracking ID overview#

    Attribution via Rokt Tracking ID works in three main steps detailed below.

    1. Rokt assigns a referral a unique ID (Rokt Tracking ID) which is populated in your traffic URL under a specific UTM parameter.
    2. Your site accepts and stores the Rokt Tracking ID as a first-party cookie.
    3. When a customer completes a conversion event, your site returns the Rokt Tracking ID to Rokt using the Rokt Web SDK.

The first step is done automatically by the Rokt platform, but you need to set up steps 2 and 3 in GTM.

Storing Rokt ID as first-party cookie#

First, you need to create a variable to accept the Rokt Tracking ID value received in the URL.

  1. In the GTM Workspace dashboard, click Variables.
  2. Under User-Defined Variables, select New.
    1. Replace “Untitled Variable” with a unique name (e.g., query_utm_roktid).
  3. Select Variable Configuration.
  4. Select URL (you are looking for the Rokt Tracking ID in the URL of the traffic link).
  5. For Component Type, select Query.
  6. In the Query Key field, input the UTM parameter that you are setting to ingest the Rokt Tracking ID (e.g., rokTrackingtid).

Variables in GTM

  1. Click Save.

Second, you need to create a cookie that will take on the value of the variable created in the steps above. You also need to set an expiration date for the cookie. In the example below, the code sets an expiration date of 30 days after the cookie has been created.

  1. In the GTM Workspace dashboard, click Tags.

  2. Select New.

  3. Replace “Untitled Tag” with a unique name (e.g., set_RoktID_Cookie).

  4. Select Tag Configuration, then select Custom HTML.

  5. Copy and paste the following snippet into the input field.

    1. Replace the {{query_utm_roktid}} value below with the appropriate value if a different variable name was used.
    <script>      var cookieName="roktid";               //pull in the value from a variable or constant here                var cookieValue="{{query_utm_roktid}}";      var cookiePath  = "/";            //time the cookie should expire in seconds      var expirationTime = 2592000;              //Convert expirationtime to milliseconds      expirationTime = expirationTime * 1000;                              var date = new Date();       var dateTimeNow = date.getTime();                             date.setTime(dateTimeNow + expirationTime);                   var expirationTime = date.toUTCString();                      document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path="+cookiePath;  </script>
  1. Select Triggering, which will display a list of triggers to fire the tag.

    Note: You want this tag to trigger on the landing page while the URL still contains the Rokt Tracking ID in the URL.

    1. If you already have a trigger defined for the page where you want to load the tag, go ahead and select this trigger.

    2. If you do not have a trigger defined, click on the plus sign (+).

      1. In the subsequent view, create a name for this trigger (e.g., whenRoktIDPresent).

      2. Select Trigger Configuration.

      3. Select Page View.

      4. Select Some Page Views (do not select All Page Views or the tag will load on all pages).

      5. In the subsequent conditional events, select:

        1. [Page URL] > [contains] > roktid (or whatever query key you chose).

          Variables in GTM

      6. Click Save.

Finally, you need to pass the Rokt ID back in the Rokt Web SDK. You can accomplish this by using the first-party cookie created in the previous step.

  1. In the GTM Workspace dashboard, select Variables.

  2. Under User-Defined Variables, select New.

    1. Replace “Untitled Variable” with a unique name (e.g., roktid_fpcookie).
  3. Select Variable Configuration.

  4. Select 1st Party Cookie.

    1. In the field Cookie Name, enter the name of the cookie you created earlier.
    2. Leave URI-decode cookie unchecked.

    Variables in GTM

  5. Click Save.

  6. Navigate back to the Rokt Web SDK integration you set up in the very first step. Click the name, and you should see the same view you saw prior with the HTML input field, now populated with the Rokt Web SDK.

  7. Scroll until you see the passbackconversiontrackingid field.

  8. Between the single quotes, type in two curly brackets {{.

    1. This should open up a dropdown which shows you all the variables you have available for use.
    2. Select the 1st party cookie variable you created (e.g., roktid_fpcookie).
      • GTM should autofill the variable and close the double curly brackets.
Was this article helpful?