Web SDK Integration (Legacy)

This guide covers how to integrate the Rokt Web SDK (version 2.5926.0 or earlier) on your confirmation page to enable Shoppable Ads. The SDK is lightweight (under 30KB) and distributed globally via a CDN. For the full SDK reference, including all available attributes and configuration options, see the ecommerce SDK integration guide.

IMPORTANT: These instructions require development resources. If you're already using the Rokt Web SDK on your confirmation page, some steps may already be complete. Contact your Rokt account manager for your Rokt Tag ID.

Check Your SDK Version

This guide applies to the legacy Rokt Web SDK (version 2.5926.0 or earlier), which uses the launcher.js initialization pattern and authenticates with a Rokt Account ID. If you have migrated to the new Joint Rokt Web SDK (which uses the mParticle-based initialization pattern and authenticates with a JS Web API Key), see the Web SDK Integration (Joint SDK) guide instead. For migration instructions, see the Web SDK Migration Guide.

Prerequisites

• A Rokt account with an active Rokt Tag ID (provided by your Rokt account manager).
• Access to modify your confirmation/thank-you page HTML and JavaScript.
• Familiarity with the Rokt Web SDK documentation.

Payment methods

In addition to the below instructions, you will also need to integrate with at least one Payment Method to allow your customers to complete a purchase.

Step 1: Add the initialization script

Include the following snippet on your confirmation page. This loads the Rokt Web SDK launcher and the Thank You page element, initializes the Thank You Page Journey, and selects placements with the relevant customer attributes. For a full walkthrough, see integrating the Web SDK.

<script type="module">
  // Include Rokt Template elements JavaScript file
  const roktElements = document.createElement("script");
  roktElements.src = "https://apps.rokt.com/rokt-elements/rokt-element-thank-you.js";
  roktElements.fetchpriority = "high";
  roktElements.crossOrigin = "anonymous";
  roktElements.async = true;
  document.head.appendChild(roktElements);

  const script = document.createElement("script");
  script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js?extensions=instant-purchase";
  script.fetchpriority = "high";
  script.crossOrigin = "anonymous";
  script.async = true;
  script.id = "rokt-launcher";
  document.head.appendChild(script);

  await new Promise((resolve) =>
    window.Rokt ? resolve() : script.addEventListener("load", () => resolve())
  );
  const launcher = await window.Rokt.createLauncher({
    accountId: "<ROKT_ACCOUNT_ID>",
  });

  // Activate the Thank You page support
  await launcher.use("ThankYouPageJourney");
  const selection = await launcher.selectPlacements({
    identifier: "buy.success",
    attributes: {
      email: "j.smith@example.com",
      firstname: "Jane",
      lastname: "Smith",
      last4digits: "4242",
      paymenttype: "visa",
      partnerpaymentreference: "ORD-8829-XK2",
      shippingaddress1: "123 Main St",
      shippingaddress2: "Apt 4B",
      shippingcity: "Brooklyn",
      shippingstate: "NY",
      shippingzipcode: "11201",
      shippingcountry: "US",
      amount: "52.25",
      currency: "USD",
      confirmationref: "TXN-20250217-001",
      billingzipcode: "11201",
      mobile: "3125551515",
      country: "US",
      language: "en",
      // ... other attributes
    },
  });
</script>

NOTE: For the full list of supported attributes, see the Web SDK integration guide. The identifier value will be provided by your Rokt account manager. The partnerpaymentreference must be a non-guessable identifier used to look up the customer's payment method for forwarding. If missing or blank, Rokt will assume credit card details cannot be forwarded and the Shoppable Ads placement will not render an offer.

Step 2: Add the Thank You container

Wrap your confirmation page content with the <rokt-thank-you> element. This enables the Rokt SDK to inject a full-screen overlay placement (the "Thank You Placement") before the native confirmation content becomes visible. If no eligible offer from the Rokt Catalog is available, the container behaves normally and your confirmation content is shown as usual.

<body>
  Your Header ...
  <rokt-thank-you id="rokt-thank-you">
    Your Confirmation Content ...
  </rokt-thank-you>
  Your Footer ...
</body>

Recommended attributes

The following attributes are required or recommended for Shoppable Ads to function correctly. For the full attribute reference, see the Web SDK docs.

Attribute	Example Value	Description
email	j.smith@example.com	Customer's email address. Must be raw (unhashed) to allow the brand to send order confirmation.
firstname	Jane	Customer's first name. Used for order fulfillment.
lastname	Smith	Customer's last name. Used for order fulfillment.
partnerpaymentreference	ORD-8829-XK2	Non-guessable identifier used to look up the customer's vaulted payment method. If missing, card forwarding will not be available.
last4digits	4242	Last 4 digits of the card used for the primary transaction. Displayed to the customer for confirmation.
paymenttype	visa	Payment method used for the primary transaction (e.g., visa, mastercard, amex, paypal). Used to determine which payment options to display.
shippingaddress1	123 Main St	Customer's shipping/delivery address line 1.
shippingaddress2	Apt 4B	Customer's shipping/delivery address line 2.
shippingcity	Brooklyn	Customer's shipping/delivery city.
shippingstate	NY	Customer's shipping/delivery state.
shippingzipcode	11201	Customer's shipping/delivery zip code.
shippingcountry	US	Customer's shipping/delivery country code.
amount	52.25	Transaction amount.
currency	USD	Transaction currency code.
confirmationref	TXN-20250217-001	Order confirmation reference.
billingzipcode	11201	Customer's billing zip code.
mobile	3125551515	Customer's mobile phone number.
country	US	Customer's country code.
language	en	Language associated with the purchase.

NOTE: If your platform does not have shipping address details available (e.g., ticket or digital goods purchases), ensure that billing address details are passed instead. Rokt will provide a UI for the customer to confirm or edit their address before completing the purchase.

Additional options

The Rokt Web SDK supports additional configuration such as cookie consent controls, SPA lifecycle management, and event subscriptions. For details, see the full SDK documentation.