primeros pasos con Salesforce Commerce Cloud

Objetivos de aprendizaje

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

Hay 3 pasos principales para integrar SFCC con Klaviyo:

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

Antes de empezar

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

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

Si quieres empezar integrando primero tu entorno de desarrollo, puedes crear una cuenta 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 "Dev" o "Staging" en el nombre de la empresa que utilices al configurar la cuenta, para diferenciar mejor la cuenta al iniciar sesión. 

Coloca los cartuchos Klaviyo

Descarga los cartuchos

Puedes encontrar nuestro listado de aplicaciones en Salesforce AppExchange. En AppExchange, puedes obtener más información sobre Klaviyo y hacer clic en Get It Now para acceder a Github, donde nuestros cartuchos están disponibles en un archivo zip para su descarga. Si tienes un sitio SFRA, descarga el archivo zip KlaviyoSFRA, y si tienes un sitio 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 sitios web basados en Site Genesis, e int_klaviyo_sfra es para sitios web basados en SFRA.
• int_klaviyo_core: para ambos tipos de infraestructuras, contiene algunas funciones básicas que se solapan.

importar los cartuchos

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

En código VS

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

En Eclipse

1. Navega hasta Administración > importar > General > Proyectos existentes en el espacio de trabajo.
2. importa el directorio int_klaviyo_core utilizando el asistente para importar.
3. Selecciona la instancia SFCC con la que conectar el cartucho.
4. Selecciona Propiedades.
5. Selecciona Referencias del proyecto.
6. Comprueba 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).

Añade los cartuchos a la ruta de cartuchos

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

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

Una vez que hayas hecho clic en Aplicar, ahora deberías ver los 2 cartuchos al principio del campo denominado Recorrido efectivo del cartucho.

Añadir servicios

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

1. Navega hasta Administración > Desarrollo del sitio > Importar el sitio & Exportar > Servicios.
2. Sube e importa el archivo metadatos.zip.
   
3. Cuando se te pida que confirmes si deseas importar el archivo seleccionado, selecciona Aceptar.
4. Ahora deberías ver la importación en marcha 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 gestionar los siguientes ajustes:
   • Klaviyo Activado
     Debe estar en "Sí" para activar el cartucho.
   • Klaviyo Clave privada
     A Klaviyo clave privada de API. Asegúrate de que la Klaviyo privada clave de API que utilizas para esta integraciones tiene acceso total. 
   • Klaviyo cuenta
     Tu Klaviyo clave pública de API, o ID del sitio.
   • Etiquetareventos como SFCC
     Si eliges etiquetar eventos como SFCC, tendrás acceso a flujo prediseñado en Klaviyo utilizando datos SFCC. Un inconveniente actual de etiquetar eventos es que, si decides etiquetarlos, no tendrás acceso a las recomendaciones Producto visto o Añadido al carro en Klaviyo fuente de productos. 
     
     • Si previamente instalaste una versión de cartucho anterior a la 23.7.0, y ahora estás actualizando a la versión 23.7.0 o superior, establece 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étrica que no está etiquetada como SFCC. Si en el pasado utilizaste una versión anterior a la 23.7.0, este ajuste cuenta las antiguas convenciones de nomenclatura para evitar una discontinuidad de datos métricos en tu cuenta. 
   • Enviar evento "Añadido a la cesta" como "Añadir a la cesta"
     Si previamente instalaste una versión de cartucho anterior a la 23.7.0, y ahora estás actualizando a la versión 23.7.0 o superior, establece Sí. Si no, pon No. Este ajuste evita la discontinuidad de datos métricos en tu cuenta. 
   • Klaviyo Email Selector de camposypágina de pago correo electrónico Selector de campos
     Consulta la sección siguiente para obtener información detallada sobre cómo configurar estos 2 campos.
   • Tipo de imagen
     El tipo de imagen del producto que quieres que se utilice en los datos del evento enviados a Klaviyo. Si no estás seguro de qué tipo de imagen establecer, ve a Herramientas del vendedor > Productos y Catálogos > Productos, haz clic en un producto y determina qué tipo de vista quieres utilizar en función de lo que haya disponible (por ejemplo, grande, mediano, pequeño, alta resolución).
   • Marketing lista de correos electrónicos ID
     Puedes recopilar suscriptores de correo electrónico en la página de pago y sincronizarlos con una lista de Klaviyo. Este parámetro es el ID de la lista en Klaviyo a la que deseas añadir el suscriptor de correo electrónico. Aprende a encontrar el ID de una lista en Klaviyo. Para recoger el suscriptor de correo electrónico en la página de pago, también tendrás que añadir un fragmento de casilla de verificación que se describe en una sección posterior.
   • Marketing SMS lista ID
     Puedes recopilar SMS suscriptores en la página de pago y sincronizarlos con una Klaviyo lista. Este parámetro es el ID Klaviyo lista a la que deseas añadir SMS suscriptor. Aprende a encontrar el ID de una lista en Klaviyo. Si reúnes tanto SMS como correo electrónico suscriptor, elige una lista diferente para SMS que para el correo electrónico. Esto garantiza que el consentimiento se atribuya siempre al canal correcto. Para recoger SMS suscriptor en página de pago, necesitarás 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ías ver 2 nuevas entradas en 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 del selector de campo de página de pago correo electrónico 

