Introducción a Salesforce Commerce Cloud – Klaviyo - Help Center - ES

Qué aprenderás

Aprenda a integrar Salesforce Commerce Cloud con Klaviyo. La integración del cartucho y la API de Klaviyo permite a los sitios web que utilizan Salesforce Commerce Cloud (anteriormente Demandware) conectarse rápidamente y enviar datos históricos y en tiempo real a Klaviyo. Cuando integre Klaviyo con Salesforce Commerce Cloud (SFCC), Klaviyo empezará a realizar 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 a un carro, el pago y el pedido.

Hay 3 pasos principales para integrar SFCC con Klaviyo:

Instalación del cartucho Klaviyo en SFCC.
Añadir fragmentos de habilitación a SFCC.
Habilitación de la integración SFCC OCAPI en Klaviyo.

Antes de empezar

Klaviyo se integra tanto con los sitios de Génesis de Sitios (SG) basados en el controlador SFCC como con los de Arquitectura de Referencia de Escaparates (SFRA). Cada marco requiere una configuración de cartuchos y fragmentos ligeramente diferentes, que se describen a continuación.

¿Estás usando un cartucho SFCC de Klaviyo que está por debajo de la versión 23.7.0? Las versiones 23.7.0 y posteriores incluyen varias funciones adicionales, una instalación más completa y lista para usar, y mejoras relacionadas con la experiencia de los desarrolladores. Si quieres mejorar tu plan, lee Cómo mejorar tu cartucho de Salesforce Commerce Cloud.

Para poder utilizar nuestro cartucho de la versión 23.7.0 (o cualquier versión superior), le recomendamos que actualice su modo de compatibilidad SFCC a la versión 21.7 o superior.

Si quieres empezar por integrar 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 cuentas cuando inicies sesión.

También te recomendamos que añadas direcciones IP de Klaviyo a la lista de permitidos de tu proveedor de cortafuegos para minimizar los problemas de autenticación y configuración. Para obtener más información, consulta Cómo realizar una lista de permitidos de las direcciones IP de tráfico de la integración de Klaviyo.

Configurar los cartuchos Klaviyo

Descargar los cartuchos

Puedes encontrar la ficha de la aplicación en Salesforce AppExchange. En AppExchange, puedes obtener más información sobre Klaviyo y hacer clic en Get It Now para llevarlo a Github, donde nuestros cartuchos están disponibles en un archivo zip para su descarga. Si tienes un sitio web de SFRA, descarga el archivo ZIP KlaviyoSFRA, y si tienes un sitio web de Site Genesis, descarga el archivo ZIP 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 los sitios web basados en Site Genesis, e int_klaviyo_sfra es para los sitios web basados en SFRA.
int_klaviyo_core: para ambos tipos de infraestructuras, contiene algunas funcionalidades 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

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

En Eclipse

Navegue hasta Administración > Importar > General > Proyectos existentes en el espacio de trabajo.
Importe el directorio int_klaviyo_core utilizando el asistente de importación.
Seleccione la instancia SFCC con la que conectar el cartucho.
Seleccione Propiedades.
Seleccione Referencias del proyecto.
Compruebe en el cartucho int_klaviyo_core.
Repita los pasos del 2 al 6 para el otro cartucho específico de su framework (ya sea int_klaviyo o int_klaviyo_sfra).

Añada los cartuchos a la ruta de cartuchos

Una vez importados los cartuchos, es necesario añadirlos a la lista de cartuchos utilizados por su centro mediante el Administrador de empresas de SFCC.

Navegue hasta Administración > Sitios > Gestionar sitios.
Seleccione su sitio.
Seleccione la pestaña Configuración.
Al principio de la entrada de la ruta del cartucho etiquetada como Cartuchos, añada 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).
Pulse 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, debe añadirse el servicio Klaviyo para permitir la configuración de los ajustes para el 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.

