Integración personalizada del Web SDK para Rokt Thanks

Descripción general Si tu tienda utiliza un flujo de checkout personalizado, aún puedes acceder a las ofertas de Rokt Thanks instalando el Rokt Web SDK (un pequeño fragmento de JavaScript). La instalación del SDK suele ser sencilla y requiere conocimientos técnicos mínimos. Si es necesario, el equipo de soporte técnico de Aftersell puede ayudarte durante todo el proceso.

Preguntas iniciales

Antes de comenzar, responde las siguientes preguntas para garantizar una integración fluida:

¿Puedes (o alguien de tu equipo de ingeniería) agregar un fragmento de código a la página de confirmación?
La página de confirmación, también conocida como la página de agradecimiento, aparece inmediatamente después del checkout.
¿Qué datos o propiedades del usuario están disponibles en la página de confirmación?
Necesitaremos acceso a propiedades específicas relacionadas con los artículos comprados y la información del cliente. Cuantos más datos estén disponibles, más relevantes y precisas serán tus ofertas de Rokt Thanks.
¿Existe una forma sencilla de acceder a estos datos usando JavaScript?
Por ejemplo, ¿puedes consultar los detalles del carrito o del pedido en la página de confirmación?

Pasos de implementación

Paso 1: Revisa y confirma

Revisa las preguntas anteriores y confirma a qué propiedades de datos se puede acceder.
Cuando estés listo para continuar, necesitarás un accountId, que te será proporcionado por un ingeniero de Aftersell.

Para crear tu cuenta, proporciona los siguientes datos:

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

Paso 2: Elige el método de instalación

Decide si prefieres:

Instalar la integración por tu cuenta, o
Trabajar directamente con un ingeniero de Aftersell (puede requerirse un entorno de pruebas para la configuración asistida).

Si eliges instalarla por tu cuenta, puedes seguir la documentación de Rokt o los pasos resumidos a continuación.
No todos los pasos de la guía de configuración de Rokt son necesarios, pero la guía se proporciona como referencia.

Paso 3: Instala el script de integración

a. Copia el script de integración inicial (proporcionado a continuación). b. Agrega el script entre las etiquetas <head></head> de cualquier página donde quieras mostrar una oferta de Rokt Thanks (normalmente tu página de confirmación de pedido). i. Completa todas las propiedades de datos del cliente y transaccionales requeridas. ii. Reemplaza "rokt_account_id_here" con el accountId proporcionado por tu ingeniero de Aftersell. c. Prueba tu implementación usando la guía de pruebas de Rokt para asegurarte de que las ubicaciones se cargan correctamente. d. Trabaja con nuestro equipo para personalizar la ubicación de modo que coincida con la imagen y el estilo de tu marca.

Propiedades (las propiedades en negrita y cursiva son altamente recomendadas)

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

Propiedades del cliente/pedido

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

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

Integración personalizada del Web SDK para Rokt Thanks

Preguntas iniciales

Pasos de implementación

Paso 1: Revisa y confirma

Paso 2: Elige el método de instalación

Paso 3: Instala el script de integración

Propiedades (las propiedades en negrita y cursiva son altamente recomendadas)

Script inicial

​Preguntas iniciales

​Pasos de implementación

​Paso 1: Revisa y confirma

​Paso 2: Elige el método de instalación

​Paso 3: Instala el script de integración

​Propiedades (las propiedades en negrita y cursiva son altamente recomendadas)

​Script inicial

Preguntas iniciales

Pasos de implementación

Paso 1: Revisa y confirma

Paso 2: Elige el método de instalación

Paso 3: Instala el script de integración

Propiedades (las propiedades en negrita y cursiva son altamente recomendadas)

Script inicial