Primeiros passos com o Salesforce Commerce Cloud

O que você vai aprender

Saiba como integrar o Salesforce Commerce Cloud com o Klaviyo. A integração do cartucho e da API do Klaviyo permite que os sites que usam o Salesforce Commerce Cloud (antigo Demandware) se conectem rapidamente e enviem dados históricos e em tempo real para o Klaviyo. Quando o senhor integra o Klaviyo ao Salesforce Commerce Cloud (SFCC), o Klaviyo começa a rastrear as ações que as pessoas realizam em tempo real, como navegação no site, rastreamento de pesquisa, visualização de produtos, visualização de categorias, adição de itens ao carrinho, check-out e pedidos.

Há três etapas principais para a integração do SFCC com a Klaviyo, abordadas neste guia:

1. Instalação do cartucho Klaviyo no SFCC.
2. Adicionar snippets de habilitação ao SFCC.
3. Ativação da integração do SFCC OCAPI no Klaviyo.

Antes de começar

O Klaviyo se integra aos sites Site Genesis (SG) e Storefront Reference Architecture (SFRA) baseados no controlador SFCC. Cada estrutura requer uma configuração de cartucho e snippets ligeiramente diferentes, descritos a seguir.

Para usar nosso cartucho versão 23.7.0 (ou qualquer versão superior), recomendamos atualizar o modo de compatibilidade SFCC para 21.7 ou superior.

Se quiser começar integrando seu ambiente de desenvolvimento primeiro, o senhor pode criar uma conta Klaviyo vinculada usando o método descrito neste artigo e conectar seu ambiente de desenvolvimento a essa conta. Recomendamos incluir a palavra "Dev" ou "Staging" no nome da empresa que o senhor usa ao configurar a conta, a fim de diferenciar melhor as contas quando estiver conectado. 

Configurar os cartuchos Klaviyo

Faça o download dos cartuchos

O senhor pode encontrar nossa listagem de aplicativos no Salesforce AppExchange. No AppExchange, o senhor pode saber mais sobre o Klaviyo e clicar em Get It Now para ser levado ao Github, onde nossos cartuchos estão disponíveis em um arquivo zip para download. Se o senhor tiver um site SFRA, baixe o arquivo zip KlaviyoSFRA e, se tiver um site Site Genesis, baixe o arquivo zip KlaviyoSG. 

O senhor precisará configurar dois cartuchos, ambos incluídos no arquivo zip que baixou. Esses cartuchos incluem:

• int_klaviyo ou int_klaviyo_sfra: Um cartucho específico do site; int_klaviyo é para sites baseados no Site Genesis, e int_klaviyo_sfra é para sites baseados no SFRA.
• int_klaviyo_core: para ambos os tipos de infraestruturas, contendo algumas funcionalidades básicas e sobrepostas.

Importar os cartuchos

A primeira etapa é importar os cartuchos no Visual Studio Code ou no Eclipse para que eles estejam disponíveis para serem vinculados à instância do SFCC

No código VS

1. Copie e cole o cartucho int_klaviyo_core.
2. Copie as pastas int_klaviyo (Site Genesis) ou int_klaviyo_sfra (SFRA) para a base de código como irmãos das outras pastas do cartucho.

Em Eclipse

1. Navegue até Administration > Import > General > Existing Projects into Workspace.
2. Importe o diretório int_klaviyo_core usando o assistente de importação.
3. Selecione a instância SFCC com a qual o cartucho será conectado.
4. Selecione Properties (Propriedades).
5. Selecione Project References.
6. Verifique o cartucho int_klaviyo_core.
7. Repita as etapas de 2 a 6 para o outro cartucho específico da sua estrutura (int_klaviyo ou int_klaviyo_sfra).

Adicione os cartuchos ao caminho do cartucho

Depois que os cartuchos são importados, eles precisam ser adicionados à lista de cartuchos usados pelo seu local usando o SFCC Business Manager.

1. Navegue até Administration > Sites > Manage Sites.
2. Selecione seu site.
3. Selecione a guia Settings (Configurações ).
4. No início da entrada do caminho do cartucho denominada Cartridges, adicione os nomes dos cartuchos Klaviyo importados com o cartucho principal por último (int_klaviyo:int_klaviyo_core ou int_klaviyo_sfra:int_klaviyo_core).
5. Clique em Apply (Aplicar).

