Introducción a Salesforce Commerce Cloud

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 tres pasos principales para integrar SFCC con Klaviyo, cubiertos en esta guía, son:

1. Instalación del cartucho Klaviyo en SFCC.
2. Añada fragmentos de habilitación a SFCC.
3. 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.

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 desea empezar integrando primero su entorno de desarrollo, puede crear una cuenta Klaviyo vinculada utilizando el método descrito en este artículo y conectar su entorno de desarrollo con esa cuenta. Le recomendamos que incluya la palabra "Dev" o "Staging" en el nombre de la empresa que utilice al configurar la cuenta, para diferenciar mejor las cuentas cuando inicie sesión. 

Configurar los cartuchos Klaviyo

Descargar los cartuchos

Puede encontrar nuestro listado de aplicaciones en Salesforce AppExchange. En AppExchange, puede obtener más información sobre Klaviyo y hacer clic en Get It Now para ser llevado a Github, donde nuestros cartuchos están disponibles en un archivo zip para su descarga. Si tiene un sitio SFRA, descargue el archivo zip KlaviyoSFRA, y si tiene un sitio Site Genesis, descargue el archivo zip KlaviyoSG. 

Necesitará configurar dos cartuchos, ambos incluidos en el archivo zip que ha 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 vincularlos con su instancia SFCC

En código VS

1. Copie y pegue el cartucho int_klaviyo_core.
2. 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

1. Navegue hasta Administración > Importar > General > Proyectos existentes en el espacio de trabajo.
2. Importe el directorio int_klaviyo_core utilizando el asistente de importación.
3. Seleccione la instancia SFCC con la que conectar el cartucho.
4. Seleccione Propiedades.
5. Seleccione Referencias del proyecto.
6. Compruebe en el cartucho int_klaviyo_core.
7. 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.

1. Navegue hasta Administración > Sitios > Gestionar sitios.
2. Seleccione su sitio.
3. Seleccione la pestaña Configuración.
4. 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).
5. Pulse Aplicar.

Una vez que haya hecho clic en Aplicar, ahora debería ver los dos cartuchos al principio del campo denominado Ruta del cartucho efectivo.

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.

1. Navegue hasta Administración > Desarrollo del sitio > Importación del sitio & Exportación > Servicios.
2. Cargue y, a continuación, importe el archivo metadata.zip.
   
3. Cuando se le pida que confirme si desea importar el archivo seleccionado, seleccione Aceptar.
4. Ahora debería ver la importación en marcha en la sección Estado, cerca de la parte inferior de la página.
   
