Salesforce Commerce Cloud

Resumen

Fanplayr rastrea el comportamiento del usuario en tu sitio y te permite dirigir a estos usuarios con ofertas y llamadas a la acción.

Fanplayr rastrea tanto las visitas generales a la página como los detalles de los pedidos.

También tienes la opción de añadir la funcionalidad "Cupón de sesión" a tu sitio. Esto te permite mostrar ofertas a tus usuarios, a través de Fanplayr, que estarán activas solo para ese usuario. Esta funcionalidad asegura que las ofertas no terminen en sitios de intercambio de ofertas.

En este documento, detallamos la instalación del cartucho de Fanplayr y los puntos en los que se puede integrar en la tienda SiteGenesis. Ten en cuenta que la integración de tu tienda puede variar.

Antes de empezar, necesitarás obtener tu CLAVE DE CUENTA de tu representante de Fanplayr.

Descargar

https://cdn.fanplayr.com/integrations/sfcc/packages/commercecloud-20.3.zip

Instalación

Para instalar nuestro cartucho e integrarlo en tu tienda, seguirás los siguientes pasos:

• Importar preferencias del sitio
• Importar el cartucho en UX Studio
• Añadir a la Ruta de Cartuchos Efectiva
• Configurar las preferencias del sitio
• Añadir la etiqueta de Fanplayr a tu plantilla
• Probar el rastreo
• Probar "Aplicar al Carrito"
• Configurar Ofertas de Sesión
• Usando Pipeline
• Usando Controlador
• Probar Ofertas de Sesión

Importar preferencias del sitio

Lo primero que hay que hacer es importar las preferencias.

• Inicia sesión en tu Business Manager
• Ve a Administración / Desarrollo del sitio / Importar y Exportar
• Haz clic en Subir bajo Importar y Exportar Archivo

• Elige el archivo en /metadata/fanplayr_preferences.xml y haz clic en Subir
• Vuelve a Administración / Desarrollo del sitio / Importar y Exportar y haz clic en el enlace Importar

• Selecciona el archivo recién subido. Haz clic en Siguiente >>.

• El paso 3 debería mostrar la siguiente información. Haz clic en el enlace Importar en la parte inferior derecha.

Ahora deberías tener acceso a las preferencias de Fanplayr en Herramientas de comercio / Preferencias del sitio / Preferencias personalizadas del sitio.

Importar cartucho en UX Studio

Si estás utilizando UX Studio para trabajar con tu sitio, estos pasos te muestran cómo importar nuestro Cartucho, incluyendo Scripts, Controladores y Pipelines. Si estás desarrollando tu sitio utilizando otra técnica, contáctanos para obtener ayuda o sigue las reglas generales para añadir cartuchos allí.

• Abre UX Studio
• Ve al menú Archivo / Importar
• Elige General / Proyectos existentes en el espacio de trabajo y haz clic en Siguiente

• Selecciona el directorio /int_fanplayr/ y luego marca la casilla junto a la lista de Fanplayr. Haz clic en Finalizar. Esto debería añadir los componentes de Fanplayr a tu proyecto. Es posible que se te pregunte si quieres sincronizar esto con tu tienda, por favor hazlo.

Añadir a la Ruta de Cartuchos Efectiva

Ahora necesitamos añadir Fanplayr a nuestra Ruta de Cartuchos Efectiva. Esto le permite a tu sitio saber que debe ejecutar el código importado con Fanplayr en tu sitio.

• Inicia sesión en tu Business Manager
• Ve a Administración / Sitios / Administrar sitios

• Elige tu sitio
• Ve a Configuración
• Añade la cadena "int_fanplayr:" (sin comillas, asegúrate de que haya dos puntos al final) al inicio del campo Cartuchos.

El código de Fanplayr ahora debería estar ejecutándose en tu sitio. Puedes asegurarte de que está funcionando yendo a la URL /Fanplayr-Apply/. Esto debería llevarte a tu carrito si funciona, o a una página de error si no lo hace.

Configurar las preferencias del sitio

Antes de que Fanplayr comience a rastrear, necesitaremos añadir tu CLAVE DE CUENTA de Fanplayr a las preferencias. Si no tienes una CLAVE DE CUENTA, por favor contacta a tu representante de Fanplayr.

• Inicia sesión en tu Business Manager
• Ve a Herramientas de comercio / Preferencias del sitio / Preferencias personalizadas

• Haz clic en Fanplayr