Depois de clicar em Apply (Aplicar), o senhor deverá ver os dois cartuchos no início do campo denominado Effective Cartridge Path (Caminho efetivo do cartucho).

Adicionar serviços

Depois de importar os cartuchos e adicioná-los ao caminho de cartuchos do site, o serviço Klaviyo deve ser adicionado para permitir a configuração das definições do cartucho. No diretório raiz do arquivo zip dos cartuchos do Klaviyo, há outro arquivo zip chamado metadata.zip. As instruções a seguir farão referência a esse arquivo zip.

1. Navegue até Administration > Site Development > Site Import & Export > Services.
2. Faça upload e, em seguida, importe o arquivo metadata.zip.
   
3. Quando for solicitado que o senhor confirme se deseja importar o arquivo selecionado, selecione OK.
4. Agora o senhor deve ver a importação em execução na seção Status, na parte inferior da página.
   
5. Agora o senhor terá acesso a uma página de preferências em Merchant tools > Site Preferences > Custom Preferences > klaviyo.
   
   A partir daí, o senhor pode gerenciar as seguintes configurações:
   • Klaviyo ativado
     Deve ser definido como "Yes" para ativar o cartucho.
   • Chave privada do Klaviyo
     Uma chave de API privada do Klaviyo. Certifique-se de que a chave de API privada da Klaviyo que o senhor usa para essa integração tenha recebido acesso total. 
   • Conta Klaviyo
     Sua chave de API pública da Klaviyo, ou Site ID.
   • Rotular eventos como SFCC
     Se o senhor optar por rotular eventos como SFCC, terá acesso a fluxos pré-construídos em Klaviyo usando dados SFCC. Uma desvantagem atual da rotulagem de eventos é que, se o senhor optar por rotulá-los, não terá acesso às recomendações Viewed Product ou Added to Cart nos feeds de produtos do Klaviyo. 
     
     • Se o senhor instalou anteriormente uma versão de cartucho anterior à 23.7.0 e agora está atualizando para a versão 23.7.0 ou superior, defina como No (Não). As integrações criadas antes de 13 de julho de 2023 (ou seja, versões de cartucho anteriores à 23.7.0) geram métricas que não são rotuladas como SFCC. Se o senhor usou uma versão anterior à 23.7.0 no passado, essa configuração considera as convenções de nomenclatura antigas para evitar a descontinuidade dos dados métricos em sua conta. 
   • Send Added To Cart Event as "Add To Cart"
     Se o senhor instalou anteriormente uma versão de cartucho anterior à 23.7.0 e agora está atualizando para a versão 23.7.0 ou superior, defina como Yes (Sim). Caso contrário, defina como No. Essa configuração impede a descontinuidade dos dados métricos em sua conta. 
   • Seletores de campo de e-mail do Klaviyo e seletor de campo de e-mail de checkout
     Consulte a seção abaixo para obter informações detalhadas sobre como configurar esses dois campos.
   • Tipo de imagem
     O tipo de imagem do produto que o senhor deseja usar nos dados do evento enviados à Klaviyo. Se o senhor não tiver certeza do tipo de imagem a ser definido, navegue até Merchant tools > Products and Catalogs > Products, clique em um produto e determine o tipo de visualização que deseja usar com base no que está disponível (por exemplo, grande, médio, pequeno, alta resolução).
   • ID da lista de e-mail de marketing
     O senhor pode coletar assinantes de e-mail no checkout e sincronizá-los com uma lista da Klaviyo. Essa configuração é o ID da lista no Klaviyo à qual o senhor deseja adicionar assinantes de e-mail. Saiba como encontrar um ID de lista no Klaviyo. Para coletar assinantes de e-mail no checkout, o senhor também precisará adicionar um snippet de caixa de seleção que será descrito em uma seção posterior.
   • ID da lista de SMS de marketing
     O senhor pode coletar assinantes de SMS no checkout e sincronizá-los com uma lista da Klaviyo. Essa configuração é a lista de ID do Klaviyo à qual o senhor deseja adicionar assinantes de SMS. Saiba como encontrar um ID de lista no Klaviyo. Se o senhor reunir assinantes de SMS e de e-mail, escolha uma lista diferente para SMS e para e-mail. Isso garante que o consentimento seja sempre atribuído adequadamente ao canal correto. Para coletar assinantes de SMS no checkout, o senhor precisará de alguns outros pré-requisitos, juntamente com um snippet de caixa de seleção, que serão descritos em uma seção posterior.
     