5. Ahora tendrá acceso a una página de preferencias en Herramientas del comerciante > Preferencias del sitio > Preferencias personalizadas > klaviyo.
   
   Desde aquí, puede gestionar los siguientes ajustes:
   • Klaviyo Habilitado
     Debe ajustarse a "Sí" para habilitar el cartucho.
   • Clave privada de Klaviyo
     Una clave API privada de Klaviyo. Asegúrese de que la clave API privada de Klaviyo que utiliza para esta integración tiene acceso total. 
   • Cuenta Klaviyo
     Su clave API pública de Klaviyo, o ID del sitio.
   • Etiquetareventos comoSFCC
     Si elige etiquetar eventos como SFCC, tendrá acceso a flujos preconstruidos en Klaviyo que utilizan datos SFCC. Un inconveniente actual de etiquetar eventos es que si elige etiquetarlos, no tendrá acceso a las recomendaciones de Producto visto o Añadido al carro en los feeds de productos de Klaviyo. 
     
     • Si anteriormente instaló una versión de cartucho anterior a la 23.7.0 y ahora está actualizando a la versión 23.7.0 o superior, ajuste a No. Las integraciones creadas antes del 13 de julio de 2023 (es decir, las versiones de cartucho anteriores a la 23.7.0) generan métricas que no están etiquetadas como SFCC. Si en el pasado utilizó una versión anterior a la 23.7.0, este ajuste tiene en cuenta las antiguas convenciones de nomenclatura para evitar una discontinuidad de los datos métricos en su cuenta. 
   • Enviar evento "Añadido a la cesta" como "Añadir a la cesta"
     Si ha instalado previamente una versión de cartucho anterior a la 23.7.0, y ahora está actualizando a la versión 23.7.0 o superior, ajústelo a Sí. En caso contrario, ajústelo a No. Este ajuste impide la discontinuidad de los datos métricos en su cuenta. 
   • Klaviyo Email Field Selectors y Checkout Email Field Selector
     Consulte la sección siguiente para obtener información detallada sobre cómo configurar estos dos campos.
   • Tipo de imagen
     El tipo de imagen del producto que desea que se utilice en los datos del evento enviados a Klaviyo. Si no está seguro del tipo de imagen que debe establecer, vaya a Herramientas del vendedor > Productos y catálogos > Productos, haga clic en un producto y determine el tipo de vista que desea utilizar en función de lo que haya disponible (por ejemplo, grande, mediano, pequeño, alta resolución).
   • ID de lista de correo electrónico de marketing
     Puede recopilar suscriptores de correo electrónico en el pago y sincronizarlos con una lista de Klaviyo. Este ajuste es el ID de la lista en Klaviyo a la que desea añadir suscriptores de correo electrónico. Aprenda a encontrar el ID de una lista en Klaviyo. Para recopilar suscriptores de correo electrónico en la caja, también tendrá que añadir un fragmento de casilla de verificación que se describe en una sección posterior.
   • ID de lista de SMS de marketing
     Puede recopilar suscriptores de SMS en la caja y sincronizarlos con una lista de Klaviyo. Esta configuración es la lista ID Klaviyo a la que desea añadir suscriptores de SMS. Aprenda a encontrar el ID de una lista en Klaviyo. Si reúne tanto suscriptores de SMS como de correo electrónico, elija una lista diferente para los SMS que para el correo electrónico. Esto garantiza que el consentimiento se atribuya siempre al canal correcto. Para recopilar suscriptores de SMS en la caja, necesitará algunos otros requisitos previos, 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. 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 correo electrónico de Klaviyo y del selector de campo de correo electrónico de pago 

