Guia de introdução ao Salesforce Commerce Cloud

O que você vai aprender

Saiba como integrar o Salesforce Commerce Cloud ao Klaviyo. A integração de cartridge e API do Klaviyo permite que sites que usam o Salesforce Commerce Cloud (antes Demandware) se conectem rapidamente e enviem dados em tempo real e históricos ao Klaviyo. Quando você integrar o Klaviyo ao Salesforce Commerce Cloud (SFCC), o Klaviyo começará a rastrear em tempo real ações que as pessoas realizam, como navegação no site, rastreamento de pesquisa, visualização de produtos, visualização de categorias, adição de itens ao carrinho, checkout e pedidos.

Há 3 etapas principais para integrar o SFCC ao Klaviyo:

1. Instalando o cartucho da Klaviyo no SFCC.
2. Como adicionar snippets de ativação ao SFCC.
3. Habilitando a integração do SFCC OCAPI na Klaviyo.

Antes de começar

A Klaviyo se integra a sites SFCC baseados em Controller Site Genesis (SG) e Storefront Reference Architecture (SFRA). Cada framework exige uma configuração de cartucho e snippets um pouco diferente, descritos abaixo.

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

Se você quiser começar integrando primeiro o seu ambiente de desenvolvimento, pode criar uma conta vinculada da Klaviyo 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 você usar ao configurar a conta, para diferenciar melhor entre as contas ao fazer login.

Também é recomendável adicionar os IPs da Klaviyo à lista de permissões do seu provedor de firewall para minimizar problemas de autenticação e configuração. Para mais informações, consulte a lista Como permitir a integração com a Klaviyo e os endereços IP de tráfego.

Configurar os cartuchos da Klaviyo

Baixe os cartuchos

Você pode encontrar nossa lista de apps no Salesforce AppExchange. No AppExchange, você pode saber mais sobre a Klaviyo e clicar em Obtenha agora para ser direcionado ao Github, onde nossos cartuchos estão disponíveis em um arquivo zip para download. Se você tiver um site SFRA, baixe o arquivo zip KlaviyoSFRA e, se tiver um site Site Genesis, baixe o arquivo zip KlaviyoSG.

Você vai precisar configurar 2 cartuchos, ambos incluídos no arquivo zip que você baixou. Esses cartuchos incluem:

• int_klaviyo ou int_klaviyo_sfra: um cartridge específico do site; int_klaviyo é para sites baseados em Site Genesis, e int_klaviyo_sfra é para sites baseados em 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 fiquem disponíveis para vincular à sua instância do SFCC.

No VS Code

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 pastas irmãs das outras pastas de cartridge.

No Eclipse

1. Navegue até Administração > Importar > Geral > Projetos existentes no espaço de trabalho.
2. Importe o diretório int_klaviyo_core usando o assistente de importação.
3. Selecione a instância do SFCC à qual deseja conectar o cartridge.
4. Selecione Propriedades.
5. Selecione Referências do projeto.
6. Confira no cartucho int_klaviyo_core.
7. Repita as etapas 2 a 6 para o outro cartucho específico do seu framework (int_klaviyo ou int_klaviyo_sfra).

Adicione os cartuchos ao caminho de cartuchos

Depois que os cartuchos forem importados, você precisa adicioná-los à lista de cartuchos usados pelo seu site usando o Gerente de negócios da SFCC.

1. Navegue até Administração > Sites > Gerenciar sites.
2. Selecione seu site.
3. Selecione a aba Configurações.
4. No início do caminho do cartucho no campo de entrada rotulado como 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 Aplicar.

Depois de clicar em Aplicar, você já deve ver os 2 cartuchos no início do campo chamado Caminho efetivo do cartucho.

Adicionar serviços

Depois de importar os cartridges e adicioná-los ao caminho de cartridge do site, o Klaviyo Service precisa ser adicionado para permitir a configuração de definições do cartridge. No diretório raiz do arquivo zip dos cartridges da Klaviyo, há outro arquivo zip chamado metadata.zip. As instruções a seguir farão referência a este arquivo zip.

