Primeros pasos con Salesforce Commerce Cloud

Qué aprenderás

Aprende a integrar Salesforce Commerce Cloud con Klaviyo. La integración de cartucho y API de Klaviyo permite a los sitios web que usan Salesforce Commerce Cloud (anteriormente Demandware) conectarse rápidamente y enviar datos tanto en tiempo real como históricos a Klaviyo. Cuando integras Klaviyo con Salesforce Commerce Cloud (SFCC), Klaviyo empezará a hacer un seguimiento de las acciones que realizan las personas en tiempo real, como la navegación por el sitio web, el seguimiento de búsquedas, la visualización de productos, la visualización de categorías, la adición de artículos al carrito, el pago y los pedidos.

Hay 3 pasos principales para integrar SFCC con Klaviyo:

1. Instalación del paquete de Klaviyo en SFCC.
2. Añadir fragmentos de activación a SFCC.
3. Activar la integración de SFCC OCAPI en Klaviyo.

Antes de empezar

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

Para poder utilizar nuestro paquete de la versión 23.7.0 (o cualquier versión posterior), te recomendamos que actualices el modo de compatibilidad de SFCC a 21.7 o una versión posterior.

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

También se recomienda añadir direcciones IP de Klaviyo a la lista de permitidos de tu proveedor de cortafuegos para minimizar los problemas de autenticación y configuración. Para obtener más información, consulta Cómo añadir direcciones de IP de tráfico de la integración de Klaviyo a la lista de permitidos.

Configurar los cartuchos de Klaviyo

Descargar los cartuchos

Puedes encontrar la ficha de nuestra aplicación en Salesforce AppExchange. En AppExchange, puedes obtener más información sobre Klaviyo y hacer clic en Consíguelo ahora para que se te lleve a Github, donde nuestros cartuchos están disponibles en un archivo zip para descargar. Si tienes un sitio web de SFRA, descarga el archivo ZIP KlaviyoSFRA, y si tienes un sitio web de Site Genesis, descarga el archivo ZIP KlaviyoSG.

Tendrás que configurar 2 cartuchos; ambos se incluyen 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 cartuchos en Visual Studio Code o Eclipse para que estén disponibles para vincularlos con tu 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 repositorio de código, como carpetas hermanas de las otras carpetas de cartridges.

En Eclipse

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

Añade los cartuchos a la ruta del cartucho

Una vez importados los cartuchos, hay que añadirlos a la lista de cartuchos que usa tu sitio desde Business Manager de SFCC.

1. Ve 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 de cartuchos etiquetada como Cartridges, añade los nombres de los cartuchos importados de Klaviyo, con el cartucho principal al final (int_klaviyo:int_klaviyo_core o int_klaviyo_sfra:int_klaviyo_core).
5. Haz clic en Aplicar.

Cuando hagas clic en Aplicar, deberías ver ahora los 2 cartuchos al principio del campo etiquetado como Effective Cartridge Path.

Añadir servicios

Después de importar los cartuchos y añadirlos a la ruta de cartuchos del sitio, se debe añadir el Klaviyo Service para habilitar la configuración de ajustes para el cartucho. En el directorio raíz del archivo zip de los cartuchos de Klaviyo 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. Sube el archivo metadata.zip y, a continuación, impórtalo.
   

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 de comerciante > Preferencias del sitio > Preferencias personalizadas > klaviyo.
   
   Desde aquí, puedes gestionar los siguientes ajustes:

• Klaviyo habilitado
  Debe configurarse en "Sí" para habilitar el cartridge.
• 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 integraciones tenga concedido acceso completo.
• Cuenta de Klaviyo
  Tu clave de API pública de Klaviyo, o ID del sitio.