Estas preferencias son integrales para que Klaviyo identifique y rastree con éxito a los visitantes del sitio. Si un visitante no se identifica con Klaviyo, entonces no se rastreará ningún evento para ese visitante. Una vez que haya terminado la integración, puede aprender a probar su correo electrónico Klaviyo y la configuración del selector de campo de correo electrónico de pago en la sección Pruebe su configuración SFCC a continuación. 

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 entrada de correo electrónico y número de teléfono del sitio (con la excepción de la entrada de correo electrónico situada en la caja, 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", lo que permite introducir varios valores de cadena uno a uno). Se puede utilizar cualquier selector complejo que pueda emplearse en una hoja de estilo 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=email]. Asegúrese 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 caja 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 Field Selectors - simplemente introduzca un único selector CSS que apunte al campo de dirección de correo electrónico en el flujo de pago de su sitio, independientemente de si aparece al principio, al final o en medio del pago.

Configurar correctamente esta preferencia de sitio para que se dirija al campo de recopilación de correo electrónico en el pago es esencial para realizar un seguimiento correcto del evento Pago iniciado y, como tal, se recomienda encarecidamente que realice pruebas para asegurarse de que los eventos Pago iniciado aparecen en Klaviyo después de que se introduzca una dirección de correo electrónico en el campo de recopilación de correo electrónico en el pago. 

Tenga en cuenta también que el campo de correo electrónico de pago al que se dirige la preferencia de sitio Selector de campo de correo electrónico de pago se cableará automáticamente para identificar al usuario, además de activar el evento Pago iniciado; es decir, no es necesario incluir el selector CSS para el campo de correo electrónico de pago tanto en las preferencias de sitio Selector de campo de correo electrónico de Klaviyo como Selector de campo de correo electrónico de pago.

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

Ahora ha completado la configuración de fragmentos para su tienda SFRA. 

Configuración del fragmento de Site Genesis (SG)

1. Para añadir el KlaviyoFooter.isml al pie de página global: Añada el siguiente código al final de su archivo footer.isml (o cualquier plantilla similar que se cargue cerca del final de cada página).
   

   <isinclude template="klaviyo/klaviyoFooter"/>

2. Añadir fragmentos para la identificación de usuarios en el lado del servidor: Añada el siguiente fragmento a sus 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

3. A continuación, actualizará la llamada app.getView(...) para incluir klid como variable pdict.
   •  En su Cuenta-Mostrar controlador:
     

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

   • En su controlador de Cart-Show:
     

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

4. Para añadir el fragmento Added To Cart al controlador Cart-AddProduct: Añada el siguiente fragmento a su 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 */

5. Fragmentos de pago iniciado: Cuando añada fragmentos de Klaviyo a los controladores de pago para realizar un seguimiento de los eventos de Pago iniciado , es importante que tenga en cuenta lo siguiente:
   • El objetivo de añadir estos fragmentos es comprobar si se ha adjuntado una dirección de correo electrónico al objeto Cesta dentro del flujo de pago y, cuando se adjunte, disparar el evento Pago iniciado . Es importante captar la asociación de una dirección de correo electrónico con la cesta lo antes posible en el flujo de pago.
   • Debido a la personalización de la caja basada en el sitio, no es posible para Klaviyo definir exactamente qué controlador será el primero en recibir un objeto Cesta con una dirección de correo electrónico adjunta.
   • Le recomendamos que añada los fragmentos de código a todas las rutas principales que se activan dentro del proceso de pago. Si es capaz de utilizar el depurador para identificar exactamente cuándo se adjunta la dirección de correo electrónico a la cesta en su flujo de pago, no dude en añadir los fragmentos sólo a esa ruta, pero realice pruebas exhaustivas para asegurarse de que todas las rutas de pago posibles (invitado, conectado, conectado dentro del proceso de pago, etc.) activan el código.
6. El fragmento para la primera ruta golpeada en el pago (normalmente COCustomer-Start) es el siguiente. Insértelo en cualquier lugar antes de la llamada para renderizar la plantilla (es decir, app.getView(...)). Observe la diferencia clave en este fragmento -pasar el primer argumento del método KLCheckoutHelpers.startedCheckoutHelper como true en lugar de false- en comparación con los otros fragmentos de comprobación (resaltados a continuación). Observe que en el siguiente fragmento, el KLCheckoutHelpers.startedCheckoutHelper es verdadero en lugar de falso (como en los otros fragmentos de comprobación. Esto es esencial para que el código sepa que tenemos un nuevo evento de Pago iniciado que rastrear.

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

7. A continuación, actualice la llamada app.getView(...) para incluir klid como variable pdict:

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

8. Los siguientes fragmentos deben añadirse a la primera ruta que se dispare después de que se haya adjuntado una dirección de correo electrónico al objeto Cesta. Si no está seguro, o simplemente quiere cubrirse las espaldas, le recomendamos que añada este fragmento a todas las rutas siguientes:
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Ahorre
   • COPlaceOrder-Start
   Al igual que con los fragmentos anteriores, añada 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 */

9. Para las rutas que sí llaman directamente a las plantillas (por ejemplo, COShipping-Start), actualice la llamada a app.getView(...) para incluir klid como variable pdict. He aquí 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');

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

Ahora ha completado la configuración del snippet para su tienda Site Genesis. 

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

• Habilite los SMS en Klaviyo y configure 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 caja pueden colocarse en la plantilla shipmentCard.isml (app_storefront_base) dentro de SFRA o colocarse 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 suponen que su lenguaje de opt-in para correo electrónico y SMS está contenido en un paquete de recursos de propiedades llamado 'checkout'. Tendrá que sustituir `su.email.subscribe.resource.string.here` por `su.email.subscribe.resource.string.here`. y `su.sms.subscribe.resource.string.here` con las teclas correspondientes a su idioma de suscripción por correo electrónico y SMS, respectivamente. Este idioma aparecerá junto a la casilla de verificación. 

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

• Correo electrónico
  Suscríbase a las actualizaciones por correo electrónico
• SMS
  Suscríbase a las actualizaciones por SMS. Al marcar esta casilla e introducir su número de teléfono más arriba, da su 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 mediante 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. Puede darse de baja en cualquier momento respondiendo STOP o haciendo clic en el enlace para darse de baja (cuando esté disponible) en uno de nuestros mensajes. Consulte nuestra Política de privacidad [enlace] y las Condiciones 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:

• /buscar_pedidos
  Sincroniza los datos históricos de pedidos con Klaviyo 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 mayor personalización no disponible en el evento Confirmación de pedido. Para los correos electrónicos de confirmación de pedido en tiempo real, utilice el evento Confirmación de pedido del cartucho.
• /sitios
  Le permite seleccionar el sitio desde el que Klaviyo sincroniza los datos durante la configuración de la integración.
• /búsqueda_productos
  Conecta su catálogo a Klaviyo para habilitar funcionalidades que incluyen recomendaciones de productos en correos electrónicos.
• /products/*/variations
  Permite sincronizar variantes con Klaviyo para habilitar funcionalidades como Back in Stock.

Configuración del lado SFCC

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

1. Navegue hasta https://account.demandware.com/dw/account/APIAdmin y añadir un cliente API para Klaviyo. El ID de cliente de la API y la contraseña serán necesarios para generar el token de portador para la OCAPI.
2. 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.
3. 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. 1. 1. Añada el siguiente JSON bajo el tipo Tienda y el contexto Global (para toda la organización), sustituyendo SHOP_API_VERSION por la versión de su API de tienda OCAPI, y haga clic en Guardar.
            

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

            Una vez añadidos, los ajustes deberían parecerse a esto:
            
         2. Añada el siguiente JSON bajo el tipo Datos y el contexto Global (para toda la organización), sustituyendo DATA_API_VERSION por su versión de la API de datos OCAPI y, a continuación, haga clic en Guardar.
            

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

            Una vez añadidos, los ajustes deberían parecerse a esto:
            
4.  

Configuración del lado Klaviyo

1. En Klaviyo, haz clic en el nombre de tu cuenta en la esquina inferior izquierda y navega hasta integraciones > Añadir integraciones.
2. Busque Salesforce Commerce Cloud y haga clic en la tarjeta; a continuación, haga clic en Instalar.
3. Haga clic en Conectar a Salesforce Commerce Cloud en la página de aterrizaje. 
4. En la página siguiente, rellene la siguiente información: 
   • URL de la tienda
     El dominio de su sitio web (por ejemplo, ejemplo.com o dev03-na01-ejemplo.demandware.net).
   • Token de autenticación
     Cree un auth token para esta integración que se utilizará para solicitar un token de portador. El token de autenticación se genera codificando en base-64 el ID de cliente y la contraseña unidos por dos puntos (por ejemplo, xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx:contraseña).
   • Versión de la API de datos
     La versión de su API de datos para la que ha añadido el acceso en el paso Configuración del lado SFCC (por ejemplo, v19_10).
   • Versión de la API de la tienda
     La versión de la API de su tienda para la que ha añadido el acceso en el paso Configuración del lado SFCC (por ejemplo. v19_10).
   • ID del catálogo
     El ID del catálogo SFCC a sincronizar con Klaviyo (por ejemplo, storefront-catalog-es).
     
5. Una vez introducidas estas credenciales, haga clic en el enlace Recuperar lista de sitios para recuperar una lista de sitios en su instancia SFCC.
6. 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:

1. 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.
2. Busque en su catálogo.
3. Ver la página de una categoría.
4. Ver la página de un producto.
5. Añada un artículo a su cesta.
6. Haga un pedido de prueba.
7. 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:

1. Abra una ventana de navegador de incógnito.
2. En la consola de desarrollador introduzca el siguiente comando y pulse intro:
   klaviyo.isIdentified();
   Esto debería dar como resultado la siguiente salida:
   Promesa {<fulfilled>: false}
3. 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.
4. Vuelva a la consola de desarrollador e introduzca klaviyo.isIdentified(); otra vez. Esto debería dar como resultado la siguiente salida:
   Promesa {<fulfilled>: true}
5. 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 :

1. Añada uno o varios productos a la cesta e inicie el pago.
2. 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.
3. 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.

Recursos adicionales 

• Referencia de datos de Salesforce Commerce Cloud
• Cómo actualizar su cartucho de Salesforce Commerce Cloud
• Con qué frecuencia se sincronizan las integraciones de referencia