Estas preferencias son esenciales para que Klaviyo identifique y siga con éxito a los visitantes del sitio. Si un visitante no se identifica con Klaviyo, no se rastreará ningún evento para ese visitante. Una vez que hayas terminado la integración, puedes aprender a probar tu configuración del correo electrónico Klaviyo y del selector de campo de la página de pago correo electrónico en la sección Prueba tu configuración SFCC que aparece más abajo. 

Klaviyo Email Selectores de campo

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

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

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

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

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

Configurar correctamente esta preferencia de sitio para que se dirija al campo de recogida de correo electrónico de la página de pago es esencial para realizar un seguimiento correcto del evento Inicio de página de pago, por lo que se recomienda encarecidamente que realices una prueba para asegurarte de que los eventos Inicio de página de pago aparecen en Klaviyo después de introducir una dirección de correo electrónico en el campo de recogida de correo electrónico de la página de pago. 

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

Añadir fragmentos de configuración

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

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

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

<isinclude template="klaviyo/klaviyoFooter"/>

Ya has completado la configuración del fragmento para tu tienda SFRA, comercio. 

Configuración del fragmento de Site Genesis (SG)

1. Para añadir el 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"/>

2. Añadir fragmentos de código para la identificación del usuario en el lado del servidor: Añade el siguiente fragmento a tus controladores cuenta-Show y Cart-Show en cualquier lugar antes de la llamada a renderizar su respectiva plantilla (es decir, app.getView(...)).
   

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

3. A continuación, actualizarás la llamada app.getView(...) para incluir klid como variable pdict.
   •  En tu controlador de cuenta-Show:
     

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

   • En tu controlador de Cart-Show:
     

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

4. Para añadir el fragmento de código Añadido al carro al controlador Cart-AddProduct: Añade el siguiente fragmento a tu controlador Añadir al carrito en cualquier lugar antes de la llamada para representar la plantilla (es decir, app.getView(...)).
   

    /* Klaviyo Seguimiento del evento Añadido al carro */
    var BasketMgr = require('dw/order/BasketMgr');
    var klaviyoUtils = require('*/cartridge/scripts/Klaviyo/utils');
    var addedToCartData = require('*/cartridge/scripts/Klaviyo/eventData/addedToCart');
    if(klaviyoUtils.klaviyoEnabled){
       var exchangeID = klaviyoUtils.getKlaviyoExchangeID();
       var dataObj, serviceCallResult, currentBasket;
    var isKlDebugOn = request.getHttpReferer().includes('kldebug=true') ? true
   : false;
    if (exchangeID) {
    currentBasket = BasketMgr.getCurrentBasket();
       if (cestaactual && cestaactual.getProductLineItems().toArray().length)
       {
    dataObj = addedToCartData.getData(currentBasket);
       serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.addedToCart,
       false);
    if (isKlDebugOn) {
    var klDebugData = klaviyoUtils.prepareDebugData(dataObj);
       var serviceCallData = klaviyoUtils.prepareDebugData(serviceCallResult);
       var siteGenKlDebutData = `<input type="hidden" name="siteGenKlDebutData"
    id="siteGenKlDebutData" value="${klDebugData}" />`;
      var siteGenServiceCallData = `<input type="hidden" name="siteGenServiceCallData"
    id="siteGenServiceCallData" value="${serviceCallData}" />`;
    response.writer.print(siteGenKlDebutData);
       response.writer.print(siteGenServiceCallData);
       }
      }
      }
      }
      /* END Klaviyo Seguimiento del evento Añadido a la cesta */

