AdsWebSDK

Web SDKDirect link to 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 SDKDirect link to Add the Rokt Web SDK

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 Integrations.
5. Click Set up the Snippet.
6. Select Record conversions.
7. Choose a customer identifier so that Rokt can correctly match campaign events to conversions. We recommend using raw or hashed (SHA-256) customer email address as an identifier.
  
  note
  As an alternative to hashed or raw email, you can use the Rokt Tracking ID (passbackconversiontrackingid) as an identifier. This method takes more work from your development team, but doesn’t require any personally identifiable information.
8. 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.
  
  Your integration code will look something like this:

<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: "roktAccountId",
  });

  await launcher.selectPlacements({
    attributes: {
      //customer identifier - at least one required
      email: "john.smith@gmail.com",
      emailsha256: "",
      passbackconversiontrackingid: "",

      //recommended data attributes
      firstname: "",
      lastname: "",
      conversiontype: "",
      amount: "",
      currency: "",
      quantity: "",
      paymenttype: "",
      margin: "",
      confirmationref: "",
    },
  });
</script>

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

caution

If you are copying the above example, ensure roktAccountId is replaced with your account's unique ID before continuing to the next step. You can get your roktAccountId from your account manager or from my.rokt.com.

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 HTML on the page, between the <head></head> tags.
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.
Populate your data attributes. Ensure that at least your customer identifier (email or Rokt Tracking 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.
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.