Intégration personnalisée du SDK web pour Rokt Thanks

Aperçu Si votre boutique utilise un flux de checkout personnalisé, vous pouvez tout de même accéder aux offres Rokt Thanks en installant le Rokt Web SDK (un petit extrait JavaScript). L’installation du SDK est généralement simple et nécessite peu d’expertise technique. Si besoin, l’équipe de support technique d’Aftersell peut vous accompagner tout au long du processus.

Questions préliminaires

Avant de commencer, répondez aux questions suivantes pour garantir une intégration fluide :

Pouvez-vous (ou quelqu’un de votre équipe d’ingénierie) ajouter un extrait de code à la page de confirmation ?
La page de confirmation, également appelée page de remerciement, apparaît immédiatement après le checkout.
Quelles données ou propriétés utilisateur sont disponibles sur la page de confirmation ?
Nous aurons besoin d’accéder à des propriétés spécifiques relatives aux articles achetés et aux informations client. Plus les données disponibles sont nombreuses, plus vos offres Rokt Thanks seront pertinentes et précises.
Existe-t-il un moyen simple d’accéder à ces données via JavaScript ?
Par exemple, pouvez-vous interroger les détails du panier ou de la commande sur la page de confirmation ?

Étapes de mise en œuvre

Étape 1 : Vérifier et confirmer

Passez en revue les questions ci-dessus et confirmez quelles propriétés de données sont accessibles.
Une fois prêt à continuer, vous aurez besoin d’un accountId, qui vous sera fourni par un ingénieur Aftersell.

Pour créer votre compte, veuillez fournir les informations suivantes :

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

Étape 2 : Choisir la méthode d’installation

Décidez si vous souhaitez :

Installer l’intégration vous-même, ou
Travailler directement avec un ingénieur Aftersell (un environnement de test peut être nécessaire pour une installation assistée).

Si vous choisissez de l’installer vous-même, vous pouvez suivre la documentation de Rokt ou les étapes résumées ci-dessous.
Toutes les étapes du guide de configuration de Rokt ne sont pas obligatoires, mais le guide est fourni à titre de référence.

Étape 3 : Installer le script d’intégration

a. Copiez le script d’intégration de démarrage (fourni ci-dessous). b. Ajoutez le script entre les balises <head></head> de toute page où vous souhaitez afficher une offre Rokt Thanks (généralement votre page de confirmation de commande). i. Renseignez toutes les propriétés de données client et transactionnelles requises. ii. Remplacez "rokt_account_id_here" par l’accountId fourni par votre ingénieur Aftersell. c. Testez votre implémentation à l’aide du guide de test de Rokt pour vérifier que les emplacements se chargent correctement. d. Travaillez avec notre équipe pour personnaliser l’emplacement afin qu’il corresponde à l’apparence et à l’identité de votre marque.

Propriétés (les propriétés en gras et italique sont fortement recommandées)

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

Propriétés client/commande

{  
        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 de démarrage

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

Getting Started

Home Page

Best Practices

Post-Purchase Upsells

Checkout Upsells (Shopify Plus)

Thank You Page

Product Page Upsells

Rokt Thanks

Strategies

Analytics & Tracking

Integrations

Billing & Account

Troubleshooting

Intégration personnalisée du SDK web pour Rokt Thanks

Questions préliminaires

Étapes de mise en œuvre

Étape 1 : Vérifier et confirmer

Étape 2 : Choisir la méthode d’installation

Étape 3 : Installer le script d’intégration

Propriétés (les propriétés en gras et italique sont fortement recommandées)

Script de démarrage

​Questions préliminaires

​Étapes de mise en œuvre

​Étape 1 : Vérifier et confirmer

​Étape 2 : Choisir la méthode d’installation

​Étape 3 : Installer le script d’intégration

​Propriétés (les propriétés en gras et italique sont fortement recommandées)

​Script de démarrage

Questions préliminaires

Étapes de mise en œuvre

Étape 1 : Vérifier et confirmer

Étape 2 : Choisir la méthode d’installation

Étape 3 : Installer le script d’intégration

Propriétés (les propriétés en gras et italique sont fortement recommandées)

Script de démarrage