Last updated Oct 24, 2023

DirectOnPage

Add the Rokt Web SDK directly onto your page

Add the Rokt Web SDK in the <head> section of your payment or checkout page. You can find the complete guide for adding the Rokt Web SDK to your site here.
Integrate the required data elements for Rokt to load the placement and relevant ads. Include all relevant attributes required to personalize offers and provide accurate reporting and analytics. Additional details here.

<!-- Main Tag -->
<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:'rokt_account_id_here',
        sandbox: location.href.indexOf("staging_domain_here") > 0,
    });
    
    const cartItems = [
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        },
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        }
    ]; 

    const selection = await launcher.selectPlacements({
        identifier: "payment_page",
        attributes: {
        
        // Required
        amount: '',
        Country: '',
        Language: '',
        currency: '',
        cartItems: JSON.stringify(cartItems),
        email: '',

        //Order Data
        clientcustomerid: '',
        cartId: '',
        subtotal: '',
        totalTax: '',
        totalShipping: '',
        margin: '',
        paymenttype: '',
        ccbin: '',

        //Customer Data
        customerType: '',
        hasAccount: '',
        isReturning: '',
        lastVisited: '',
        isLoyalty: '',
        loyaltyTier: '',
        mobile: '',
        title: '',
        firstname: '',
        lastname: '',
        age: '',
        gender: '',
        dob: '',
        billingAddress1: '',
        billingAddress2: '',
        billingCity: '',
        billingState: '',
        billingZipcode: '',
        billingCountry: '',
        shippingAddress1: '',
        shippingAddress2: '',
        shippingCity: '',
        shippingState: '',
        shippingZipcode: '',
        shippingCountry: '',

        },
    });

</script>

More information on adding event listeners for event based integration can be found here.

Add the Rokt Web SDK directly onto your page​

Add the Rokt Web SDK directly onto your page