Configuration de l’intégration standard de Shopify

Cette page vous explique comment intégrer Braze à Shopify à l’aide de notre intégration standard pour les utilisateurs disposant d’une boutique en ligne Shopify. Si vous utilisez un site Shopify headless ou si vous cherchez à mettre en place des solutions plus personnalisées, reportez-vous à la configuration de l’intégration personnalisée de Shopify.

Étape 1 : Connecter votre boutique Shopify

1. Dans Braze, accédez à Intégrations partenaires > Partenaires technologiques, puis recherchez « Shopify ».
2. Sur la page partenaire Shopify, sélectionnez Commencer la configuration pour lancer le processus d’intégration.
   
   
   
   
3. Dans la boutique d’applications Shopify, installez l’application Braze.
   
   

Remarque

Si votre compte Shopify est associé à plusieurs boutiques, vous pouvez changer la boutique à laquelle vous êtes connecté en sélectionnant l’icône de la boutique dans l’en-tête, puis Changer de boutique.

4. Après avoir installé l’application Braze, vous serez redirigé vers Braze pour confirmer l’espace de travail que vous souhaitez connecter à Shopify. Une boutique Shopify ne peut être connectée qu’à un seul espace de travail. Si vous devez en changer, sélectionnez le bon espace de travail.
   
   

5. Sélectionnez Commencer la configuration.
   
   

Étape 2 : Activer les SDK Web de Braze

Pour les boutiques en ligne Shopify, vous pouvez sélectionner la configuration standard afin d’implémenter automatiquement le SDK Web et le SDK JavaScript de Braze.

Après avoir sélectionné le parcours d’onboarding avec configuration standard, vous devez choisir le moment où Braze initialise et charge les SDK parmi les options suivantes :

• Lors de la visite du site, par exemple au début de la session
  • Suit à la fois les utilisateurs identifiés et anonymes
• Lors de l’inscription au compte, par exemple à la connexion au compte
  • Suit uniquement les utilisateurs identifiés
  • Commence à suivre les données lorsque les visiteurs du site s’inscrivent ou se connectent à leur compte

Remarque

Les nouveaux clients reçoivent les dernières versions du SDK Web et du SDK JavaScript de Braze lors de la configuration. Les clients existants peuvent consulter leur version actuelle du SDK dans les paramètres d’intégration, être avertis lorsqu’une version plus récente est disponible et effectuer eux-mêmes la mise à niveau depuis les paramètres d’intégration.

Étape 3 : Configurez vos données Shopify

Configuration des données standard

Important

Pour cette intégration, l’alias d’utilisateur doit respecter le format suivant afin que Braze puisse associer les webhooks au profil utilisateur correspondant :

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

Sélectionnez les données Shopify que vous souhaitez suivre.

Les événements suivants sont activés par défaut dans l’intégration standard.

Pour plus d’informations sur les données suivies via l’intégration, consultez la section Fonctionnalités de données Shopify.

Important

L’intégration Shopify prend en charge les webhooks de création et de mise à jour des clients Shopify, qui se trouvent dans vos paramètres de configuration des données. Lorsqu’un profil utilisateur est créé ou mis à jour dans Shopify, un profil utilisateur correspondant est créé ou mis à jour dans Braze.

Ces actions ne déclenchent pas d’événements personnalisés dans Braze et servent uniquement à synchroniser les données utilisateur Shopify avec Braze. Les données synchronisées comprennent les attributs personnalisés, les attributs standard et, si cette option est activée dans votre configuration, les états des groupes d’abonnement.

Configuration du remplissage historique

À l’étape Suivre les données Shopify, sélectionnez Activer le remplissage historique pour inclure le chargement initial des données historiques dans votre intégration. Choisissez une plage de dates pour les commandes (90 derniers jours, Année dernière ou 2 dernières années) et pour les profils clients (Année dernière, 2 dernières années ou Toute la période). Avant que vous ne terminiez la configuration, Braze affiche une estimation du nombre d’enregistrements et du temps de traitement pour chaque option. Ces sélections ne peuvent plus être modifiées une fois la configuration terminée.

