Configuración de la integración estándar de Shopify

Esta página te explica cómo integrar Braze con Shopify utilizando nuestra integración estándar para usuarios con una tienda online en Shopify. Si utilizas un sitio headless de Shopify o quieres implementar soluciones más personalizadas, consulta Configuración de la integración personalizada de Shopify.

Paso 1: Conecta tu tienda Shopify

1. En Braze, ve a Integraciones de partners > Partners tecnológicos y busca “Shopify”.
2. En la página del partner de Shopify, selecciona Comenzar configuración para iniciar el proceso de integración.
   
   
   
   
3. En la tienda de aplicaciones de Shopify, instala la aplicación de Braze.
   
   

Nota

Si tu cuenta de Shopify está asociada a más de una tienda, puedes cambiar la tienda en la que has iniciado sesión seleccionando el icono de tienda en el encabezado y seleccionando Cambiar tiendas.

4. Después de instalar la aplicación de Braze, serás redirigido a Braze para confirmar el espacio de trabajo que deseas conectar a Shopify. Una tienda Shopify solo puede conectarse a un espacio de trabajo. Si necesitas cambiar, selecciona el espacio de trabajo correcto.
   
   

5. Selecciona Comenzar configuración.
   
   

Paso 2: Habilitar los SDK web de Braze

Para las tiendas en línea de Shopify, puedes seleccionar la configuración estándar para implementar automáticamente el SDK web de Braze y el SDK de JavaScript.

Después de seleccionar la ruta de incorporación con configuración estándar, debes elegir cuándo Braze inicializa y carga los SDK entre una de las siguientes opciones:

• Al visitar el sitio, como al inicio de sesión
  • Realiza el seguimiento tanto de usuarios identificados como anónimos
• Al registrarse en una cuenta, como al iniciar sesión en la cuenta
  • Realiza el seguimiento solo de usuarios identificados
  • Comienza a rastrear datos cuando los visitantes del sitio se suscriben o inician sesión en sus cuentas

Nota

A los nuevos clientes se les proporcionan las versiones más recientes del SDK web de Braze y del SDK de JavaScript durante la configuración. Los clientes existentes pueden ver la versión actual de su SDK en la configuración de integración, recibir notificaciones cuando una versión más nueva esté disponible y realizar actualizaciones de forma autónoma desde la configuración de integración.

Paso 3: Configura tus datos de Shopify

Configuración de datos estándar

Importante

Para esta integración, el alias de usuario debe utilizar el siguiente formato para que Braze pueda asociar los webhooks con el perfil de usuario correcto:

• alias_label: shopify_cart_${cartToken}
• alias_name: shopify_cart_token

Selecciona los datos de Shopify que deseas rastrear.

Los siguientes eventos están habilitados de forma predeterminada en la integración estándar.

Para más información sobre los datos rastreados a través de la integración, consulta Características de datos de Shopify.

Importante

La integración con Shopify admite webhooks de creación y actualización de clientes de Shopify, que se encuentran en la configuración de datos. Cuando se crea o actualiza un perfil de usuario en Shopify, se creará o actualizará el perfil de usuario correspondiente en Braze.

Estas acciones no desencadenan eventos personalizados en Braze y se utilizan únicamente para sincronizar los datos de usuario de Shopify con Braze. Los datos sincronizados incluyen atributos personalizados, atributos estándar y, si están habilitados en tu configuración, estados de grupos de suscripción.

Configuración de la carga de datos históricos

En el paso Track Shopify data, selecciona la casilla para incluir la carga inicial de datos históricos como parte de tu integración.

Para obtener información sobre lo que se importa, el comportamiento de los informes de ingresos, capturas de pantalla de la configuración y orientación si ya usas Braze con Campaigns o Canvas activos, consulta Carga de datos históricos.

(Avanzado) Configuración de seguimiento de datos personalizados

Con los SDK de Braze, puedes rastrear eventos personalizados o atributos personalizados que van más allá de los eventos estándar de esta integración. Los eventos personalizados capturan interacciones únicas en tu tienda, como:

El seguimiento de datos personalizados proporciona información más profunda sobre el comportamiento del usuario y permite una personalización adicional. Para implementar eventos personalizados, necesitas editar el código del tema de tu tienda en el archivo theme.liquid. Es posible que necesites ayuda de tus desarrolladores.

Por ejemplo, el siguiente fragmento de JavaScript verifica si el usuario actual se suscribe a un boletín informativo y lo registra como un evento personalizado en su perfil en Braze:

1
2
3
4
5
6
7
8
9

braze.logCustomEvent(
  “subscribed_to_newsletter”,
  {
    newsletterName: ‘News and Offers’,
    customerEmail: ‘customer_1@example.com’,
    sendOffers: true
  }
);

