Skip to main content

Getting started

Where can I find my Rokt Account ID?​

Your Rokt Account ID uniquely identifies your Rokt account when setting up API and SDK integrations, including the Event API and the Web SDK.

To find your Rokt Account ID:

  1. Log in to my.rokt.com.
  2. Look at the URL for your account. Your Account ID is the number immediately following my.rokt.com/accounts/.
    • For example given the URL: https://my.rokt.com/accounts/106/campaigns?startDate=2021-08-17T00:00:00.000&endDate=2021-08-24T13:34:28.463&timezone=89&currency=AUD, the Account ID is 106.

Your integration​

Please select your use case to view the instructions for integration.

note

The below instructions will require development resources to complete. If you require additional assistance, please reach out to your Rokt account manager.

Launch a placement (Rokt Ecommerce)Attribute conversions (Rokt Ads)

Adding a Rokt placement to your site is the first step for Rokt Ecommerce partners. Placements are flexible iframes that are used to display any type of Rokt campaign.

To set up a placement on your website, you can use the Web SDK (instructions below). Rokt also offers a range of mobile SDKs to set up placements on native Android, iOS, React Native, and Flutter applications.

Shopify stores can set up a Rokt placement in seconds using the Rokt Ecommerce app — no coding needed!

Single page applications

This guide is meant for websites built as multipage applications. If your site is a single page application, you should follow these instructions.

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 data attributes. Read more about why Rokt asks for personal identifiers and data attributes.

Sample integration code​

The first step to integrate with Rokt is to load Web SDK into your site. For the best performance, we encourage you to load Rokt script using the below structure.

Google Tag Manager

If you are using Google Tag Manager, please make sure the document.write field is checked and see the recommended implementation steps.

caution

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

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags -->

  <!-- Part #1 - Load the Web SDK -->
  <script type="module">
      window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
          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";

          script.addEventListener('load', () => resolve());
          script.addEventListener('error', (error) => reject(error));

          target.appendChild(script);
      });
  </script>

  <!-- Other scripts and meta tags -->
</head>
<body>
  <!-- Your HTML content here -->

  <!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
  <script type="module">
      await window.RoktLauncherScriptPromise;

      const launcher = await window.Rokt.createLauncher({
          accountId: "rokt-account-id",
          sandbox: true,
      });

      await launcher.selectPlacements({
          attributes: {
              email: "",
              firstname: "",
              lastname: "",
              confirmationref: "",
              billingzipcode: "",
              amount: "",
              paymenttype: "",
              ccbin: "",
              mobile: "",
              country: "",
              language: "",
              currency: "",
              billingaddress1: "",
              billingaddress2: "",
              age: "",
              gender: "",
              cartItems: JSON.stringify(cartItems),
          },
      });
  </script>

  <!-- Your HTML content here -->
</body>
</html>

For the best performance, integrate the Web SDK early (e.g. in <head></head>) and then activate the selectPlacements call as soon as data attributes are available to be integrated.

In the example above, sandbox: true is used to test the integration in a sandbox environment. When you are ready to go live, set sandbox: false or remove it altogether.

When you add the Web SDK to your page, please be sure to integrate data attributes, so you can serve customers the most relevant message available to them. This is typically a combination of both customer and transactional data. Your account manager can guide you through the optimal attributes to integrate depending on the vertical your business operates in.

note

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

2. 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.

3. Test your integration​

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

Read our guide on testing your integration.

Preparative iframe

If load speed issues exist, you may use a preparative iframe to solve this. You can read more about the benefits of the preparative iframe here.

More information​

Native mobile app integrations

Add a Rokt placement to your iOS, Android, React Native, or Flutter mobile applications.

Integration monitor for anomaly detection​

Rokt’s solutions humanize the customer experience through relevance and play an essential role in the customer journey. As Rokt becomes more critical in your customer journey, so does the importance of your integrations with Rokt. Although Rokt takes excellent care to ensure the quality of integrations, they are not immune to anomalies. Potential sources of anomalies include:

  • Integration errors or introduced bugs,
  • Unsupported browsers,
  • Site changes,
  • CDN outages,
  • Custom plugins, and
  • Network failures.

These anomalies can harm the customer experience by not showing critical components powered by Rokt or result in erroneous reporting, resulting in lost ancillary revenue, lowered conversion rates, and lower LTV.

Advertisers use the Integration Monitor to ensure they integrate all conversion data to Rokt. For example, if you are meeting your CPA targets with Rokt and discover that you are not integrating all conversion data correctly, this represents an opportunity to reduce your CPA and unlock additional growth.

Partners use the Integration Monitor to ensure Rokt's SDK has maximum coverage across all transactions. For example, uncovering 1M additional transactions Rokt's SDK was previously not enabled on represents an incremental $200,000 revenue, at $0.20 per transaction.

Integrating a secondary source of event data will allow you to make sure that your integrations work as expected and quickly identify when and why an unexpected discrepancy occurs.

To read more about the the Integration Monitor, see here

Was this article helpful?