Skip to main content

Direct integration

Web SDK​

The Rokt Web SDK is a JavaScript library that lets you automatically report conversions from the frontend of your website.

Add the Rokt Web SDK​

Before you begin, please ensure you have your Rokt Account ID. To find yours, see the instructions here.

  1. Get your unique integration code from your Rokt account manager, or generate it yourself in my.rokt.com.

    1. Log-on to my.rokt.com.

    2. Click your account.

    3. Click Integrations.

    4. Click Set up the Snippet.

    5. Select Record conversions.

    6. Choose a customer identifier so that Rokt can correctly match campaign events to conversions. We support the following:

      Attribute nameAttribute description
      emailRaw email
      emailsha256Hashed (SHA-256) email
      passbackconversiontrackingidRokt ID

      We recommend using raw or hashed (SHA-256) customer email address as an identifier. As an alternative to hashed or raw email, you can use the Rokt ID as an identifier. This method takes more work from your development team, but doesn’t require any personally identifiable information.

    7. Add relevant data attributes. Contextual data helps Rokt learn more about what campaigns and audiences are most effective for your business. We use these learnings to optimize for acquisition and help your campaigns perform better in the future. Some attributes we recommend are:

    • firstname
    • lastname
    • conversiontype
    • amount
    • currency
    • quantity
    • paymenttype
    • margin
    • confirmationref

Integration example​

caution

The snippet below is an example integration. Your integration code will differ based on the customer identifier and additional attributes you've decided to integrate.

The following is an example of an integration where a user has selected:

  • Raw email as their customer identifier.
  • First name, last name, amount, currency, and payment type as their data attributes.
<!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: {
           //customer identifier - at least one required
           email: "john.smith@gmail.com",
           emailsha256: "",
           passbackconversiontrackingid: "",
           firstname: "",
           lastname: "",
           conversiontype: "",
           billingzipcode: "",
           amount: "",
           mobile: "",
           currency: "",
           quantity: "",
           paymenttype: "",
           margin: "",
           confirmationref: "",
        },
     });
  </script>

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

The explanation of the various parts of the code example can be found in Web SDK Library documentation.

  1. Add the integration code to your confirmation page.

    1. You should place the integration code on any page that immediately follows a conversion event, typically a confirmation or thank you page. Paste the integration code directly into the page, following the suggested structure.

    2. Ensure that the integration records all conversions on your site. Rokt can then handle the attribution process to determine what conversions resulted from a Rokt campaign event.

      Tag managers

      You can add the Rokt integration code to your site using a tag manager, but it may result in reduced performance due to some conversion events being dropped. For best results, we recommend the direct integration described on this page.

  2. Populate your data attributes. Ensure that at least your customer identifier (email or Rokt ID) is populated with the correct data. Also configure any data attributes.

    1. If you want to use hashed email address as an identifier, you can use Rokt’s pre-built hashing function. You can find additional information on the Two Step Data Integration page.

  3. Test that the integration is engaging and contains the correct data. View testing instructions.

For optimal performance, consider integrating both the Event API and Web SDK. Using both methods creates redundancy and helps identify any anomalies that may occur in the browser or on your server.

Was this article helpful?