Rokt Documentation
  • Documentation
  • User Guide
  • SDK
  • API
  • Third-Party Integrations
  • Help

›Web SDK

Getting Started

  • Introduction

Web SDK

  • Overview
  • Architecture
  • Integrating the Web SDK
  • Integration Examples

    • Confirmation page integration
    • Preparative iframe
    • Page identifier
    • Single page applications
    • Brand conversion integration
    • In-transaction/cart integration
    • Event-based integration
    • Sandbox integration
  • Integration best practices
  • Attributes
  • Security
  • Mobile in-app web pages
  • API

    • Rokt
    • Attributes
    • CartItem
    • Configuration
    • Placement
    • Subscriber
    • TriggerPageChangeOptions
    • Unsubscriber

iOS SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an overlay placement
    • Launching an embedded placement
    • Recording a brand conversion
    • Sandbox integration
  • Attributes
  • Security

Android SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and initializing the SDK
    • Launching an overlay placement
    • Launching an embedded placement
    • Recording a brand conversion
    • Sandbox integration
  • Attributes
  • Security

React Native SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and initializing the SDK
    • Launching an overlay placement
    • Launching an embedded placement
    • Recording a brand conversion
    • Sandbox integration
  • Attributes
  • Security
Edit

Integrating the Web SDK

Before you begin

Make sure you retrieve your Account ID from the Rokt platform. If you don't yet have a Rokt account, reach out to your account manager.

To find your Account ID:

  1. Log in to Rokt.
  2. From the left navigation, click Tag.
  3. You will see a snippet on the right hand side of the page that includes your Account ID in the correct place.

You can also contact your account manager if you need assistance.

Each account has a unique Account ID. If you are using multiple accounts, including parent or child accounts, make sure you are using the right the Account IDs for each of your properties.

Understanding the Rokt Web SDK object

The Rokt object provides the entry point to integrate with Rokt solutions. It is available as a global variable under a name specified in your snippet script. Your snippet script should resemble the following:

(function(r,o,k,t,n,e,w,a,_){r._ROKT_=n;r[n]=r[n]||{id:t,h:w,lc:[],it:new Date(),onLoaded:function(c){r[n].lc.push(c)}};a=o.createElement('script');a.type='text/javascript';a.async=!0;a.src=k;if(e){a.integrity=e;a.crossOrigin='anonymous'}_=o.getElementsByTagName('script')[0];_.parentNode.insertBefore(a,_)})(window,document,'https://apps.rokt.com/wsdk/integrations/snippet.js','roktTagid', 'rokt');

Please notice the following important parameters in the arguments list above:

  • https://apps.rokt.com/wsdk/integrations/snippet.js—is the URL pointing to the latest version of the Rokt object.
  • roktTagID—your unique Rokt Tag ID and should be replaced with the correct value.
  • rokt—the name under which this object will be exposed on your window object. In this case it will be accessible using window.rokt or simply rokt.

So as to not interfere with the loading of your page, the Rokt object loads asynchronously. This means that at the time of running the initialization snippet, the full functionality of the Rokt object is not available. Only the Rokt.onLoaded function is immediately available, while the rest of the functionality is added when the Rokt object has been fetched and completely loaded. In order to be informed when you can start integrating fully, you can pass a callback function to Rokt.onLoaded.

rokt.onLoaded(function(rokt) {
  // All functionalities described in this document are already available at this point of time.
  rokt.setAttributes({
    email: '',
  });
});

Learn more about the Rokt object and available methods.

Learn more about setting attributes.

Placing the snippet

To place the snippet:

  1. Replace roktTagid in the Rokt object script with your Account ID. If you need help locating your Account ID, reach out to your account manager.

  2. Add additional functions depending on your integration requirements. You can find links to examples of common integration scenarios at the end of this article.

  3. Add the script to any relevant pages, either where you want a placement to display or a conversion event to trigger.

Follow our integration best practices to optimize page load times and performance outcomes.

Testing your integration

The Rokt team will be on hand to verify that your integration works as expected.

Example integrations

  • Confirmation page integration
  • Preparative iframe
  • Page identifier
  • Integrating with single page applications
  • Brand conversion integration
  • In-transaction/cart integration
  • Event-based integration
  • Sandbox integration
← ArchitectureConfirmation page integration →
  • Before you begin
  • Understanding the Rokt Web SDK object
  • Placing the snippet
  • Testing your integration
  • Example integrations
RESOURCES
DocumentationUser GuideSDKAPIIntegration PartnersHelp
COMPANY
About UsContact UsCareersEngineering Blog
Rokt Documentation
Copyright © Rokt 2021 - All Rights Reserved