Los dos primeros valores, "¿Habilitar Fanplayr?" y "Clave de cuenta de Fanplayr", son necesarios para que Fanplayr comience a rastrear en tu sitio.

A continuación se detallan los detalles de cada opción.

¿Habilitar Fanplayr? (obligatorio)

Establece este valor en true para habilitar el rastreo de Fanplayr.

Clave de cuenta de Fanplayr (obligatorio)

Debes proporcionar tu Clave de Cuenta para iniciar el seguimiento con Fanplayr. Si aún no tienes una Clave de Cuenta, por favor contacta a tu gerente de cuenta de Fanplayr.

¿Habilitar Aplicar al Carrito?

Establécelo en true para que el widget de Fanplayr muestre un botón "Añadir al carrito", que intentará aplicar el cupón actual y luego llevará al usuario a la página del carrito.

¿Habilitar Ofertas de Sesión?

Fanplayr tiene la capacidad de habilitar cupones solo para los usuarios a quienes se les han dado esos cupones a través de Fanplayr, en la sesión de un visitante. Consulta la sección siguiente sobre la configuración de Ofertas de Sesión para obtener más detalles. Esto se establece por defecto en true.

Prefijo para Ofertas de Sesión

Las Ofertas de Sesión requieren un prefijo para tu cupón. Cualquier cupón con este prefijo será deshabilitado para tus usuarios a menos que sea habilitado por el script de Fanplayr. Esto se establece por defecto en "FPTEST_", y debe cambiarse para su uso en producción.

¿Rastrear durante el proceso de pago?

Por defecto, esto se establece en false. No rastreamos durante el proceso de pago para ayudarte con el cumplimiento de PCI. Si deseas que Fanplayr rastree durante el proceso de pago, habilita esta opción. Ten en cuenta que no enviamos ninguna información sobre métodos o detalles de pago.

JS personalizado (obsoleto)

Introduce JS que se añadirá tanto al seguimiento de usuario como al de pedidos. Ten en cuenta que las comillas dobles y los comentarios no son compatibles.

URL de JS de cargador personalizado

A veces, los datos de tu sitio SFCC necesitarán ser procesados antes de ser enviados a Fanplayr. Si este es el caso, Fanplayr te proporcionará la URL de un archivo JavaScript para colocar aquí.

Tipo de vista de imagen de producto

Anula el valor predeterminado de "large" al obtener enlaces de imagen para productos.

¿Forzar HTTPS en las redirecciones?

Las redirecciones al Carrito (ejemplo) se fuerzan de HTTP a HTTPS incluso cuando provienen de una página insegura. También fuerza HTTPS para imágenes y URLs de productos.

¿Solo rastrear órdenes 'ORDER_STATUS_NEW'?

Solo rastrea órdenes cuando su estado es NUEVO. Algunos sitios rastrearían órdenes de tarjetas de crédito fallidas como órdenes completadas.

Añadir la etiqueta de Fanplayr a tu plantilla

El último paso para que Fanplayr comience a rastrear es añadir nuestra etiqueta a tu plantilla. Esto debe hacerse en una plantilla que esté en todas las páginas. Normalmente, esto estaría en los archivos de encabezado o pie de página, que deberían estar ubicados en:

Encabezado: Templates/components/header/htmlhead.ismlPie de página: Templates/components/footer/footer.isml

La etiqueta a incluir es la siguiente:

<isinclude template="util/FanplayrTracking.isml" />

Esta plantilla rastreará tanto el seguimiento normal del usuario como el seguimiento de pedidos.

Probar el rastreo

En este punto, es una buena idea verificar que Fanplayr está rastreando los detalles como esperamos. Para ello, necesitarás configurar un cupón.

Vamos a configurar un cupón de la siguiente manera para simplificar:

• 10% de descuento en el carrito
• "FPTEST_10OFF" como código de cupón

Añade un artículo a tu carrito y luego asegúrate de que el código se aplica a tu carrito introduciéndolo de la forma normal, es decir, en el campo de entrada de cupones durante el proceso de pago.

Puedes ver qué datos está rastreando Fanplayr abriendo la Consola de Javascript en tu navegador favorito e inspeccionando la siguiente variable:

window.fanplayr._i[0].data;

Entonces deberías ver algo como lo siguiente:

Ten en cuenta que debes verificar esta variable en cada uno de nuestros tipos de página: tu página de inicio, página de categoría, página de producto y el carrito. Los datos que cambiarán son los siguientes:

• Página de inicio
  • pageType: "home"
• Página de categoría
  • pageType: "cat"
  • categoryId y categoryName establecidos
• Página de producto
  • pageType: "prod"
  • productId, productImage, productName, productPrice, productSku y productUrl establecidos
• Carrito
• pageType: "cart"

Luego deberías completar un pedido, y en la página de confirmación del pedido inspeccionar el objeto Javascript:

window.fp_sales_order.data;

Deberías ver algo como lo siguiente:

Ahora deberías estar rastreando correctamente.

Probar la URL de Aplicar al Carrito

Ahora probaremos para asegurarnos de que el botón "Aplicar al carrito" funcionará como se espera. Haz lo siguiente:

• Añade un producto a tu carrito.
• Ve a la URL de tu sitio con el sufijo "/Fanplayr-Apply?code=FPTEST_10OFF".

Ten en cuenta que estamos utilizando el mismo código de cupón que usamos anteriormente. Si usaste uno diferente, por favor usa ese código en su lugar.

Esto debería haber aplicado el cupón y haberte llevado a la página del carrito.

Configurar Ofertas de Sesión

Fanplayr ofrece la capacidad de deshabilitar cupones, con un prefijo específico, para que no se utilicen hasta que se entreguen a tus usuarios (habilitados por Fanplayr). Para más detalles sobre cómo se implementa esto en general, consulta Ofertas de Sesión.

En CommerceCloud tenemos soporte para Ofertas de Sesión tanto usando Pipelines como Controladores. Por favor, implementa las Ofertas de Sesión utilizando el método apropiado para tu sitio.

Por favor, asegúrate de cambiar el prefijo en las preferencias (ver arriba) para su uso en producción. Por defecto está establecido en "FPTEST_" y solo los cupones con ese prefijo serán tratados como Ofertas de Sesión.

Nota: las siguientes instrucciones detalladas te informan cómo configurar cupones de sesión basados en GenesisStore. A continuación de las instrucciones detalladas aquí hay información sobre otros lugares donde es posible que necesites implementar cupones de sesión.

Usando Pipeline

Abre el Pipeline de Carrito que probablemente se encuentra en Pipelines/Checkout/Cart. Encuentra los sub-pipelines AddCoupon y AddCouponJson.

Necesitarás añadir un Nodo Pipelet de Script entre donde se establece la variable de diccionario de pipeline CouponCode y donde se verifica o aplica al carrito. Puedes ver dónde se añade esto en la siguiente imagen para la implementación de SiteGenesis.

El Pipelet de Script necesita ejecutar el script FanplayrCheckSessionCoupon.ds.

También tendrás que establecer las dos variables de entrada del diccionario de la siguiente manera:

• CouponCode > CouponCode
• CurrentSession > CurrentSession

Ten en cuenta que la variable de diccionario de pipeline CouponCode podría ser diferente en tu sistema. Si es así, reemplázala con el nombre de tu variable implementada.

Usando Controlador

Si utilizas Controladores para tu carrito, por favor implementa las Ofertas de Sesión utilizando el siguiente código. En la implementación de SiteGenesis en /controllers/Cart.js, inserta el Código de Manejo de Ofertas de Sesión de Fanplayr.

Añadir cupón general

El código debe insertarse en la función submitForm entre la verificación de que se proporcionó un valor de cupón y la llamada al método cart.addCoupon. A continuación se muestra dónde debe añadirse en el código del controlador predeterminado a partir de septiembre de 2016.