5. Fragmentos de página de pago iniciados: Cuando añadas fragmentos de Klaviyo a los controladores de la página de pago para realizar un seguimiento de los eventos de Inicio de página de pago, es importante que tengas 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 Página de pago, y cuando se adjunte, disparar el evento Página de pago iniciada . Es importante captar la asociación de una dirección de correo electrónico con la Cesta lo antes posible en la página de pago flujo.
   • Debido a la personalización de la página de pago basada en el sitio, no es posible que Klaviyo defina exactamente qué controlador será el primero en recibir un objeto Cesta con una dirección de correo electrónico adjunta.
   • Recomendamos añadir el fragmento de código a todas las rutas principales que se activen dentro de la página de pago. Si eres capaz de utilizar el depurador para identificar exactamente cuándo se adjunta la dirección de correo electrónico a la cesta en tu página de pago flujo, siéntete libre de añadir los fragmentos sólo a esa ruta, pero haz pruebas exhaustivas para asegurarte de que todas las posibles rutas de la página de pago (invitado, iniciar sesión, iniciar sesión dentro de la página de pago, etc.) activan el código.
6. A continuación se muestra el fragmento de la primera ruta encontrada en la página de pago (normalmente COCustomer-Start). Insértalo en cualquier lugar antes de la llamada a renderizar la plantilla (es decir, app.getView(...)). Observa 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 página de pago (resaltados a continuación). Observa que en el siguiente fragmento, el KLCheckoutHelpers.startedCheckoutHelper es verdadero en lugar de falso (como en los otros fragmentos de página de pago). Esto es esencial para que el código sepa que tenemos un nuevo evento Empezar página de pago que seguir.

   /* Klaviyo Inicio página de pago evento seguimiento */
    var KLCheckoutHelpers = require('*/cartridge/scripts/Klaviyo/checkoutHelpers');
    var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
      var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(true, customerEmail);
    if (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
    app.getView({
              klDebugData: KLTplVars.klDebugData,
              serviceCallData: KLTplVars.serviceCallData
          }).render('Klaviyo/klaviyoDebug');
      }
     /* FIN Klaviyo Inicio página de pago evento seguimiento */
   

7. A continuación, actualiza 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('página de pago/checkoutlogin');

8. Los siguientes fragmentos deben añadirse a la primera ruta que se dispara después de adjuntar una dirección de correo electrónico al objeto Cesta. Si no estás seguro, o simplemente quieres cubrirte las espaldas, te recomendamos que añadas este fragmento a todas las rutas siguientes:
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Ahorra
   • COPlaceOrder-Start
   Al igual que con los fragmentos anteriores, añade este fragmento en cualquier lugar antes de la llamada a renderizar la plantilla, o antes de las llamadas a los controladores posteriores (ejemplo de COBilling-Save: app.getController('COSummary').Start()). 

   /* Klaviyo Inicio página de pago evento seguimiento */
    var KLCheckoutHelpers = require('*/cartridge/scripts/Klaviyo/checkoutHelpers');
   var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
     var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(false, customerEmail);
   if (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
   app.getView({
   klDebugData: KLTplVars.klDebugData,
   serviceCallData: KLTplVars.serviceCallData
   }).render('Klaviyo/klaviyoDebug');
   }
   /* FIN Klaviyo Inicio página de pago evento seguimiento */

9. Para las rutas que sí llaman directamente a plantilla (por ejemplo, COShipping-Start), actualiza la llamada app.getView(...) para incluir klid en como variable 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('página de pago/shipping/singleshipping');

10. Para añadir el fragmento de confirmación de pedido al controlador COSummary-ShowConfirmation: Añade el siguiente fragmento a tu controlador COSummary-ShowConfirmation en cualquier lugar antes de la llamada para representar la plantilla.

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

Ya has completado la configuración del fragmento para tu Sitio Génesis tienda, comercio. 

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

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

Por ejemplo, para que estos fragmentos aparezcan en la página de pago pueden colocarse en la plantilla shipmentCard.isml (app_storefront_base) dentro de SFRA o colocarse en la plantilla facturación.isml (app_storefront_core) dentro de SiteGen. 

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

Los siguientes fragmentos suponen que tu lenguaje de opt-in para correo electrónico y SMS está contenido en un paquete de recursos de propiedades llamado "página de pago". Tendrás que sustituir `tu.correo.electrónico.suscribirse.cadena.de.recursos.aquí`. y `tu.SMS.suscribirse.cadena.de.recursos.aquí`. con las teclas correspondientes a tu idioma de suscripción por correo electrónico y SMS, respectivamente. Esta lengua aparecerá junto a la casilla de verificación. 

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

• correo electrónico
  suscribirse a correo electrónico actualizar
