Skip to main content

Adding Rokt to your site

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 Rokt Web SDK (instructions below). Rokt also offers a range of mobile SDKs to set up placements on native Android, iOS, and React Native 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 the instructions here.

1. Get your unique Rokt snippet#

Your account manager may provide your snippet, or you can find it in One Platform.

Your snippet includes a customer identifier (we recommend raw email customer address) and contextual data. You can read more about why Rokt asks for personal identifiers and contextual attributes here.

Sample snippet#

caution

If you are copying the below example, ensure roktAccountid is replaced with your account's unique ID. You can get your roktAccountid from your account manager or in One Platform.

(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','roktAccountid', 'rokt');
rokt.onLoaded(function (rokt) {  rokt.setAttributes({    // Required    email: "",
    // Suggested - Transaction    amount: "",    currency: "",    quantity: "",    paymenttype: "",    ccbin: "",    margin: "",    confirmationref: "",
    // Suggested - Customer    firstname: "",    lastname: "",    mobile: "",    title: "",    gender: "",    dob: "",    age: "",    language: "",
    // Suggested - Address    zipcode: "",    city: "",    state: "",    country: "",  });});

2. Enable the preparative iframe#

Choose a page that occurs earlier in the customer journey, ideally where a customer might spend a little more time. A shipping or payment details page works well.

Add this code snippet anywhere in the page HTML:

<iframe  aria-hidden="true"  src="https://apps.rokt.com/wsdk/preload/index.html"  sandbox="allow-scripts allow-same-origin"  style="border: 0px; width: 100%; display: none;"></iframe>

This snippet will load and cache Rokt assets earlier in the customer journey. Then when you are ready to show a Rokt placement, Rokt assets will be ready to go, resulting in a faster load time. Rokt’s preparative iframe is secure, and has no access to your page or site data.

You can read more about the benefits of the preparative iframe here.

3. Add the Rokt snippet to your site#

Add the Rokt snippet from Step 1 between the HTML <head></head> tags of any page where you want to display a Rokt placement.

When you add the snippet to your page, make sure to populate the customer and transactional data. Make sure you configure customer email address so that Rokt can identify customers and choose a relevant offer.

Populate any contextual attributes about the transaction to help Rokt better personalize what offers the customer sees.

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

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

5. Test your integration#

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

Read our guide on testing your integration.

More information#

Native mobile app integrations

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

Was this article helpful?