primeros pasos con Salesforce Commerce Cloud – Klaviyo - Help Center - MX

Objetivos de aprendizaje

Aprende a integrar Salesforce Commerce Cloud con Klaviyo. El cartucho Klaviyo y las integraciones de interfaz de programación de aplicaciones (API) permiten a los sitios web que utilizan Salesforce Commerce Cloud (antes Demandware) conectarse rápidamente y enviar datos históricos y en tiempo real a Klaviyo. Cuando integres Klaviyo con Salesforce Commerce Cloud (SFCC), Klaviyo empezará a hacer un seguimiento de las acciones que realiza la gente en tiempo real, como la navegación por el sitio web, el seguimiento de las búsquedas, la visualización de productos, la visualización de categorías, la adición de artículos al carrito, el pago y el pedido.

Hay 3 pasos principales para integrar SFCC con Klaviyo:

Instalar el cartucho Klaviyo en SFCC.
Añadir fragmentos de habilitación a SFCC.
Habilitación de las integraciones OCAPI de SFCC en Klaviyo.

Antes de empezar

Klaviyo se integra tanto con los sitios de Génesis del Sitio (SG) basados en el Controlador SFCC como con los de la Arquitectura de Referencia del Escaparate (SFRA). Cada marco requiere una configuración y unos fragmentos de cartucho ligeramente diferentes, que se describen a continuación.

¿Estás usando un cartucho SFCC de Klaviyo inferior a la versión 23.7.0? Las versiones 23.7.0 y superiores incluyen varias funciones adicionales, una instalación más completa e inmediata y mejoras relacionadas con la experiencia del desarrollador. Si deseas actualizar tu plan, lee Cómo actualizar tu cartucho de Salesforce Commerce Cloud.

Para utilizar nuestro cartucho versión 23.7.0 (o cualquier versión superior), te recomendamos actualizar tu modo de compatibilidad SFCC a 21.7 o superior.

Si deseas empezar integrando primero tu entorno de desarrollo, puedes crear una cuenta de Klaviyo vinculada utilizando el método descrito en este artículo y conectar tu entorno de desarrollo con esa cuenta. Te recomendamos que incluyas la palabra "desarrollador" o "Staging" en el nombre de la empresa que utilices al configurar la cuenta, para diferenciar mejor entre las cuentas cuando inicias sesión.

También te recomendamos añadir las IP de Klaviyo a la lista de permisos de tu proveedor de firewall para minimizar los problemas de autenticación y configuración. Para obtener más detalles, consulta Cómo mostrar las direcciones IP del tráfico de integración de Klaviyo.

Coloca los cartuchos Klaviyo

Descarga los cartuchos

Puedes encontrar nuestra lista de aplicaciones en Salesforce AppExchange. En AppExchange, puedes obtener más información sobre Klaviyo y hacer clic en Obtener ahora para acceder a Github, donde nuestros cartuchos están disponibles en un archivo zip para su descarga. Si tienes un sitio SFRA, descarga el archivo zip de KlaviyoSFRA, y si tienes un sitio de Site Genesis, descarga el archivo zip de KlaviyoSG.

Necesitarás configurar 2 cartuchos, ambos incluidos en el archivo zip que has descargado. Estos cartuchos incluyen:

int_klaviyo o int_klaviyo_sfra: Un cartucho específico del sitio; int_klaviyo es para sitios web basados en Site Genesis, e int_klaviyo_sfra es para sitios web basados en SFRA.
int_klaviyo_core: para ambos tipos de infraestructuras, contiene algunas funciones básicas que se solapan.

importar los cartuchos

El primer paso es importar los cartuchos en Visual Studio Code o Eclipse para que estén disponibles para enlazarlos con tu instancia de SFCC.

En código VS

Copia y pega el cartucho int_klaviyo_core.
Copia las carpetas int_klaviyo (Site Genesis) o int_klaviyo_sfra (SFRA) en la base de código como hermanos de tus otras carpetas de cartuchos.

En Eclipse

Navega hasta Administración > importar > General > Proyectos existentes en el espacio de trabajo.
importa el directorio int_klaviyo_core utilizando el asistente para importar.
Selecciona la instancia SFCC con la que conectar el cartucho.
Selecciona Propiedades.
Selecciona Referencias del proyecto.
Comprueba en el cartucho int_klaviyo_core.
Repite los pasos 2 a 6 para el otro cartucho específico de tu framework (int_klaviyo o int_klaviyo_sfra).

