Configuration de l’intégration personnalisée de Shopify

Cette page vous explique comment intégrer Braze à une boutique Shopify Hydrogen ou à n’importe quelle boutique Shopify sans tête en utilisant une vitrine personnalisée.

Ce guide utilise le cadre Hydrogen de Shopify comme exemple. Cependant, vous pouvez suivre une approche similaire si votre marque utilise Shopify pour le backend de votre boutique avec une configuration frontale “ sans tête “.

Pour intégrer votre boutique Shopify headless à Braze, vous devez remplir ces deux objectifs :

1. Initialiser et charger le SDK Web de Braze pour permettre le suivi sur site.
   
   Ajoutez manuellement un code dans votre site Shopify pour activer le suivi sur site de Braze. En mettant en œuvre le SDK de Braze sur votre boutique Shopify headless, vous pouvez suivre les activités sur site, notamment les sessions, le comportement anonyme des utilisateurs, les actions des acheteurs avant le passage en caisse, ainsi que tout événement personnalisé ou attribut personnalisé que vous choisissez d’inclure avec votre équipe de développement. Vous pouvez également ajouter tous les canaux pris en charge par les SDK, tels que les messages in-app ou les cartes de contenu.

2. Installez l’intégration de Braze dans Shopify.

Après avoir connecté votre boutique Shopify à Braze, vous aurez accès aux données des clients, des caisses, des commandes et des produits grâce aux webhooks de Shopify.

Pour atteindre ces objectifs, suivez les étapes suivantes :

Initialiser et charger le SDK Web de Braze

Étape 1 : Créer une application pour le site web de Braze

Dans Braze, accédez à Paramètres > Paramètres des applications > puis sélectionnez Ajouter une application. Nommez l’application “Shopify”.

Étape 2 : Ajouter un sous-domaine et des variables environnementales

1. Configurez votre sous-domaine Shopify pour rediriger le trafic de votre boutique en ligne vers Hydrogen.
2. Ajoutez un URI de rappel pour l’identifiant. (L’URI sera automatiquement ajouté lors de l’ajout du domaine).
3. Configurez vos variables d’environnement Shopify:
   • Créez deux variables d’environnement en utilisant les valeurs de l’application Web que vous avez créée à l’étape 1.
   • BRAZE_API_KEY
   • BRAZE_API_URL

Étape 3 : Permettre le suivi sur place

La première étape consiste à initialiser le SDK Web de Braze. Nous vous recommandons de le faire en installant notre paquetage NPM :

1
2
3
npm install --save @braze/web-sdk@5.4.0
# or, using yarn:
# yarn add @braze/web-sdk

Incluez ensuite ce paramètre en tant que clé de premier niveau dans votre fichier vite.config.js :

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

Après avoir installé le paquetage NPM, vous devez initialiser le SDK dans un crochet useEffect à l’intérieur du composant Layout. Selon votre version de Hydrogen, ce composant peut être situé dans le fichier root.jsx ou 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 (...);
}

Les valeurs data.brazeApiKey et data.brazeApiUrl doivent être incluses dans le chargeur de composants à l’aide des variables d’environnement créées à l’étape 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,
    },
  };
}

Étape 4 : Ajouter un événement d’identification de compte Shopify

Suivez le moment où un acheteur se connecte à son compte et synchronise ses informations d’utilisateur avec Braze. Il s’agit notamment d’appeler notre méthode changeUser pour identifier les clients disposant d’un ID externe Braze.

Avant de commencer, assurez-vous que vous avez configuré les URI de rappel pour l’identifiant du client afin qu’ils fonctionnent dans Hydrogen. Pour plus d’informations, reportez-vous à la section Utilisation de l’API de compte client avec Hydrogen.

1. Après avoir configuré les URI de rappel, définissez une fonction permettant d’appeler le SDK de Braze. Créez un nouveau fichier (tel que Tracking.jsx) et importez-le à partir de vos composants :

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);
  }
}

2. Dans le même crochet useEffect qui initialise le SDK de Braze, ajoutez l’appel à cette fonction :

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])

3. Récupérez l’e-mail et le numéro de téléphone du client dans votre requête GraphQL de l’API Client, située dans le fichier 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
  }
