Primeros pasos con Salesforce Commerce Cloud

Objetivos del artículo

Descubre cómo integrar Salesforce Commerce Cloud con Klaviyo. La integración del cartucho y la interfaz de programación de aplicaciones (API) de Klaviyo permite que los sitios web que usan Salesforce Commerce Cloud (anteriormente Demandware) se conecten rápidamente y envíen a Klaviyo datos tanto en tiempo real como históricos. Cuando integras Klaviyo con Salesforce Commerce Cloud (SFCC), Klaviyo comenzará a hacer seguimiento de las acciones que las personas realizan en tiempo real, como navegar por el sitio web, hacer seguimiento de búsquedas, ver productos, ver categorías, agregar artículos a un carrito, completar la compra y realizar pedidos.

Hay 3 pasos principales para integrar SFCC con Klaviyo:

1. Instalación del cartucho de Klaviyo en SFCC.
2. Agregar fragmentos de habilitación a SFCC.
3. Habilitar la integración de SFCC OCAPI en Klaviyo.

Antes de empezar

Klaviyo se integra con sitios SFCC basados en controlador Site Genesis (SG) y Storefront Reference Architecture (SFRA). Cada framework requiere una configuración de cartridge y fragmentos ligeramente diferente, que se describe a continuación.

Para usar nuestro cartucho de la versión 23.7.0 (o cualquier versión posterior), recomendamos actualizar tu modo de compatibilidad de SFCC a 21.7 o una versión posterior.

Si quieres empezar integrando primero el entorno de desarrollo, puedes crear una cuenta de Klaviyo vinculada con el método descrito en este artículo y conectar el entorno de desarrollo con esa cuenta. Recomendamos incluir la palabra "Dev" o "Staging" en el nombre de la empresa que uses al configurar la cuenta, para diferenciar mejor entre cuentas cuando hayas iniciado sesión.

También se recomienda agregar las IP de Klaviyo a la lista de permisos del proveedor de firewall para minimizar problemas de autenticación y configuración. Para obtener más detalles, consulta Cómo incluir en la lista de permitidos las direcciones IP del tráfico de integración de Klaviyo.

Configurar los cartuchos de Klaviyo

Descargar los cartuchos

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

Deberás configurar 2 cartuchos, ambos incluidos en el archivo zip que descargaste. 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 y int_klaviyo_sfra es para sitios web basados en SFRA.
• int_klaviyo_core: para ambos tipos de infraestructuras, que contienen algunas funcionalidades básicas y superpuestas.

Importar los cartuchos

El primer paso es importar los cartridges en Visual Studio Code o Eclipse para que estén disponibles para vincularlos con la instancia de SFCC.

En VS Code

1. Copia y pega el cartucho int_klaviyo_core.
2. Copia las carpetas int_klaviyo (Site Genesis) o int_klaviyo_sfra (SFRA) en el código base como pares de las demás carpetas de cartuchos.

En Eclipse

1. Ve a Administración > Importar > General > Proyectos existentes en el espacio de trabajo.
2. Importa el directorio int_klaviyo_core con el asistente de importación.
3. Selecciona la instancia de SFCC con la que se conectará el cartridge.
4. Selecciona Propiedades.
5. Selecciona Referencias del proyecto.
6. Revísalo en el cartucho int_klaviyo_core.
7. Repite los pasos 2 a 6 para el otro cartucho específico de tu framework (int_klaviyo o int_klaviyo_sfra).

Agrega los cartuchos a la ruta de cartuchos

Una vez que se importen los cartuchos, deben agregarse a la lista de cartuchos que usa tu sitio con el Gerente de negocios de SFCC.

1. Navega a Administración > Sitios > Administrar sitios.
2. Selecciona tu sitio.
3. Selecciona la pestaña Configuración.
4. Al comienzo de la ruta de cartuchos de entrada etiquetada como Cartridges, agrega los nombres de los cartuchos de Klaviyo importados con el cartucho principal al final (ya sea, int_klaviyo:int_klaviyo_core o int_klaviyo_sfra:int_klaviyo_core).
5. Haz clic en Aplicar.

Una vez que hayas hecho clic en Aplicar, deberías ver los 2 cartuchos al inicio del campo llamado Ruta efectiva del cartucho.

Agregar servicios