Pour savoir ce qui est importé, comment fonctionne le reporting du chiffre d’affaires et quelles recommandations suivre si vous utilisez déjà Braze avec des Campaigns ou des Canvas actifs, consultez la section Remplissage historique.

(Avancé) Configuration du suivi des données personnalisées

Avec les SDK de Braze, vous pouvez suivre des événements personnalisés ou des attributs personnalisés qui vont au-delà des événements standard de cette intégration. Les événements personnalisés capturent des interactions spécifiques à votre boutique, par exemple :

Le suivi des données personnalisées vous offre des informations plus approfondies sur le comportement des utilisateurs et permet une personnalisation plus poussée. Pour implémenter des événements personnalisés, vous devez modifier le code du thème de votre boutique dans le fichier theme.liquid. Vous aurez peut-être besoin de l’aide de vos développeurs.

Par exemple, l’extrait de code JavaScript suivant détecte si l’utilisateur actuel s’abonne à une newsletter et l’enregistre comme événement personnalisé dans son profil 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
  }
);

Le SDK doit être initialisé (à l’écoute de l’activité) sur l’appareil de l’utilisateur pour enregistrer des événements ou des attributs personnalisés. Pour en savoir plus sur l’enregistrement des données personnalisées, consultez les sections Objet User et Objet logCustomEvent.

Étape 4 : Configurer la gestion de vos utilisateurs

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

Important

Utiliser une adresse e-mail ou une adresse e-mail hachée comme ID externe Braze peut simplifier la gestion des identités dans l’ensemble de vos sources de données. Il est toutefois important de tenir compte des risques potentiels pour la confidentialité des utilisateurs et la sécurité des données.

• Informations faciles à deviner : Les adresses e-mail se devinent facilement, ce qui les rend vulnérables aux attaques.
• Risque d’exploitation : Si un utilisateur malveillant modifie son navigateur web pour envoyer l’adresse e-mail d’une autre personne comme ID externe, il pourrait accéder à des messages sensibles ou à des informations de compte.

Par défaut, Braze convertit automatiquement en minuscules les e-mails provenant de Shopify 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 avant de les hacher à partir d’autres sources de données. Vous évitez ainsi les divergences d’ID externes et la création de profils utilisateur en double dans Braze.

Remarque

Les étapes suivantes dépendent de l’ID externe que vous avez sélectionné :

• Si vous avez sélectionné un type d’ID externe personnalisé : Suivez les étapes 4.1 à 4.3 pour configurer votre ID externe personnalisé.
• Si vous avez sélectionné l’ID client Shopify, l’e-mail ou l’e-mail haché : Ignorez les étapes 4.1 à 4.3 et passez directement à l’étape 4.4.

Étape 4.1 : Créer le méta-champ braze.external_id

1. Dans la page d’administration de Shopify, allez dans Settings > Metafields and metaobjects.
2. Sélectionnez Customers > Add definition.
3. Pour Name, saisissez braze.external_id.
4. Sélectionnez l’espace de noms et la clé générés automatiquement (custom.braze_external_id) pour les modifier et les remplacer par braze.external_id.
5. Pour Type, sélectionnez ID Type.

Une fois le méta-champ créé, renseignez-le pour vos clients. Nous recommandons les approches suivantes :

• Écouter les webhooks de création de clients : Configurez un webhook qui écoute les événements customer/create. Vous pouvez ainsi écrire le méta-champ dès la création d’un nouveau client.
• Renseigner rétroactivement les clients existants : Utilisez l’API Admin ou l’API Customer pour renseigner le méta-champ des clients créés précédemment.

Condition de concurrence potentielle

Le webhook Shopify customers/create peut se déclencher avant que le méta-champ braze.external_id ne soit écrit dans le profil utilisateur. Dans ce cas :