1. Navegue até Administração > Desenvolvimento do site > Importação e exportação do site > Serviços.
2. Faça upload e, em seguida, importe o arquivo metadata.zip.
   

3. Quando for solicitado que você confirme se deseja importar o arquivo selecionado, selecione OK.
4. Agora você deve ver a importação em execução na seção Status, perto da parte inferior da página.
   

5. Agora você terá acesso a uma página de preferências em Ferramentas do comerciante > Preferências do site > Preferências personalizadas > Klaviyo.
   
   A partir daqui, você pode gerenciar as seguintes configurações:

• Klaviyo ativado
  Deve estar definido como "Sim" para ativar o cartucho.
• Chave privada da Klaviyo
  Uma chave privada de API da Klaviyo. Garanta que a chave de API da Klaviyo que você usa para essas integrações tenha recebido acesso total.
• Conta da Klaviyo
  Sua chave de API pública da Klaviyo, ou Site ID.
• Rotular eventos como SFCC
  Se você optar por rotular eventos como SFCC, terá acesso a fluxos pré-criados no Klaviyo usando dados do SFCC. Uma desvantagem atual de rotular eventos é que, se você optar por rotulá-los, não terá acesso às recomendações de Visualizou o produto ou Adicionou ao carrinho no feed de produtos do Klaviyo.
  
  • Se você instalou anteriormente uma versão de cartridge anterior à 23.7.0 e agora está atualizando para a versão 23.7.0 ou posterior, defina como Não. As integrações criadas antes de 13/07/2023 (isto é, versões de cartridge anteriores à 23.7.0) geram métricas que não são rotuladas como SFCC. Se você usou uma versão anterior à 23.7.0 no passado, essa configuração considera as convenções de nomenclatura antigas para evitar uma descontinuidade dos dados de métricas na sua conta.
• Enviar evento de adição ao carrinho como "Adicionar ao carrinho"
  Se você instalou anteriormente uma versão do cartridge anterior à 23.7.0 e agora está atualizando para a versão 23.7.0 ou superior, defina como Sim. Caso contrário, defina como Não. Essa configuração evita a descontinuidade dos dados de métrica na sua conta.
• Seletores de campo de e-mail da Klaviyo e Seletor de campo de e-mail do checkout
  Consulte a seção abaixo para obter informações detalhadas sobre como configurar esses 2 campos.
• Tipo de imagem
  O tipo de imagem do produto que você quer usar nos dados de evento enviados para a Klaviyo. Se você não tiver certeza de qual tipo de imagem definir, acesse Ferramentas do lojista > Produtos e catálogos > Produtos, clique em um produto e determine qual tipo de visualização você quer usar com base no que estiver disponível (por exemplo, grande, médio, pequeno, alta resolução).
• ID da lista de e-mail de marketing
  Você pode coletar assinantes de e-mail no checkout e sincronizá-los com uma lista do Klaviyo. Essa configuração é o ID da lista no Klaviyo à qual você quer adicionar assinantes de e-mail. Saiba como encontrar o ID de uma lista no Klaviyo. Para coletar assinantes de e-mail no checkout, você também precisará adicionar um snippet de caixa de seleção, que é descrito em uma seção posterior.
• ID da lista de SMS de marketing
  Você pode coletar assinantes de SMS no checkout e sincronizá-los com uma lista da Klaviyo. Essa configuração é a ID da lista do Klaviyo à qual você quer adicionar assinantes de SMS. Saiba como encontrar um ID de lista na Klaviyo. Se você reúne assinantes de SMS e de e-mail, escolha uma lista diferente para SMS e outra para e-mail. Assim, o consentimento sempre será atribuído corretamente ao canal certo. Para coletar assinantes de SMS no checkout, você vai precisar de alguns outros pré-requisitos, além de um snippet de checkbox, que são descritos em uma seção posterior.
  