Después de importar los cartridges y agregarlos a la ruta de cartridge del sitio, se debe agregar Klaviyo Service para habilitar la configuración de ajustes del cartridge. En el directorio raíz del archivo zip de Klaviyo cartridges hay otro archivo zip llamado metadata.zip. Las siguientes instrucciones harán referencia a este archivo zip.

1. Ve a Administración > Desarrollo del sitio > Importación y exportación del sitio > Servicios.
2. Carga y luego importa el archivo metadata.zip.
   

3. Cuando se te pida confirmar si quieres importar el archivo seleccionado, selecciona Aceptar.
4. Ahora deberías ver la importación en ejecución en la sección Estado cerca de la parte inferior de la página.
   

5. Ahora tendrás acceso a una página de preferencias en Herramientas del comerciante > Preferencias del sitio > Preferencias personalizadas > Klaviyo.
   
   Desde aquí puedes administrar las siguientes opciones de configuración:

• Klaviyo habilitado
  Debe configurarse en "Sí" para habilitar el cartucho.
• Clave privada de Klaviyo
  Una clave de API privada de Klaviyo. Asegúrate de que la clave de API privada de Klaviyo que uses para esta integración tenga acceso completo.
• Cuenta de Klaviyo
  La clave de API pública de Klaviyo, o ID del sitio.
• Etiquetar eventos como SFCC
  Si eliges etiquetar los eventos como SFCC, tendrás acceso a flujos precompilados en Klaviyo que usan datos de SFCC. Una desventaja actual de etiquetar eventos es que, si eliges etiquetarlos, no tendrás acceso a las recomendaciones de Viewed Product o Added to Cart en las fuentes de productos de Klaviyo.
  
  • Si antes instalaste una versión del cartucho anterior a la 23.7.0 y ahora vas a actualizar a la versión 23.7.0 o posterior, configura la opción como No. Las integraciones creadas antes del 13 de julio de 2023 (es decir, versiones del cartucho anteriores a la 23.7.0) generan métricas que no están etiquetadas como SFCC. Si usaste una versión anterior a la 23.7.0 en el pasado, esta configuración toma en cuenta las convenciones de nombres anteriores para evitar una discontinuidad en los datos de métricas en tu cuenta.
• Enviar el evento Added To Cart como "Add To Cart"
  Si instalaste previamente una versión del cartucho anterior a la 23.7.0 y ahora vas a actualizar a la versión 23.7.0 o posterior, configúralo en Sí. De lo contrario, configúralo en No. Esta configuración evita la discontinuidad de los datos de las métricas en tu cuenta.
• Selectores del campo de correo electrónico de Klaviyo Email y Selector del campo de correo electrónico de pago
  Consulta la sección de abajo para obtener información detallada sobre cómo configurar estos 2 campos.
• Tipo de imagen
  El tipo de imagen del producto que quieres usar en los datos del evento enviados a Klaviyo. Si no estás seguro de qué tipo de imagen configurar, ve a Herramientas para comerciantes > Productos y catálogos > Productos, haz clic en un producto y determina qué tipo de vista quieres usar en función de lo que esté disponible (p. ej., grande, mediana, pequeña, alta resolución).
• ID de lista de correos electrónicos de marketing
  Puedes recopilar suscriptores de correo electrónico en el pago y sincronizarlos con una lista de Klaviyo. Esta configuración es el ID de la lista en Klaviyo a la que deseas agregar suscriptores de correo electrónico. Descubre cómo encontrar el ID de una lista en Klaviyo. Para recopilar suscriptores de correo electrónico al finalizar la compra, también tendrás que agregar un fragmento de casilla de verificación, que se describe en una sección posterior.
• ID de lista de marketing por SMS
  Puedes recopilar suscriptores de SMS durante el pago y sincronizarlos con una lista de Klaviyo. Esta configuración es el ID de la lista de Klaviyo a la que quieres agregar suscriptores de SMS. Obtén información sobre cómo encontrar un ID de lista en Klaviyo. Si recopilas suscriptores de SMS y de email, elige una lista distinta para SMS que para email. Esto garantiza que el consentimiento siempre se atribuya correctamente al canal adecuado. Para recopilar suscriptores de SMS durante el pago, necesitarás algunos requisitos previos adicionales, junto con un fragmento de casilla de verificación, que se describen en una sección posterior.
  