Añade los cartuchos a la ruta de cartuchos

Una vez importados los cartuchos, hay que añadirlos a la lista de cartuchos utilizados por tu centro mediante el Gestor de Empresas de SFCC.

Navega a Administración > Sitios > Gestionar Sitios.
Selecciona tu sitio.
Selecciona la pestaña Configuración.
Al principio de la entrada de la ruta del cartucho etiquetada como Cartuchos, añade los nombres de los cartuchos Klaviyo importados con el cartucho del núcleo en último lugar (ya sea, int_klaviyo:int_klaviyo_core o int_klaviyo_sfra:int_klaviyo_core).
Haz clic en Aplicar.

Una vez que hayas hecho clic en Aplicar, ahora deberías ver los 2 cartuchos al principio del campo etiquetado como Ruta efectiva del cartucho.

Añadir servicios

Tras importar los cartuchos y añadirlos a la ruta de cartuchos del sitio, hay que añadir el Servicio Klaviyo para permitir la configuración de los ajustes del cartucho. En el directorio raíz del archivo zip de los cartuchos Klaviyo hay otro archivo zip llamado metadata.zip. Las siguientes instrucciones harán referencia a este archivo zip.

Navega hasta Administración > Desarrollo del sitio > Importar el sitio & Exportar > Servicios.
Carga y luego importa el archivo metadata.zip.
Cuando se te pida que confirmes si deseas importar el archivo seleccionado, selecciona Aceptar.
Ahora deberías ver la importación ejecutándose en la sección Estado, cerca de la parte inferior de la página.
Ahora tendrás acceso a una página de preferencias en Herramientas de comerciantes > Preferencias del sitio > Preferencias personalizadas > Klaviyo. Desde aquí, puedes administrar la siguiente configuración:
El archivo metadata.zip también creará un nuevo servicio en SFCC. Navegando a Administración > Operaciones > Servicios, ahora deberías ver 2 nuevas entradas en la pestaña Servicios llamadas KlaviyoEventService y KlaviyoSubscribeProfilesService, cada una con sus respectivas entradas de perfil y credenciales.

Configurando los selectores de campos de correo electrónico de Klaviyo y el selector de campos de correo electrónico de pago

Estas preferencias son fundamentales para que Klaviyo identifique y rastree correctamente a los visitantes de tu sitio. Si Klaviyo no identifica a un visitante, no se realizará un seguimiento de ningún evento para ese visitante. Una vez que hayas terminado de realizar la integración, podrás aprender a probar la configuración del selector de campos de correo electrónico de pago y correo electrónico de Klaviyo en la sección Prueba la configuración de tu SFCC que aparece a continuación.

Klaviyo Email Selectores de campo

La preferencia del sitio Klaviyo Email Field Selectors se utiliza para orientar todos y cada uno de los campos de correo electrónico y número de teléfono del sitio (a excepción de la entrada de correo electrónico situada en la página de pago, que se trata más adelante). Identificamos estos campos mediante selectores CSS estándar, y cada uno de ellos se añade individualmente a las preferencias del sitio (que es un "Conjunto de cadenas", que permite introducir múltiples valores de cadena uno a uno). Se puede utilizar cualquier selector complejo que pueda usarse en una hoja de estilos estándar para dirigirse a un elemento específico, por ejemplo, #dwfrm_login div.username input.input-text es aceptable, al igual que los selectores que pueden dirigirse a varios elementos del sitio basándose en atributos compartidos, por ejemplo, input[type=correo electrónico]. Asegúrate de evitar dirigir las entradas a través de cualquier ID generado dinámicamente -un caso muy común en SiteGen-, ya que esos ID cambiarán en función de la carga de la página y, por tanto, fallarán (por ejemplo, #dwfrm_login_username_d0fignzngiyq).

Ten en cuenta que los campos añadidos al DOM tras la carga de la página pueden seguir siendo objetivo. Ejemplos de ello son un campo de dirección de correo electrónico que se inserta en un modal tras una llamada AJAX, o uno que se inyecta en el DOM mediante JavaScripts de terceros.

Ten en cuenta también que es posible que los campos de número de teléfono por sí solos no identifiquen plenamente al usuario ante Klaviyo, dependiendo de la configuración de los SMS en tu cuenta de Klaviyo (si los SMS están activados y tienes un número de envío asociado al país del número de teléfono introducido, se identificará al navegador). Por lo tanto, añadir selectores CSS a los campos de número de teléfono puede considerarse "útil" o "necesario", mientras que añadirlos a los campos de correo electrónico debe considerarse esencial.

