Aangepaste Web SDK-integratie voor Rokt Thanks

Overzicht Als je winkel een aangepaste checkout-flow gebruikt, kun je nog steeds gebruikmaken van Rokt Thanks-aanbiedingen door de Rokt Web SDK (een kleine JavaScript-snippet) te installeren. Het installeren van de SDK is doorgaans eenvoudig en vereist minimale technische kennis. Indien nodig kan het technische supportteam van Aftersell je gedurende het hele proces helpen.

Eerste vragen

Beantwoord de volgende vragen voordat je begint, om een soepele integratie te garanderen:

Kun jij (of iemand van je engineeringteam) een codesnippet toevoegen aan de bevestigingspagina?
De bevestigingspagina, ook wel de bedankpagina genoemd, verschijnt direct na de checkout.
Welke gebruikersgegevens of eigenschappen zijn beschikbaar op de bevestigingspagina?
We hebben toegang nodig tot specifieke eigenschappen met betrekking tot gekochte artikelen en klantgegevens. Hoe meer gegevens er beschikbaar zijn, hoe relevanter en nauwkeuriger je Rokt Thanks-aanbiedingen zullen zijn.
Is er een eenvoudige manier om deze gegevens via JavaScript op te vragen?
Kun je bijvoorbeeld de winkelwagen- of bestelgegevens op de bevestigingspagina opvragen?

Implementatiestappen

Stap 1: Controleren en bevestigen

Bekijk de bovenstaande vragen en bevestig welke gegevenseigenschappen toegankelijk zijn.
Zodra je klaar bent om verder te gaan, heb je een accountId nodig, die door een Aftersell-engineer wordt verstrekt.

Geef de volgende gegevens door om je account aan te maken:

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

Stap 2: Installatiemethode kiezen

Beslis of je:

De integratie zelf wilt installeren, of
Rechtstreeks met een Aftersell-engineer wilt samenwerken (voor begeleide installatie kan een testomgeving nodig zijn).

Als je ervoor kiest om de installatie zelf uit te voeren, kun je de documentatie van Rokt volgen of de samengevatte stappen hieronder.
Niet alle stappen in de installatiehandleiding van Rokt zijn vereist, maar de handleiding dient als referentie.

Stap 3: Het integratiescript installeren

a. Kopieer het starter-integratiescript (hieronder aangeleverd). b. Voeg het script toe tussen de <head></head>-tags van elke pagina waarop je een Rokt Thanks-aanbieding wilt weergeven (meestal je bestelbevestigingspagina). i. Vul alle vereiste klant- en transactiegegevens in. ii. Vervang "rokt_account_id_here" door de accountId die je van je Aftersell-engineer hebt gekregen. c. Test je implementatie met behulp van de testhandleiding van Rokt om te controleren of placements correct laden. d. Werk samen met ons team om de placement aan te passen zodat deze aansluit bij de look-and-feel van je merk.

Eigenschappen (vetgedrukte en cursieve eigenschappen worden sterk aanbevolen)

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

Klant-/besteleigenschappen

{  
        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: '',  
  
        },

Starterscript

<!-- 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>

Aan de slag

Startpagina

Best practices

Post-purchase upsells

Checkout-upsells (Shopify Plus)

Bedankpagina

Upsells op de productpagina

Rokt Thanks

Strategieën

Analytics en tracking

Integraties

Aftersell MCP

Facturering en account

Probleemoplossing

Aangepaste Web SDK-integratie voor Rokt Thanks

Eerste vragen

Implementatiestappen

Stap 1: Controleren en bevestigen

Stap 2: Installatiemethode kiezen

Stap 3: Het integratiescript installeren

Eigenschappen (vetgedrukte en cursieve eigenschappen worden sterk aanbevolen)

Starterscript

​Eerste vragen

​Implementatiestappen

​Stap 1: Controleren en bevestigen

​Stap 2: Installatiemethode kiezen

​Stap 3: Het integratiescript installeren

​Eigenschappen (vetgedrukte en cursieve eigenschappen worden sterk aanbevolen)

​Starterscript

Eerste vragen

Implementatiestappen

Stap 1: Controleren en bevestigen

Stap 2: Installatiemethode kiezen

Stap 3: Het integratiescript installeren

Eigenschappen (vetgedrukte en cursieve eigenschappen worden sterk aanbevolen)

Starterscript