6. El archivo metadata.zip también creará un nuevo servicio en SFCC. Al ir 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.

Configurar selectores de campos de Klaviyo Email y el selector de campo de correo electrónico de pago

Estas preferencias son esenciales para que Klaviyo identifique y haga el seguimiento de los visitantes del sitio correctamente. Si Klaviyo no identifica a un visitante, no se registrará ningún evento para ese visitante. Cuando termines la integración, puedes aprender a probar la configuración de Klaviyo Email y el selector de campos de email de pago en la sección Prueba la configuración de SFCC a continuación.

Selectores de campos de Klaviyo Email

La preferencia del sitio Klaviyo Email Field Selectors se usa para segmentar todos y cada uno de los campo de entrada de correo electrónico y número de teléfono en el sitio (con la excepción de la entrada de correo electrónico ubicada en el proceso de pago, que se aborda más abajo). Identificamos estos campos mediante selectores CSS estándar, y cada uno se agrega de forma individual a la preferencia del sitio (que es un “conjunto de cadenas”, lo que permite ingresar varios valores de cadena uno por uno). Se puede usar cualquier selector complejo que pudiera usarse en una hoja de estilos estándar para segmentar un elemento específico; por ejemplo, #dwfrm_login div.username input.input-text es aceptable, al igual que los selectores que pueden segmentar varios elementos en el sitio según atributos compartidos, por ejemplo, input[type=email]. Asegúrate de evitar segmentar entradas mediante cualquier ID generado dinámicamente (un caso muy común en SiteGen), ya que esos ID cambiarán según la carga de la página y, por lo tanto, fallarán (por ejemplo, #dwfrm_login_username_d0fignzngiyq).

Ten en cuenta que los campos agregados al DOM después de que se cargue la página aún pueden ser objetivo. Algunos ejemplos son 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 mediante JavaScript de terceros.

También ten en cuenta que los campos de número de teléfono por sí solos tal vez no identifiquen completamente al usuario ante Klaviyo, según tu configuración de SMS en tu cuenta de Klaviyo (si SMS está habilitado y tienes un número de envío asociado con el país del número de teléfono ingresado, se identificará el navegador). Por lo tanto, agregar selectores de CSS para segmentar campos de número de teléfono puede considerarse "bueno tenerlo", o "según sea necesario", mientras que agregarlos para campos de correo electrónico debe considerarse esencial.

Selector del campo de correo electrónico en el checkout

El campo de recopilación de correo electrónico en el proceso de pago es un caso especial y, por lo tanto, tiene su propia preferencia del sitio para la segmentación. El principio funciona exactamente igual que la preferencia del sitio de selectores de campo de correo electrónico de Klaviyo Email: solo ingresa un solo selector de CSS que apunte al campo de dirección de correo electrónico en el flujo de pago del sitio, sin importar si aparece al inicio, al final o en medio del proceso de pago.

Configurar correctamente esta preferencia del sitio para segmentar el campo de recopilación de correo electrónico en el proceso de pago es esencial para rastrear correctamente el evento Inicio del proceso de pago y, por lo tanto, se recomienda ampliamente que hagas una prueba para asegurarte de que los eventos Inicio del proceso de pago aparezcan en Klaviyo después de que se ingrese una dirección de correo electrónico en el campo de recopilación de correo electrónico en el proceso de pago.

También ten en cuenta que el campo de correo electrónico del proceso de pago al que se dirige la preferencia del sitio Checkout Email Field Selector se conectará automáticamente para identificar al usuario, además de activar el evento Started Checkout (es decir, no es necesario incluir el selector de CSS del campo de correo electrónico del proceso de pago tanto en las preferencias del sitio Klaviyo Email Field Selectors como en Checkout Email Field Selector).

Añadir fragmentos de configuración

La última parte de la configuración del cartucho es agregar los fragmentos de código a los archivos de plantilla del sitio para permitir que el cartucho se comunique con el sitio. Estos pasos varían mucho según las infraestructuras Site Genesis (SG) y Storefront Reference Architecture (SFRA), así que asegúrate de seguir las instrucciones correctas para la configuración.

Configuración del fragmento de Storefront Reference Architecture (SFRA)

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