El SDK debe estar inicializado (escuchando actividad) en el dispositivo de un usuario para registrar eventos o atributos personalizados. Para obtener más información sobre el registro de datos personalizados, consulta User object y logCustomEvent object.

Paso 4: Configura cómo gestionas a los usuarios

Selecciona tu tipo de external_id en el desplegable.

Importante

Utilizar una dirección de correo electrónico o una dirección de correo electrónico con hash como ID externo de Braze puede simplificar la gestión de identidades en todos tus orígenes de datos. Sin embargo, es importante tener en cuenta los riesgos potenciales para la privacidad de los usuarios y la seguridad de los datos.

• Información predecible: Las direcciones de correo electrónico son fáciles de adivinar, lo que las hace vulnerables a los ataques.
• Riesgo de explotación: Si un usuario malintencionado altera su navegador web para enviar la dirección de correo electrónico de otra persona como su ID externo, podría acceder potencialmente a mensajes confidenciales o a información de la cuenta.

De forma predeterminada, Braze convierte automáticamente los correos electrónicos de Shopify a minúsculas antes de utilizarlos como ID externo. Si utilizas el correo electrónico o el correo electrónico con hash como tu ID externo, confirma que tus direcciones de correo electrónico también se convierten a minúsculas antes de asignarlas como ID externo o antes de aplicarles hash desde otros orígenes de datos. Esto ayuda a prevenir discrepancias en los ID externos y a evitar la creación de perfiles de usuario duplicados en Braze.

Nota

Los siguientes pasos dependen de tu selección de ID externo:

• Si seleccionaste un tipo de ID externo personalizado: Completa los pasos 4.1—4.3 para establecer la configuración personalizada de tu ID externo.
• Si seleccionaste ID de cliente de Shopify, correo electrónico o correo electrónico con hash: Sáltate los pasos 4.1—4.3 y continúa directamente con el paso 4.4.

Paso 4.1: Crea el metacampo braze.external_id

1. En tu panel de administración de Shopify, ve a Settings > Metafields and metaobjects.
2. Selecciona Customers > Add definition.
3. Para Name, introduce braze.external_id.
4. Selecciona el espacio de nombres autogenerado y la clave (custom.braze_external_id) para editarlo y cambiarlo a braze.external_id.
5. En Type, selecciona ID Type.

Una vez creado el metacampo, rellénalo para tus clientes. Recomendamos los siguientes enfoques:

• Escucha los webhooks de creación de clientes: Configura un webhook para escuchar los eventos de customer/create. Esto te permite escribir el metacampo cuando se crea un nuevo cliente.
• Rellena los clientes existentes: Utiliza la Admin API o la Customer API para rellenar el metacampo de los clientes creados previamente.

Posible condición de carrera

El webhook customers/create de Shopify puede dispararse antes de que el metacampo braze.external_id se haya escrito en el perfil de usuario. Cuando esto ocurre:

1. Si el metacampo no existe, Braze llama al endpoint configurado (paso 4.2) para obtener el ID externo.
2. Si esa llamada también falla o se agota el tiempo de espera, Braze crea un perfil de usuario temporal con el ID de cliente de Shopify como ID externo.
3. En cualquier evento posterior en el que el metacampo esté presente (como customers/update u orders/create para un evento ecommerce.order_placed), Braze detecta automáticamente la discrepancia y fusiona el perfil temporal con el ID externo correcto.

Esto significa que es posible que existan perfiles duplicados temporales, pero se corrigen automáticamente. No necesitas realizar ninguna acción manual para fusionar estos perfiles.

Paso 4.2: Crea un endpoint para recuperar tu ID externo

Debes crear un endpoint GET accesible públicamente que devuelva el ID externo de Braze del cliente. Braze llama a este endpoint desde dos fuentes:

Importante

Los servidores de Braze y el navegador del comprador llaman a este endpoint. El píxel web de Braze Shopify carga la URL de tu endpoint en el navegador, por lo que la URL es pública. Sigue los pasos de Validación para devolver un ID externo solo para un cliente de Shopify que coincida.

Especificaciones del endpoint

Método: GET

Braze envía los siguientes parámetros a tu endpoint:

Ejemplo de endpoint

1

GET https://mystore.com/custom_id?shopify_customer_id=1234&[email protected]&shopify_storefront=dev-store.myshopify.com

Respuesta esperada

Braze espera un código de estado 200 que devuelva el ID externo en JSON:

1
2
3

{
  "external_id": "my_external_id"
}

Validación

Valida que shopify_customer_id y email_address (si está presente) coincidan con los valores del cliente en Shopify antes de devolver un ID externo. Puedes utilizar la Shopify Admin API o la Customer API para validar estos parámetros y recuperar el metacampo braze.external_id correcto.

Comportamiento en caso de fallo y fusión

Cualquier código de estado distinto de 200 se considera un fallo.