`;

4. Enfin, chargez les données personnalisées dans votre fonction 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,
    },
  };
}

Étape 5 : Ajouter le suivi des événements Produit vu et Panier mis à jour

Produits vus lors d’événements

1. Ajoutez cette fonction à votre fichier 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 
  )
}

2. Pour appeler la fonction précédente chaque fois qu’un utilisateur visite une page de produit, ajoutez un crochet useEffect au composant Produit dans le fichier 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 (...)
}

3. Ajoutez la valeur pour “storefrontUrl” (parce qu’elle n’est pas dans le chargeur de composants par défaut) :

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,
  };
}

Panier Événements mis à jour

Outre le suivi de l’événement cart_updated, vous devez envoyer la valeur du jeton du panier à Braze. Nous utilisons la valeur du jeton de panier pour traiter les webhooks de commande reçus de Shopify. Pour ce faire, vous devez créer un alias d’utilisateur dont le nom est le jeton de panier de Shopify.

1. Définissez les fonctions permettant de suivre l’événement cart_updated et de définir le jeton du panier :

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);
    }
  }
}

2. Renvoyez l’objet cart à partir de l’action de récupération afin que Braze puisse accéder à ses propriétés en allant dans votre fichier app/routes/cart.jsx et en ajoutant ce qui suit à la ligne de commande action fonction :

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},
  );
}

Pour plus d’informations sur les récupérateurs Remix, reportez-vous à useFetcher.

3. Les magasins Hydrogen définissent généralement un composant CartForm qui gère l’état de l’objet panier, utilisé lors de l’ajout, de la suppression et de la modification de la quantité d’articles dans un panier. Ajoutez un autre crochet useEffect dans le composant AddToCartButton qui appellera la fonction trackCartUpdated chaque fois que l’état de l’extracteur de formulaires changera (chaque fois que le panier de l’utilisateur sera mis à jour) :

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>
  );
}

4. Utilisez la même adresse fetcherKey pour les actions responsables de la mise à jour d’un produit existant dans votre panier. Ajoutez les éléments suivants aux composants CartLineRemoveButton et CartLineUpdateButton (situés par défaut dans le fichier 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>
  );
}

Installez l’intégration de Braze dans Shopify.

Étape 1 : Connectez votre boutique Shopify

Rendez-vous sur la page partenaire de Shopify pour commencer votre configuration. Tout d’abord, sélectionnez Commencer la configuration pour installer l’application Braze à partir de l’App Store de Shopify. Suivez les étapes guidées pour terminer le processus d’installation.

Étape 2 : Activer les SDK de Braze

Pour les boutiques Shopify Hydrogen ou headless, sélectionnez l’option de configuration personnalisée.

Avant de poursuivre le processus d’onboarding, confirmez que vous avez activé le SDK de Braze sur votre site Shopify.

Étape 3 : Assurer le suivi des données Shopify

Améliorez votre intégration en ajoutant davantage d’événements et d’attributs Shopify, qui seront alimentés par les webhooks de Shopify. Pour obtenir des informations détaillées sur les données suivies par le biais de cette intégration, reportez-vous aux Fonctionnalités des données de Shopify.

Étape 4 : Remblai historique (facultatif)

Grâce à la configuration personnalisée, vous avez la possibilité de charger vos clients et commandes Shopify des 90 derniers jours avant de connecter votre intégration Shopify. Pour inclure ce chargement initial de données, cochez la case de l’option de chargement initial de données.

Si vous préférez effectuer le remblayage plus tard, vous pouvez terminer la configuration initiale maintenant et revenir à cette étape ultérieurement.

Cette table contient les données qui seront initialement chargées par le biais du remblai.

Étape 5 : Configuration personnalisée du suivi des données (avancée)

Avec les SDK de Braze, vous pouvez suivre des événements personnalisés ou des attributs personnalisés qui vont au-delà des données prises en charge pour cette intégration. Les événements personnalisés capturent les interactions uniques dans votre magasin, comme par exemple :

Le SDK doit être initialisé (à l’écoute de l’activité) sur l’appareil d’un utilisateur pour enregistrer des événements et des attributs personnalisés. Pour en savoir plus sur l’enregistrement des données personnalisées, reportez-vous à l’objet personnalisé et à logCustomEvent.

Étape 6 : Configurer la gestion des utilisateurs (facultatif)

Sélectionnez votre type de external_id dans le menu déroulant.

Par défaut, Braze convertit automatiquement les e-mails provenant de Shopify en minuscules avant de les utiliser comme ID externe. Si vous utilisez l’e-mail ou l’e-mail haché comme ID externe, vérifiez que vos adresses e-mail sont également converties en minuscules avant de les attribuer comme ID externe ou de les hacher à partir d’autres sources de données. Cela permet d’éviter les divergences dans les ID externes et de ne pas créer de profils utilisateurs en double dans Braze.

Étape 6.1 : Créez le méta-champ braze.external_id

1. Dans le panneau d’administration de Shopify, allez dans Paramètres > Champs de métadonnées.
2. Sélectionnez Clients > Ajouter une définition.
3. Pour l’espace de noms et la clé, entrez braze.external_id.
4. Pour Type, sélectionnez Type d’ID.

Une fois le métafichier créé, remplissez-le pour vos clients. Nous recommandons les approches suivantes :

• Écouter les webhooks de création de clients : Mettez en place un webhook pour écouter les événementscustomer/create . Cela vous permet d’écrire le méta-champ lors de la création d’un nouveau client.
• Renforcer la clientèle existante : Utilisez l’API Admin ou l’API Client pour remplir le métafichier pour les clients précédemment créés.

Étape 6.2 : Créer un endpoint pour récupérer votre ID externe

Vous devez créer un endpoint public que Braze peut appeler pour récupérer l’ID externe. Cela permet à Braze de récupérer l’ID dans des scénarios où Shopify ne peut pas fournir directement le métafield braze.external_id.

Spécifications des endpoints

Méthode : GET

Braze envoie les paramètres suivants à votre endpoint :

Exemple d’endpoint

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

Réponse attendue

Braze attend un code de statut 200 renvoyant le JSON de l’ID externe :

1
2
3
{
  "external_id": "my_external_id"
}

Validation

Il est essentiel de valider que les adresses shopify_customer_id et email_address (le cas échéant) correspondent aux valeurs du client dans Shopify. Vous pouvez utiliser l’API d’administration de Shopify ou l’API client pour valider ces paramètres et récupérer le métafichier braze.external_id correct.

Comportement en cas d’échec et fusion

Tout code d’état autre que 200 est considéré comme un échec.

• Fusionner les implications : Si l’endpoint échoue (retour non200 ou dépassement de délai), Braze ne peut pas récupérer l’ID externe. Par conséquent, la fusion entre le profil utilisateur Shopify et le profil utilisateur Braze ne se fera pas à ce moment-là.
• Logique de réessai : Braze peut effectuer des tentatives immédiates standard sur le réseau, mais si l’échec persiste, la fusion sera reportée jusqu’au prochain événement admissible (par exemple, la prochaine fois que l’utilisateur mettra à jour son profil ou effectuera un paiement).
• Possibilité de prise en charge : Pour permettre la fusion des utilisateurs en temps voulu, assurez-vous que votre endpoint est hautement disponible et qu’il gère le champ facultatif email_address de manière gracieuse.

Étape 6.3 : Saisissez votre ID externe

Répétez l’étape 6 et saisissez l’URL de votre endpoint après avoir sélectionné l’ID externe personnalisé comme type d’ID externe Braze.

Considérations

• Si votre ID externe n’est pas généré lorsque Braze envoie une requête à votre endpoint, l’intégration utilisera par défaut l’ID du client Shopify lorsque la fonction changeUser sera appelée. Cette étape est cruciale pour fusionner le profil de l’utilisateur anonyme avec le profil de l’utilisateur identifié. Par conséquent, il peut y avoir une période temporaire pendant laquelle différents types d’ID externes existent dans votre espace de travail.
• Lorsque l’ID externe est disponible dans le métafichier braze.external_id, l’intégration donnera la priorité à cet ID externe et l’attribuera.
  • Si l’ID personnalisé de Shopify était précédemment défini comme l’ID externe de Braze, il sera remplacé par la valeur du métafield braze.external_id.

Étape 6.4 : Recueillir vos abonnements par e-mail ou SMS depuis Shopify (facultatif).

Vous avez la possibilité de collecter vos abonnements marketing par e-mail ou par SMS depuis Shopify.

Si vous utilisez les canaux e-mail ou SMS, vous pouvez synchroniser vos états d’abonnement au marketing parketeur sms et e-mail dans Braze. Si vous synchronisez des abonnements de marketing par e-mail depuis Shopify, Braze créera automatiquement un groupe d’abonnement e-mail pour tous les utilisateurs associés à ce magasin spécifique. Vous devez créer un nom unique pour ce groupe d’abonnement.

Étape 7 : Synchroniser les produits (facultatif)

Vous pouvez synchroniser tous les produits de votre boutique Shopify avec un catalogue Braze pour une personnalisation plus poussée des messages. Les mises à jour automatiques s’effectuent quasiment en temps réel, de sorte que votre catalogue reflète toujours les détails les plus récents sur les produits. Pour en savoir plus, consultez le site Shopify product sync.

Étape 8 : Activer les canaux

Pour activer les messages in-app, les cartes de contenu et les drapeaux de fonctionnalité à l’aide de l’intégration directe de Shopify, ajoutez chaque canal à votre SDK. Suivez les liens de documentation fournis pour chaque canal ci-dessous :

• Messages in-app : Pour activer les messages in-app pour les cas d’utilisation des formulaires de capture de prospects, reportez-vous à Messages in-app.
• Cartes de contenu (Content cards) : Pour activer les cartes de contenu pour les cas d’utilisation de la boîte de réception ou des bannières de site web, reportez-vous aux cartes de contenu.
• Drapeaux de fonctionnalité : Pour activer les drapeaux de fonctionnalité dans les cas d’utilisation pour l’expérimentation sur site, reportez-vous à la section Drapeaux de fonctionnalité.

Étape 9 : Terminer la configuration

Une fois toutes les étapes franchies, sélectionnez Terminer la configuration pour revenir à la page partenaire. Ensuite, activez l’intégration de l’appli Braze dans votre page d’administration Shopify, comme indiqué par la bannière qui s’affiche.

Exemple de code

shopify-hydrogen-example est un exemple d’application Hydrogen qui contient tout le code couvert dans les étapes précédentes.