Navegue hasta Administración > Desarrollo del sitio > Importación del sitio & Exportación > Servicios.
Sube y, a continuación, importa el archivo metadata.zip.
Cuando se le pida que confirme si desea importar el archivo seleccionado, seleccione 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 Merchant tools > Site Preferences > Custom Preferences > Klaviyo. Desde aquí, puedes gestionar los siguientes ajustes:
El archivo metadata.zip también creará un nuevo servicio en SFCC. Navegando a Administración > Operaciones > Servicios, ahora debería ver 2 nuevas entradas bajo la pestaña Servicios llamadas KlaviyoEventService y KlaviyoSubscribeProfilesService, cada una con sus respectivas entradas de perfil y credenciales.

Configuración de los selectores de campo de Klaviyo Email y el selector de campo de correo electrónico de pago

Estas preferencias son fundamentales para que Klaviyo identifique y seguimiento correctamente a los visitantes del sitio web. Si un visitante no está identificado en Klaviyo, no se hará un seguimiento de ningún evento para ese visitante. Una vez que hayas terminado de integrar Klaviyo, 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 Probar la configuración de SFCC más abajo.

Selectores de campos de correo electrónico de Klaviyo

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).

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

Tenga en cuenta también que los campos de número de teléfono por sí solos pueden no identificar completamente al usuario para Klaviyo, dependiendo de la configuración de SMS dentro de su cuenta de Klaviyo (si SMS está activado y tiene un número de envío asociado con el país del número de teléfono introducido, el navegador será identificado). Por ello, añadir selectores CSS para orientar los campos de número de teléfono puede considerarse "agradable de tener" o "según sea necesario", mientras que añadirlos para los campos de correo electrónico debe considerarse esencial.

Selector de campo de correo electrónico de pago

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.