• Implicaciones de la fusión: Si el endpoint falla (devuelve un código distinto de 200 o se agota el tiempo de espera), Braze no puede recuperar el ID externo. En consecuencia, la fusión entre el usuario de Shopify y el perfil de usuario de Braze no se produce en ese momento.
• Lógica de reintentos: Braze puede intentar reintentos de red inmediatos estándar, pero si el fallo persiste, la fusión se aplaza hasta el siguiente evento que cumpla las condiciones (por ejemplo, la próxima vez que el usuario actualice su perfil o complete un proceso de pago).
• Compatibilidad: Para facilitar la fusión oportuna de usuarios, asegúrate de que tu endpoint tenga alta disponibilidad y gestione correctamente el campo opcional email_address.

Paso 4.3: Introduce tu ID externo

Repite el paso 4 e introduce la URL de tu endpoint después de seleccionar ID externo personalizado como tipo de ID externo de Braze.

Consideraciones

• Si tu ID externo no se genera cuando Braze envía una solicitud a tu endpoint, la integración usará de forma predeterminada el ID de cliente de Shopify cuando se llame a la función changeUser. Este paso es crucial para fusionar el perfil de usuario anónimo con el perfil de usuario identificado. Como resultado, puede haber un período temporal durante el cual existan diferentes tipos de ID externos dentro de tu espacio de trabajo.
• Cuando el ID externo esté disponible en el metacampo braze.external_id, la integración priorizará y asignará este ID externo.
  • Si el ID de cliente de Shopify se estableció previamente como el ID externo de Braze, se reemplazará con el valor del metacampo braze.external_id.

Paso 4.4: Recopila tus adhesiones voluntarias por correo electrónico o SMS desde Shopify (opcional)

Si usas los canales de correo electrónico o SMS, puedes sincronizar los estados de adhesión voluntaria de marketing por correo electrónico y SMS desde Shopify en Braze.

• correo electrónico
• doble adhesión voluntaria por sms

Si sincronizas las adhesiones voluntarias de marketing por correo electrónico desde Shopify, Braze crea automáticamente un grupo de suscripción de correo electrónico para todos los usuarios asociados con esa tienda específica. Necesitas crear un nombre único para este grupo de suscripción.

Nota

Como se menciona en el resumen de Shopify, si quieres utilizar un formulario de captura de terceros, tus desarrolladores necesitan integrar el código del SDK de Braze. Esto te permitirá capturar la dirección de correo electrónico y el estado de suscripción global de correo electrónico a partir de los envíos de formularios. Específicamente, necesitas implementar y probar estos métodos en tu archivo theme.liquid:

• setEmail: establece la dirección de correo electrónico en el perfil de usuario
• setEmailNotificationSubscriptionType: actualiza el estado de suscripción global de correo electrónico

Usa la doble adhesión voluntaria por SMS para enviar tu texto de confirmación con tu marca a través de Braze en lugar del correo electrónico de confirmación de Shopify. Para activar la doble adhesión voluntaria por SMS:

1. En el panel de administración de Shopify, ve a Configuración > Notificaciones > Notificaciones de clientes.
2. Desactiva la doble adhesión voluntaria de marketing para SMS.
3. Configura el SMS de checkout como adhesión voluntaria simple.
4. En la configuración de SMS de Braze, selecciona Usar doble adhesión voluntaria por SMS de Braze.

Para más información sobre la doble adhesión voluntaria por SMS de Braze y el flujo de suscriptores, consulta Resumen de Shopify.

Paso 5: Sincronizar productos (opcional)

Puedes sincronizar todos los productos de tu tienda Shopify con un catálogo de Braze para una personalización más profunda de los mensajes. Las actualizaciones automáticas se producen casi en tiempo real, de modo que tu catálogo refleje los detalles de producto actualizados. Para obtener más información, consulta Sincronización de productos de Shopify.

Paso 6: Activar canales (opcional)

Para las integraciones estándar de Shopify, puedes habilitar los mensajes dentro de la aplicación y los Banner desde la configuración de tu integración sin necesidad de desarrollo adicional.

Mensajes dentro de la aplicación

En el paso Activar canales, selecciona los mensajes dentro de la aplicación como parte de la configuración de tu integración para habilitar ejemplos como formularios de captura de correo electrónico y SMS, ventanas emergentes promocionales y cuestionarios. Para aprender a crear uno, consulta Mensajes dentro de la aplicación.

Nota

Braze recopila información de los visitantes, como direcciones de correo electrónico y números de teléfono, a través de mensajes dentro de la aplicación. Esta información se envía a Shopify. Estos datos permiten a los comerciantes reconocer a los visitantes de su tienda y crear una experiencia de compra más personalizada. Para más detalles, consulta Visitor API.

Banner