6. O arquivo metadata.zip também criará um novo serviço no SFCC. Navegando até Administration > Operations > Services, o senhor deve ver duas novas entradas na guia Services, chamadas KlaviyoEventService e KlaviyoSubscribeProfilesService, cada uma com as respectivas entradas de perfil e credenciais.

Configuração dos seletores de campo de e-mail do Klaviyo e do seletor de campo de e-mail do checkout 

Essas preferências são essenciais para que a Klaviyo identifique e rastreie com sucesso os visitantes do site. Se um visitante não for identificado pela Klaviyo, nenhum evento será rastreado para esse visitante. Depois de concluir a integração, saiba como testar o e-mail do Klaviyo e a configuração do seletor de campo de e-mail do checkout na seção Test your SFCC setup (Teste a configuração do SFCC ) abaixo. 

Seletores de campo de e-mail do Klaviyo

A preferência do site Klaviyo Email Field Selectors é usada para direcionar todo e qualquer campo de entrada de e-mail e número de telefone no site (com exceção da entrada de e-mail localizada no checkout, que é tratada abaixo). Identificamos esses campos por meio de seletores CSS padrão, com cada um sendo adicionado individualmente à preferência do site (que é um "Conjunto de strings", permitindo que vários valores de string sejam inseridos um a um). Qualquer seletor complexo que possa ser usado em uma folha de estilo padrão para direcionar um elemento específico pode ser usado, por exemplo, #dwfrm_login div.username input.input-text é aceitável, assim como seletores que podem direcionar vários elementos no site com base em atributos compartilhados, por exemplo, input[type=email]. Evite direcionar entradas por meio de IDs gerados dinamicamente, um caso muito comum no SiteGen, pois esses IDs mudarão com base no carregamento da página e, portanto, falharão (por exemplo, #dwfrm_login_username_d0fignzngiyq).

Observe que os campos adicionados ao DOM após o carregamento da página ainda podem ser direcionados. Exemplos disso incluem um campo de endereço de e-mail que é inserido em um modal após uma chamada AJAX ou um campo que é injetado no DOM por JavaScripts de terceiros.

Observe também que os campos de número de telefone por si só podem não identificar totalmente o usuário para a Klaviyo, dependendo das configurações de SMS na sua conta da Klaviyo (se o SMS estiver ativado e o usuário tiver um número de envio associado ao país do número de telefone inserido, o navegador será identificado). Dessa forma, adicionar seletores CSS aos campos de número de telefone pode ser considerado "bom ter" ou "conforme necessário", enquanto adicioná-los aos campos de e-mail deve ser considerado essencial.

Seletor de campo de e-mail de checkout

O campo de coleta de e-mail no checkout é um caso especial e, como tal, tem sua própria preferência de site para direcionamento. O princípio funciona exatamente da mesma forma que a preferência do site Klaviyo Email Field Selectors - basta inserir um único seletor CSS que direcione o campo de endereço de e-mail no fluxo de checkout do seu site, independentemente de ele aparecer no início, no final ou no meio do checkout.

A configuração bem-sucedida dessa preferência de site para direcionar o campo de coleta de e-mail no checkout é essencial para rastrear corretamente o evento Started Checkout e, portanto, é altamente recomendável que o senhor teste para garantir que os eventos Started Checkout apareçam no Klaviyo depois que um endereço de e-mail for inserido no campo de coleta de e-mail no checkout. 

Observe também que o campo de e-mail de checkout direcionado pela preferência de site Checkout Email Field Selector será automaticamente conectado para identificar o usuário, além de acionar o evento Started Checkout - ou seja, não há necessidade de incluir o seletor CSS para o campo de e-mail de checkout nas preferências de site Klaviyo Email Field Selectors e Checkout Email Field Selector.

Adicionar snippets de configuração

