Niestandardowa integracja web SDK dla Rokt Thanks

Przegląd Jeśli Twój sklep używa niestandardowego procesu checkout, nadal możesz uzyskać dostęp do ofert Rokt Thanks, instalując Rokt Web SDK (niewielki snippet JavaScript). Instalacja SDK jest zwykle prosta i wymaga minimalnej wiedzy technicznej. W razie potrzeby zespół wsparcia technicznego Aftersell może pomóc Ci w całym procesie.

Pytania wstępne

Zanim zaczniesz, odpowiedz na poniższe pytania, aby zapewnić płynną integrację:

Czy Ty (lub ktoś z Twojego zespołu inżynierskiego) możecie dodać snippet kodu do strony potwierdzenia?
Strona potwierdzenia, znana również jako strona z podziękowaniem, pojawia się bezpośrednio po checkoucie.
Jakie dane lub właściwości użytkownika są dostępne na stronie potwierdzenia?
Będziemy potrzebować dostępu do określonych właściwości dotyczących zakupionych produktów i informacji o kliencie. Im więcej danych jest dostępnych, tym trafniejsze i dokładniejsze będą Twoje oferty Rokt Thanks.
Czy istnieje łatwy sposób dostępu do tych danych za pomocą JavaScriptu?
Na przykład, czy możesz odpytać koszyk lub szczegóły zamówienia na stronie potwierdzenia?

Kroki wdrożenia

Krok 1: Przegląd i potwierdzenie

Przejrzyj powyższe pytania i potwierdź, które właściwości danych są dostępne.
Gdy zdecydujesz się kontynuować, będziesz potrzebować accountId, który zostanie dostarczony przez inżyniera Aftersell.

Aby utworzyć konto, podaj następujące dane:

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

Krok 2: Wybór metody instalacji

Zdecyduj, czy chcesz:

zainstalować integrację samodzielnie, czy
współpracować bezpośrednio z inżynierem Aftersell (przy wspomaganej konfiguracji może być wymagane środowisko testowe).

Jeśli zdecydujesz się na samodzielną instalację, możesz skorzystać z dokumentacji Rokt lub podsumowanych kroków poniżej.
Nie wszystkie kroki z przewodnika konfiguracji Rokt są wymagane, ale przewodnik służy jako materiał referencyjny.

Krok 3: Instalacja skryptu integracji

a. Skopiuj startowy skrypt integracji (podany poniżej). b. Dodaj skrypt między tagami <head></head> na każdej stronie, na której chcesz wyświetlać ofertę Rokt Thanks (zwykle na stronie potwierdzenia zamówienia). i. Uzupełnij wszystkie wymagane właściwości danych klienta i transakcji. ii. Zastąp "rokt_account_id_here" wartością accountId dostarczoną przez inżyniera Aftersell. c. Przetestuj swoje wdrożenie za pomocą przewodnika testowania Rokt, aby upewnić się, że miejsca docelowe ładują się poprawnie. d. Współpracuj z naszym zespołem, aby dostosować miejsce docelowe do wyglądu i stylu Twojej marki.

Właściwości (właściwości pogrubione i pochylone są zdecydowanie zalecane)

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

Właściwości klienta/zamówienia

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

Skrypt startowy

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

Pierwsze kroki

Strona główna

Najlepsze praktyki

Upselle po zakupie

Upselle przy realizacji zakupu (Shopify Plus)

Strona z podziękowaniem

Upselle na stronie produktu

Rokt Thanks

Strategie

Analityka i śledzenie

Integracje

Aftersell MCP

Rozliczenia i konto

Rozwiązywanie problemów

Niestandardowa integracja web SDK dla Rokt Thanks

Pytania wstępne

Kroki wdrożenia

Krok 1: Przegląd i potwierdzenie

Krok 2: Wybór metody instalacji

Krok 3: Instalacja skryptu integracji

Właściwości (właściwości pogrubione i pochylone są zdecydowanie zalecane)

Skrypt startowy

​Pytania wstępne

​Kroki wdrożenia

​Krok 1: Przegląd i potwierdzenie

​Krok 2: Wybór metody instalacji

​Krok 3: Instalacja skryptu integracji

​Właściwości (właściwości pogrubione i pochylone są zdecydowanie zalecane)

​Skrypt startowy

Pytania wstępne

Kroki wdrożenia

Krok 1: Przegląd i potwierdzenie

Krok 2: Wybór metody instalacji

Krok 3: Instalacja skryptu integracji

Właściwości (właściwości pogrubione i pochylone są zdecydowanie zalecane)

Skrypt startowy