Configurar correctamente esta preferencia del sitio para que se dirija al campo de recopilación de correos electrónicos en la página de pago es fundamental para hacer un seguimiento correcto del evento Pago Iniciado, por lo que te recomendamos que hagas una prueba para asegurarte de que los eventos Pago Iniciado aparezcan en Klaviyo después de introducir 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 Email Field Selector se conectará automáticamente para identificar al usuario, además de activar el evento Started página de pago (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 Email 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 su sitio para permitir que el cartucho se comunique con el sitio. Estos pasos difieren en gran medida para las infraestructuras de Site Genesis (SG) y Storefront Reference Architecture (SFRA), así que asegúrese de seguir las instrucciones correctas para su configuración.

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

Añada el siguiente código al final de su archivo pageFooter.isml:

<isinclude template="klaviyo/klaviyoFooter"/>

Ya has completado 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 al final de tu archivo footer.isml (o cualquier plantilla similar que se cargue cerca del final de cada página).
```
<isinclude template="klaviyo/klaviyoFooter"/>
```
Para añadir fragmentos para la identificación del usuario del lado del servidor: Añade el siguiente fragmento a tus controladores Account-Show y Cart-Show en cualquier lugar antes de la llamada para renderizar sus respectivas plantillas (es decir, app.getView(...)).
```
   // KLAVIYO
    var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils'), klid;
    if(klaviyoUtils.klaviyoEnabled && 
    !klaviyoUtils.getKlaviyoExchangeID()){
    klid = klaviyoUtils.getProfileInfo();
    }
    // END KLAVIYO
```

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

En tu controlador Account-Show:

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

En tu controlador Cart-Show:

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

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

 /* Seguimiento de eventos Klaviyo Añadido a la cesta */
    var BasketMgr = require('dw/pedido/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') ? verdadero
    : falso;
    si (exchangeID) {
    cestaactual = CestaMgr.getCestaActual();
    if (currentBasket && currentBasket.getProductLineItems().toArray().length)
    {
    dataObj = addedToCartData.getData(currentBasket);
    serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.addedToCart,
    false);
    si (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 */

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

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

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

Los siguientes fragmentos deben añadirse a la primera ruta que se active después de que se haya conectado una dirección de correo electrónico al objeto Basket. Si no estás seguro, o simplemente quieres cubrir tus bases, te recomendamos que añadas 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 renderizar la plantilla, o antes de las llamadas a los controladores posteriores (ejemplo de COBilling-Save: app.getController(‘COSummary’).Start()).
```
/* Klaviyo inició el seguimiento de eventos de Checkout */
  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 */
```
Para las rutas que sí llaman directamente a las plantillas (por ejemplo, COShipping-Start), actualiza la llamada app.getView(...) para incluir klid como variable de predicción. Aquí tienes un ejemplo de la ruta 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 añadir el fragmento de confirmación de pedido al controlador COSummary-ShowConfirmation: Añada el siguiente fragmento a su controlador COSummary-ShowConfirmation en cualquier lugar antes de la llamada para renderizar la plantilla.

/* Seguimiento de eventos de confirmación de pedidos 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;
si (pedido && pedido.emailcliente) {
// comprobar si el estado es nuevo o creado
  if (estado.pedido == dw.pedido.Order.ORDER_STATUS_NEW || estado.pedido == dw.pedido.Order.ORDER_STATUS_OPEN)
  {
dataObj = orderConfirmationData.getData(order, exchangeID);
  serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.orderConfirmation,
  order.customerEmail);
}
  if('KLEmailSubscribe' en session.custom | 'KLSmsSubscribe' en session.custom)
  {
var email = order.customerEmail;
var phone = orden.defaultShipment.shippingAddress.phone;
var e164PhoneRegex = new RegExp(/^\+[1-9]\d{1,14}$/);
if (teléfono) {
  // NOTA: Klaviyo sólo acepta números de teléfono que incluyan + y el código del país
  al principio (ej. para EE.UU.: +16465551212)
  // para conseguir que los usuarios se suscriban a la lista de SMS debe recoger
  ¡el código de país en el campo del número de teléfono de su 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 un número de teléfono no válido
  fue proporcionado. Número de teléfono: ${phone}`);
}
teléfono = null;
}
}
if (email || teléfono) {
klaviyoUtils.subscribeUser(email, phone);
}
}
}
}
/* END Seguimiento de eventos de confirmación de pedido Klaviyo */

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

Añadir fragmentos de casillas de consentimiento en el pago (SG y SFRA)

Tenga en cuenta los siguientes requisitos previos para sincronizar el consentimiento por SMS en el pago con Klaviyo:

Habilita SMS en Klaviyo y configura los números de envío.
El campo del número de teléfono de su formulario de pago debe admitir un código de país.

Para recoger el consentimiento en la caja para el correo electrónico y los SMS, tendrá que incluir fragmentos de código para que las casillas de verificación de consentimiento aparezcan donde desee, 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, pueden colocarse en la plantilla shipmentCard.isml (app_storefront_base) dentro de SFRA o en la plantilla billing.isml (app_storefront_core) dentro de SiteGen.

A continuación encontrará los fragmentos ISML tanto para Site Genesis como para SFRA, y pueden colocarse en cualquier parte del flujo de pago que mejor se adapte a su sitio específico. Tenga en cuenta que para que el consentimiento en el pago funcione correctamente en Génesis Sitio, debe 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 asumen que tu texto de registro para correo electrónico y SMS está contenido en un paquete de recursos de propiedades llamado «pago». Tendrás que sustituir «your.email.subscribe.resource.string.here» y «tuyo.sms.subscribe.resource.string.here» con las claves correspondientes a tus correos electrónicos y SMS, respectivamente. Este idioma aparecerá junto a la casilla.

Por ejemplo, su lenguaje de opt-in podría tener este aspecto:

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

 <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 la integración OCAPI en Klaviyo

Puntos finales

Con el fin de integrarse con SFCC para el catálogo de productos y los datos de pedidos históricos/en curso, Klaviyo hace uso de cuatro puntos finales OCAPI:

/order_search Sincroniza el histórico de datos de 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 recibir correos electrónicos de confirmación de pedido 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 la integración.
/product_search Conecta tu catálogo a Klaviyo para habilitar funciones que incluyan recomendaciones de productos en los correos electrónicos.
/products/*/variantes Permite sincronizar variantes con Klaviyo para habilitar funciones como los flujos de reposición de stock, inventario bajo y bajada de precio.

Configuración del lado SFCC

Antes de poder comunicarnos con la OCAPI de SFCC, es necesario 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.

Ve a https://account.demandware.com/dw/account/APIAdmin y añadir un cliente API para Klaviyo. Se requerirán el ID de cliente y la contraseña de API para generar el token de portador para OCAPI.
Una vez añadido el cliente API, navegue hasta Administración > Desarrollo del sitio > Configuración de la API Open Commerce en el Administrador de empresas SFCC.
Añada los siguientes fragmentos, sustituyendo la versión de la API y el ID de cliente. Admitimos las versiones 19.5 y superiores de la API, así como la 18.8. Sustituya CLIENT_ID por el ID del cliente de la API generado a partir de la configuración del cliente de la API en el paso anterior (debería tener un aspecto similar a "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"). Si la configuración ya existe para estas API, puede que sólo tenga que añadir las secciones resaltadas a continuación a la matriz JSON de clientes existente.
1. Añade el siguiente código JSON en el tipo Shop and context Global (en toda la organización), sustituyendo SHOP_API_VERSION por tu versión API de OCAPI Shop y, a continuación, haz clic en Save (Guardar). Una vez añadida, la configuración debería 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 código JSON en el tipo Datos y contexto Global (en toda la organización), sustituyendo DATA_API_VERSION por 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 debería 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.
Busque Salesforce Commerce Cloud y haga clic en la tarjeta; a continuación, haga clic en Instalar.
Haz clic en Conectarse al Salesforce Commerce Cloud en la página de destino.
En la página siguiente, rellena la siguiente información:
Una vez introducidas estas credenciales, haga clic en el enlace Recuperar lista de sitios para recuperar una lista de sitios en su instancia SFCC.
Una vez recuperados los sitios, seleccione el sitio o sitios que desea integrar con esta cuenta y haga clic en Completar configuración. Su integración debería empezar ahora a sincronizar sus datos de pedidos, catálogos y clientes.

Pruebe su integración SFCC

Para probar la configuración de su cartucho, vaya a su sitio y siga estas instrucciones:

Cookie usted mismo añadiendo el parámetro url utm_email como su dirección de correo electrónico a su barra de direcciones. Por ejemplo: https://www.example.com/?utm_email=your@email.com.
Busque en su catálogo.
Ver la página de una categoría.
Ver la página de un producto.
Añada un artículo a su cesta.
Haga un pedido de prueba.
Navegue por Analytics > Metrics en Klaviyo y busque las métricas procedentes de Salesforce Commerce Cloud.

Pruebe los selectores de campos de correo electrónico de Klaviyo

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

Abra una ventana de navegador de incógnito.
En la consola de desarrolladores, introduce el siguiente comando y presiona enter: klaviyo.isIdentified(); Esto debería dar como resultado el siguiente resultado: Promesa {<fulfilled>: false}
Escriba una dirección de correo electrónico en el campo de destino y pulse la tecla de tabulación para cambiar el enfoque a cualquier otro elemento de la página.
Vuelve a la consola de desarrolladores e introduce klaviyo.isIdentified(); de nuevo. Esto debería dar como resultado el siguiente resultado: Promesa {<fulfilled>: true}
Puede volver a comprobar que Klaviyo está efectivamente recibiendo llamadas de identificación dirigiéndose a Analytics > Metrics en Klaviyo y encontrando el feed de actividad de eventos Active on Site, donde debería ver listadas la(s) dirección(es) de correo electrónico que ha introducido.

Prueba del selector de campos de correo electrónico de pago

Para comprobar que el campo de recopilación de correos electrónicos de pago está activando correctamente el evento Pago iniciado :

Añada uno o varios productos a la cesta e inicie el pago.
Dentro del proceso de pago, escriba una dirección de correo electrónico en el campo correspondiente y pulse la tecla de tabulación para cambiar el enfoque a cualquier otro elemento de la página.
Puede volver a comprobar que Klaviyo está efectivamente recibiendo llamadas de identificación dirigiéndose a Analytics > Metrics en Klaviyo y encontrando el feed de actividad de los eventos de Pago iniciado, donde debería ver que su evento reciente fue rastreado.

Resultado

Ya ha integrado Salesforce Commerce Cloud con Klaviyo y ha probado su integración.