1. Si le méta-champ est absent, Braze appelle l’endpoint configuré (étape 4.2) pour récupérer l’ID externe.
2. Si cet appel échoue également ou expire, Braze crée un profil utilisateur temporaire avec l’ID client Shopify comme ID externe.
3. Lors de tout événement ultérieur où le méta-champ est présent (par exemple customers/update ou orders/create pour un événement ecommerce.order_placed), Braze détecte automatiquement l’incohérence et fusionne le profil temporaire avec le bon ID externe.

Des profils temporaires en double peuvent donc apparaître, mais ils se corrigent automatiquement. Vous n’avez aucune action manuelle à effectuer pour fusionner ces profils.

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

Vous devez créer un endpoint GET accessible publiquement qui renvoie l’ID externe Braze du client. Braze appelle cet endpoint depuis deux sources :

Important

Les serveurs Braze et le navigateur de l’acheteur appellent tous deux cet endpoint. Le pixel web Shopify de Braze charge l’URL de votre endpoint dans le navigateur : cette URL est donc publique. Suivez les étapes de validation afin de ne renvoyer un ID externe que pour un client Shopify correspondant.

Spécifications de l’endpoint

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 l’ID externe au format JSON :

1
2
3

{
  "external_id": "my_external_id"
}

Validation

Avant de renvoyer un ID externe, vérifiez que shopify_customer_id et email_address (s’il est présent) correspondent aux valeurs du client dans Shopify. Vous pouvez utiliser l’API Admin de Shopify ou l’API Customer pour valider ces paramètres et récupérer le bon méta-champ braze.external_id.

Comportement en cas d’échec et fusion

Tout code de statut autre que 200 est considéré comme un échec.

• Implications de la fusion : si l’endpoint échoue (renvoie un code autre que 200 ou expire), Braze ne peut pas récupérer l’ID externe. Par conséquent, la fusion entre l’utilisateur Shopify et le profil utilisateur Braze ne se produit pas à ce moment-là.
• Logique de nouvelle tentative : Braze peut effectuer des tentatives réseau immédiates standard, mais si l’échec persiste, la fusion est reportée jusqu’au prochain événement éligible (par exemple, la prochaine fois que l’utilisateur met à jour son profil ou finalise un paiement).
• Prise en charge : pour garantir une fusion rapide des utilisateurs, assurez-vous que votre endpoint est hautement disponible et gère correctement le champ optionnel email_address.

Étape 4.3 : Saisir votre ID externe

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

Points à prendre en compte

• 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 client Shopify lorsque la fonction changeUser est appelée. Cette étape est essentielle pour fusionner le profil utilisateur anonyme avec le profil utilisateur identifié. Par conséquent, il peut y avoir une période temporaire pendant laquelle différents types d’ID externes coexistent dans votre espace de travail.
• Lorsque l’ID externe est disponible dans le métachamp braze.external_id, l’intégration donnera la priorité à cet ID externe et l’attribuera.
  • Si l’ID client Shopify a été précédemment défini comme ID externe Braze, il sera remplacé par la valeur du métachamp braze.external_id.

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

Si vous utilisez les canaux e-mail, SMS ou WhatsApp, vous pouvez synchroniser vos états d’abonnement au marketing par e-mail, SMS et WhatsApp depuis Shopify vers Braze.

• e-mail
• double abonnement sms
• whatsapp

Si vous synchronisez les abonnements au marketing par e-mail depuis Shopify, Braze crée automatiquement un groupe d’abonnement e-mail pour tous les utilisateurs associés à cette boutique. Vous devez donner un nom unique à ce groupe d’abonnement.

Remarque

Comme mentionné dans l’aperçu de Shopify, si vous souhaitez utiliser un formulaire de capture tiers, vos développeurs doivent intégrer le code du SDK Braze. Cela vous permettra de capturer l’adresse e-mail et le statut d’abonnement global aux e-mails à partir des soumissions de formulaires. Plus précisément, vous devez implémenter et tester ces méthodes dans votre fichier theme.liquid :

• setEmail : définit l’adresse e-mail sur le profil utilisateur
• setEmailNotificationSubscriptionType : met à jour le statut d’abonnement global aux e-mails