• Etiquetar eventos como SFCC
  Si decides etiquetar los eventos como SFCC, tendrás acceso a flujos predefinidos en Klaviyo que usan datos de SFCC. Un inconveniente actual de etiquetar eventos es que, si decides etiquetarlos, no tendrás acceso a las recomendaciones de Viewed Product o Added to Cart en los feeds de productos de Klaviyo.
  
  • Si instalaste anteriormente 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 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 en el pasado usaste una versión anterior a la 23.7.0, esta configuración tiene en cuenta las antiguas convenciones de nomenclatura para evitar una discontinuidad de los datos de métricas en tu cuenta.
• Enviar el evento de añadido al carrito como «Añadir al carrito»
  Si instalaste anteriormente una versión del cartucho anterior a la 23.7.0 y ahora estás actualizando a la versión 23.7.0 o posterior, establécelo en Sí. De lo contrario, establécelo en No. Esta configuración evita la discontinuidad de los datos de métricas en tu cuenta.
• Selectores de campo de Klaviyo Email y Selector de campo de email de Checkout
  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 use en los datos de eventos enviados a Klaviyo. Si no estás seguro de qué tipo de imagen configurar, ve a Herramientas de comerciante > Productos y catálogos > Productos, haz clic en un producto y determina qué tipo de vista quieres usar según lo que esté disponible (p. ej., grande, mediano, pequeño, alta resolución).
• ID de lista de Email marketing
  Puedes recopilar suscriptores de email en la página de pago y sincronizarlos con una lista de Klaviyo. Este ajuste es el ID de la lista en Klaviyo a la que quieres añadir suscriptores de email. Aprende a encontrar un ID de lista en Klaviyo. Para recopilar suscriptores de email en la página de pago, también tendrás que añadir un fragmento de código de casilla que se describe en una sección posterior.
• ID de lista de marketing por SMS
  Puedes recopilar suscriptores de SMS al pagar y sincronizarlos con una lista de Klaviyo. Este ajuste es el ID de la lista de Klaviyo a la que quieres añadir suscriptores de SMS. Descubre cómo encontrar un ID de lista en Klaviyo. Si recopilas suscriptores de SMS y email, elige una lista diferente para SMS que para email. Esto garantiza que el consentimiento siempre se atribuya correctamente al canal adecuado. Para recopilar suscriptores de SMS al pagar, necesitarás algunos requisitos previos adicionales, junto con un fragmento de código 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 Administration > Operations > Services, ahora deberías ver 2 nuevas entradas en la pestaña Services llamadas KlaviyoEventService y KlaviyoSubscribeProfilesService, cada una con sus respectivas entradas de perfil y credenciales.

Configurar selectores del campo de Email de Klaviyo Email y el selector del campo de Email del pago

Estas preferencias son fundamentales para que Klaviyo identifique y realice 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 obtener más información sobre cómo probar la configuración del selector de campo de email de Klaviyo Email y de email de pago en la sección Prueba la configuración de SFCC a continuación.

Selectores de campo de Klaviyo Email