página de pago correo electrónico Selector de campo

El campo de recogida de correo electrónico en la página de pago es un caso especial, y como tal tiene su propia preferencia de sitio para la orientación. El principio funciona exactamente igual que la preferencia del sitio Klaviyo Email Selectores de campo: sólo tienes que introducir un único selector CSS que se dirija al campo de dirección de correo electrónico de la página de pago flujo de tu sitio, independientemente de si aparece al principio, al final o en medio de la página de pago.

Es esencial que configures correctamente esta preferencia de sitio para dirigirte al campo de recopilación de correos electrónicos en la página de pago para realizar un seguimiento correcto del evento Proceso de Pago Iniciado, por lo que te recomendamos encarecidamente que realices pruebas para asegurarte de que los eventos de Proceso de Pago Iniciado aparezcan en Klaviyo después de que se ingresa una dirección de correo electrónico en el campo de recopilación de correos electrónicos en la página de pago.

Ten en cuenta también que el campo página de pago correo electrónico al que se dirige la preferencia de sitio Página de pago correo electrónico Field Selector se cableará automáticamente para identificar al usuario, además de activar el evento Página de pago iniciada (es decir, no es necesario incluir el selector CSS para el campo página de pago correo electrónico en las preferencias de sitio Klaviyo Email Field Selectors y Página de pago correo electrónico Field Selector).

Añadir fragmentos de configuración

La última parte de la configuración del cartucho consiste en añadir los fragmentos a los archivos de plantilla de tu sitio para que el cartucho pueda comunicarse con el sitio. Estos pasos difieren mucho para las infraestructuras Site Genesis (SG) y Storefront Reference Architecture (SFRA), así que asegúrate de seguir las instrucciones correctas para tu configuración.

Configuración del fragmento de la Arquitectura de Referencia del Escaparate (SFRA)

Añade el siguiente código al final de tu archivo pageFooter.isml:

<isinclude template="klaviyo/klaviyoFooter"/>

Ya completaste la configuración del fragmento para tu tienda de SFRA.

Configuración del fragmento de Site Genesis (SG)