Utilisez le double abonnement SMS pour envoyer votre SMS de confirmation à l’image de votre marque via Braze, plutôt que l’e-mail de confirmation de Shopify. Pour activer le double abonnement SMS :

1. Dans l’interface d’administration Shopify, accédez à Settings > Notifications > Customer notifications.
2. Désactivez le double abonnement marketing pour les SMS.
3. Configurez la collecte SMS lors du paiement en abonnement simple.
4. Dans vos paramètres SMS de Braze, sélectionnez Use Braze SMS double opt-in.

Pour en savoir plus sur le double abonnement SMS de Braze et le parcours d’abonnement des utilisateurs, consultez l’aperçu de Shopify.

Si vous envoyez des messages WhatsApp via Braze, vous pouvez également synchroniser les abonnements au marketing WhatsApp depuis Shopify. Sélectionnez Collect WhatsApp subscribers, puis choisissez les groupes d’abonnement WhatsApp à synchroniser.

Important

Votre espace de travail doit disposer d’un compte WhatsApp Business connecté pour avoir des groupes d’abonnement WhatsApp. Vous pouvez en connecter un dans Partenaires technologiques > WhatsApp.

Braze synchronise uniquement le consentement WhatsApp que Shopify enregistre pour un client. Un abonnement par SMS ou par e-mail n’abonne pas un client à WhatsApp, et il n’existe pas de double abonnement pour WhatsApp. Pour en savoir plus, consultez la section Abonnements au marketing WhatsApp.

Étape 5 : Synchroniser les produits (facultatif)

Vous pouvez synchroniser tous les produits de votre boutique Shopify avec un catalogue Braze pour personnaliser vos messages encore plus finement. Les mises à jour automatiques s’effectuent quasiment en temps réel, de sorte que votre catalogue reflète toujours les informations produit les plus récentes. Pour en savoir plus, consultez la page Synchronisation des produits Shopify.

Étape 6 : Activer les canaux (facultatif)

Avec les intégrations Shopify standard, vous pouvez activer les messages in-app et les Banners directement depuis les paramètres de votre intégration, sans développement supplémentaire.

Messages in-app

À l’étape Activate Channels, sélectionnez les messages in-app dans les paramètres de votre intégration. Vous pourrez ainsi mettre en place des cas d’usage comme les formulaires de collecte d’e-mails et de numéros SMS, les pop-ups promotionnels ou les enquêtes. Pour savoir comment en créer un, consultez Messages in-app.

Remarque

Braze collecte des informations sur les visiteurs, comme les adresses e-mail et les numéros de téléphone, par le biais des messages in-app. Ces informations sont envoyées à Shopify. Elles permettent aux marchands de reconnaître les visiteurs de leur boutique et de leur offrir une expérience d’achat plus personnalisée. Pour plus de détails, consultez Visitor API.

Banners

Les Banners affichent du contenu personnalisé sur votre boutique Shopify, comme des promotions, des annonces ou des offres ciblées.

Important

Les bannières pour l’intégration standard Shopify sont actuellement en accès anticipé. Contactez votre gestionnaire de compte Braze si vous souhaitez participer à l’accès anticipé.

Configuration

Important

Les Banners nécessitent un thème Shopify Online Store 2.0 et le SDK Braze en version 6.8.0 ou ultérieure. Pendant la configuration, Braze vérifie si le thème publié de votre boutique prend en charge les emplacements de bannières intégrés. Les thèmes Vintage ne prennent pas en charge les emplacements intégrés : l’option Turn on banners and create banner placements est donc désactivée dans Activate Channels. Pour utiliser les Banners, passez à un thème Online Store 2.0 depuis votre page d’administration Shopify, puis revenez à la configuration de l’intégration pour activer les Banners.

Sélectionnez Turn on banners and create banner placements dans Activate Channels, puis enregistrez.

Braze crée automatiquement les emplacements de Banners suivants, une seule fois par espace de travail, et les partage entre toutes les boutiques Shopify connectées :