La preferencia del sitio Selectores de campos de Klaviyo Email se usa para segmentar todos y cada uno de los campos de entrada de email y número de teléfono en el sitio (con la excepción de la entrada de email ubicada en el proceso de pago, que se trata a continuación). Identificamos estos campos mediante selectores CSS estándar, y cada uno se añade individualmente a la preferencia del sitio (que es un «conjunto de cadenas», lo que permite introducir varios valores de cadena uno a uno). Se puede usar cualquier selector complejo que se pueda usar 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 todo el sitio en función de atributos compartidos; por ejemplo, input[type=email]. Asegúrate de evitar orientar las entradas mediante cualquier ID generada 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 (p. ej., #dwfrm_login_username_d0fignzngiyq).

Ten en cuenta que los campos añadidos al DOM después de que se cargue la página también se pueden segmentar. Algunos ejemplos son un campo de dirección de email que se inserta en un modal después de una llamada AJAX, o uno que se inyecta en el DOM mediante JavaScripts de terceros.

Ten en cuenta también que los campos de número de teléfono por sí solos pueden no identificar por completo al usuario para Klaviyo, en función de tu configuración de SMS en tu cuenta de Klaviyo (si SMS está habilitado y tienes un número de envío asociado al país del número de teléfono introducido, se identificará el navegador). Por lo tanto, añadir selectores de CSS para segmentar campos de número de teléfono puede considerarse «un extra» o «según sea necesario», mientras que añadirlos para campos de email debe considerarse esencial.

Selector de campo de Email de pago

El campo de recopilación de email 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 Klaviyo Email Field Selectors: basta con introducir un único selector CSS que apunte al campo de dirección de email en el flujo de pago de tu sitio, independientemente de 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 email en el pago es esencial para rastrear correctamente el evento Started Checkout y, por tanto, es muy recomendable que hagas una prueba para asegurarte de que los eventos Started Checkout aparecen en Klaviyo después de introducir una dirección de email en el campo de recopilación de email en el pago.

Ten en cuenta también que el campo de email 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 CSS del campo de email 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 paquete es añadir los fragmentos a los archivos de plantilla de tu sitio web para que el paquete se comunique con el sitio web. Estos pasos son muy distintos para la infraestructura de Site Genesis (SG) y Storefront Reference Architecture (SFRA), así que asegúrate de seguir las instrucciones correspondientes a tu configuración.

Configuración del fragmento de Storefront Reference Architecture (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 de código para tu tienda SFRA.

Configuración del fragmento de Site Genesis (SG)

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

<isinclude template="klaviyo/klaviyoFooter"/>

1. Para añadir fragmentos de código para la identificación de usuarios del lado del servidor: añade el siguiente fragmento de código a tus controladores Account-Show y Cart-Show en cualquier lugar antes de la llamada para renderizar sus respectivas plantillas (es decir, app.getView(...)).
   

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

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

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

• En tu 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 añadir el fragmento de código Añadido al carrito al controlador Cart-AddProduct: añade el siguiente fragmento de código 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 de Started Checkout: al añadir fragmentos de Klaviyo a los controladores de pago para hacer el seguimiento de los eventos Started Checkout , es importante tener en cuenta lo siguiente:
   • El objetivo de añadir estos fragmentos de código es comprobar si se ha adjuntado una dirección de email 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 email con el Basket lo antes posible en el flujo de pago.
   • Debido a la personalización del proceso de pago en el sitio, Klaviyo no puede definir exactamente qué controlador será el primero en recibir un objeto Basket con una dirección de email asociada.
   • Recomendamos añadir los fragmentos de código a todas las rutas principales que se activan en el proceso de pago. Si puedes usar el depurador para identificar exactamente cuándo se adjunta la dirección de email a la cesta en tu flujo de proceso de pago, no dudes en añadir los fragmentos de código solo a esa ruta, pero haz pruebas exhaustivas para asegurarte de que todas las rutas posibles del proceso de pago (como invitado, con sesión iniciada, iniciando sesión durante el proceso de pago, etc.) activan el código.
2. A continuación se muestra el fragmento para el primer acceso a una ruta en el proceso de pago (normalmente 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 de este fragmento (pasar 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 que aparece a continuación, el método KLCheckoutHelpers.startedCheckoutHelper 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 Started Checkout 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 variable de 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 deben añadirse a la primera ruta que se ejecuta después de que se haya adjuntado una dirección de email al objeto Basket. Si no estás seguro o simplemente quieres curarte en salud, te recomendamos añadir este fragmento a todas las rutas siguientes: al igual que con los fragmentos anteriores, añade este fragmento en cualquier lugar antes de la llamada para renderizar la plantilla o antes de las llamadas a los controladores posteriores (ejemplo de COBilling-Save: app.getController(‘COSummary’).Start()).
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Save
   • 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. Para las rutas que sí llaman directamente a las plantillas (por ejemplo, COShipping-Start), actualiza la llamada app.getView(...) para incluir klid como una variable pdict. Este es 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 añadir el fragmento de código de Order Confirmation al controlador COSummary-ShowConfirmation: añade 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 has completado la configuración del fragmento de código para tu tienda Site Genesis.

Añadir el consentimiento en los fragmentos de casilla de verificación durante el pago (SG y SFRA)

Para recopilar el consentimiento en la página de pago para email y SMS, tendrás que incluir un fragmento de código para que las casillas de verificación de consentimiento aparezcan donde quieras, 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 el proceso de compra, 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 encontrarás los fragmentos de código ISML tanto para Site Genesis como para SFRA, y puedes colocarlos en cualquier parte del flujo de pago que mejor se adapte a tu sitio específico. Ten en cuenta que, para que el consentimiento en el flujo de pago funcione correctamente en Site Genesis, debes haber incluido el fragmento de código de confirmación de pedido al que se hace referencia en la sección Añadir fragmentos de configuración anterior.

Los fragmentos de código a continuación asumen que tu lenguaje de consentimiento para email y SMS se incluye en un paquete de recursos de propiedades llamado «checkout». Tendrás que reemplazar `your.email.suscribirse.resource.string.here` y `your.sms.subscribe.resource.string.here` con las claves que corresponden a tu lenguaje de consentimiento para email y SMS, respectivamente. Este texto aparecerá junto a la casilla.

Por ejemplo, tu texto de suscripción podría verse así:

• Email
  Suscríbete para recibir novedades por email
• SMS
  Suscribirse a las actualizaciones de SMS. Al marcar esta casilla e introducir tu número de teléfono más arriba, das tu consentimiento para recibir mensajes de texto de marketing (como [códigos de promoción] y [recordatorios de carrito]) de [nombre de la empresa] en el número facilitado, incluidos mensajes enviados mediante marcación automática. El consentimiento no es una condición de compra. Pueden aplicarse tarifas de mensajes y datos. La frecuencia de los mensajes varía. Puedes darte de baja en cualquier momento respondiendo STOP o haciendo clic en el enlace para darte de baja (cuando esté disponible) en uno de nuestros mensajes. Consulta nuestra política de privacidad [link] y los términos 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)}

Activar la integración de OCAPI en Klaviyo

Puntos de conexión

Para integrarte con SFCC para el catálogo de productos y los datos de pedidos históricos o en curso, Klaviyo usa cuatro punto de conexión de OCAPI:

• /order_search
  Sincroniza los datos históricos de pedidos con Klaviyo y sincroniza los eventos de pedidos en curso 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 a partir del evento Order Confirmation. Para emails de confirmación de pedido en tiempo real, usa el evento Order Confirmation del cartucho.
• /sites
  Te permite seleccionar desde qué sitio sincroniza datos Klaviyo durante la configuración de la integración.
• /product_search
  Conecta tu catálogo con Klaviyo para habilitar funciones, como recomendaciones de productos en los emails.
• /products/*/variations
  Permite sincronizar variantes con Klaviyo para habilitar funcionalidades como los flujos de reposición de stock, inventario bajo y bajada de precio.

Configuración del lado de SFCC

Antes de que podamos comunicarnos con OCAPI de SFCC, debes configurar algunos permisos y ajustes en SFCC.

Ten en cuenta que, aunque la integración de Klaviyo requiere permisos de POST para order_search y product_search, en realidad no estamos publicando datos en SFCC; esto se debe al diseño de la OCAPI de SFCC.

1. Ve a https://account.demandware.com/dw/account/APIAdmin y añade un cliente de API para Klaviyo. El ID y la contraseña del cliente de API serán necesarios para generar el token de portador para OCAPI.
2. Cuando se añada el cliente de API, navega hasta Administración > Desarrollo del sitio > Configuración de la API de Open Commerce en el Mánager empresarial de SFCC.
3. Añade los siguientes fragmentos, sustituyendo la versión de la API y el ID de cliente. Admitimos versiones de la API 19.5 y superiores, así como la 18.8. Sustituye CLIENT_ID por el ID de cliente de la API generado a partir de la configuración del cliente de la API del paso anterior (esto debería parecerse a algo como "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"). Si la configuración ya existe para estas API, es posible que solo tengas que añadir las secciones resaltadas a continuación a la matriz JSON de clientes existente.
   1. Añade el siguiente JSON en el tipo Shop y el contexto Global (organization-wide), sustituyendo SHOP_API_VERSION por la versión de tu Shop API de OCAPI y, a continuación, haz clic en Guardar.
      Una vez añadido, la configuración debería aparecer de forma similar a esta:
      

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

1. Añade el siguiente JSON en el tipo Data y el contexto Global (organization-wide), sustituyendo DATA_API_VERSION por la versión de tu Data API de OCAPI, y luego haz clic en Guardar.
   Una vez añadido, la configuración debería mostrarse de forma 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 en Klaviyo

1. En Klaviyo, selecciona Integraciones > Añadir integraciones.
2. Busca Salesforce Commerce Cloud y haz clic en la tarjeta; después, haz clic en Instalar.
3. Haz clic en Conectarse a Salesforce Commerce Cloud en la página de destino.
4. En la página siguiente, completa la siguiente información:
   • URL de la tienda
     El dominio de tu sitio web (p. ej., 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 mediante la codificación Base64 del ID de cliente y la contraseña unidos por dos puntos (p. ej., xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • Versión de la API de datos
     La versión de tu API de datos a la que has concedido acceso en el paso de configuración del lado de SFCC (p. ej., v19_10).
   • Versión de la API de Shop
     La versión de tu API de Shop para la que añadiste 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 introducido estas credenciales, haz clic en el enlace Recuperar lista de sitios para recuperar una lista de sitios en tu instancia de SFCC.
6. Una vez recuperados los sitios, selecciona el/los sitio(s) que quieras integrar con esta cuenta y haz clic en Completar configuración. Ahora tu integración debería empezar a sincronizar tus datos de pedidos, catálogo y clientes.

Probar tu integración de SFCC

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

1. Aplícate una cookie añadiendo el parámetro de URL utm_email con tu dirección de email en la barra de direcciones. Por ejemplo: https://www.example.com/?utm_email=your@email.com.
2. Busca en tu catálogo.
3. Ver una página de categoría.
4. Ver una página de producto.
5. Añade un artículo al carrito.
6. Realiza un pedido de prueba.
7. Ve a Analítica > Métrica en Klaviyo y, después, busca métricas procedentes de Salesforce Commerce Cloud.

Probar selectores de campos de Klaviyo Email

Para probar que un campo de email determinado se ha seleccionado correctamente como objetivo y que está identificando correctamente al usuario en Klaviyo:

1. Abre una ventana del navegador en modo incógnito.
2. En la consola de desarrolladores, introduce el siguiente comando y pulsa Intro:
   klaviyo.isIdentified();
   Esto debería dar como resultado la siguiente salida:
   Promise {<fulfilled>: false}
3. Escribe una dirección de email en el campo segmentado y haz clic en la tecla Tab para cambiar el foco a cualquier otro elemento de la página.
4. Vuelve a la Consola para desarrolladores e introduce klaviyo.isIdentified(); de nuevo. Esto debería dar como resultado la siguiente salida:
   Promise {<fulfilled>: true}
5. Puedes comprobar que Klaviyo está recibiendo llamadas Identify si vas a Analytics > Métrica en Klaviyo y buscas el feed de actividad de eventos Active on Site, donde deberías ver la(s) dirección(es) de email que has introducido.

Probar selector del campo Email de pago

Para comprobar que el campo de recopilación de email del pago está activando correctamente el evento Started Checkout :

1. Añade uno o más productos al carrito y, a continuación, inicia el proceso de pago.
2. En el proceso de pago, escribe una dirección de email en el campo de destino y pulsa la tecla Tab para cambiar el foco a cualquier otro elemento de la página.
3. Puedes volver a comprobar que Klaviyo recibe llamadas de Identify si vas a Análisis > Métricas en Klaviyo y buscas el feed de actividad de los eventos Inició el pago, donde deberías ver que se ha registrado tu evento reciente.

Resultado

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

Recursos adicionales