Primeiros passos com o Salesforce Commerce Cloud – Klaviyo - Help Center - BR

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 integrar o SFCC ao Klaviyo:

Instalação do cartucho Klaviyo no SFCC.
Adição de snippets de capacitação ao SFCC.
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.

Você está usando um cartucho SFCC da Klaviyo abaixo da versão 23.7.0? A versão 23.7.0 e superior inclui vários recursos adicionais, uma instalação pronta para uso mais completa e melhorias relacionadas à experiência do desenvolvedor. Se quiser fazer upgrade, leia Como fazer upgrade do seu cartucho Salesforce Commerce Cloud.

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, você 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 você usa ao configurar a conta, a fim de diferenciar melhor entre as contas quando conectado.

Também é recomendável adicionar 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 Klaviyo

Faça o download dos cartuchos

Você pode encontrar nossa lista de aplicativos no Salesforce AppExchange. No AppExchange, você pode saber mais sobre a 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 você tiver um site SFRA, baixe o arquivo zip da Klaviyo SFRA e, se tiver um site Site Genesis, baixe o arquivo zip da Klaviyo SG.

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

Copie e cole o cartucho int_klaviyo_core.
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

Navegue até Administration > Import > General > Existing Projects into Workspace.
Importe o diretório int_klaviyo_core usando o assistente de importação.
Selecione a instância SFCC com a qual o cartucho será conectado.
Selecione Properties (Propriedades).
Selecione Project References.
Verifique o cartucho int_klaviyo_core.
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.

Navegue até Administration > Sites > Manage Sites.
Selecione seu site.
Selecione a guia Settings (Configurações ).
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).
Clique em Apply (Aplicar).

Depois de clicar em Aplicar, você verá os 2 cartuchos no início do campo rotulados 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.

Navegue até Administration > Site Development > Site Import & Export > Services.
Faça upload e, em seguida, importe o arquivo metadata.zip.
Quando for solicitado que o senhor confirme se deseja importar o arquivo selecionado, selecione OK.
Agora você verá a importação sendo executada na seção Status, próxima à parte inferior da página.
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 daí, você pode gerenciar as seguintes configurações:
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.