Los Banner muestran contenido personalizado en tu escaparate de Shopify, como promociones, anuncios y ofertas segmentadas.

Importante

Los banners para la integración estándar de Shopify se encuentran actualmente en fase de acceso anticipado. Ponte en contacto con tu director de cuentas de Braze si te interesa participar en el acceso anticipado.

Configuración

Importante

Los Banner requieren un tema Shopify Online Store 2.0 y la versión 6.8.0 o posterior de Braze SDK. Durante la configuración, Braze comprueba si el tema publicado de tu tienda admite ubicaciones de banner en línea. Los temas antiguos no admiten ubicaciones en línea, por lo que Activar banners y crear ubicaciones de banner está deshabilitado en Activar canales. Para usar Banner, actualiza a un tema Online Store 2.0 en la administración de Shopify y luego vuelve a la configuración de integración para habilitar los Banner.

Selecciona Activar banners y crear ubicaciones de banner en Activar canales y luego guarda.

Braze crea automáticamente estas ubicaciones de Banner una vez por espacio de trabajo, compartidas entre todas las tiendas Shopify conectadas:

• Encabezado global
• Cuerpo de inicio
• Pie de página global
• Banner de información de producto
• Cuerpo de producto
• Cuerpo de colección
• Cuerpo del carrito
• Resumen del carrito

Nota

Si conectas varias tiendas Shopify y habilitas Banner para cada una, Braze crea las mismas ocho ubicaciones al mismo tiempo. Los mismos ID de ubicación se pueden usar en cualquiera o en todas tus tiendas conectadas simultáneamente.

Si los ID de ubicación predeterminados no se ajustan a tu configuración o deseas usar otros adicionales, debes crear las ubicaciones manualmente. Cada ID de ubicación debe coincidir con lo configurado en el bloque de aplicación correspondiente de Shopify. Si cambias un ID de ubicación después del lanzamiento, actualiza el bloque de aplicación para que coincida o el banner dejará de renderizarse.

Crear un Banner

Crea tu Banner con una Campaign o Canvas usando el editor de arrastrar y soltar, HTML o una plantilla.

Nota

La vista previa del editor de Braze muestra solo el contenido del Banner. Para ver dónde aparece el Banner en tu sitio, previsualízalo en el editor de temas de Shopify.

Paso 1: Añadir tu Banner a tu tema de Shopify

1. Lanza tu Campaign o Canvas a una audiencia pequeña, como un segmento de prueba que contenga solo tu cuenta (por ejemplo, tu propio external_id o device_id), o un grupo de prueba incluido en tu segmentación. Esto te permite verificar el Banner en tu sitio en vivo sin exponerlo a los compradores.
2. En el editor de temas de Shopify, abre la página donde deseas el Banner y luego selecciona Apps > Add Block > Apps > Braze en el menú.

3. En la configuración del bloque de aplicación, introduce el placement_id de la ubicación elegida (por ejemplo, global_header) de tus ubicaciones de Banner.

4. (Opcional) Ajusta el ancho del bloque de aplicación (% del contenedor) y añade una altura fija en píxeles. De forma predeterminada, la altura máxima se ajusta al contenido de tu banner. Establece una altura fija si tu tema necesita un espacio limitado, como evitar que un banner alto empuje el contenido de la página hacia abajo.

Paso 2: Probar y lanzar

Visita tu tienda como usuario de prueba para confirmar que el Banner se renderiza en la ubicación correcta y se ve como se espera. Luego, edita la segmentación de tu Campaign o Canvas para llegar a tu audiencia completa. Para medir el rendimiento, consulta Análisis de Banner.

Importante

Actualmente, los Banner no son compatibles con las páginas de agradecimiento, estado del pedido o cuenta del cliente. Si te interesan estas ubicaciones específicas, realiza una solicitud a través de tu equipo de cuenta de Braze.

Content Cards y conmutadores de características

Para añadir Content Cards o conmutadores de características, colabora con tus desarrolladores para insertar el código SDK necesario directamente en tu archivo theme.liquid. Para instrucciones detalladas, consulta Integración de Braze SDK.

Notificaciones push web

Actualmente, las notificaciones push web no son compatibles con la integración de Shopify. Si te interesa web push for the Shopify integration, envía comentarios sobre el producto.

Paso 7: Finalizar la configuración

1. Después de configurar tu instalación, selecciona Finish Setup.
2. Habilita la inserción de la aplicación Braze dentro de la configuración del tema de Shopify. Selecciona Open Shopify para ser redirigido a tu cuenta de Shopify y habilitar la inserción de la aplicación dentro de la configuración del tema de tu tienda.

3. Después de habilitar la inserción de la aplicación, ¡tu configuración estará completa! Confirma que puedes ver la configuración de tu integración, el estado de la sincronización inicial de datos y tus eventos activos de Shopify.