6. O arquivo metadata.zip também criará um novo serviço no SFCC. Ao navegar até Administração > Operações > Serviços, agora você deve ver duas novas entradas na aba Serviços chamadas KlaviyoEventService e KlaviyoSubscribeProfilesService, cada uma com suas respectivas entradas de perfil e credenciais.

Configurar seletores de campo de e-mail do Klaviyo e seletor de campo de e-mail do checkout

Essas preferências são essenciais para a Klaviyo identificar e rastrear visitantes do site com sucesso. Se um visitante não for identificado pela Klaviyo, nenhum evento será rastreado para esse visitante. Quando terminar a integração, você pode aprender como testar sua configuração do Klaviyo Email e o seletor de campo de e-mail do checkout na seção Teste sua configuração do SFCC abaixo.

Seletores de campo do Klaviyo Email

A preferência do site Seletores de campo do Klaviyo Email é usada para segmentar todos e quaisquer campos de dados de e-mail e número de telefone no site (com exceção do campo de e-mail localizado no checkout, que é abordado abaixo). Identificamos esses campos por meio de seletores CSS padrão, sendo que cada um é 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 estilos padrão para segmentar um elemento específico pode ser usado. Por exemplo: #dwfrm_login div.username input.input-text é aceitável, assim como seletores que podem segmentar vários elementos no site com base em atributos compartilhados, como input[type=email]. Evite segmentar entradas por IDs gerados dinamicamente — um caso muito comum no SiteGen —, pois esses IDs mudam com base no carregamento da página e, portanto, falham (por exemplo: #dwfrm_login_username_d0fignzngiyq).

Observe que campos adicionados ao DOM após o carregamento da página ainda podem ser segmentados. Alguns exemplos disso incluem um campo de endereço de e-mail que é inserido em um modal após uma chamada AJAX ou um 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 suas configurações de SMS na sua conta Klaviyo (se o SMS estiver ativado e você tiver um número de envio associado ao país do número de telefone informado, o navegador será identificado). Assim, adicionar seletores de CSS para direcionar campos de número de telefone pode ser considerado algo “bom de ter” ou “conforme necessário”, enquanto adicioná-los para campos de e-mail deve ser considerado essencial.

Seletor do campo de e-mail do checkout

O campo de coleta de e-mail no checkout é um caso especial e, por isso, tem sua própria preferência do site para segmentação. O princípio funciona exatamente da mesma forma que a preferência do site Seletores de campos de e-mail do Klaviyo: 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 fim ou no meio do checkout.

Configurar com sucesso essa preferência do site para direcionar o campo de coleta de e-mail no checkout é essencial para rastrear corretamente o evento Started Checkout e, por isso, é altamente recomendado que você teste para garantir que os eventos Started Checkout apareçam na 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 do checkout segmentado pela preferência do 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 é necessário incluir o seletor de CSS do campo de e-mail do checkout nas preferências do site Klaviyo Email Field Selectors e Checkout Email Field Selector).

Adicionar snippets de configuração

A última parte da configuração do cartridge é adicionar os snippets aos arquivos de modelo do seu site para permitir que o cartridge se comunique com o site. Essas etapas diferem bastante para as infraestruturas Site Genesis (SG) e Storefront Reference Architecture (SFRA), então confira se está seguindo as instruções corretas para sua configuração.

Configuração de snippet para Storefront Reference Architecture (SFRA)

Adicione o seguinte código ao final do arquivo pageFooter.isml:

<isinclude template="klaviyo/klaviyoFooter"/>

Você 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 código a seguir na parte inferior do seu arquivo footer.isml (ou de qualquer modelo semelhante que seja carregado perto da parte inferior de todas as páginas).
   

<isinclude template="klaviyo/klaviyoFooter"/>

