EcommWebSDK

Integrating via the Rokt Web SDK

1. Load Rokt onto your page

Your account manager can provide your integration code, or you can find it in my.rokt.com.

Your integration code includes a customer identifier (we recommend raw email customer address) and contextual data. Read more about why Rokt asks for personal identifiers and data attributes.

Sample integration code

Loading the integration

The first step to integrate with Rokt is to load Rokt's Integration Launcher into your site. For the [best performance], we encourage you to load Rokt script directly into your HTML head element by adding the following script tag.

caution

If you are copying the below example, ensure roktAccountId is replaced with your account's unique ID. See Where can I find my Rokt ID? for instuructions.

Confirmation Page

<script type="module">
  const target = document.head || document.body;
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
  script.fetchPriority = "high";
  script.crossOrigin = "anonymous";
  script.async = true;
  script.id = "rokt-launcher";
  target.appendChild(script);
  await new Promise((resolve) =>
    window.Rokt
      ? resolve()
      : document
          .getElementById("rokt-launcher")
          .addEventListener("load", () => resolve())
  );

  const launcher = await window.Rokt.createLauncher({
    accountId: "rokt-account-id",
    sandbox: true,
  });
  await launcher.selectPlacements({
    attributes: {
      email: "",
      firstname: "",
      lastname: "",
      mobile: "",
      confirmationref: "",
      amount: "",
      currency: "",
      paymenttype: "",
      ccbin: "",
      address1: "",
      zipcode: "",
      age: "",
      gender: "",
      country: "",
      language: ""
    },
  });
</script>

Payments Page

note

For an in-depth integration guide for Payments Marketplace, please follow these instructions.

<script type="module">
  const target = document.head || document.body;
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
  script.fetchPriority = "high";
  script.crossOrigin = "anonymous";
  script.async = true;
  script.id = "rokt-launcher";
  target.appendChild(script);
  await new Promise((resolve) =>
    window.Rokt
      ? resolve()
      : document
          .getElementById("rokt-launcher")
          .addEventListener("load", () => resolve())
  );

  const launcher = await window.Rokt.createLauncher({
    accountId:'rokt_account_id_here',
    sandbox: location.href.indexOf("staging_domain_here") > 0,
  });

  const cartItems = [
      {
          'itemPrice': '',
          'itemQuantity': '',
          'majorcat': '',
          'majorcatid': '',
          'minorcat': '',
          'minorcatid': '',
          'productname': '',
          'sku': '',
      },
      {
          'itemPrice': '',
          'itemQuantity': '',
          'majorcat': '',
          'majorcatid': '',
          'minorcat': '',
          'minorcatid': '',
          'productname': '',
          'sku': '',
      }
  ];

  const selection = await launcher.selectPlacements({
      identifier: "payment_page",
      attributes: {

      // Required
      amount: '',
      siteCountry: '',
      siteLanguage: '',
      currency: '',

      //Order Data
      clientcustomerid: '',
      cartId: '',
      subtotal: '',
      totalTax: '',
      totalShipping: '',
      margin: '',
      paymenttype: '',
      ccbin: '',
      cartItems: JSON.stringify(cartItems),

      //Customer Data
      customerType: '',
      hasAccount: '',
      isReturning: '',
      lastVisited: '',
      isLoyalty: '',
      loyaltyTier: '',
      email: '',
      mobile: '',
      title: '',
      firstname: '',
      lastname: '',
      age: '',
      gender: '',
      dob: '',
      billingAddress1: '',
      billingAddress2: '',
      billingCity: '',
      billingState: '',
      billingZipcode: '',
      billingCountry: '',
      shippingAddress1: '',
      shippingAddress2: '',
      shippingCity: '',
      shippingState: '',
      shippingZipcode: '',
      shippingCountry: '',

      },
  });

  //Optional event listeners
  selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
      // Logic to run after Placement has become interactive
      console.log(selection.context.pageVariantName);
  });
  selection.on('POSITIVE_ENGAGEMENT').subscribe(() => {
      // Logic to run after Placement has positive engagement
      console.log(selection.context.pageVariantName);
  });
</script>

You should opt in for one of these methods and ensure it executes only once.

2. Enable the preparative iframe

Choose a page that occurs earlier in the customer journey, ideally where a customer might spend a little more time. A shipping or payment details page works well.

Add this code snippet anywhere in the page HTML:

<iframe
  aria-hidden="true"
  src="https://apps.rokt.com/wsdk/preload/index.html"
  sandbox="allow-scripts allow-same-origin"
  style="border: 0px; width: 100%; display: none;"
></iframe>

This snippet will load and cache Rokt assets earlier in the customer journey. Then when you are ready to show a Rokt placement, Rokt assets will be ready to go, resulting in a faster load time. Rokt’s preparative iframe is secure, and has no access to your page or site data.

You can read more about the benefits of the preparative iframe [here].

3. Add the Rokt integration code to your site

Add the Rokt integration code from Step 1 between the HTML <head></head> tags of any page where you want to display a Rokt placement.

When you add the integration code to your page, make sure to populate customer and transactional data. Make sure you configure customer email address so that Rokt can identify customers and choose a relevant offer.

Populate any [data attributes] about the transaction to help Rokt better personalize what offers the customer sees.

note

Rokt recommends a direct integration as a [best practice], but the option to [integrate with a tag manager] is available.

4. Set up pages and placements

The Rokt team will set up relevant pages and placements for you in One Platform. We can [customize your placement] to match your brand guidelines and UX needs.

Embedded placements

If you are planning to add an embedded placement to your site, you need to specify the HTML element that the placement should be anchored to. For example: <div id="rokt-placeholder"></div>. Let the Rokt team know what element the placement should target.

5. Test your integration

Ensure that the Rokt Web SDK is loading on the right page and includes the correct attributes.

Read our guide on [testing your integration].