Edit

Brand conversion integration

For advertisers, the Web SDK closes the loop for conversion tracking, enabling Rokt to optimize campaigns towards the customers most likely to convert on your site. The Web SDK should be placed on the page where a conversion is recognized (e.g., your order confirmation page), either directly or through a tag manager.

To unlock this capability:

  • Replace roktTagid in the example script below with the unique tag ID for your account in the Rokt platform. If you need assistance, reach out to your account manager.
  • Place the script on the conversion page that your campaign is driving customers towards. For best results, place the script in the header of your page (i.e., within the <head></head> tag).
  • Populate the script with attributes unique to the conversion event, such as email and amount. For example, in the example script below, john.smith@gmail.com should be replaced with the actual email of a customer who landed on the page. See attributes for more details on what data Rokt can accept.

Once placed, the Web SDK fires whenever a customer lands on this page. Rokt can then begin attributing conversions and optimizing your campaign. Note that Rokt only attributes conversions for customers that we can identify as Rokt-generated referrals.

Example Web SDK script

(function(r,o,k,t,n,e,w,a,_){r._ROKT_=n;r[n]=r[n]||{id:t,h:w,lc:[],it:new Date(),onLoaded:function(c){r[n].lc.push(c)}};a=o.createElement('script');a.type='text/javascript';a.async=!0;a.src=k;if(e){a.integrity=e;a.crossOrigin='anonymous'}_=o.getElementsByTagName('script')[0];_.parentNode.insertBefore(a,_)})(window,document,'https://apps.rokt.com/wsdk/integrations/snippet.js','roktTagid', 'rokt');

rokt.onLoaded(function(rokt) {

  rokt.setAttributes({
    //at least one required
    email: 'john.smith@gmail.com',
    emailsha256: '',
    mobile:'',
    rokttrackingid:'',
    
    //recommended
    firstname:'',
    lastname:'',
    conversiontype: '',
    amount: '',
    currency: '',
    quantity: '',
    paymenttype: '',
    ccbin: '',
    margin: '',
    confirmationref: ''
 });

Using a tag manager

If you prefer, you can integrate the Web SDK through a tag manager such as Google Tag Manager. You can read more about setting up Google Tag Manager here.

Testing the integration

We recommend testing the Web SDK integration to ensure it's loading correctly and sharing data attributes as expected.

  1. Visit the site where the Web SDK has been placed.

  2. Before reaching the page where the Web SDK has been placed, open your browser developer tools panel. For most browsers, you can do this by right-clicking on your screen and clicking Inspect.

  3. From the developer tools panel, go to the Network tab type placements into the filter bar.

  4. In the filtered results, you should see the /placements request. This indicates that the Web SDK loaded successfully.

  5. Click the /placements request and scroll down to the Request Payload section to check the data the Web SDK has sent to Rokt.

Event Import via Web SDK

Troubleshooting the Web SDK integration

These are the most common issues you might run into when implementing the Web SDK.

Syntax errors

Check to make all attributes are separated by commas. A missing comma could cause an error.

Incorrect:

email: ''
emailsha256: '',

Correct:

email: '',
emailsha256: '',

Placement errors

  1. It’s always helpful to make sure the script has been placed on the correct page.
  2. If you’re using a tag manager, make sure the triggers are set up correctly so the script loads on the right page.

If you run into any other issues, reach out to your account manager.

← Single page applicationsIn-transaction/cart integration →