1. Para adicionar snippets para identificação de usuário no lado do servidor: adicione o snippet a seguir aos seus controllers conta-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();
    }
    // END KLAVIYO

1. Em seguida, você vai atualizar a chamada app.getView(...) para incluir klid como uma variável pdict.
   • No seu controller Conta-Show:
     

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

• No seu controlador Cart-Show:
  

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

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

 /* Klaviyo Added to Cart event tracking */
    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;
    if (exchangeID) {
    currentBasket = BasketMgr.getCurrentBasket();
    if (currentBasket && currentBasket.getProductLineItems().toArray().length)
    {
    dataObj = addedToCartData.getData(currentBasket);
    serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.addedToCart,
    false);
    if (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);
    }
    }
    }
    }
    /* END Klaviyo Added to Cart event tracking */

1. Snippets de Iniciou o checkout: ao adicionar snippets do Klaviyo aos controladores de checkout para rastrear eventos de Iniciou o checkout , é importante ter o seguinte em mente:
   • O objetivo de adicionar esses snippets é verificar se um endereço de e-mail foi anexado ao objeto Basket dentro do fluxo de checkout e, quando ele for anexado, disparar o evento Started Checkout . É importante detectar a associação de um endereço de e-mail com o Basket o mais cedo possível no fluxo de checkout.
   • Devido à personalização de checkout baseada no site, não é possível para o 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 snippet de código a todas as principais rotas acionadas no checkout. Se você conseguir usar o depurador para identificar exatamente quando o endereço de e-mail é anexado ao carrinho no seu fluxo de checkout, fique à vontade para adicionar os snippets apenas a essa rota, mas faça testes completos para garantir que todos os caminhos possíveis do checkout (como convidado, com login, fazendo login durante o checkout etc.) acionem o código.
2. O snippet para o primeiro acesso de rota no checkout (normalmente COCustomer-Start) é o seguinte. Insira-o em qualquer lugar antes da chamada para renderizar o modelo (isto é, app.getView(...)). Observe a principal diferença neste 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 snippet abaixo, o método KLCheckoutHelpers.startedCheckoutHelper é true em vez de false (como nos outros snippets de checkout). Isso é essencial para que o código saiba que temos um novo evento Checkout iniciado para rastrear.

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

1. 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');

1. Os snippets a seguir devem ser adicionados à primeira rota que dispara depois que um endereço de e-mail for anexado ao objeto Basket. Se você não tiver certeza ou simplesmente quiser se precaver, recomendamos adicionar esse snippet a todas as seguintes rotas: como nos snippets acima, adicione este snippet em qualquer lugar antes da chamada para renderizar o modelo ou antes das chamadas para controladores subsequentes (exemplo de COBilling-Save: app.getController(‘COSummary’).Start()).
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Save
   • COPlaceOrder-Start

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

1. Para rotas que chamam modelos diretamente (por exemplo, COShipping-Start), atualize a chamada app.getView(...) para incluir klid como uma variável pdict. Veja um exemplo para a 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');

1. Para adicionar o snippet de Confirmação de pedido ao controller COSummary-ShowConfirmation: adicione o snippet a seguir ao seu controller COSummary-ShowConfirmation em qualquer lugar antes da chamada para renderizar o modelo.

