Skip to content

Configuración de la integración personalizada de Shopify

Esta página te explica cómo integrar Braze con una tienda Hydrogen de Shopify o con cualquier tienda headless de Shopify utilizando un escaparate personalizado.

Esta guía utiliza el framework Hydrogen de Shopify como ejemplo. Sin embargo, puedes seguir un enfoque similar si tu marca utiliza Shopify para el backend de tu tienda con una configuración de frontend “headless”.

Para integrar tu tienda headless de Shopify con Braze, necesitas completar estos dos objetivos:

  1. Inicializar y cargar el SDK web de Braze para habilitar el seguimiento in situ

    Añade manualmente código en tu sitio web de Shopify para habilitar el seguimiento in situ de Braze. Al implementar el SDK de Braze en tu tienda headless de Shopify, puedes hacer un seguimiento de las actividades in situ, incluidas las sesiones, el comportamiento del usuario anónimo, las acciones del comprador previas al pago y cualquier evento personalizado o atributo personalizado que decidas incluir con tu equipo de desarrolladores. También puedes añadir cualquier canal admitido por los SDK, como mensajes dentro de la aplicación o Content Cards.
  1. Instalar la integración Braze Shopify

    Cuando conectes tu tienda Shopify a Braze, tendrás acceso a los datos de clientes, pagos, pedidos y productos a través de los webhooks de Shopify.

Para completar estos objetivos, sigue estos pasos:

Inicializar y cargar el SDK Web de Braze

Paso 1: Selecciona una aplicación de sitio web y copia las credenciales del SDK

Antes de añadir código a tu tienda Hydrogen, conecta tu tienda Shopify e inicia la incorporación de configuración personalizada. Si aún no has conectado tu tienda, completa Conectar tu tienda Shopify y luego continúa con Habilitar los SDK de Braze y selecciona Custom setup.

En el flujo de configuración personalizada, Braze te solicita que selecciones la aplicación de sitio web para tu tienda headless:

  1. Selecciona una aplicación de sitio web existente o crea una nueva. Puedes nombrar la aplicación como quieras excepto Shopify, que Braze reserva para la ruta de integración estándar de Shopify.
  2. Braze muestra la clave de API y la URL base de la aplicación seleccionada (tu punto final de SDK) en el paso de incorporación. Selecciona Copy para cada valor; no necesitas abrir Settings > App Settings.
  3. Usa la clave de API copiada como BRAZE_API_KEY y el punto final de SDK como BRAZE_API_URL en las variables de entorno de tu Shopify (Paso 2).

Después de conectar la tienda, puedes renombrar la aplicación de sitio web seleccionada en Settings > App Settings. No puedes eliminar la aplicación mientras esté conectada a tu integración con Shopify.

Paso 2: Añade el subdominio y las variables de entorno

  1. Configura tu subdominio de Shopify para redirigir el tráfico desde tu tienda en línea a Hydrogen.
  2. Añade un URI de devolución de llamada para iniciar sesión. (El URI se añadirá automáticamente cuando se agregue el dominio.)
  3. Configura tus variables de entorno de Shopify:
    • Crea dos variables de entorno usando la clave de API y el punto final de SDK que copiaste durante la incorporación de configuración personalizada en el Paso 1.
    • BRAZE_API_KEY
    • BRAZE_API_URL

Paso 3: Habilita el seguimiento en el sitio

El primer paso es inicializar el SDK Web de Braze. Recomendamos hacerlo instalando nuestro paquete NPM:

1
2
3

npm install --save @braze/web-sdk@6.8.0
# or, using yarn:
# yarn add @braze/web-sdk

Luego, incluye esta configuración como una clave de nivel superior en tu archivo vite.config.js:

1
2
3

optimizeDeps: {
    exclude: ['@braze/web-sdk']
}

Después de instalar el paquete NPM, debes inicializar el SDK dentro de un hook useEffect en el componente Layout. Según tu versión de Hydrogen, este componente puede estar ubicado en el archivo root.jsx o layout.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Add these imports
import * as braze from "@braze/web-sdk";
import { useEffect } from 'react';