A última parte da configuração do cartucho é adicionar os snippets aos arquivos de modelo do seu site para permitir que o cartucho se comunique com o site. Essas etapas são muito diferentes para as infraestruturas Site Genesis (SG) e Storefront Reference Architecture (SFRA), portanto, certifique-se de seguir as instruções corretas para a sua configuração.

Configuração do snippet da arquitetura de referência do Storefront (SFRA)

Adicione o seguinte código à parte inferior do arquivo pageFooter.isml:

<isinclude template="klaviyo/klaviyoFooter"/>

O senhor concluiu a configuração do snippet para sua loja SFRA. 

Configuração do snippet do Site Genesis (SG)

1. Para adicionar o KlaviyoFooter.isml ao rodapé global: Adicione o seguinte código à parte inferior do arquivo footer.isml (ou qualquer modelo semelhante que seja carregado próximo à parte inferior de cada página).
   

   <isinclude template="klaviyo/klaviyoFooter"/>

2. Para adicionar snippets para identificação do usuário no lado do servidor: Adicione o seguinte snippet aos seus controladores Account-Show e Cart-Show em qualquer lugar antes da chamada para renderizar seus respectivos modelos (ou seja, app.getView(...)).
   

      // KLAVIYO
       var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils'), klid;
       if(klaviyoUtils.klaviyoEnabled && 
       !klaviyoUtils.getKlaviyoExchangeID()){
       klid = klaviyoUtils.getProfileInfo();
       }
       // FIM KLAVIYO