<isinclude template="klaviyo/klaviyoFooter"/>

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

Configuración del fragmento de código de Site Genesis (SG)

1. Para agregar KlaviyoFooter.isml al pie de página global: agrega el siguiente código al final del archivo footer.isml (o cualquier plantilla similar que se cargue cerca de la parte inferior de cada página).
   

<isinclude template="klaviyo/klaviyoFooter"/>

1. Para agregar fragmentos de código para la identificación del usuario del lado del servidor: agrega el siguiente fragmento de código a los controladores Cuenta-Show y Cart-Show en cualquier lugar antes de la llamada para renderizar sus respectivas plantilla (es decir, app.getView(...)).
   

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

1. Luego, actualizarás la llamada a app.getView(...) para incluir klid como una variable de pdict.
   • En el controlador cuenta-Show:
     

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

• En el 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 agregar el fragmento Added To Cart al controlador Cart-AddProduct: agrega el siguiente fragmento a tu controlador Cart-AddProduct en cualquier lugar antes de la llamada para renderizar la plantilla (es decir, 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. Fragmentos Started Checkout: al agregar fragmentos de Klaviyo a los controladores de pago para rastrear eventos Started Checkout , es importante tener en cuenta lo siguiente:
   • El objetivo de agregar estos fragmentos es verificar si se ha adjuntado una dirección de correo electrónico al objeto Basket dentro del flujo de pago y, cuando se adjunte, activar el evento Started Checkout . Es importante detectar la asociación de una dirección de correo electrónico con el Basket lo antes posible en el flujo de pago.
   • Debido a la personalización del proceso de pago según el sitio, Klaviyo no puede definir con exactitud qué controlador será el primero en recibir un objeto Basket con una dirección de correo electrónico asociada.
   • Recomendamos agregar los fragmentos de código en todas las rutas principales que se activan durante el proceso de pago. Si puedes usar el depurador para identificar exactamente cuándo se adjunta la dirección de correo electrónico al carrito en el flujo de pago, puedes agregar los fragmentos de código solo a esa ruta, pero haz pruebas exhaustivas para asegurar que todas las rutas posibles de pago (invitado, con sesión iniciada, iniciando sesión durante el pago, etc.) activen el código.
2. A continuación se muestra el fragmento para la primera ruta alcanzada en el proceso de pago (por lo general, COCustomer-Start). Insértalo en cualquier lugar antes de la llamada para renderizar la plantilla (es decir, app.getView(...)). Fíjate en la diferencia clave en este fragmento: se pasa el primer argumento del método KLCheckoutHelpers.startedCheckoutHelper como true en lugar de false, en comparación con los otros fragmentos del proceso de pago (resaltados a continuación). Ten en cuenta que, en el fragmento a continuación, el KLCheckoutHelpers.startedCheckoutHelper El método es true en lugar de false (como en los otros fragmentos del proceso de pago). Esto es esencial para que el código sepa que tenemos un nuevo evento de Inicio del proceso de compra que 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. Luego, actualiza la llamada a app.getView(...) para incluir klid como una variable pdict:

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

1. Los siguientes fragmentos de código deben agregarse 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 no estás seguro o simplemente quieres cubrir todos los casos, te recomendamos agregar este fragmento de código a todas las siguientes rutas:Al igual que con los fragmentos de código anteriores, agrega este fragmento de código en cualquier lugar antes de la llamada para renderizar la plantilla, o antes de las llamadas a controladores posteriores (ejemplo de COBilling-Save: app.getController(‘COSummary’).Start()).
   • COShipping-Inicio
   • COBilling-PublicStart
   • COBilling-Guardar
   • 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. En las rutas que sí llaman a plantillas directamente (por ejemplo, COShipping-Start), actualiza la llamada a app.getView(...) para incluir klid como una variable de pdict. 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('checkout/shipping/singleshipping');

1. Para agregar el fragmento de código de Order Confirmation al controlador COSummary-ShowConfirmation: agrega el siguiente fragmento de código a tu controlador COSummary-ShowConfirmation en cualquier lugar antes de la llamada para renderizar la plantilla.

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

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

Agrega fragmentos de casillas de verificación de consentimiento en el proceso de pago (SG y SFRA)

Para recopilar el consentimiento al finalizar la compra para correo electrónico y SMS, deberás incluir fragmentos de código para que las casillas de verificación de consentimiento aparezcan donde lo desees, además de configurar los ajustes de ID de la lista indicados en la sección Agregar servicios anterior.

Por ejemplo, para que estos fragmentos aparezcan en el proceso de pago, se pueden colocar 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 se muestran los fragmentos de ISML para Site Genesis y SFRA, y se pueden colocar en cualquier parte del flujo de pago que mejor se adapte a tu sitio. Ten en cuenta que, para que el consentimiento en el flujo de pago funcione correctamente en Site Genesis, debes haber incluido el fragmento de Confirmación de pedido al que se hace referencia en la sección Agregar fragmentos de configuración anterior.

Los fragmentos de código a continuación asumen que el texto de consentimiento para correo electrónico y SMS se incluye en un paquete de recursos de propiedades llamado "checkout". Tendrás que reemplazar `your.email.subscribe.resource.string.here` y `your.sms.subscribe.resource.string.here` por las claves correspondientes al texto de consentimiento para correo electrónico y SMS, respectivamente. Este texto aparecerá junto a la casilla de verificación.

Por ejemplo, el texto de aceptación podría verse así:

• Correo electrónico
  Suscríbete a las actualizaciones por correo electrónico
• SMS
  Suscribirse 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 [link] y las condiciones del servicio [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)}