export function Layout({children}) {
  const nonce = useNonce();
  // @type {RootLoader}
  const data = useRouteLoaderData('root');

  // Add useEffect call to initialize Braze SDK
  useEffect(() => {
    if(!braze.isInitialized()) {
      braze.initialize(data.brazeApiKey, {
        baseUrl: data.brazeApiUrl,
      });
      braze.openSession()
    }
  }, [data])

  return (...);
}

Los valores data.brazeApiKey y data.brazeApiUrl deben incluirse en el loader del componente usando las variables de entorno creadas en el Paso 2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

export async function loader(args) {
  // Start fetching non-critical data without blocking time to first byte
  const deferredData = loadDeferredData(args);

  // Await the critical data required to render initial state of the page
  const criticalData = await loadCriticalData(args);

  const {storefront, env} = args.context;

  return {
    ...deferredData,
    ...criticalData,
    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
    // Add the two properties below to the returned value
    brazeApiKey: env.BRAZE_API_KEY,
    brazeApiUrl: env.BRAZE_API_URL,
    shop: getShopAnalytics({
      storefront,
      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
    }),
    consent: {
      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      withPrivacyBanner: false,
      // Localize the privacy banner
      country: args.context.storefront.i18n.country,
      language: args.context.storefront.i18n.language,
    },
  };
}

Paso 4: Añade un evento de inicio de sesión de cuenta de Shopify

Realiza el seguimiento de cuándo un comprador inicia sesión en su cuenta y sincroniza su información de usuario con Braze. Esto incluye llamar a nuestro método changeUser para identificar a los clientes con un ID externo de Braze.

Antes de empezar, asegúrate de haber configurado los URI de devolución de llamada para que el inicio de sesión de clientes funcione dentro de Hydrogen. Para más información, consulta Usar la API de cuenta de cliente con Hydrogen.

  1. Después de configurar los URI de devolución de llamada, define una función para llamar al SDK de Braze. Crea un nuevo archivo (como Tracking.jsx) e impórtalo desde tus componentes:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import * as braze from "@braze/web-sdk";

export function trackCustomerLogin(customerData, storefrontUrl) {
  const customerId = customerData.id.substring(customerData.id.lastIndexOf('/') + 1)
  const customerSessionKey = `ab.shopify.shopify_customer_${customerId}`;
  const alreadySetCustomerInfo = sessionStorage.getItem(customerSessionKey);

  if(!alreadySetCustomerInfo) {
    const user = braze.getUser()

    // To use Shopify customer ID as Braze External ID, use:
    // braze.changeUser(customerId)

    // To use Shopify customer email as Braze External ID, use:
      // braze.changeUser(customerData.emailAddress?.emailAddress)
        // To use hashing for email addresses, apply hashing before calling changeUser

    // To use your own custom ID as the Braze External ID, pass that value to the changeUser call.

    user.setFirstName(customerData.firstName);
    user.setLastName(customerData.lastName);
    if(customerData.emailAddress.emailAddress) {
      user.setEmail(customerData.emailAddress?.emailAddress);
    }

    if(customerData.phoneNumber?.phoneNumber) {
      user.setPhoneNumber(customerData.phoneNumber?.phoneNumber);
    }
    braze.logCustomEvent(
      "shopify_account_login",
      { source: storefrontUrl }
    )
    sessionStorage.setItem(customerSessionKey, customerId);
  }
}
  1. En el mismo hook useEffect que inicializa el SDK de Braze, añade la llamada a esta función:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { trackCustomerLogin } from './Tracking';