3. Em seguida, o senhor atualizará a chamada app.getView(...) para incluir klid como uma variável pdict.
   •  Em seu controlador Account-Show:
     

     app.getView({downloadAvailable: true, klid: klid}).render('account/accountoverview');
     // KLAVIYO: adicionado 'klid: klid'

   • Em seu controlador Cart-Show:
     

     app.getView('Cart', {cart: app.getModel('Cart').get(),RegistrationStatus: false,klid: klid // KLAVIYO: added 'klid: klid'}).render('checkout/cart/cart');
             

4. Para adicionar o snippet Added To Cart ao controlador Cart-AddProduct: Adicione o seguinte snippet ao seu controlador Cart-AddProduct em qualquer lugar antes da chamada para renderizar o modelo (ou seja, app.getView(...)).
   

    /* Rastreamento do evento Klaviyo Added to Cart */
       var BasketMgr = require('dw/order/BasketMgr');
       var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils');
       var addedToCartData = require('*/cartridge/scripts/klaviyo/eventData/addedToCart');
       if(klaviyoUtils.klaviyoEnabled){
       var exchangeID = klaviyoUtils.getKlaviyoExchangeID();
       var dataObj, serviceCallResult, currentBasket;
       var isKlDebugOn = request.getHttpReferer().includes('kldebug=true') ? true
       : false;
       se (exchangeID) {
       currentBasket = BasketMgr.getCurrentBasket();
       Se (currentBasket && currentBasket.getProductLineItems().toArray().length)
       {
       dataObj = addedToCartData.getData(currentBasket);
       serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.addedToCart,
       false);
       Se (isKlDebugOn) {
       var klDebugData = klaviyoUtils.prepareDebugData(dataObj);
       var serviceCallData = klaviyoUtils.prepareDebugData(serviceCallResult);
       var siteGenKlDebutData = `<input type="hidden" name="siteGenKlDebutData"
       id="siteGenKlDebutData" value="${klDebugData}"/>`;
       var siteGenServiceCallData = `<input type="hidden" name="siteGenServiceCallData"
       id="siteGenServiceCallData" value="${serviceCallData}"/>`;
       response.writer.print(siteGenKlDebutData);
       response.writer.print(siteGenServiceCallData);
       }
       }
       }
       }
       /* FIM do rastreamento do evento Klaviyo Added to Cart */

5. Snippets de checkout iniciado: Ao adicionar snippets do Klaviyo aos controladores de checkout para rastrear eventos de Checkout Iniciado , é importante ter em mente o seguinte:
   • O objetivo de adicionar esses snippets é verificar se um endereço de e-mail foi anexado ao objeto Basket no fluxo de checkout e, quando estiver anexado, disparar o evento Started Checkout . É importante detectar a associação de um endereço de e-mail com a cesta o mais cedo possível no fluxo de checkout.
   • Devido à personalização do checkout com base no site, não é possível para a Klaviyo definir exatamente qual controlador será o primeiro a receber um objeto Basket com um endereço de e-mail anexado a ele.
   • Recomendamos adicionar os snippets de código a todas as rotas principais que são acionadas no checkout. Se o senhor for capaz de usar o depurador para identificar exatamente quando o endereço de e-mail é anexado à cesta no fluxo de checkout, fique à vontade para adicionar os snippets somente a essa rota, mas faça um teste completo para garantir que todos os caminhos de checkout possíveis (convidado, logado, logado no checkout etc.) acionem o código.
6. O snippet para a primeira rota atingida no checkout (normalmente COCustomer-Start) é o seguinte. Insira-o em qualquer lugar antes da chamada para renderizar o modelo (ou seja, app.getView(...)). Observe a principal diferença nesse snippet - passar o primeiro argumento do método KLCheckoutHelpers.startedCheckoutHelper como true em vez de false - em comparação com os outros snippets de checkout (destacados abaixo). Observe que, no trecho abaixo, o KLCheckoutHelpers.startedCheckoutHelper é verdadeiro em vez de falso (como nos outros snippets de checkout). Isso é essencial para que o código saiba que temos um novo evento Started Checkout para rastrear.

   /* Rastreamento de eventos de checkout iniciado pelo Klaviyo */
      var KLCheckoutHelpers = require('*/cartridge/scripts/klaviyo/checkoutHelpers');
      var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
      var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(true, customerEmail);
      Se (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
          app.getView({
              klDebugData: KLTplVars.klDebugData,
              serviceCallData: KLTplVars.serviceCallData
          }).render('klaviyo/klaviyoDebug');
      }
      /* END Klaviyo Started Checkout event tracking */
   

7. Em seguida, atualize a chamada app.getView(...) para incluir klid como uma variável pdict:

   app.getView({
     ContinueURL: URLUtils.https('COCustomer-LoginForm').append('scope', 'checkout'),
   klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
   }).render('checkout/checkoutlogin');

8. Os trechos a seguir devem ser adicionados à primeira rota que é acionada depois que um endereço de e-mail é anexado ao objeto Basket. Se o senhor não tiver certeza, ou simplesmente quiser cobrir suas bases, recomendamos adicionar esse snippet a todas as rotas a seguir:
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Save
   • COPlaceOrder-Start
   Como nos trechos acima, adicione esse trecho em qualquer lugar antes da chamada para renderizar o modelo ou antes das chamadas para os controladores subsequentes (exemplo de COBilling-Save: app.getController('COSummary').Start()). 

   /* Rastreamento de eventos de checkout iniciado pelo Klaviyo */
     var KLCheckoutHelpers = require('*/cartridge/scripts/klaviyo/checkoutHelpers');
   var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
     var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(false, customerEmail);
   Se (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
   app.getView({
   klDebugData: KLTplVars.klDebugData,
   serviceCallData: KLTplVars.serviceCallData
   }).render('klaviyo/klaviyoDebug');
   }
   /* END Klaviyo Started Checkout event tracking */

9. Para rotas que chamam modelos diretamente (por exemplo, COShipping-Start), atualize a chamada app.getView(...) para incluir klid como uma variável pdict. Aqui está um exemplo da rota COShipping-Start:

   app.getView({
   ContinueURL: URLUtils.https('COShipping-SingleShipping'),
   Basket: cart.object,
   HomeDeliveries: homeDeliveries,
   klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
   }).render('checkout/shipping/singleshipping');

10. Para adicionar o snippet de confirmação de pedido ao controlador COSummary-ShowConfirmation: Adicione o seguinte snippet ao seu controlador COSummary-ShowConfirmation em qualquer lugar antes da chamada para renderizar o modelo.

    /* Rastreamento de eventos de confirmação de pedido da Klaviyo */
      var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils');
      var orderConfirmationData = require('*/cartridge/scripts/klaviyo/eventData/orderConfirmation');
    var Logger = require('dw/system/Logger');
    if (klaviyoUtils.klaviyoEnabled){
    session.privacy.klaviyoCheckoutTracked = false;
    var exchangeID = klaviyoUtils.getKlaviyoExchangeID();
    var dataObj, serviceCallResult;
    if (order && order.customerEmail) {
    // verificar se o status é novo ou criado
      if (order.status == dw.order.Order.ORDER_STATUS_NEW || order.status == dw.order.Order.ORDER_STATUS_OPEN)
      {
    dataObj = orderConfirmationData.getData(order, exchangeID);
      serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.orderConfirmation,
      order.customerEmail);
    }
      if('KLEmailSubscribe' in session.custom || 'KLSmsSubscribe' in session.custom)
      {
    var email = order.customerEmail;
    var phone = order.defaultShipment.shippingAddress.phone;
    var e164PhoneRegex = new RegExp(/^\+[1-9]\d{1,14}$/);
    if (phone) {
      // OBSERVAÇÃO: o Klaviyo só aceita números de telefone que incluam + e o código do país
      no início (por exemplo, para os EUA: +16465551212)
      // para conseguir que os usuários se inscrevam na lista de SMS, o senhor deve coletar
      o código do país no campo do número de telefone do pedido!
    phone = '+' + phone.replace(/[^a-z0-9]/gi, '');
    if(!e164PhoneRegex.test(phone)) {
    if (session.custom.KLSmsSubscribe) {
      var logger = Logger.getLogger('Klaviyo', 'Klaviyo.core: Order-Confirm');
      logger.error(`SMS Assinatura solicitada pelo usuário, mas um número de telefone inválido
      foi fornecido. Número de telefone: ${phone}`);
    }
    phone = null;
    }
    }
    if (e-mail || telefone) {
    klaviyoUtils.subscribeUser(email, phone);
    }
    }
    }
    }
    /* FIM do rastreamento do evento de confirmação de pedido do Klaviyo */

