Personalización con contexto del comprador

Con Shopper Context, puede personalizar las experiencias de compra adaptando sus promociones, precios, recomendaciones de productos y contenido entregado a su sitio en función del comportamiento del comprador. Por ejemplo, si los compradores visitan su sitio desde un dispositivo móvil, ofrézcales un descuento de 10%.

El gancho nombrado useUpdateShopperContext se utiliza para establecer el contexto del comprador en un sitio del kit de Progressive Web App (PWA). La implementación predeterminada de Shopper Context en PWA Kit es una demostración de las capacidades de personalización. En la implementación de demostración descrita en esta guía, usamos parámetros de consulta para activar un esquema de personalización que cambia el contenido y las promociones de la página de listado de productos (PLP). Amplíe nuestra implementación con código personalizado para que coincida con su propia estrategia de personalización.

En esta guía se explica nuestra implementación de demostración de Shopper Context y cómo configurarla y ampliarla para potenciar la estrategia de personalización de tu sitio de PWA Kit. La funcionalidad descrita en esta guía no es compatible con un storefront híbrido.

Se recomienda probar la personalización en un entorno que no sea de producción antes de implementar los cambios en producción. También puede obtener una vista previa de su personalización con Vista previa del storefront.

Antes de ejecutar los comandos de esta guía, sustituya los marcadores de posición por valores reales. Los marcadores de posición tienen el siguiente formato: $PLACEHOLDER.

Este video muestra un ejemplo de cómo personalizar contenido y promociones con la implementación de demostración de Shopper Context.

Shopper Context in PWA Kit
undefined

Para usar la personalización con Shopper Context:

  • En la interfaz de usuario de administración de inicio de sesión del comprador y acceso a API (SLAS), cree un cliente privado de SLAS. Consulte Creación de un cliente SLAS.

En Business Manager

El shopper_context_hooks cartridge actúa como una lista permitida para garantizar que solo se pueda establecer desde el cliente el contexto que desea utilizar para las campañas de personalización. En Business Manager

  • Agregue shopper_context_hooks a la ruta del cartucho de su sitio. Este paso garantiza la seguridad del sitio al evitar que miembros no autorizados del equipo de desarrollo del sitio establezcan todos los alcances de Shopper Context.

    • Vaya a Administración > Sitios > Administrar sitios.
    • Seleccione el sitio donde desea utilizar este cartucho. Ejemplo de identificador de sitio: RefArch.
    • Haga clic en la pestaña Configuración.
    • En el campo Cartridges (Cartuchos), agregue la nueva ruta shopper_context_hooksdel cartridge . Agregue la nueva ruta del cartucho antes de la ruta para app_storefront_base. Por ejemplo:shopper_context_hooks:app_storefront_base

  • Instale y cargue el cartucho.

    • Clone el repositorio de enlaces de contexto del comprador. El nombre del directorio de nivel superior es shopper_context_hooks.

    • Para instalar las dependencias del paquete, desde el shopper_context_hooks directorio, ejecute:

      npm install

    • Configure los ID de cliente actualizando CLIENT_REGISTRY en cartridges/shopper_context_hooks/cartridge/scripts/config/clientRegistry.js

    • Cree un dw.json archivo en el shopper_context_hooks directorio. Reemplace las $ cadenas de este ejemplo por valores reales o establezca las variables de entorno correspondientes.

    • En el shopper_context_hooks directorio, ejecute:

      npm run uploadCartridge

Para obtener más información sobre cómo cargar el cartucho, consulte Carga de código para Storefront Reference Architecture (SFRA).

Configure el registro de clientes agregando una preferencia de sitio personalizada. Para hacerlo, impórtelo system-objecttype-extensions.xml en Business Manager.

  • Vaya a Administración > Desarrollo > del sitio Importación & y exportación.
  • En Importar & archivos de exportación, haga clic en Cargar.
  • Haga clic en Seleccionar Archivo.
  • Vaya a meta/meta.
  • Seleccione system-objecttype-extensions.xml.
  • Haga clic en Cargar.
  • Una vez cargado el archivo, haga clic en Atrás.
  • En Metadatos, haga clic en **** Importar .
  • Seleccione y haga clic en Siguiente system-objecttype-extensions.xml.
  • Una vez validado el archivo, haga clic en Importar.

Para actualizar su configuración, en Business Manager:

  • Vaya a Herramientas > del comerciante Preferencias > del sitio Preferencias > personalizadas Contexto del comprador Preferencias de ganchos.
  • Actualice el campo Registro de clientes con una configuración JSON. Ingrese su identificación de cliente que configuró en el paso 1 y las claves de contexto del comprador que el cliente puede configurar. Puede ingresar cualquiera de las claves disponibles en el tipo ShopperContext. En el caso de las identificaciones de cliente que requieren permisos para establecer todas las claves de contexto del comprador, como la identificación de cliente utilizada para la vista previa del storefront, use la clave all.

En este ejemplo, establecemos claves de contexto del comprador para dos identificaciones de cliente diferentes.

  • Las solicitudes de ID aaaaaaaa-8536-4a39-acbb-8e7f1759f901 de cliente solo pueden establecer las 3 claves especificadas en el contexto del comprador.
  • Las solicitudes de identificación bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff de cliente pueden establecer todas las claves en el contexto del comprador.

Nuestra demostración de Shopper Context utiliza el sourceCode conjunto a través de un parámetro de consulta para activar cambios de contenido en un PLP y nuevas promociones para un grupo de clientes específico. Puede ver la demostración en acción en un PLP agregándola &sourcecode=instagram a la URL.

En nuestra demostración, utilizamos el useUpdateShopperContext gancho para activar una campaña de personalización. En su proyecto, agregue o elimine los parámetros de consulta de Contexto del comprador en la SHOPPER_CONTEXT_SEARCH_PARAMS constante in app/constants.js para lograr sus propias personalizaciones activadas por los parámetros de consulta.

Por ejemplo, si agregó atributos personalizados que desea que se establezcan mediante parámetros de consulta, inclúyalos como parámetros de consulta personalizados en app/constants.js. En este ejemplo, agregamos estos parámetros: deviceType y storeId.

Opcionalmente, puede agregar personalización más allá de lo que se encuentra en la implementación de demostración de Shopper Context. Por ejemplo, puede personalizar el contenido en función de la geolocalización de un comprador.

En este código de ejemplo, obtenemos la geolocalización de un comprador. Una vez que obtenga la geolocalización, puede aplicar la personalización elegida. Por ejemplo:

  • Para Nueva York, Estados Unidos: 20% de descuento en tops de mujer.
  • Para Boston, EE. UU.: 15% de descuento en tops de mujer.

Esta sección proporciona una solución sugerida para un error común que puede encontrar al usar Shopper Context.

Posible causa: La personalización en Business Manager no está configurada correctamente.

Solución sugerida: Asegúrese de que el disparador de contexto que configuró esté asignado a una campaña de personalización en Business Manager.