Benutzerdefinierte Web-SDK-Integration für Rokt Thanks

Überblick Wenn dein Store einen benutzerdefinierten Checkout-Flow verwendet, kannst du trotzdem auf Rokt-Thanks-Angebote zugreifen, indem du das Rokt Web SDK (ein kleines JavaScript-Snippet) installierst. Die Installation des SDK ist in der Regel unkompliziert und erfordert nur minimale technische Kenntnisse. Bei Bedarf kann dich das technische Support-Team von Aftersell während des gesamten Prozesses unterstützen.

Erste Fragen

Bevor du beginnst, beantworte die folgenden Fragen, um eine reibungslose Integration sicherzustellen:

Kannst du (oder jemand aus deinem Engineering-Team) ein Code-Snippet zur Bestätigungsseite hinzufügen?
Die Bestätigungsseite, auch als Danke-Seite bekannt, erscheint unmittelbar nach dem Checkout.
Welche Nutzerdaten oder Eigenschaften sind auf der Bestätigungsseite verfügbar?
Wir benötigen Zugriff auf bestimmte Eigenschaften zu gekauften Artikeln und Kundeninformationen. Je mehr Daten verfügbar sind, desto relevanter und genauer werden deine Rokt-Thanks-Angebote.
Gibt es eine einfache Möglichkeit, mit JavaScript auf diese Daten zuzugreifen?
Kannst du zum Beispiel die Warenkorb- oder Bestelldetails auf der Bestätigungsseite abfragen?

Implementierungsschritte

Schritt 1: Prüfen und bestätigen

Gehe die obigen Fragen durch und bestätige, auf welche Dateneigenschaften zugegriffen werden kann.
Sobald du bereit bist fortzufahren, benötigst du eine accountId, die dir ein Aftersell-Engineer bereitstellt.

Um dein Konto zu erstellen, gib bitte die folgenden Details an:

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

Schritt 2: Installationsmethode wählen

Entscheide, ob du:

die Integration selbst installieren möchtest oder
direkt mit einem Aftersell-Engineer zusammenarbeiten möchtest (für die begleitete Einrichtung kann eine Testumgebung erforderlich sein).

Wenn du dich für die Selbstinstallation entscheidest, kannst du der Dokumentation von Rokt oder den unten zusammengefassten Schritten folgen.
Nicht alle Schritte im Setup-Leitfaden von Rokt sind erforderlich, aber der Leitfaden dient als Referenz.

Schritt 3: Das Integrationsskript installieren

a. Kopiere das Starter-Integrationsskript (unten bereitgestellt). b. Füge das Skript zwischen den <head></head>-Tags jeder Seite ein, auf der du ein Rokt-Thanks-Angebot anzeigen möchtest (in der Regel deine Bestellbestätigungsseite). i. Befülle alle erforderlichen Kunden- und Transaktionsdateneigenschaften. ii. Ersetze "rokt_account_id_here" durch die accountId, die dir dein Aftersell-Engineer bereitgestellt hat. c. Teste deine Implementierung mit dem Testleitfaden von Rokt, um sicherzustellen, dass die Platzierungen korrekt geladen werden. d. Arbeite mit unserem Team zusammen, um die Platzierung so anzupassen, dass sie zum Look-and-Feel deiner Brand passt.

Eigenschaften (fett und kursiv dargestellte Eigenschaften werden dringend empfohlen)

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

Kunden-/Bestelleigenschaften

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

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

Erste Schritte

Startseite

Best Practices

Post-Purchase-Upsells

Checkout-Upsells (Shopify Plus)

Danke-Seite

Produktseiten-Upsells

Rokt Thanks

Strategien

Analytics & Tracking

Integrationen

Aftersell MCP

Abrechnung & Konto

Fehlerbehebung

Benutzerdefinierte Web-SDK-Integration für Rokt Thanks

Erste Fragen

Implementierungsschritte

Schritt 1: Prüfen und bestätigen

Schritt 2: Installationsmethode wählen

Schritt 3: Das Integrationsskript installieren

Eigenschaften (fett und kursiv dargestellte Eigenschaften werden dringend empfohlen)

Starter-Skript

​Erste Fragen

​Implementierungsschritte

​Schritt 1: Prüfen und bestätigen

​Schritt 2: Installationsmethode wählen

​Schritt 3: Das Integrationsskript installieren

​Eigenschaften (fett und kursiv dargestellte Eigenschaften werden dringend empfohlen)

​Starter-Skript

Erste Fragen

Implementierungsschritte

Schritt 1: Prüfen und bestätigen

Schritt 2: Installationsmethode wählen

Schritt 3: Das Integrationsskript installieren

Eigenschaften (fett und kursiv dargestellte Eigenschaften werden dringend empfohlen)

Starter-Skript