Skip to main content

Web SDK best practice

Website speed is vitally important to your business and our technology is focused on improving your customer's experiences across your site. As such, page performance is a core tenant in our solutions. To successfully increase engagement and maximize conversion rates, there are a number of approaches we take to keep page load times to a minimum.

Third-party integrations and performance

It is important to understand the placement and load priority for all the tools and services you use on your page. Any third-party integration that is added to a web page will impact overall load time.

The Rokt integration is specifically designed to improve your customer experience and drive additional value from your page. Other commonly-used third-party integrations are more focused around tracking and analytics, and do not have a direct impact on customer experience.

To ensure you drive the most value from your page, it is important to ensure that customer-focused services like Rokt are triggered before tracking and other background services.

Here is the best practice approach for integrating with Rokt:

  • Placing the loading of the integration launcher script within the page <head> before other third-party integrations.
  • Triggering the Rokt placement as soon as the data attributes are available.

Example

<!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: {
email: "",
firstname: "",
lastname: "",
confirmationref: "",
billingzipcode: "",
amount: "",
paymenttype: "",
ccbin: "",
mobile: "",
country: "",
language: "",
currency: "",
billingaddress1: "",
billingaddress2: "",
age: "",
gender: "",
cartItems: JSON.stringify(cartItems),
},
});
</script>

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

For background services like Google Analytics, the best approach is to place these integrations at the bottom of the page and load them asynchronously. This approach is intended to ensure that even if these resources load slowly, they do not affect the customer experience.

Asynchronous vs synchronous

A web page consists of a head and a body. Everything in the body is rendered by the browser and the head is used to load external resources such as scripts and stylesheets. When the page loads in a browser, the browser starts reading the HTML from top to bottom. The head section has a special characteristic that prevents anything from showing until all external resources are fully loaded. This is synchronous loading.

However, you can change this functionality to make certain elements load without waiting for all external resources to load. This is known as asynchronous loading.

The Rokt script loads asynchronously as per the example in adding Rokt to your site. This speeds up the overall loading of a page. Since the browser doesn't wait until Rokt resources are finished loading before displaying the page to the customer, the customer experience is not interrupted and the Rokt placement is shown when ready.

For deeper integrations where Rokt is integral to the transaction flow, such as offering upsells or payment options, clients can switch Rokt to synchronous loading so that the page is only displayed once the Rokt content is fully loaded.

Synchronous loading

Here's what a page might look like when resources are loaded in a synchronous manner:

<html>
<head>
<script src="a.js" />
<script src="b.js" />
<script src="c.js" />
<script src="d.js" />
<script src="e.js" />
</head>
<body>
Your content
</body>
</html>

When all resources are synchronous, the elements load in order:

Web SDK Synchronous Loading

Asynchronous loading

Loading a script asynchronously has the advantage of not slowing the page down, but it can cause the popping up of content on a page or flickering where the original page content loads.

Here's what a page might look like when a script is loaded asynchronously:

<html>
<head>
<script src="a.js" />
<script async src="rokt.js" />
<script src="c.js" />
<script src="d.js" />
<script src="e.js" />
</head>
<body>
Your content
</body>
</html>

When a script is asynchronous, it loads simultaneously with other scripts:

Web SDK Asynchronous Loading

In this case, Rokt does not prevent other resources from being loaded, as the Rokt script and the other page resources can load at the same time. This speeds up the overall loading of a page. Since the browser won't wait until Rokt resources are finished loading before displaying the page to the customer, the experience is not interrupted, and the Rokt placement will be shown when it's ready.

Loading Rokt through a tag manager

note

We recommend that you launch the Rokt SDK by placing it directly in the HTML of your page to provide your customers the best experience.

If you decide that you would like to load Rokt through a tag manager, we support integrations using Google Tag Manager, Tealium, Segment, and the Adobe Experience Platform.

Loading Rokt through experimentation engines

We recommend using the experimentation tools Rokt provides to ensure your customers are getting the best experience possible. For more information on Rokt's experimentation tools, contact your account manager.

Use the preparative iframe

