Integrazione Web SDK personalizzata per Rokt Thanks

Panoramica Se il tuo negozio usa un flusso di checkout personalizzato, puoi comunque accedere alle offerte Rokt Thanks installando il Rokt Web SDK (un piccolo snippet JavaScript). L’installazione dell’SDK è in genere semplice e richiede competenze tecniche minime. Se necessario, il team di supporto tecnico di Aftersell può assisterti durante tutto il processo.

Domande iniziali

Prima di iniziare, rispondi alle seguenti domande per garantire un’integrazione senza intoppi:

Puoi (tu o qualcuno del tuo team di engineering) aggiungere uno snippet di codice alla pagina di conferma?
La pagina di conferma, nota anche come pagina di ringraziamento, appare subito dopo il checkout.
Quali dati utente o proprietà sono disponibili sulla pagina di conferma?
Avremo bisogno di accedere a proprietà specifiche relative agli articoli acquistati e alle informazioni sul cliente. Più dati sono disponibili, più le tue offerte Rokt Thanks saranno pertinenti e accurate.
Esiste un modo semplice per accedere a questi dati usando JavaScript?
Per esempio, puoi interrogare i dettagli del carrello o dell’ordine sulla pagina di conferma?

Passaggi di implementazione

Passaggio 1: verifica e conferma

Rivedi le domande sopra e conferma a quali proprietà di dati è possibile accedere.
Quando sei pronto a procedere, avrai bisogno di un accountId, che ti verrà fornito da un engineer di Aftersell.

Per creare il tuo account, fornisci i seguenti dettagli:

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

Passaggio 2: scegli il metodo di installazione

Decidi se preferisci:

Installare l’integrazione da solo, oppure
Lavorare direttamente con un engineer di Aftersell (per la configurazione assistita potrebbe essere richiesto un ambiente di test).

Se scegli di installarla da solo, puoi seguire la documentazione di Rokt o i passaggi riassunti qui sotto.
Non tutti i passaggi della guida di configurazione di Rokt sono necessari, ma la guida viene fornita come riferimento.

Passaggio 3: installa lo script di integrazione

a. Copia lo script di integrazione di partenza (fornito qui sotto). b. Aggiungi lo script tra i tag <head></head> di qualsiasi pagina in cui vuoi mostrare un’offerta Rokt Thanks (in genere la tua pagina di conferma dell’ordine). i. Compila tutte le proprietà dei dati cliente e transazionali richieste. ii. Sostituisci "rokt_account_id_here" con l’accountId fornito dal tuo engineer Aftersell. c. Testa la tua implementazione usando la guida di test di Rokt per assicurarti che i posizionamenti si carichino correttamente. d. Lavora con il nostro team per personalizzare il posizionamento in modo che corrisponda al look and feel del tuo brand.

Proprietà (le proprietà in grassetto e corsivo sono altamente consigliate)

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

Proprietà cliente/ordine

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

Script di partenza

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

Per iniziare

Pagina iniziale

Best practice

Upsell post-acquisto

Upsell al checkout (Shopify Plus)

Pagina di ringraziamento

Upsell nella pagina prodotto

Rokt Thanks

Strategie

Analisi e monitoraggio

Integrazioni

Aftersell MCP

Fatturazione e account

Risoluzione dei problemi

Integrazione Web SDK personalizzata per Rokt Thanks

Domande iniziali

Passaggi di implementazione

Passaggio 1: verifica e conferma

Passaggio 2: scegli il metodo di installazione

Passaggio 3: installa lo script di integrazione

Proprietà (le proprietà in grassetto e corsivo sono altamente consigliate)

Script di partenza

​Domande iniziali

​Passaggi di implementazione

​Passaggio 1: verifica e conferma

​Passaggio 2: scegli il metodo di installazione

​Passaggio 3: installa lo script di integrazione

​Proprietà (le proprietà in grassetto e corsivo sono altamente consigliate)

​Script di partenza

Domande iniziali

Passaggi di implementazione

Passaggio 1: verifica e conferma

Passaggio 2: scegli il metodo di installazione

Passaggio 3: installa lo script di integrazione

Proprietà (le proprietà in grassetto e corsivo sono altamente consigliate)

Script di partenza