Para añadir KlaviyoFooter.isml al pie de página global: Añade el siguiente código en la parte inferior de tu archivo footer.isml (o cualquier plantilla similar que se cargue cerca de la parte inferior de cada página).
```
<isinclude template="klaviyo/klaviyoFooter"/>
```
Añadir fragmentos para la identificación del usuario en el servidor: Añade el siguiente fragmento a tus controladores Account-Show y Cart-Show en cualquier lugar antes de la llamada para mostrar sus plantillas respectivas (es decir, app.getView(...).
```
   // Klaviyo
    var klaviyoUtils = require('*/cartridge/scripts/Klaviyo/utils'), klid;
 if(klaviyoUtils.klaviyoEnabled && 
    !klaviyoUtils.getKlaviyoExchangeID())  // FIN{
    klid = klaviyoUtils.getProfileInfo();
    }
    Klaviyo
```

Luego, actualizarás la llamada a app.getView(...) para incluir klid como variable de pronóstico.

En el controlador de tus Account-Show:

app.getView({downloadAvailable: true, klid: klid}).render('cuenta/accountoverview');
// Klaviyo: añadido 'klid: klid'

En el mando de Cart-Show:

app.getView('Carrito', {cart: app.getModel('Cart').get(),RegistrationStatus: false,klid: klid // KLAVIYO: added 'klid: klid'}).render('página de pago/cart/cart');

Para añadir el fragmento Se Añadió al Carrito al controlador Cart-AddProduct: Añade el siguiente fragmento a tu controlador Cart-AddProduct en cualquier lugar antes de la llamada para mostrar la plantilla (es decir, app.getView(...).

 /* Klaviyo Seguimiento del evento Añadido al carro */
 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 (cestaactual && cestaactual.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 Seguimiento del evento Añadido a la cesta */

Fragmentos de Proceso de Pago Iniciado: Al añadir fragmentos de Klaviyo a los controladores de la página de pago para realizar un seguimiento de los eventos de Proceso de Pago Iniciado , es importante tener en cuenta lo siguiente:
A continuación, se muestra el fragmento de la primera ruta que se muestra en la página de pago (normalmente COComCustomer-Start). Insértalo en cualquier lugar antes de la llamada para mostrar la plantilla (es decir, app.getView(...)). Ten en cuenta la diferencia clave en este fragmento: pasar el primer argumento del método KLCheckoutHelpers.startedCheckoutHelper como verdadero en lugar de falso, en comparación con los otros fragmentos de la página de pago (resaltados a continuación). Ten en cuenta que en el siguiente fragmento, el archivo KLCheckoutHelpers.startedCheckoutHelper El método es verdadero en lugar de falso (como en los otros fragmentos de la página de pago. Esto es esencial para que el código sepa que tenemos un nuevo evento de Proceso de Pago Iniciado para realizar un seguimiento.
```
/* Klaviyo Inicio página de pago evento seguimiento */
 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');
   }
  /* FIN Klaviyo Inicio página de pago evento seguimiento */
```

A continuación, actualiza la llamada a app.getView(...) para incluir klid como variable de producto:

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

Se deben añadir los siguientes fragmentos a la primera ruta que se active después de que se haya adjuntado una dirección de correo electrónico al objeto Basket. Si tienes dudas o simplemente quieres cubrir tus bases, te recomendamos añadir este fragmento a todas las rutas siguientes: Al igual que con los fragmentos anteriores, añade este fragmento en cualquier lugar antes de la llamada para mostrar la plantilla o antes de las llamadas a los controladores posteriores (por ejemplo, en COBilling-Save: app.getController(‘COSummary’).Start()).
```
/* Klaviyo Inicio página de pago evento seguimiento */
 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');
}
/* FIN Klaviyo Inicio página de pago evento seguimiento */
```
Para las rutas que no llaman directamente a las plantillas (por ejemplo, COShipping-Start), actualiza la llamada a app.getView(...) para incluir klid como variable de pronóstico. Aquí tienes un ejemplo para la ruta COShipping-Start:
```
app.getView({
ContinueURL: URLUtils.https('COShipping-SingleShipping'),
Basket: cart.object,
HomeDeliveries: homeDeliveries,
klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
}).render('página de pago/shipping/singleshipping');
```
Para añadir el fragmento de confirmación de pedido al controlador COSummary-ShowConfirmation: Añade el siguiente fragmento a tu controlador COSummary-ShowConfirmation en cualquier lugar antes de la llamada para representar la plantilla.

/* Klaviyo Seguimiento del evento de confirmación de pedido */
 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 (pedido && order.customerEmail) {
// comprueba si el estado es nuevo o creado
 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 correo electrónico = order.customerEmail;
var phone = pedido.defaultEnvío.shippingAddress.phone;
var e164PhoneRegex = new RegExp(/^\+[1-9]\d{1,14}$/);
if (phone) {
 // NOTA: Klaviyo sólo acepta números de teléfono que incluyan + y el código de país
 al principio (por ejemplo, para EE.UU.: +16465551212)
 // para conseguir que los usuarios se suscriban a SMS lista, ¡debes recoger
 el código de país en el campo del número de teléfono de tu pedido!
phone = '+' + phone.replace(/[^a-z0-9]/gi, '');
if(!e164PhoneRegex.test(phone)) {
if (session.custom.KLSmsSubscribe) {
 var logger = Logger.getLogger('Klaviyo', 'Klaviyo.core: Confirmar pedido');
 logger.error(`SMS Suscripción solicitada por el usuario, pero se proporcionó un número de teléfono no válido
. Número de teléfono: ${phone}`);
}
teléfono = null;
}
}
si (correo electrónico || teléfono) {
klaviyoUtils.subscribeUser(email, phone);
}
}
}
}
/* FIN del seguimiento de eventos de confirmación de pedidos de Klaviyo */

Ya completaste la configuración del fragmento para tu tienda de Site Genesis.

Añadir fragmentos de casilla de verificación de consentimiento en la página de pago (SG y SFRA)

Ten en cuenta los siguientes requisitos previos para sincronizar el consentimiento para enviar SMS en la página de pago con Klaviyo:

Habilita los SMS en Klaviyo y configura los números de envío.
El campo del número de teléfono de tu formulario de página de pago debe equipo de asistencia un código de país.

Para recoger el consentimiento en la página de pago por correo electrónico y SMS, tendrás que incluir fragmento de código para que las casillas de consentimiento aparezcan donde desees, además de configurar los ajustes de ID de lista indicados en la sección Añadir servicios anterior.

Por ejemplo, para que estos fragmentos aparezcan en la página de pago, se pueden colocar en la plantilla shipcard.isml (app_storefront_base) dentro de SFRA o en la plantilla billing.isml (app_storefront_core) dentro de SiteGen.

A continuación figuran los fragmentos ISML tanto para Site Genesis como para SFRA, y pueden colocarse en cualquier lugar de la página de pago flujo que mejor se adapte a tu sitio específico. Ten en cuenta que para que el consentimiento en la página de pago funcione correctamente en Génesis del Sitio, debes haber incluido el fragmento de Confirmación de pedido al que se hace referencia en la sección Añadir fragmentos de configuración anterior.

Los siguientes fragmentos suponen que el texto de registro para correo electrónico y SMS está incluido en un paquete de recursos de propiedades llamado "página de pago". Tendrás que reemplazar `your.email.subscribe.resource.string.here` y `tus.sms.subscribe.resource.string.here` con las claves correspondientes a tu idioma de registro para correo electrónico y SMS, respectivamente. Este idioma aparecerá junto a la casilla de verificación.

Por ejemplo, tu lenguaje para el opt-in podría ser el siguiente:

Correo electrónico Suscríbete a las actualizaciones por correo electrónico
SMS Suscríbete a las actualizaciones por SMS. Al marcar esta casilla e introducir tu número de teléfono más arriba, otorgas tu consentimiento para recibir mensajes de texto de marketing (como [códigos de promoción] y [recordatorios de compra]) de [nombre de la empresa] en el número facilitado, incluidos los mensajes enviados usando marcación automática. El consentimiento no es una condición para ninguna compra. Pueden aplicarse tarifas de mensajes y datos. La frecuencia de los mensajes varía. Puedes desuscribirte en cualquier momento respondiendo STOP o haciendo clic en el vínculo de cancelación de suscripción (cuando esté disponible) en uno de nuestros mensajes. Consulta nuestra política de privacidad [enlace] y las condiciones del servicio [enlace].

 <"""" ${KLSmsSubscribed} > 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= xml-ph-0031@deepl.inter ${Resource.msg('your.sms.subscribe.resource.string.here',
  'checkout', null)}

Habilita las integraciones OCAPI en Klaviyo

Puntos de conexión

Para integrarse con SFCC para el catálogo de productos y los datos de pedidos históricos/en curso, Klaviyo utiliza cuatro puntos de conexión OCAPI:

/order_search Sincroniza los datos históricos de los pedidos con Klaviyo y sincroniza los eventos de pedidos en curso cada 60 minutos. Los eventos Producto Pedido y Pedido Realizado sincronizarán datos adicionales para la segmentación y el filtrado de flujos, y son ideales para una personalización mejorada que no está disponible en el evento de Confirmación de Pedido. Para los correos electrónicos de confirmación de pedidos en tiempo real, usa el evento Confirmación de Pedido del cartucho.
/sites Te permite seleccionar desde qué sitio sincroniza Klaviyo los datos durante la configuración de tu integración.
/product_search Conecta tu catálogo a Klaviyo para habilitar la funcionalidad que incluye recomendaciones de productos en correos electrónicos.
/products/*/variations Permite sincronizar variantes con Klaviyo para habilitar funciones como los flujos de reposición de stock, inventario bajo y caída de precios.

Configuración del lado SFCC

Antes de poder comunicarnos con la OCAPI de SFCC, hay que configurar algunos permisos y ajustes en SFCC.

Ten en cuenta que, aunque las integraciones de Klaviyo requieren permisos POST para order_search y product_search, en realidad no estamos enviando datos a SFCC; esto se debe al diseño de la OCAPI de SFCC.

Navega a https://account.demandware.com/dw/account/APIAdmin y añade un cliente de API para Klaviyo. Se requerirán el ID de cliente de API y la contraseña para generar el token de portador para OCAPI.
Una vez añadido el cliente de interfaz de programación de aplicaciones ( API), ve a Administración > Desarrollo del sitio > Configuración de la interfaz de programación de aplicaciones (API) de Open Commerce en el SFCC Business Gerente.
Añade los siguientes fragmentos, sustituyendo la versión de la interfaz de programación de aplicaciones (API) y el ID de cliente. Disponemos de equipos de asistencia interfaz de programación de aplicaciones (API) versiones 19.5 y superiores, así como 18.8. Sustituye CLIENT_ID por el ID de cliente de la interfaz de programación de aplicaciones (API) generado a partir de la configuración del cliente de la interfaz de programación de aplicaciones (API) en el paso anterior (debería ser algo parecido a "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"). Si la configuración ya existe para estas interfaces de programación de aplicaciones (API), puede que sólo tengas que añadir las secciones resaltadas a continuación a la matriz JSON de clientes existente.
1. Añade el siguiente JSON en el tipo Shop y contexto Global (en toda la organización), sustituyendo SHOP_API_VERSION con tu versión de la API de Shop de OCAPI, y luego haz clic en Guardar. Una vez añadida, la configuración debe ser similar a esta:
```
{
 " _v":"SHOP_API_VERSION",
 " clientes":[
 {
 " client_id":"CLIENT_ID",
 " recursos":[
 {
 "resource_id":"/order_search",
 "methods":["post"],
 "read_attributes":"(**)",
 "write_attributes":"(**)"
 }
 ]
 }
 ]
 }
```
2. Añade el siguiente JSON en el tipo Datos y contexto Global (en toda la organización), sustituyendo DATA_API_VERSION con tu versión de la API de datos de OCAPI y, a continuación, haz clic en Guardar. Una vez añadida, la configuración debe ser similar 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":"(**)",
 }
 ]
 }
 ]
}

Configuración del lado Klaviyo

En Klaviyo, selecciona Integraciones > Añadir integraciones.
Busca Salesforce Commerce Cloud y haz clic en la tarjeta; a continuación, haz clic en Instalar.
Haz clic en Conectar con Salesforce Commerce Cloud en la página de destino.
En la página siguiente, completa la siguiente información:
Una vez que hayas introducido estas credenciales, haz clic en el enlace Recuperar lista de sitios para recuperar una lista de sitios en tu instancia SFCC.
Una vez recuperados los sitios, selecciona el sitio o sitios que deseas integrar con esta cuenta y haz clic en Finalizar configuración. Ahora tus integraciones deberían empezar a sincronizar tus pedidos, catálogo y datos de clientes.

Prueba tus integraciones SFCC

Para probar la configuración de tu cartucho, ve a tu sitio y sigue estas instrucciones:

cookie añadiendo el parámetro url utm_email como dirección de correo electrónico a tu barra de direcciones. Por ejemplo: https://www.example.com/?utm_email=your@email.com.
Busca en tu catálogo.
Ver la página de una categoría.
Ver la página de un producto.
Añade un artículo a tu cesta.
Haz un pedido de prueba.
Navega por el análisis > métrica en Klaviyo, luego busca métrica procedente de Salesforce Commerce Cloud.

Prueba Klaviyo Email Selectores de campo

Para comprobar que un determinado campo de correo electrónico se ha orientado correctamente y está identificando correctamente al usuario ante Klaviyo:

Abre una ventana de navegador de incógnito.
En la Consola para desarrolladores, ingresa el comando siguiente y presiona Intro: klaviyo.isIdentified(); Esto debería dar como resultado el siguiente resultado: Promesa {<fulfilled>: false}
Escribe una dirección de correo electrónico en el campo de destino y pulsa el tabulador para cambiar el enfoque a cualquier otro elemento de la página.
Vuelve a la Consola para desarrolladores e ingresa klaviyo.isIdentified(); de nuevo. Esto debería dar como resultado el siguiente resultado: Promesa {<fulfilled>: true}
Puedes volver a comprobar que Klaviyo está recibiendo llamadas de Identifícate dirigiéndote a análisis > métrica en Klaviyo y buscando el feed de actividad de con actividad en Eventos del sitio, donde deberías ver listada la(s) dirección(es) de correo electrónico que has introducido.

Test página de pago correo electrónico Selector de campo

Para comprobar que el campo de recogida Página de pago correo electrónico activa correctamente el evento Página de pago iniciada :

Añade uno o más productos a la cesta y, a continuación, inicia la página de pago.
Dentro de la página de pago, escribe una dirección de correo electrónico en el campo de destino y pulsa la tecla de tabulación para cambiar el enfoque a cualquier otro elemento de la página.
Puedes volver a comprobar que Klaviyo está recibiendo llamadas de Identify dirigiéndote a análisis > métrica en Klaviyo y buscando el feed de actividad de Eventos de página de pago iniciados, donde deberías ver que se ha realizado un seguimiento de tu evento reciente.

Resultado

Ya has integrado Salesforce Commerce Cloud con Klaviyo y has probado tus integraciones.