Custom Web SDK Integration for Rokt Thanks

Installing the SDK (a JavaScript snippet) is typically straightforward and requires minimal technical expertise. If needed, our trained technical support team is available to assist you throughout the process.

Initial Questions

Can you (or someone on your engineering team) add a code snippet to the confirmation page?
- The confirmation page, also known as the thank-you page, appears after checkout.
What user data or properties are available on the confirmation page?
We need access to specific properties related to purchased items and customer information. The more data we can access, the more relevant the offers will be.
- Is there an easy way to access this data using JavaScript?
If you require technical assistance, do you have a staging or testing environment that an AfterSell engineer can access?

Implementation Steps

Review and answer the questions above. Confirm which properties you can access.
If you’d like to move forward, you’ll need an accountId, which an AfterSell engineer will provide.
- To create an account, we’ll need the following information from you:

{
	firstName: "",
	lastName: "",
	primaryEmail: "",
	websiteUrl: "",
	countryCode: "",
	brand: ""
}

3. Decide whether you'd like to install the integration yourself or work directly with an AfterSell engineer (a testing environment may be required for engineer-assisted setup).

4. If you choose to install it yourself, you can follow Rokt’s documentation or use the summarized steps below. Not all steps in the Rokt setup are relevant, but the guide is provided as a reference.

a. Copy the starter integration script.

b. Add the script between the HTML <head></head> tags of any page where you want to display a Network Offer.

i. Populate customer and transactional data properties.

ii. Replace "rokt-account-id" with your provided accountId.

c. Test your implementation using Rokt’s guide on testing your integration.

5. Work with our team to customize the placement so it matches your brand's look and feel.

Properties (Bolded and Italicized properties are highly recommended)

const cartItems = [
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        },
        {
        ...
        }
]

Customer/order properties

{
        attributes: {
        
	        // Required
	        amount: '', //In $
	        firstname: '',
	        lastname: '',
	        billingzipcode: '',
	        Country: '',
	        Language: '',
	        currency: '',
	        cartItems: JSON.stringify(cartItems), //From above
	        email: '',
	
	        //Order Data
	        clientcustomerid: '',
	        cartId: '',
	        subtotal: '',
	        totalTax: '',
	        totalShipping: '',
	        margin: '',
	        paymenttype: '',
	        ccbin: '',
	
	        //Customer Data
	        customerType: '',
	        hasAccount: '',
	        isReturning: '',
	        lastVisited: '',
	        isLoyalty: '',
	        loyaltyTier: '',
	        mobile: '',
	        title: '',
	        age: '',
	        gender: '',
	        dob: '',
	        billingAddress1: '',
	        billingAddress2: '',
	        billingCity: '',
	        billingState: '',
	        billingCountry: '',
	        shippingAddress1: '',
	        shippingAddress2: '',
	        shippingCity: '',
	        shippingState: '',
	        shippingZipcode: '',
	        shippingCountry: '',

        },

Starter Script

<!-- 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: true,
    });
    
    const cartItems = [
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        },
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        }
    ]; 

    const selection = await launcher.selectPlacements({
        identifier: 'order_confirmation_page_identifier',
        attributes: {
        
        // Required
        amount: '',
        firstname: '',
        lastname: '',
        billingzipcode: '',
        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: '',
        age: '',
        gender: '',
        dob: '',
        billingAddress1: '',
        billingAddress2: '',
        billingCity: '',
        billingState: '',
        billingCountry: '',
        shippingAddress1: '',
        shippingAddress2: '',
        shippingCity: '',
        shippingState: '',
        shippingZipcode: '',
        shippingCountry: '',

        },
    });

</script>