Configurando Seletores de Campos de E-mail da Klaviyo e Seletor de Campos de E-mail de 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 na Klaviyo, nenhum evento será rastreado para esse visitante. Depois de concluir a integração, você pode aprender a testar o seletor de campos de e-mail e checkout da Klaviyo na seção Teste sua configuração de 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 dados de e-mail e número de telefone no site (com exceção da entrada de e-mail localizada em 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 os seletores que podem direcionar vários elementos no site com base em atributos compartilhados, por exemplo, input[type=E-mail]. 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 E-mail em 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 tenha como alvo o campo de endereço de e-mail no fluxo 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 segmentar o campo de coleta de e-mails no checkout é essencial para rastrear corretamente o evento Checkout Iniciado e, portanto, é altamente recomendável que você faça um teste para garantir que os eventos de Checkout Iniciado apareçam na Klaviyo depois que um endereço de e-mail for inserido no campo de coleta de e-mails no checkout.

Observe também que o campo checkout E-mail visado 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 checkout E-mail 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"/>

Você concluiu a configuração do snippet para sua loja SFRA.

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

Para adicionar o KlaviyoFooter.isml ao rodapé global: Adicione o seguinte código à parte inferior do seu arquivo footer.isml (ou qualquer modelo semelhante que seja carregado perto da parte inferior de cada página).
```
<isinclude template="klaviyo/klaviyoFooter"/>
```
Para adicionar snippets para identificação do usuário no servidor: Adicione o snippet a seguir aos 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
```

Em seguida, você atualizará a chamada app.getView(...) para incluir o klid como uma variável predita.

No seu controlador Account-Show:

app.getView({downloadAvailable: true, klid: klid}).render('account/accountoverview');
// KLAVIYO: adicionado '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');

Para adicionar o snippet Adicionado ao Carrinho 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 */

Snippets de Checkout Iniciado: Ao adicionar snippets da Klaviyo aos controladores de checkout para rastrear eventos de Checkout Iniciado , é importante ter em mente o seguinte:
Segue o snippet da primeira rota atingida no checkout (normalmente COCUSTOMER-Start). Insira-o em qualquer lugar antes da chamada para renderizar o modelo (ou seja, app.getView(...)). Observe a principal diferença nesse snippet — aprovando o primeiro argumento KLCheckoutHelpers.startedCheckoutHelper como verdadeiro em vez de falso — em comparação com os outros snippets de checkout (destacados abaixo). Observe que no snippet abaixo, o KLCheckoutHelpers.startedCheckoutHelper O método é verdadeiro em vez de falso (como nos outros snippets de checkout). Isso é essencial para que o código saiba que temos um novo evento Checkout Iniciado 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 */
```

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

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

Os snippets a seguir devem ser adicionados à primeira rota que é acionada depois que um endereço de e-mail é anexado ao objeto Cesto. Se não tiver certeza, ou simplesmente quiser cobrir suas bases, recomendamos adicionar esse snippet a todas as seguintes rotas: Como nos snippets acima, adicione esse snippet em qualquer lugar antes da chamada para renderizar o modelo, ou antes de 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 */
```

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

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 */

Você concluiu a configuração do snippet para sua loja do Site Genesis.

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

Observe os seguintes pré-requisitos para sincronizar o consentimento por SMS no checkout com o Klaviyo:

Ative o SMS na Klaviyo e configure 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) dentro do SFRA ou colocados no modelo billing.isml (app_storefront_core) dentro do 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 assumem que seu idioma de inscrição para e-mail e SMS está contido 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` com as chaves correspondentes ao seu idioma de inscrição em 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 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)}

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 a Klaviyo e sincroniza eventos de pedidos em andamento a cada 60 minutos. Os eventos Produto Encomendado e Pedido Realizado 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 Confirmação de Pedido. Para e-mails de confirmação de pedido em tempo real, use o evento Confirmação de pedido do cartucho.
/sites Permite que você selecione o site do qual a Klaviyo sincroniza os dados durante a configuração da integração.
/product_search Conecta seu catálogo à Klaviyo para habilitar a funcionalidade, incluindo recomendações de produtos em e-mails.
/products/*/variantes Habilita a sincronização de variantes com a Klaviyo para habilitar funcionalidades como reposição de estoque, estoque baixo e fluxos de queda de preço.

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.

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

Navegar para https://account.demandware.com/dw/account/APIAdmin e adicione um cliente de API para a Klaviyo. A ID e a senha do cliente da API serão necessárias para gerar o token de acesso para OCAPI.
Depois que o cliente da API for adicionado, navegue até Administration > Site Development > Open Commerce API Settings no SFCC Business Manager.
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. Adicione o seguinte JSON sob o tipo Shop e contexto Global (em toda a organização), substituindo SHOP_API_VERSION pela sua versão OCAPI Shop API e, em seguida, clique em Salvar. Depois de adicionadas, as configurações devem parecer semelhantes a esta:
```
{
 "_v":"SHOP_API_VERSION",
 "clientes":[
 {
 "client_id":"CLIENT_ID",
 "recursos":[
 {
 "resource_id":"/order_search",
 "methods":["post"],
 "read_attributes":"(**)",
 "write_attributes":"(**)"
 }
 ]
 }
 ]
 }
```
2. Adicione o seguinte JSON sob o tipo Data and context Global (organization-wide), substituindo DATA_API_VERSION pela sua versão OCAPI Data API e, em seguida, clique em Save. Depois de adicionadas, as configurações devem parecer semelhantes a esta:

{
 "_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":"(**)",
 }
 ]
 }
 ]
}

Configuração do lado do Klaviyo

Na Klaviyo, selecione Integrations > Add integrations.
Procure o Salesforce Commerce Cloud, clique no cartão e, em seguida, clique em Instalar.
Clique em Conectar-se ao Salesforce Commerce Cloud na landing page.
Na página seguinte, preencha as seguintes informações:
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.
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:

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.
Pesquise em seu catálogo.
Exibir uma página de categoria.
Exibir uma página de produto.
Adicione um item ao seu carrinho.
Faça um pedido de teste.
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:

Abra uma janela anônima do navegador.
No Developer Console, digite o seguinte comando e pressione enter: klaviyo.isIdentified(); Isso deve resultar no seguinte resultado: Promessa {<fulfilled>: false}
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.
Retorne ao Developer Console e insira klaviyo.isIdentified(); de novo. Isso deve resultar no seguinte resultado: Promessa {<fulfilled>: true}
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 :

Adicione um ou mais produtos ao carrinho e, em seguida, inicie o checkout.
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.
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.