Integração personalizada do web SDK para Rokt Thanks

Visão geral Se a sua loja usa um fluxo de checkout personalizado, você ainda pode acessar as ofertas do Rokt Thanks instalando o Rokt Web SDK (um pequeno snippet de JavaScript). Instalar o SDK costuma ser simples e exige conhecimento técnico mínimo. Se necessário, a equipe de suporte técnico da Aftersell pode ajudar você durante todo o processo.

Perguntas iniciais

Antes de começar, responda às seguintes perguntas para garantir uma integração tranquila:

Você (ou alguém da sua equipe de engenharia) consegue adicionar um snippet de código à página de confirmação?
A página de confirmação, também conhecida como página de agradecimento, aparece imediatamente após o checkout.
Quais dados ou propriedades do usuário estão disponíveis na página de confirmação?
Precisaremos de acesso a propriedades específicas relacionadas aos itens comprados e às informações do cliente. Quanto mais dados estiverem disponíveis, mais relevantes e precisas serão suas ofertas do Rokt Thanks.
Existe uma forma fácil de acessar esses dados usando JavaScript?
Por exemplo, é possível consultar os detalhes do carrinho ou do pedido na página de confirmação?

Etapas de implementação

Etapa 1: Revise e confirme

Revise as perguntas acima e confirme quais propriedades de dados podem ser acessadas.
Quando estiver pronto para prosseguir, você precisará de um accountId, que será fornecido por um engenheiro da Aftersell.

Para criar sua conta, forneça os seguintes detalhes:

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

Etapa 2: Escolha o método de instalação

Decida se você prefere:

Instalar a integração por conta própria, ou
Trabalhar diretamente com um engenheiro da Aftersell (um ambiente de testes pode ser necessário para a configuração assistida).

Se você optar por instalar por conta própria, pode seguir a documentação da Rokt ou as etapas resumidas abaixo.
Nem todas as etapas do guia de configuração da Rokt são obrigatórias, mas o guia é fornecido como referência.

Etapa 3: Instale o script de integração

a. Copie o script inicial de integração (fornecido abaixo). b. Adicione o script entre as tags <head></head> de qualquer página onde você quer exibir uma oferta do Rokt Thanks (normalmente sua página de confirmação de pedido). i. Preencha todas as propriedades de dados de cliente e transacionais obrigatórias. ii. Substitua "rokt_account_id_here" pelo accountId fornecido pelo seu engenheiro da Aftersell. c. Teste sua implementação usando o guia de testes da Rokt para garantir que os placements carreguem corretamente. d. Trabalhe com a nossa equipe para personalizar o placement para que ele corresponda ao visual e à identidade da sua marca.

Propriedades (propriedades em negrito e itálico são altamente recomendadas)

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

Propriedades de 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>

Primeiros passos

Página inicial

Melhores práticas

Upsells pós-compra

Upsells no checkout (Shopify Plus)

Página de agradecimento

Upsells na página de produto

Rokt Thanks

Estratégias

Análises e rastreamento

Integrações

Aftersell MCP

Faturamento e conta

Solução de problemas

Integração personalizada do web SDK para Rokt Thanks

Perguntas iniciais

Etapas de implementação

Etapa 1: Revise e confirme

Etapa 2: Escolha o método de instalação

Etapa 3: Instale o script de integração

Propriedades (propriedades em negrito e itálico são altamente recomendadas)

Script inicial

​Perguntas iniciais

​Etapas de implementação

​Etapa 1: Revise e confirme

​Etapa 2: Escolha o método de instalação

​Etapa 3: Instale o script de integração

​Propriedades (propriedades em negrito e itálico são altamente recomendadas)

​Script inicial

Perguntas iniciais

Etapas de implementação

Etapa 1: Revise e confirme

Etapa 2: Escolha o método de instalação

Etapa 3: Instale o script de integração

Propriedades (propriedades em negrito e itálico são altamente recomendadas)

Script inicial