O senhor concluiu a configuração do snippet para a loja do Site Genesis. 

Adicionar snippets de caixa de seleção de consentimento no checkout (SG e SFRA)

• Habilite o SMS no Klaviyo e configure os números de envio.
• O campo de número de telefone em seu formulário de checkout deve suportar um código de país.

Para coletar o consentimento no checkout para e-mail e SMS, será necessário incluir trechos de código para que as caixas de seleção de consentimento apareçam onde desejado, além de definir as configurações de ID da lista mencionadas na seção Adicionar serviços acima.

Por exemplo, para que esses snippets apareçam no checkout, eles podem ser colocados no modelo shipmentCard.isml (app_storefront_base) no SFRA ou no modelo billing.isml (app_storefront_core) no SiteGen. 

Abaixo estão os snippets ISML para o Site Genesis e o SFRA, e eles podem ser colocados em qualquer lugar do fluxo de checkout que melhor se adapte ao seu site específico. Observe que, para que o consentimento no checkout funcione corretamente no Site Genesis, o senhor deve ter incluído o snippet de confirmação do pedido mencionado na seção Adicionar snippets de configuração acima.

Os snippets abaixo pressupõem que a linguagem de opt-in para e-mail e SMS está contida em um pacote de recursos de propriedades chamado "checkout". O senhor precisará substituir `your.email.subscribe.resource.string.here` e `seu.sms.subscribe.resource.string.here` com as chaves correspondentes ao seu idioma de opt-in de e-mail e SMS, respectivamente. Esse idioma aparecerá ao lado da caixa de seleção. 

Por exemplo, sua linguagem de opt-in pode ser assim:

• E-mail
  Assine as atualizações por e-mail
• SMS
  Assine as atualizações por SMS. Ao marcar esta caixa e digitar seu número de telefone acima, o(a) senhor(a) consente em receber mensagens de texto de marketing (como [códigos promocionais] e [lembretes de carrinho]) da [nome da empresa] no número fornecido, inclusive mensagens enviadas por discagem automática. O consentimento não é uma condição para qualquer compra. Podem ser aplicadas taxas de mensagens e dados. A frequência das mensagens varia. O senhor pode cancelar a assinatura a qualquer momento respondendo STOP ou clicando no link de cancelamento de assinatura (quando disponível) em uma de nossas mensagens. Veja nossa Política de Privacidade [link] e nossos Termos de Serviço [link].

 <isset name="KLEmailSubscribed" value="${(session.custom.KLEmailSubscribe
  == true) ? 'checked' : ''}" scope="page" />
  <isset name="KLSmsSubscribed" value="${(session.custom.KLSmsSubscribe == true)
  ? 'checked' : ''}" scope="page" />
  <input type="checkbox" id="KLEmailSubscribe" ${KLEmailSubscribed} /> ${Resource.msg('your.email.subscribe.resource.string.here',
  'checkout', null)} <br />
  <input type="checkbox" id="KLSmsSubscribe" ${KLSmsSubscribed} /> ${Resource.msg('your.sms.subscribe.resource.string.here',
  'checkout', null)}