To optimize both Rokt's time to interactive and your page performance we recommend our preparative iframe solution: a secure, easy to implement, and flexible iframe placed on an earlier step in your transaction flow. The preparative iframe preloads the Web SDK by downloading and caching Rokt resources so they are easy to retrieve when it’s time to show the placement. By downloading the SDK in sections, we reduce the required network bandwidth on pages critical to your customer’s experience. Preloading results in an improved experience for customers and better performance outcomes for you.

For more information, see the preparative iframe integration example.

note

For best performance, ensure that you update to the latest version of the Rokt Integration Launcher before implementing the preparative iframe.

Use the latest version of the Rokt Integration Launcher

We continuously work to improve the performance of the Web SDK and optimize the experience for customers visiting your site. Therefore, the Rokt Integration Launcher will always be pegged to the latest version to ensure the best experience for your customers. Use the URL that points to the latest version of the Rokt Integration Launcher, which is:

https://apps.rokt.com/wsdk/integrations/launcher.js

note

Updating to the latest version of the Rokt Integration Launcher results in load time improvements for some partners. In previous versions of the Web SDK, two separate domains were used: wsdk.rokt.com for serving static resources, and apps.rokt.com for API communication with Rokt backend systems. These two domains have now been unified into a single domain at apps.rokt.com.

Integrations based upon previous versions of the Web SDK require two domain resolutions (one for wsdk.rokt.com and one for apps.rokt.com). Unifying to a single domain removes one of these resolutions resulting in improved performance.

Use resource hints

Using resource hints is a quick and easy way to improve start times for the Rokt integration. Establishing the connection to third-party scripts can account for a significant portion of load times, in particular when the third-party domain is secure, as is the case with Rokt.

The preload tag informs the browser that a resource is required for that page, and that it should be fetched as soon as possible. Once the request to display a Rokt placement is made later on, Rokt can quickly render offers to provide the optimal experience for your customers.

To implement the preload resource hint, include the following code in the <head> section on all pages that show Rokt placements:

<link
rel="preload"
as="script"
href="https://apps.rokt.com/wsdk/integrations/launcher.js"
/>

Resource hints assist browsers in the decision process of what origins it should connect to, and what resources it should fetch and preprocess to improve page performance.

  1. DNS-prefetch indicates an origin that can be used to fetch required resources and that it should be resolved as early as possible. Get more information on w3.org.
  2. Preconnect indicates an origin that can be used to fetch required resources so browsers can initiate an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation. Get more information on w3.org.
  3. Preload indicates a resource that will be used as part of the current navigation and should be fetched as early as possible. Get more information on w3.org.
note

Make sure the link referenced in preload matches the URL pointing to the Rokt script in the integration code on your page.

Preload the Rokt script (for single page applications)

If your site is a single page application (SPA), we recommend preloading the Rokt script on the view before Rokt appears. This initialization step does not require any customer data, and allows the Rokt script to load in the background of the page.

When your customer reaches the page where Rokt should appear, the Web SDK is already warmed up and ready to go. This approach allows you to simply call a method to get placements to show on the page without waiting to download the entire Web SDK before displaying an offer. See the single page application example for more information on the recommended SPA integration.

Loading Rokt through malware protection or integrity scripts

We don't recommend using programs like JScrambler to load Rokt, as it slows down page speed. Rokt runs in sandboxed iframes to minimize any interactions with the parent page and offers additional security features to increase the trust in the code running on your site. See the Web SDK security documentation to learn more about these features and our approach to security.

Network request phases

Web pages load through a series of phases as the browser requests and receives all the various resources that make up that page (images, CSS files, JavaScript files, etc.). The five basic steps of how a page renders are listed below:

  1. DNS lookup: Finds the requested resource's web address (e.g., apps.rokt.com).
  2. Initial connection: Successfully talking to that resource's address.
  3. Time to first byte (TTFB): Receiving the first piece of information from a resource.
  4. Download/time to Last Byte (TTLB): Receiving the very last piece of information from the resources, thus allowing the resource to render (e.g., image) or execute (e.g., script).
  5. Document complete: A signal that the web page has completed loading all of its resources.

For more information see Google's Developer Tools Documentation.

Was this article helpful?