• En-tête global
• Corps de la page d’accueil
• Pied de page global
• Bannière d’informations produit
• Corps de la page produit
• Corps de la page collection
• Corps du panier
• Récapitulatif du panier

Remarque

Si vous connectez plusieurs boutiques Shopify et activez les Banners pour chacune d’elles, Braze crée les huit mêmes emplacements en même temps. Les mêmes ID d’emplacement peuvent être utilisés simultanément sur une partie ou sur l’ensemble de vos boutiques connectées.

Si les ID d’emplacement par défaut ne correspondent pas à votre configuration ou si vous souhaitez en utiliser d’autres, vous devez créer les emplacements manuellement. Chaque ID d’emplacement doit correspondre à celui configuré dans le bloc d’application Shopify correspondant. Si vous modifiez un ID d’emplacement après le lancement, mettez à jour le bloc d’application en conséquence, sinon la bannière ne s’affichera plus.

Créer une Banner

Créez votre Banner dans une Campaign ou un Canvas à l’aide de l’éditeur glisser-déposer, du HTML ou d’un modèle.

Remarque

L’aperçu de l’éditeur Braze n’affiche que le contenu de la Banner. Pour voir où la Banner apparaît sur votre site, prévisualisez-la dans l’éditeur de thème Shopify.

Étape 1 : Ajouter votre Banner à votre thème Shopify

1. Lancez votre Campaign ou votre Canvas auprès d’une audience restreinte, comme un segment d’essai contenant uniquement votre compte (par exemple, votre propre external_id ou device_id), ou un groupe de test inclus dans votre ciblage. Vous pourrez ainsi vérifier la Banner sur votre site en production sans l’exposer aux acheteurs.
2. Dans l’éditeur de thème Shopify, ouvrez la page où vous souhaitez afficher la Banner, puis sélectionnez Apps > Add Block > Apps > Braze dans le menu.

3. Dans les paramètres du bloc d’application, saisissez le placement_id de l’emplacement choisi (par exemple, global_header) parmi vos emplacements de Banners.

4. (Facultatif) Ajustez la largeur du bloc d’application (en % du conteneur) et ajoutez une hauteur fixe en pixels. Par défaut, la hauteur maximale s’adapte au contenu de votre bannière. Définissez une hauteur fixe si votre thème nécessite un emplacement plafonné, par exemple pour éviter qu’une bannière trop haute ne repousse le contenu de la page vers le bas.

Étape 2 : Tester et lancer

Visitez votre boutique en tant qu’utilisateur test pour vérifier que la Banner s’affiche au bon emplacement et ressemble à ce que vous attendez. Modifiez ensuite le ciblage de votre Campaign ou de votre Canvas pour atteindre l’ensemble de votre audience. Pour mesurer les performances, consultez Analyse des Banners.

Important

Les Banners ne sont actuellement pas prises en charge sur les pages de remerciement, de statut de la commande ou de compte client. Si ces emplacements vous intéressent, adressez une demande à votre équipe de compte Braze.

Content Cards et feature flags

Pour ajouter des Content Cards ou des feature flags, travaillez avec vos développeurs pour insérer le code SDK nécessaire directement dans votre fichier theme.liquid. Pour des instructions détaillées, consultez Intégrer le SDK Braze.

Notifications push Web

Les notifications push Web ne sont actuellement pas prises en charge pour l’intégration Shopify. Si web push for the Shopify integration vous intéresse, envoyez un retour produit.

Étape 7 : Terminer la configuration

1. Une fois votre configuration terminée, sélectionnez Terminer la configuration.
2. Activez l’intégration de l’application Braze dans les paramètres de votre thème Shopify. Sélectionnez Ouvrir Shopify pour être redirigé vers votre compte Shopify et activer l’intégration de l’application dans les paramètres du thème de votre boutique.

3. Une fois l’intégration de l’application activée, votre configuration est terminée ! Vérifiez que vous pouvez consulter les paramètres de votre intégration, le statut de la synchronisation initiale des données et vos événements Shopify actifs.