/* Klaviyo Order Confirmation event tracking */
  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) {
// check to see if the status is new or created
  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) {
  // NOTE: Klaviyo only accepts phone numbers that include + and the country code
  at the start (ex for US: +16465551212)
  // in order to successfully get users subscribed to SMS list you must collect
  the country code in your order phone number field!
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 Subscription requested by user, but an invalid phone number
  was provided. Phone number: ${phone}`);
}
phone = null;
}
}
if (email || phone) {
klaviyoUtils.subscribeUser(email, phone);
}
}
}
}
/* END Klaviyo Order Confirmation event tracking */

Agora você concluiu a configuração de snippets para sua loja Site Genesis.

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

Para coletar consentimento no checkout para e-mail e SMS, você precisará incluir snippets de código para que as caixas de seleção de consentimento apareçam onde desejar, além de configurar as definições de ID da lista indicadas 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.

A seguir, estão os trechos de ISML para Site Genesis e SFRA, e eles podem ser colocados em qualquer ponto do fluxo de checkout que seja mais adequado para o seu site específico. Observe que, para o consentimento no checkout funcionar corretamente no Site Genesis, você deve ter incluído o trecho de Confirmação do pedido referenciado na seção Adicionar trechos de configuração acima.

Os snippets abaixo pressupõem que sua linguagem de consentimento para e-mail e SMS esteja contida em um pacote de recursos de propriedades chamado 'checkout'. Você precisará substituir `your.email.subscribe.resource.string.here` e `your.sms.subscribe.resource.string.here` pelas chaves correspondentes à sua linguagem de consentimento para e-mail e SMS, respectivamente. Essa linguagem aparecerá ao lado da caixa de seleção.

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

• E-mail
  Inscreva-se para receber atualizações por e-mail
• SMS
  Inscreva-se para receber atualizações por SMS. Ao marcar esta caixa e inserir seu número de telefone, você aceita receber mensagens marketing (como [códigos promocionais] e [lembretes de carrinho]) da [nome da empresa] no número fornecido, inclusive mensagens automáticas. O consentimento não é uma condição para compras. Sujeito a taxa de mensagens e dados. A frequência das mensagens pode variar. Você pode cancelar a inscrição a qualquer momento. Basta responder STOP ou clicar no link de cancelamento de inscrição, se disponível. 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)}

Habilite a integração do OCAPI na Klaviyo

Pontos de extremidade

Para integrar ao SFCC para catálogo de produtos e dados históricos/em andamento de pedidos, o Klaviyo usa quatro ponto de extremidade do OCAPI:

• /order_search
  Sincroniza dados históricos de pedidos para o Klaviyo e sincroniza eventos contínuos de pedido a cada 60 minutos. Os eventos Ordered Product e Placed Order vão sincronizar dados adicionais para segmentação e filtro de fluxo e são ideais para personalização avançada não disponível no evento Order Confirmation. Para e-mails de confirmação de pedido em tempo real, use o evento Order Confirmation do cartridge.
• /sites
  Permite que você selecione de qual site a Klaviyo sincroniza dados durante a configuração da sua integração.
• /product_search
  Conecta seu catálogo à Klaviyo para ativar funcionalidades, incluindo recomendações de produtos em e-mails.
• /products/*/variations
  Permite sincronizar variantes com o Klaviyo para habilitar funcionalidades como reposição de estoque, estoque baixo e fluxos de queda de preço.

Configuração no lado do SFCC

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

Observe que, embora a integração da Klaviyo exija permissões POST para order_search e product_search, na verdade não estamos postando dados no SFCC; isso se deve ao design do OCAPI do SFCC.

1. Navegue até https://account.demandware.com/dw/account/APIAdmin e adicione um cliente de API para a Klaviyo. O ID do cliente de API e a senha serão necessários para gerar o token de portador para o OCAPI.
2. Depois que o cliente de API for adicionado, navegue até Administração > Desenvolvimento do site > Configurações da API Open Commerce no Gerente de negócios do SFCC.
3. Adicione os snippets a seguir, substituindo a versão da API e o ID do cliente. Oferecemos suporte às versões 19.5 e superiores da API, bem como à 18.8. Substitua CLIENT_ID pelo ID do cliente de API gerado na configuração do cliente de API na etapa anterior (isso deve ter uma aparência parecida com "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"). Se as configurações já existirem para essas APIs, talvez você só precise adicionar as seções destacadas abaixo ao array JSON de clientes existente.
   1. Adicione o JSON a seguir em tipo Shop e contexto Global (em toda a organização), substituindo SHOP_API_VERSION pela sua versão da Shop API do OCAPI e, em seguida, clique em Salvar.
      Depois de adicionar, as configurações devem aparecer assim:
      

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

1. Adicione o seguinte JSON no tipo Dados e no contexto Global (em toda a organização), substituindo DATA_API_VERSION pela sua versão da API de Dados da OCAPI e, em seguida, clique em Salvar.
   Depois de adicionar, as configurações devem aparecer assim:
   

{
 "_v":"DATA_API_VERSION",
 "clients":[
 {
 "client_id":"CLIENT_ID",
 "resources":[
 {
 "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":"(**)",
 }
 ]
 }
 ]
}

Configuração no lado da Klaviyo

1. Na Klaviyo, selecione Integrações > Adicionar integrações.
2. Pesquise por Salesforce Commerce Cloud e clique no cartão; em seguida, clique em Instalar.
3. Na landing page, clique em Conectar-se à Salesforce Commerce Cloud.
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-xxxxxxxxxxxx:password).
   • Versão da API de dados
     A versão da sua API de dados para a qual você adicionou acesso na etapa Configuração no lado do SFCC (por exemplo, v19_10).
   • Versão da Shop API
     A versão da sua Shop API para a qual você adicionou acesso na etapa de configuração no lado do SFCC (por exemplo, v19_10).
   • ID do catálogo
     A ID do catálogo do SFCC a ser sincronizado com o Klaviyo (por exemplo, storefront-catalog-en). Você pode encontrar seu ID do catálogo no Salesforce Business Manager em Ferramentas do comerciante > Produtos e catálogos > Catálogos.
     

5. Depois de inserir essas credenciais, clique no link Recuperar lista de sites para recuperar uma lista de sites na sua instância do SFCC.
6. Depois que os sites forem recuperados, selecione o(s) site(s) para integrar com esta conta e clique em Concluir configuração. Sua integração agora deve começar a sincronizar seus dados de pedidos, catálogo e clientes.

Teste sua integração do SFCC

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

1. Crie um cookie para si mesmo adicionando o parâmetro de URL utm_email com o seu endereço de e-mail na barra de endereço. Por exemplo: https://www.example.com/?utm_email=your@email.com.
2. Pesquise seu catálogo.
3. Veja uma página de categoria.
4. Ver uma página de produto.
5. Adicione um item ao carrinho.
6. Faça um pedido de teste.
7. Navegue até Análises > Métricas no Klaviyo e procure por métricas do Salesforce Commerce Cloud.

Testar seletores de campo de Klaviyo Email

Para testar se um determinado campo de e-mail foi segmentado corretamente e se está identificando o usuário corretamente para o 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 na seguinte saída:
   Promise {<fulfilled>: false}
3. Digite um endereço de e-mail no campo de destino e pressione a tecla Tab para mudar o foco para qualquer outro elemento na página.
4. Volte ao console do desenvolvedor e insira klaviyo.isIdentified(); novamente. Isso deve resultar na seguinte saída:
   Promise {<fulfilled>: true}
5. Você pode confirmar que o Klaviyo está realmente recebendo chamadas Identify acessando Análises > Métrica no Klaviyo e encontrando o feed de atividades dos eventos com atividade no site, onde você deve ver o(s) endereço(s) de e-mail que você inseriu listado(s).

Testar seletor de campo de e-mail do checkout

Para testar se o campo de coleta de e-mail no checkout está acionando corretamente 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 correspondente e pressione a tecla Tab para mudar o foco para qualquer outro elemento na página.
3. Você pode confirmar se a Klaviyo está mesmo recebendo chamadas Identify acessando Análises > Métricas na Klaviyo e encontrando o feed de atividades de eventos Iniciou checkout, em que você deve ver que o evento mais recente foi rastreado.

Resultado

Agora você integrou o Salesforce Commerce Cloud ao Klaviyo e testou sua integração.

Recursos adicionais