Brugerdefineret web SDK-integration til Rokt Thanks

Oversigt Hvis din butik bruger et brugerdefineret checkout-flow, kan du stadig få adgang til Rokt Thanks-tilbud ved at installere Rokt Web SDK (et lille JavaScript-snippet). Installation af SDK’et er typisk ligetil og kræver minimal teknisk ekspertise. Hvis der er behov for det, kan Aftersells tekniske supportteam hjælpe dig gennem hele processen.

Indledende spørgsmål

Før du begynder, skal du besvare følgende spørgsmål for at sikre en problemfri integration:

Kan du (eller nogen på dit engineering-team) tilføje et kodesnippet til bekræftelsessiden?
Bekræftelsessiden, også kendt som takkesiden, vises umiddelbart efter checkout.
Hvilke brugerdata eller egenskaber er tilgængelige på bekræftelsessiden?
Vi skal have adgang til specifikke egenskaber relateret til købte varer og kundeoplysninger. Jo flere data der er tilgængelige, jo mere relevante og præcise bliver dine Rokt Thanks-tilbud.
Er der en nem måde at tilgå disse data med JavaScript?
Kan du for eksempel forespørge kurv- eller ordredetaljer på bekræftelsessiden?

Implementeringstrin

Trin 1: Gennemgå og bekræft

Gennemgå spørgsmålene ovenfor, og bekræft, hvilke dataegenskaber der kan tilgås.
Når du er klar til at fortsætte, skal du bruge et accountId, som leveres af en Aftersell-ingeniør.

For at oprette din konto skal du angive følgende oplysninger:

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

Trin 2: Vælg installationsmetode

Beslut, om du vil:

Installere integrationen selv, eller
Arbejde direkte med en Aftersell-ingeniør (et testmiljø kan være påkrævet ved assisteret opsætning).

Hvis du vælger at installere den selv, kan du følge Rokts dokumentation eller de opsummerede trin nedenfor.
Ikke alle trin i Rokts opsætningsguide er påkrævede, men guiden er givet som reference.

Trin 3: Installer integrationsscriptet

a. Kopiér starter-integrationsscriptet (angivet nedenfor). b. Tilføj scriptet mellem <head></head>-taggene på enhver side, hvor du vil vise et Rokt Thanks-tilbud (typisk din ordrebekræftelsesside). i. Udfyld alle påkrævede kunde- og transaktionsdataegenskaber. ii. Erstat "rokt_account_id_here" med det accountId, du har fået af din Aftersell-ingeniør. c. Test din implementering ved hjælp af Rokts testguide for at sikre, at placeringer indlæses korrekt. d. Arbejd sammen med vores team om at tilpasse placeringen, så den matcher dit brands udseende og stil.

Egenskaber (egenskaber i fed og kursiv anbefales stærkt)

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

Kunde-/ordreegenskaber

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

Kom godt i gang

Startside

Bedste praksis

Mersalg efter køb

Mersalg ved checkout (Shopify Plus)

Takkeside

Mersalg på produktsiden

Rokt Thanks

Strategier

Analyser og sporing

Integrationer

Aftersell MCP

Fakturering og konto

Fejlfinding

Brugerdefineret web SDK-integration til Rokt Thanks

Indledende spørgsmål

Implementeringstrin

Trin 1: Gennemgå og bekræft

Trin 2: Vælg installationsmetode

Trin 3: Installer integrationsscriptet

Egenskaber (egenskaber i fed og kursiv anbefales stærkt)

Starter-script

​Indledende spørgsmål

​Implementeringstrin

​Trin 1: Gennemgå og bekræft

​Trin 2: Vælg installationsmetode

​Trin 3: Installer integrationsscriptet

​Egenskaber (egenskaber i fed og kursiv anbefales stærkt)

​Starter-script

Indledende spørgsmål

Implementeringstrin

Trin 1: Gennemgå og bekræft

Trin 2: Vælg installationsmetode

Trin 3: Installer integrationsscriptet

Egenskaber (egenskaber i fed og kursiv anbefales stærkt)

Starter-script