Habilitar a integração OCAPI no Klaviyo

Pontos finais

Para fazer a integração com o SFCC para o catálogo de produtos e dados de pedidos históricos/em andamento, o Klaviyo usa quatro endpoints OCAPI:

• /order_search
  Sincroniza dados históricos de pedidos com o Klaviyo Sincroniza eventos de pedidos em andamento a cada 60 minutos. Os eventos Ordered Product e Placed Order sincronizarão dados adicionais para segmentação e filtragem de fluxo, e são ideais para personalização aprimorada não disponível no evento Order Confirmation. Para e-mails de confirmação de pedido em tempo real, use o evento Order Confirmation (Confirmação de pedido ) do cartucho.
• /sites
  Permite que o senhor selecione de qual site o Klaviyo sincroniza os dados durante a configuração da integração.
• /product_search
  Conecta seu catálogo ao Klaviyo para ativar a funcionalidade, incluindo recomendações de produtos em e-mails.
• /products/*/variations
  Permite a sincronização de variantes com o Klaviyo para habilitar funcionalidades como Back in Stock.

Configuração do lado do SFCC

Antes de podermos nos comunicar com o OCAPI do SFCC, algumas permissões e configurações devem ser definidas no SFCC.

1. Navegue até https://account.demandware.com/dw/account/APIAdmin e adicionar um cliente de API para o Klaviyo. O ID e a senha do cliente da API serão necessários para gerar o token de portador para a OCAPI.
2. Depois que o cliente da API for adicionado, navegue até Administration > Site Development > Open Commerce API Settings no SFCC Business Manager.
3. Adicione os seguintes snippets, substituindo a versão da API e o ID do cliente. Oferecemos suporte às versões 19.5 e superiores da API, bem como à versão 18.8. Substitua CLIENT_ID pelo API Client ID gerado a partir da configuração do cliente da API na etapa anterior (deve ser algo como "xxxxxxxx-xxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"). Se as configurações já existirem para essas APIs, talvez seja necessário apenas adicionar as seções destacadas abaixo à matriz JSON dos clientes existentes.
   1. 1. 1. Adicione o seguinte JSON sob o tipo Shop e o contexto Global (em toda a organização), substituindo SHOP_API_VERSION pela versão da API Shop da OCAPI e, em seguida, clique em Save (Salvar).
            

            {
             "_v":"SHOP_API_VERSION",
             "clientes":[
             {
             "client_id":"CLIENT_ID",
             "recursos":[
             {
             "resource_id":"/order_search",
             "methods":["post"],
             "read_attributes":"(**)",
             "write_attributes":"(**)"
             }
             ]
             }
             ]
             }
            

            Depois de adicionadas, as configurações devem ser semelhantes a estas:
            
         2. Adicione o seguinte JSON sob o tipo Data e contexto Global (em toda a organização), substituindo DATA_API_VERSION pela versão da API de dados OCAPI e clique em Save (Salvar).
            

            {
             "_v":"DATA_API_VERSION",
             "clientes":[
             {
             "client_id":"CLIENT_ID",
             "recursos":[
             {
             "resource_id":"/product_search",
             "methods":["post"],
             "read_attributes":"(**)",
             "write_attributes":"(**)"
             },
             {
             "resource_id":"/sites",
             "methods":["get"],
             "read_attributes":"(**)",
             },
             {
             "resource_id":"/products/*/variations",
             "methods":["get"],
             "read_attributes":"(**)",
             }
             ]
             }
             ]
            }

            Depois de adicionadas, as configurações devem ser semelhantes a estas:
            
4.  