Habilita las integraciones de OCAPI en Klaviyo

Puntos de conexión

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

• /order_search
  Sincroniza los datos históricos de pedidos con Klaviyo y sincroniza los eventos de pedidos continuos cada 60 minutos. Los eventos Ordered Product y Placed Order sincronizarán datos adicionales para la segmentación y el filtro de flujo, y son ideales para una personalización mejorada que no está disponible desde el evento Order Confirmation. Para correos electrónicos de confirmación de pedidos en tiempo real, usa el evento Order Confirmation del cartucho.
• /sites
  Permite seleccionar desde qué sitio Klaviyo sincroniza datos durante la configuración de integraciones.
• /product_search
  Conecta tu catálogo a Klaviyo para habilitar funciones como recomendaciones de productos en correos electrónicos.
• /products/*/variations
  Permite sincronizar variantes con Klaviyo para habilitar funcionalidades como flujos de reposición de stock, inventario bajo y reducción de precio.

Configuración del lado de SFCC

Antes de poder comunicarnos con 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 publicando datos en SFCC; esto se debe al diseño de OCAPI de SFCC.

1. Navega a https://account.demandware.com/dw/account/APIAdmin y agrega un cliente de interfaz de programación de aplicaciones (API) para Klaviyo. Se requerirán el ID y la contraseña del cliente de API para generar el token de portador para OCAPI.
2. Una vez que se agrega el cliente de la interfaz de programación de aplicaciones (API), navega a Administración > Desarrollo del sitio > Configuración de la interfaz de programación de aplicaciones (API) de Open Commerce en el Gerente de negocios de SFCC.
3. Agrega los siguientes fragmentos y reemplaza la versión de la interfaz de programación de aplicaciones (API) y el ID de cliente. Admitimos versiones 19.5 y posteriores de la interfaz de programación de aplicaciones (API), así como 18.8. Reemplaza CLIENT_ID con el ID de cliente de la interfaz de programación de aplicaciones (API) generado a partir de la configuración del cliente de la API en el paso anterior (debería verse como algo similar a "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"). Si la configuración ya existe para estas interfaz de programación de aplicaciones (API), es posible que solo debas agregar las secciones resaltadas a continuación a la matriz JSON de clientes existente.
   1. Agrega el siguiente JSON en el tipo Tienda y el contexto Global (en toda la organización), reemplazando SHOP_API_VERSION con la versión de la interfaz de programación de aplicaciones (API) de Shop de OCAPI y, luego, haz clic en Guardar.
      Una vez agregada, la configuración debería verse similar a esto:
      

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

1. Agrega el siguiente JSON en el tipo Datos y el contexto Global (en toda la organización), reemplazando DATA_API_VERSION por tu versión de la interfaz de programación de aplicaciones (API) de datos de OCAPI, y luego haz clic en Guardar.
   Una vez agregada, la configuración debería verse similar a esto:
   

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

Configuración del lado de Klaviyo

1. En Klaviyo, selecciona Integraciones > Añadir integraciones.
2. Busca Salesforce Commerce Cloud y haz clic en la tarjeta; a continuación, haz clic en Instalar.
3. Haz clic en Conectar con Salesforce Commerce Cloud en la página de destino.
4. En la siguiente página, completa la siguiente información:
   • URL de la tienda
     El dominio del sitio web (por ejemplo, example.com o dev03-na01-example.demandware.net).
   • Token de autenticación
     Crea un token de autenticación para esta integración que se utilizará para solicitar un token de portador. El token de autenticación se genera codificando en Base64 el ID de cliente y la contraseña unidos por dos puntos (p. ej., xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • Versión de la interfaz de programación de aplicaciones (API) de datos
     La versión de la interfaz de programación de aplicaciones (API) de datos a la que diste acceso en el paso de configuración del lado de SFCC (p. ej., v19_10).
   • Versión de la interfaz de programación de aplicaciones (API) de Shop
     La versión de la interfaz de programación de aplicaciones (API) de Shop a la que diste acceso en el paso de configuración del lado de SFCC (p. ej., v19_10).
   • ID del catálogo
     El ID del catálogo de SFCC que se sincronizará con Klaviyo (p. ej., storefront-catalog-en). Puedes encontrar el ID del catálogo en Salesforce Business Manager en Herramientas del comerciante > Productos y catálogos > Catálogos.
     

5. Una vez que hayas ingresado estas credenciales, haz clic en el enlace Recuperar lista de sitios para recuperar una lista de sitios en tu instancia de SFCC.
6. Después de recuperar los sitios, selecciona el/los sitio(s) para integrar con esta cuenta y haz clic en Completar configuración. Ahora tu integraciones deberían empezar a sincronizar tus datos de pedidos, catálogo y clientes.

Prueba tu integración con SFCC

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

1. Añade una cookie a tu navegador agregando el parámetro de URL utm_email con tu dirección de correo electrónico en la barra de direcciones. Por ejemplo: https://www.example.com/?utm_email=your@email.com.
2. Busca en tu catálogo.
3. Ve una página de categoría.
4. Ver una página de producto.
5. Agrega un artículo al carrito.
6. Realiza un pedido de prueba.
7. Ve a Analytics > Métricas en Klaviyo y luego busca las métricas que provienen de Salesforce Commerce Cloud.

Probar selectores de campos de Klaviyo Email

Para probar que un campo de correo electrónico determinado se haya segmentado correctamente y que esté identificando correctamente al usuario en Klaviyo:

1. Abre una ventana de navegación de incógnito.
2. En la consola de desarrollador, ingresa el siguiente comando y presiona Enter:
   klaviyo.isIdentified();
   Esto debería generar el siguiente resultado:
   Promise {<fulfilled>: false}
3. Escribe una dirección de correo electrónico en el campo objetivo y presiona la tecla Tab para cambiar el enfoque a cualquier otro elemento de la página.
4. Regresa a la Developer Console y vuelve a ingresar klaviyo.isIdentified();. Esto debería generar el siguiente resultado:
   Promise {<fulfilled>: true}
5. Puedes confirmar que Klaviyo realmente está recibiendo llamadas de Identify si vas a Analítica > Métrica en Klaviyo y buscas el feed de actividad de los eventos Con actividad en el sitio, donde deberías ver la(s) dirección(es) de correo electrónico que ingresaste en la lista.

Probar el selector de campo de correo electrónico de Checkout

Para comprobar que el campo de recopilación de correo electrónico en el proceso de pago activa correctamente el evento Started Checkout :

1. Agrega uno o más productos al carrito y, después, inicia el proceso de pago.
2. En el pago, escribe una dirección de correo electrónico en el campo objetivo y presiona la tecla Tab para cambiar el enfoque a cualquier otro elemento de la página.
3. Puedes confirmar que Klaviyo realmente está recibiendo llamadas Identify; para ello, ve a Analytics > Métrica en Klaviyo y encuentra el feed de actividad de los eventos Started Checkout, donde deberías ver que se registró tu evento reciente.

Resultado

Ya integraste Salesforce Commerce Cloud con Klaviyo y probaste tus integraciones.

Recursos adicionales