• SMS
  suscríbete a SMS actualizar. Al marcar esta casilla e introducir tu número de teléfono 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 los mensajes enviados mediante marcación automática. El consentimiento no es condición para ninguna compra. Pueden aplicarse tarifas de mensajes y datos. La frecuencia de los mensajes varía. Puedes cancelar la suscripción en cualquier momento respondiendo STOP o haciendo clic en el enlace de cancelación de suscripción (cuando esté disponible) en uno de nuestros mensajes. Consulta nuestra política de privacidad [enlace] y las condiciones del servicio [enlace].

 <"""" ${KLSmsSubscribed} > isset name="KLEmailSubscribed" value="${(session.custom.KLEmailSubscribe
  == true) ? 'checked' : ''}" scope="page" />
 < isset name="KLSmsSubscribed" value="${(session.custom.KLSmsSubscribe == true)
  ? 'checked' : ''}" scope="page" />
 < input type="checkbox" id="KLEmailSubscribe" ${KLEmailSubscribed} /> ${Resource.msg('your.email.subscribe.resource.string.here',
  'checkout', null)} <br />
  < input type= xml-ph-0031@deepl.inter ${Resource.msg('your.sms.subscribe.resource.string.here',
  'checkout', null)}

Habilita las integraciones OCAPI en Klaviyo

Puntos de conexión

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

• /búsqueda_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 segmentación y filtro de flujo, y son ideales para una personalización mejorada no disponible en el evento Confirmación de pedido. Para confirmar el pedido en tiempo real por correo electrónico, utiliza el evento Confirmación de pedido del cartucho.
• /sitios
  Te permite seleccionar desde qué sitio Klaviyo sincroniza los datos durante la configuración de tus integraciones.
• /búsqueda_productos
  Conecta tu catálogo a Klaviyo para habilitar funcionalidades que incluyan recomendaciones de productos en el correo electrónico.
• /products/*/variante
  Permite sincronizar la variante con Klaviyo para habilitar funciones como la reposición de existencias, el inventario bajo y el flujo de bajada de precios. 

Configuración del lado SFCC

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

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

1. Navega a https://account.demandware.com/dw/account/APIAdmin y añadir una interfaz de programación de aplicaciones (API) cliente para Klaviyo. El ID de cliente y la contraseña de la interfaz de programación de aplicaciones (API) serán necesarios para generar el token de portador para OCAPI.
2. Una vez añadido el cliente de interfaz de programación de aplicaciones ( API), ve a Administración > Desarrollo del sitio > Configuración de la interfaz de programación de aplicaciones (API) de Open Commerce en el SFCC Business Gerente.
3. Añade los siguientes fragmentos, sustituyendo la versión de la interfaz de programación de aplicaciones (API) y el ID de cliente. Disponemos de equipos de asistencia interfaz de programación de aplicaciones (API) versiones 19.5 y superiores, así como 18.8. Sustituye CLIENT_ID por el ID de cliente de la interfaz de programación de aplicaciones (API) generado a partir de la configuración del cliente de la interfaz de programación de aplicaciones (API) en el paso anterior (debería ser algo parecido a "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"). Si la configuración ya existe para estas interfaces de programación de aplicaciones (API), puede que sólo tengas que añadir las secciones resaltadas a continuación a la matriz JSON de clientes existente.
   1. Añade el siguiente JSON bajo el tipo Tienda y el contexto Global (para toda la organización), sustituyendo SHOP_API_VERSION por la versión de tu OCAPI Shop interfaz de programación de aplicaciones (API), y haz 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 ser similares a estos:
      
   2. Añade el siguiente JSON bajo el tipo datos y el contexto Global (para toda la organización), sustituyendo DATA_API_VERSION por la versión de tu OCAPI datos interfaz de programación de aplicaciones (API), y haz 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 ser similares a estos:
      

Configuración del lado 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 página siguiente, rellena la siguiente información: 
   • tienda, comercio URL
     El dominio de tu sitio web (por ejemplo, ejemplo.com o dev03-na01-ejemplo.demandware.net).
   • token de autenticación
     Crea un token de aut enticación 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 datos interfaz de programación de aplicaciones (API)
     La versión de tu datos interfaz de programación de aplicaciones (API) para la que has añadido el acceso en el paso Configuración del lado SFCC (por ejemplo, v19_10).
   • Versión de la interfaz de programación de aplicaciones (API) de la tienda
     La versión de la interfaz de programación de aplicaciones (API) de tu tienda a la que has añadido 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). Puede encontrar su ID de catálogo en Salesforce Business Manager en Herramientas de vendedor > Productos y catálogos > Catálogos. 
     
5. Una vez que hayas introducido estas credenciales, haz clic en el enlace Recuperar lista de sitios para recuperar una lista de sitios en tu instancia SFCC.
6. Una vez recuperados los sitios, selecciona el sitio o sitios que deseas integrar con esta cuenta y haz clic en Finalizar configuración. Ahora tus integraciones deberían empezar a sincronizar tus pedidos, catálogo y datos de clientes.

Prueba tus integraciones SFCC

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

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

Prueba Klaviyo Email Selectores de campo

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

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

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

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

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

Resultado

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

Recursos adicionales 

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