export function Layout({children}) {
  const nonce = useNonce();
  // @type {RootLoader}
  const data = useRouteLoaderData('root');

  useEffect(() => {
    if(!braze.isInitialized()) {
      braze.initialize(data.brazeApiKey, {
        baseUrl: data.brazeApiUrl,
        enableLogging: true,
      });
      braze.openSession()
    }

    // Add call to trackCustomerLogin function
    data.isLoggedIn.then((isLoggedIn) => {
      if(isLoggedIn) {
        trackCustomerLogin(data.customerData, data.publicStoreDomain)
      }
    })

  }, [data])
  1. Obtén la dirección de correo electrónico y el número de teléfono del cliente en tu consulta GraphQL de la API de clientes, ubicada en el archivo app/graphql/customer-account/CustomerDetailsQuery.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

export const CUSTOMER_FRAGMENT = `#graphql
  fragment Customer on Customer {
    id
    firstName
    lastName
    emailAddress {
      emailAddress
    }
    phoneNumber {
      phoneNumber
    }
    defaultAddress {
      ...Address
    }
    addresses(first: 6) {
      nodes {
        ...Address
      }
    }
  }
  fragment Address on CustomerAddress {
    id
    formatted
    firstName
    lastName
    company
    address1
    address2
    territoryCode
    zoneCode
    city
    zip
    phoneNumber
  }
`;
  1. Finalmente, carga los datos del cliente en tu función loader:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// Add import for GraphQL Query
import { CUSTOMER_DETAILS_QUERY } from './graphql/customer-account/CustomerDetailsQuery';

export async function loader(args) {
  // Start fetching non-critical data without blocking time to first byte
  const deferredData = loadDeferredData(args);

  // Await the critical data required to render initial state of the page
  const criticalData = await loadCriticalData(args);

  const {storefront, env} = args.context;

  // Add GraphQL call to Customer API
  const isLoggedIn = await deferredData.isLoggedIn;
  let customerData;
  if (isLoggedIn) {
    const { data, errors } = await args.context.customerAccount.query(
        CUSTOMER_DETAILS_QUERY,
    );
    customerData = data.customer
  } else {
    customerData = {}
  }

  return {
    ...deferredData,
    ...criticalData,
    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
    brazeApiKey: env.BRAZE_API_KEY,
    brazeApiUrl: env.BRAZE_API_URL,
    // Add the property below to the returned value
    customerData: customerData,
    shop: getShopAnalytics({
      storefront,
      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
    }),
    consent: {
      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      withPrivacyBanner: false,
      // Localize the privacy banner
      country: args.context.storefront.i18n.country,
      language: args.context.storefront.i18n.language,
    },
  };
}

Paso 5: Añade seguimiento para los eventos Product Viewed y Cart Updated

Eventos Product Viewed

  1. Añade esta función a tu archivo Tracking.jsx:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export function trackProductViewed(product, storefrontUrl) {
  const eventData = {
    product_id: product.id.substring(product.id.lastIndexOf('/') + 1),
    product_name: product.title,
    variant_id: product.selectedOrFirstAvailableVariant.id.substring(product.selectedOrFirstAvailableVariant.id.lastIndexOf('/') + 1),
    image_url: product.selectedOrFirstAvailableVariant.image?.url,
    product_url: `${storefrontUrl}/products/${product.handle}`,
    price: product.selectedOrFirstAvailableVariant.price.amount,
    currency: product.selectedOrFirstAvailableVariant.price.currencyCode,
    source: storefrontUrl,
    type: ["price_drop", "back_in_stock"],
    metadata: {
    sku: product.selectedOrFirstAvailableVariant.sku
  }

  }
  braze.logCustomEvent(
    "ecommerce.product_viewed",
    eventData
  )
}
  1. Para llamar a la función anterior cada vez que un usuario visita una página de producto, añade un hook useEffect al componente Product dentro del archivo app/routes/products.$handle.jsx:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { trackProductViewed } from '~/tracking';
import { useEffect } from 'react';

export default function Product() {
  // @type {LoaderReturnData}
  // retrieve storefrontUrl to be passed into trackProductViewed
  const {product, storefrontUrl} = useLoaderData();

  // Add useEffect hook for tracking product_viewed event
  useEffect(() => {
    trackProductViewed(product, storefrontUrl)
  }, [])

  return (...)
}
  1. Añade el valor para “storefrontUrl” (porque no está en el loader del componente de forma predeterminada):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

async function loadCriticalData({context, params, request}) {
  const {handle} = params;
  const {storefront} = context;

  if (!handle) {
    throw new Error('Expected product handle to be defined');
  }

  const [{product}] = await Promise.alll([
    storefront.query(PRODUCT_QUERY, {
      variables: {handle, selectedOptions: getSelectedProductOptions(request)},
    }),
    // Add other queries here, so that they are loaded in parallel
  ]);

  if (!product?.id) {
    throw new Response(null, {status: 404});
  }

  return {
    product,
   // Add this property to the returned value
    storefrontUrl: context.env.PUBLIC_STORE_DOMAIN,
  };
}

Eventos Cart Updated

  1. Define funciones para el seguimiento del evento cart_updated y la configuración del token del carrito:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

export function trackCartUpdated(cart, storefrontUrl) {
  const eventData = {
    cart_id: cart.id,
    total_value: cart.cost.totalAmount.amount,
    currency: cart.cost.totalAmount.currencyCode,

    products: cart.lines.nodes.map((line) => {
      return {
        product_id: line.merchandise.product.id.toString(),
        product_name: line.merchandise.product.title,
        variant_id: line.merchandise.id.toString(),
        image_url: line.merchandise.image.url,
        product_url: `${storefrontUrl}/products/${line.merchandise.product.handle}`,
        quantity: Number(line.quantity),
        price: Number(line.cost.totalAmount.amount / Number(line.quantity))
      }
    }),
    source: storefrontUrl,
    metadata: {},
  };

  braze.logCustomEvent(
    "ecommerce.cart_updated",
    eventData
  )
}

export function setCartToken(cart) {
  const cartId = cart.id.substring(cart.id.lastIndexOf('/') + 1)
  const cartToken = cartId.substring(0, cartId.indexOf("?key="));
  if (cartToken) {
    const cartSessionKey = `ab.shopify.shopify_cart_${cartToken}`;
    const alreadySetCartToken = sessionStorage.getItem(cartSessionKey);

    if (!alreadySetCartToken) {
      braze.getUser().addAlias("shopify_cart_token", `shopify_cart_${cartToken}`)
      braze.requestImmediateDataFlush();
      sessionStorage.setItem(cartSessionKey, cartToken);
    }
  }
}
  1. Devuelve el objeto cart desde la acción del fetcher para que Braze pueda acceder a sus propiedades yendo a tu archivo app/routes/cart.jsx y añadiendo lo siguiente a la función action:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

export async function action({request, context}) {
  const {cart} = context;

  ...

  switch (action) {
    case CartForm.ACTIONS.LinesAdd:
      result = await cart.addLines(inputs.lines);
      break;
    ...
  }

  const cartId = result?.cart?.id;
  const headers = cartId ? cart.setCartId(result.cart.id) : new Headers();
  const {cart: cartResult, errors, warnings} = result;

  const redirectTo = formData.get('redirectTo') ?? null;
  if (typeof redirectTo === 'string') {
    status = 303;
    headers.set('Location', redirectTo);
  }

  return data(
    {
      cart: cartResult,
      // Add these two properties to the returned value
      updatedCart: await cart.get(),
      storefrontUrl: context.env.PUBLIC_STORE_DOMAIN,
      errors,
      warnings,
      analytics: {
        cartId,
      },
    },
    {status, headers},
  );
}

Para más información sobre los fetchers de Remix, consulta useFetcher.

  1. Las tiendas Hydrogen generalmente definen un componente CartForm que gestiona el estado del objeto del carrito, que se usa al añadir, eliminar y cambiar la cantidad de artículos en un carrito. Añade otro hook useEffect en el componente AddToCartButton que llamará a la función trackCartUpdated cada vez que el estado del fetcher del formulario cambie (cada vez que se actualice el carrito del usuario):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// Add imports
import { trackCartUpdated, setCartToken } from '~/tracking';
import { useEffect } from 'react';
import { useFetcher } from '@remix-run/react';

export function AddToCartButton({
  analytics,
  children,
  disabled,
  lines,
  onClick,
}) {

  // Define a new Fetcher to be used for tracking cart updates
  const fetcher = useFetcher({ key: "cart-fetcher" });

  // Add useEffect hook for tracking cart_updated event and setting cart token alias
  useEffect(() => {
    if(fetcher.state === "idle" && fetcher.data) {
      trackCartUpdated(fetcher.data.updatedCart, fetcher.data.storefrontUrl)
      setCartToken(fetcher.data.updatedCart);
    }
  }, [fetcher.state, fetcher.data])

  // Add the fetcherKey prop to the CartForm component
  return (
    <CartForm route="/cart" inputs= fetcherKey="cart-fetcher" action={CartForm.ACTIONS.LinesAdd}>
      {(fetcher) => (
        <>
          <input
            name="analytics"
            type="hidden"
            value={JSON.stringify(analytics)}
          />
          <button
            type="submit"
            onClick={onClick}
            disabled={disabled ?? fetcher.state !== 'idle'}
          >
            {children}
          </button>
        </>
      )}
    </CartForm>
  );
}
  1. Usa el mismo fetcherKey para las acciones responsables de actualizar un producto existente en tu carrito. Añade lo siguiente a los componentes CartLineRemoveButton y CartLineUpdateButton (ubicados de forma predeterminada en el archivo app/components/CartLineItem.jsx):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function CartLineRemoveButton({lineIds, disabled}) {
  // Add the fetcherKey prop to the CartForm component
  return (
    <CartForm
      fetcherKey="cart-fetcher"
      route="/cart"
      action={CartForm.ACTIONS.LinesRemove}
      inputs=
    >
      <button disabled={disabled} type="submit">
        Remove
      </button>
    </CartForm>
  );
}

function CartLineUpdateButton({children, lines}) {
  // Add the fetcherKey prop to the CartForm component
  return (
    <CartForm
      route="/cart"
      fetcherKey="cart-fetcher"
      action={CartForm.ACTIONS.LinesUpdate}
      inputs=
    >
      {children}
    </CartForm>
  );
}

Instalar la integración de Braze con Shopify

Paso 1: Conecta tu tienda Shopify

Ve a la página del partner de Shopify para iniciar tu configuración. Primero, selecciona Begin Setup para instalar la aplicación de Braze desde la Shopify App Store. Sigue los pasos guiados para completar el proceso de instalación.

Página de configuración de la integración de Shopify en el panel de Braze.

Paso 2: Habilita los SDK de Braze

Para tiendas Shopify Hydrogen o headless, selecciona la opción Custom setup.

La configuración personalizada incluye un SELECTOR de aplicación de sitio web. Selecciona o crea la aplicación que impulsa tu tienda en línea, luego copia la clave de API y el punto final de SDK que se muestran en el paso de incorporación. Para más detalles, consulta Paso 1: Selecciona una aplicación de sitio web y copia las credenciales del SDK.

Antes de continuar con el proceso de incorporación, confirma que has añadido el SDK de Braze a tu sitio web de Shopify utilizando esas credenciales.

Paso de configuración para habilitar los SDK de Braze.

Paso 3: Realiza un seguimiento de los datos de Shopify

Mejora tu integración añadiendo más eventos y atributos de Shopify, que serán impulsados por webhooks de Shopify. Para obtener información detallada sobre los datos rastreados a través de esta integración, consulta Características de datos de Shopify.

Paso de configuración para realizar el seguimiento de datos de Shopify.

Paso 4: Carga histórica de datos (opcional)

A través de la configuración personalizada, puedes incluir opcionalmente la misma carga de datos históricos de Shopify que en la integración estándar: eventos de pedidos de los últimos 90 días y perfiles de usuario del último año, contados desde la fecha en que completes tu integración. Para incluir esta carga de datos inicial, selecciona la casilla de verificación de la opción de carga de datos inicial.

Si prefieres realizar la carga histórica más adelante, puedes completar la configuración inicial ahora y volver a este paso en otro momento.

Sección para configurar la carga histórica de datos.

Para obtener la lista completa de datos en la carga inicial, el comportamiento de los informes de ingresos y la monitorización de la sincronización, consulta Carga histórica de datos.

Paso 5: Configuración de seguimiento de datos personalizados (avanzado)

Con los SDK de Braze, puedes realizar el seguimiento de eventos personalizados o atributos personalizados que van más allá de los datos compatibles con esta integración. Los eventos personalizados capturan interacciones únicas en tu tienda, como:

Paso 5: Configuración de seguimiento de datos personalizados (avanzado)
Eventos personalizados Atributos personalizados
  • Usar un código de descuento personalizado
  • Interactuar con una recomendación de productos personalizada
  • Marcas o productos favoritos
  • Categorías de compra preferidas
  • Estado de membresía o fidelización

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

Paso 6: Configura cómo gestionas usuarios (opcional)

Selecciona tu tipo de external_id en el menú desplegable.

Sección "Recopilar suscriptores".

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

Paso 6.1: Crea el metacampo braze.external_id

  1. En tu panel de administración de Shopify, ve a Settings > Metafields.
  2. Selecciona Customers > Add definition.
  3. En Namespace and key, introduce braze.external_id.
  4. En Type, selecciona ID Type.

Después de crear el metacampo, rellénalo para tus clientes. Recomendamos los siguientes enfoques:

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

Paso 6.2: Crea un endpoint para recuperar tu ID externo

Debes crear un endpoint público al que Braze pueda llamar para recuperar el ID externo. Esto permite a Braze obtener el ID en situaciones en las que Shopify no puede proporcionar el metacampo braze.external_id directamente.

Especificaciones del endpoint

Método: GET

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

Parámetro Obligatorio Tipo de datos Descripción
shopify_customer_id Obligatorio String El ID de cliente de Shopify.
shopify_storefront Obligatorio String El nombre de la tienda para la solicitud. Ej.: <storefront_name>.myshopify.com
email_address Opcional String La dirección de correo electrónico del usuario que ha iniciado sesión.

Este campo puede no estar presente en ciertos escenarios de webhook. La lógica de tu endpoint debe tener en cuenta los valores nulos (por ejemplo, obtener el correo electrónico usando shopify_customer_id si tu lógica interna lo requiere).
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 JSON del ID externo:

1
2
3

{
  "external_id": "my_external_id"
}
Validación

Es fundamental validar que shopify_customer_id y email_address (si está presente) coincidan con los valores del cliente en Shopify. Puedes usar 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 6.3: Introduce tu ID externo

Repite el Paso 6 e introduce la URL de tu endpoint después de seleccionar ID externo personalizado como tu 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 6.4: Recopila tus adhesiones voluntarias de correo electrónico o SMS desde Shopify (opcional)

Tienes la opción de recopilar tus adhesiones voluntarias de marketing por correo electrónico o SMS desde Shopify.

Si utilizas los canales de correo electrónico o SMS, puedes sincronizar tus estados de adhesión voluntaria de marketing por correo electrónico y SMS en Braze. Si sincronizas las adhesiones voluntarias de marketing por correo electrónico desde Shopify, Braze creará 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.

Sección "Recopilar suscriptores" con la opción de recopilar adhesiones voluntarias de marketing por correo electrónico o SMS.

Paso 7: Sincroniza productos (opcional)

Puedes sincronizar todos los productos de tu tienda Shopify con un catálogo de Braze para una personalización de mensajería más profunda. Las actualizaciones automáticas se producen casi en tiempo real, por lo que tu catálogo siempre refleja los detalles de producto más recientes. Para obtener más información, consulta Sincronización de productos de Shopify.

Paso de configuración para sincronizar datos de productos con Braze.

Paso 8: Activa canales

Para activar In-App Messages, Content Cards y conmutadores de características usando la integración directa de Shopify, añade cada canal a tu SDK. Sigue los enlaces de documentación proporcionados para cada canal:

  • In-App Messages: Para habilitar In-App Messages para ejemplos de formularios de captación de leads, consulta In-App Messages.
  • Content Cards: Para habilitar Content Cards para ejemplos de buzón de entrada o banners de sitio web, consulta Content Cards.
  • Conmutadores de características: Para habilitar conmutadores de características para ejemplos de experimentación en el sitio, consulta Conmutadores de características.

Paso 9: Finaliza la configuración

Después de completar todos los pasos, selecciona Finish Setup para volver a la página del partner. Luego, habilita la integración de la aplicación de Braze en tu página de administración de Shopify como lo indica el banner que se muestra.

Banner que indica activar la integración de la aplicación de Braze en Shopify para poder finalizar la configuración de tu integración.

Código de ejemplo

shopify-hydrogen-example es una aplicación Hydrogen de ejemplo que contiene todo el código cubierto en los pasos anteriores.
New Stuff!