Configuração do lado do Klaviyo

1. Em Klaviyo, clique no nome de sua conta no canto inferior esquerdo e navegue até integrações > Add integrações.
2. Procure o Salesforce Commerce Cloud, clique no cartão e, em seguida, clique em Instalar.
3. Clique em Connect to Salesforce Commerce Cloud na página de destino. 
4. Na próxima página, preencha as seguintes informações: 
   • URL da loja
     O domínio do seu site (por exemplo, example.com ou dev03-na01-example.demandware.net).
   • Token de autenticação
     Crie um token de autenticação para essa integração que será usado para solicitar um token de portador. O token de autenticação é gerado pela codificação base-64 do ID do cliente e da senha, unidos por dois pontos (por exemplo, xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxx:password).
   • Versão da API de dados
     A versão de sua API de dados para a qual o senhor adicionou acesso na etapa de configuração do lado SFCC (por exemplo, v19_10).
   • Versão da API da loja
     A versão de sua Shop API para a qual o senhor adicionou acesso na etapa de configuração do lado SFCC (por exemplo v19_10).
   • ID do catálogo
     O ID do catálogo SFCC a ser sincronizado com o Klaviyo (por exemplo, storefront-catalog-en).
     
5. Depois de inserir essas credenciais, clique no link Retrieve list of sites (Recuperar lista de sites ) para recuperar uma lista de sites em sua instância SFCC.
6. Depois que os sites forem recuperados, selecione o(s) site(s) a ser(em) integrado(s) a essa conta e clique em Complete setup (Concluir configuração). Sua integração deve começar a sincronizar seus dados de pedidos, catálogos e clientes.

Teste sua integração com SFCC

Para testar a configuração do cartucho, acesse seu site e siga estas instruções:

1. Faça um cookie para o senhor adicionando o parâmetro url utm_email como seu endereço de e-mail à barra de endereços. Por exemplo: https://www.example.com/?utm_email=your@email.com.
2. Pesquise em seu catálogo.
3. Exibir uma página de categoria.
4. Exibir uma página de produto.
5. Adicione um item ao seu carrinho.
6. Faça um pedido de teste.
7. Navegue pelo Analytics > Metrics no Klaviyo e, em seguida, procure as métricas provenientes do Salesforce Commerce Cloud.

Teste os seletores de campo de e-mail do Klaviyo

Para testar se um determinado campo de e-mail foi direcionado adequadamente e está identificando corretamente o usuário para a Klaviyo:

1. Abra uma janela anônima do navegador.
2. No Console do desenvolvedor, digite o seguinte comando e pressione Enter:
   klaviyo.isIdentified();
   Isso deve resultar no seguinte resultado:
   Promessa {<fulfilled>: false}
3. Digite um endereço de e-mail no campo de destino e clique na tecla tab para mudar o foco para qualquer outro elemento da página.
4. Volte ao Console do desenvolvedor e digite klaviyo.isIdentified(); novamente. Isso deve resultar no seguinte resultado:
   Promessa {<fulfilled>: true}
5. Para verificar se o Klaviyo está realmente recebendo chamadas de identificação, acesse Analytics > Metrics no Klaviyo e localize o feed de atividades dos eventos Active on Site, onde deverá ver listado o(s) endereço(s) de e-mail que você inseriu.

Testar o seletor de campo do e-mail de checkout

Para testar se o campo de coleta de e-mail de checkout está acionando com êxito o evento Started Checkout :

1. Adicione um ou mais produtos ao carrinho e, em seguida, inicie o checkout.
2. No checkout, digite um endereço de e-mail no campo de destino e clique na tecla tab para mudar o foco para qualquer outro elemento da página.
3. O senhor pode verificar se a Klaviyo está realmente recebendo chamadas de identificação acessando Analytics > Metrics na Klaviyo e encontrando o feed de atividades dos eventos de Checkout Iniciado, onde deverá ver que seu evento recente foi rastreado.

Resultado

O senhor já integrou o Salesforce Commerce Cloud ao Klaviyo e testou sua integração.

Recursos adicionais 

• Referência de dados do Salesforce Commerce Cloud
• Como atualizar seu cartucho do Salesforce Commerce Cloud
• Com que frequência as integrações sincronizam a referência