if (formgroup.couponCode.htmlValue) {
    // INSERTAR CÓDIGO FANPLAYR AQUÍ
    status = cart.addCoupon(formgroup.couponCode.htmlValue);

El Código de Manejo de Ofertas de Sesión es el siguiente:

/*
 * INICIO del manejo de ofertas de sesión de Fanplayr
 */
var preferences = dw.system.Site.current.preferences.custom;
var sessionCouponPrefix : String = preferences.fanplayrSessionCouponPrefix && preferences.fanplayrSessionCouponPrefix.toLowerCase() || null;
var currentCouponCode = formgroup.couponCode.htmlValue && formgroup.couponCode.htmlValue.toLowerCase();

if ( currentCouponCode && sessionCouponPrefix && currentCouponCode.indexOf(sessionCouponPrefix) === 0 ) {
    // obtener cupones de sesión permitidos de la sesión
    var sessionCodesString = session && session.custom && session.custom.fanplayrSessionCodes || '[]';
    var sessionCodes : Array = new Array();
    try {
        sessionCodes = JSON.parse(sessionCodesString);
    } catch (e) {}
    // si el cupón de sesión que el usuario ha intentado aplicar
    // no existe en la sesión, simplemente elimina el código
    if ( sessionCodes.indexOf(currentCouponCode) === -1 ) {
        return {
            cart: cart,
            CouponError: 'NO_ACTIVE_PROMOTION'
        };
    }
}
/*
 * FIN del manejo de ofertas de sesión de Fanplayr
 */

Añadir cupón usando JSON

Tu sistema también puede usar Javascript para aplicar un cupón usando JSON, sin recargar la página. Esto también se maneja en el controlador Cart.js, dentro de la función addCouponJson.

El código debe añadirse después de esta línea:

couponCode = request.httpParameterMap.couponCode.stringValue;

Y antes de que ocurra esta llamada:

Transaction.wrap(function () {
  couponStatus = cart.addCoupon(couponCode);
});

El código a insertar es casi el mismo que el anterior, excepto que en lugar de devolver un error, simplemente establecemos el couponCode en una cadena vacía si no está permitido.

/*
 * INICIO del manejo de ofertas de sesión de Fanplayr
 */
var preferences = dw.system.Site.current.preferences.custom;
var sessionCouponPrefix : String = preferences.fanplayrSessionCouponPrefix && preferences.fanplayrSessionCouponPrefix.toLowerCase() || null;
var currentCouponCode = couponCode && couponCode.toLowerCase();

if ( currentCouponCode && sessionCouponPrefix && currentCouponCode.indexOf(sessionCouponPrefix) === 0 ) {
    // obtener cupones de sesión permitidos de la sesión
    var sessionCodesString = session && session.custom && session.custom.fanplayrSessionCodes || '[]';
    var sessionCodes : Array = new Array();
    try {
        sessionCodes = JSON.parse(sessionCodesString);
    } catch (e) {}
    // si el cupón de sesión que el usuario ha intentado aplicar
    // no existe en la sesión, simplemente elimina el código
    if ( sessionCodes.indexOf(currentCouponCode) === -1 ) {
        couponCode = '';
    }
}
/*
 * FIN del manejo de ofertas de sesión de Fanplayr
 */

Probar cupones de sesión

Una vez implementado el código de Oferta de Sesión, cualquier código que comience con el Prefijo de Oferta de Sesión debería ser rechazado cuando un usuario intente aplicarlo al carrito. Por defecto, el prefijo es "FPTEST_" y debe cambiarse en las preferencias para su uso en producción.

Intentemos lo siguiente:

• Añade un producto a tu carrito.
• Aplica el cupón "FPTEST_10OFF" (asumiendo que este es el cupón que usamos anteriormente para las pruebas).

Este cupón ahora debería fallar al ser aplicado.

• Ahora ve a la URL de tu sitio con el sufijo "/Fanplayr-Session?code=FPTEST_10OFF".
• Aplica el cupón "FPTEST_10OFF".

El cupón ahora debería aplicarse a tu carrito, dado que es un cupón válido para el usuario y los productos.

Cupones de sesión fuera de GenesisStore

Los detalles anteriores explican cómo implementar Cupones de Sesión en GenesisStore, la implementación predeterminada que viene con CommerceCloud. También solo implementa Cupones de Sesión en el Carrito, no durante el proceso de pago. A continuación se detallan otros lugares donde es posible que necesites implementar Cupones de Sesión.

Usando Pipelines

No se deberían requerir cambios adicionales aquí siempre y cuando estés llamando al Pipeline Cart-AddCoupon. Si no estás usando esto para manejar la aplicación, deberás añadir el mismo script FanplayrCheckSessionCoupon para manejar la verificación de un cupón permitido.

Usando Controladores

Algunos Controladores pueden necesitar que se les añada código para verificar los Cupones de Sesión. Un ejemplo, que de hecho puede estar en tu GenesisStore, está en el COBilling.js. Usa el mismo código que para añadir el cupón con JSON, insertándolo en la función applyCoupon entre esta línea:

var couponCode =
  request.httpParameterMap.couponCode.stringValue ||
  request.httpParameterMap.dwfrm_billing_couponCode.stringValue;

Y antes de la línea:

app.getController('Cart').AddCoupon(couponCode);