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 à Partner Integrations > Technology Partners, puis recherchez « Shopify ».
2. Sur la page partenaire Shopify, sélectionnez Begin setup pour démarrer 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 boutique dans l’en-tête, puis en sélectionnant Switch stores.

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 se connecter qu’à un seul espace de travail. Si vous devez en changer, sélectionnez l’espace de travail approprié.
   
   

5. Sélectionnez Begin setup.
   
   

Étape 2 : Activer les SDK Web de Braze

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

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

• Lors de la visite du site, comme au démarrage d’une session
  • Suit à la fois les utilisateurs identifiés et anonymes
• Lors de l’inscription à un compte, comme lors de la connexion au compte
  • Ne suit que 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 sont provisionnés avec les dernières versions du SDK Web de Braze et du SDK JavaScript lors de la configuration. Les clients existants peuvent consulter leur version actuelle du SDK dans les paramètres d’intégration, être notifiés lorsqu’une version plus récente est disponible et effectuer les mises à niveau en libre-service depuis les paramètres d’intégration.

Étape 3 : Configurer vos données Shopify

Configuration standard des données

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 en savoir plus sur les données suivies via l’intégration, consultez Fonctionnalités des 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 Track Shopify data, cochez la case pour inclure le chargement initial des données historiques dans votre intégration.

Pour les données importées, le comportement des rapports de revenus, les captures d’écran de configuration et les conseils si vous utilisez déjà Braze avec des Campaigns ou des Canvas actifs, consultez Remplissage historique.

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

Avec les SDK 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 uniques dans votre boutique, telles que :

Le suivi des données personnalisées fournit des informations plus approfondies sur le comportement des utilisateurs et permet une personnalisation accrue. 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 pourriez avoir besoin de l’aide de vos développeurs.

Par exemple, l’extrait JavaScript suivant vérifie si l’utilisateur actuel est abonné à une newsletter, et enregistre cette information en tant qu’événement personnalisé sur son profil dans 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é (en écoute d’activité) sur l’appareil d’un utilisateur pour enregistrer des événements ou des attributs personnalisés. Pour en savoir plus sur l’enregistrement de données personnalisées, consultez User object et logCustomEvent object.

Étape 4 : Configurer la gestion de vos utilisateurs

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

Important

L’utilisation d’une adresse e-mail ou d’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. Toutefois, il est important de prendre en compte les risques potentiels pour la confidentialité des utilisateurs et la sécurité des données.

• Informations devinables : Les adresses e-mail sont facilement devinables, 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 de quelqu’un d’autre comme ID externe, il pourrait potentiellement accéder à des messages sensibles ou à des informations de compte.

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 avant 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 utilisateur en double dans Braze.

Remarque

Les étapes suivantes dépendent de votre sélection d’ID externe :

• Si vous avez sélectionné un type d’ID externe personnalisé : Effectuez les étapes 4.1 à 4.3 pour mettre en place votre configuration d’ID externe personnalisé.
• Si vous avez sélectionné l’ID client Shopify, l’e-mail ou l’e-mail haché : Passez les étapes 4.1 à 4.3 et continuez directement à l’étape 4.4.

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

1. Dans le panneau d’administration de Shopify, allez dans Settings > Metafields and metaobjects.
2. Sélectionnez Customers > Add definition.
3. Pour Name, entrez 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éé, 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énements customer/create. Cela vous permet d’écrire le méta-champ lors de la création d’un nouveau client.
• Remplir pour les clients existants : Utilisez l’API Admin ou l’API Client pour remplir le méta-champ pour les clients précédemment créés.

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 (comme 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.

Cela signifie que des profils temporaires en double sont possibles, mais qu’ils se corrigent automatiquement. Vous n’avez pas besoin d’intervenir manuellement pour fusionner ces profils.

Étape 4.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 les scénarios où Shopify ne peut pas fournir directement le méta-champ braze.external_id.

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 le JSON de l’ID externe :

1
2
3

{
  "external_id": "my_external_id"
}

Validation

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

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 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 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 par e-mail ou SMS depuis Shopify (facultatif)

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

• e-mail
• double abonnement sms

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 spécifique. Vous devez créer un nom unique pour 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 texte de confirmation personnalisé via Braze au lieu de 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. Définissez le SMS au paiement sur abonnement simple.
4. Dans vos paramètres SMS de Braze, sélectionnez Use Braze SMS double opt-in.

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

Étape 5 : Synchroniser les produits (facultatif)

Vous pouvez synchroniser tous les produits de votre boutique Shopify vers un catalogue Braze pour une personnalisation plus poussée de vos messages. Les mises à jour automatiques se font quasiment en temps réel, de sorte que votre catalogue reflète les détails produits les plus récents. Pour en savoir plus, consultez la section Synchronisation des produits Shopify.

Étape 6 : Activer les canaux (facultatif)

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

Messages in-app

Dans l’étape Activate Channels, sélectionnez les messages in-app dans le cadre de vos paramètres d’intégration pour activer des cas d’usage tels que les formulaires de capture d’e-mails et de SMS, les pop-ups promotionnels et les enquêtes. Pour savoir comment en créer un, consultez Messages in-app.

Remarque

Braze collecte les informations des visiteurs, telles que les adresses e-mail et les numéros de téléphone, via les messages in-app. Ces informations sont envoyées à Shopify. Ces données permettent aux marchands de reconnaître les visiteurs de leur boutique et de créer une expérience d’achat plus personnalisée. Pour plus de détails, consultez l’API Visitor.

Banners

Les Banners affichent du contenu personnalisé sur votre vitrine Shopify, comme des promotions, des annonces et 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 la version 6.8.0 ou ultérieure du SDK Braze. Lors de la configuration, Braze vérifie si le thème publié de votre boutique prend en charge les placements de bannières en ligne. Les thèmes vintage ne prennent pas en charge les placements en ligne, de sorte que Turn on banners and create banner placements est désactivé dans Activate Channels. Pour utiliser les Banners, passez à un thème Online Store 2.0 dans votre interface 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 ces placements de Banner une seule fois par espace de travail, partagés entre toutes les boutiques Shopify connectées :

• Global header
• Home body
• Global footer
• Product info banner
• Product body
• Collection body
• Cart body
• Cart summary

Remarque

Si vous connectez plusieurs boutiques Shopify et activez les Banners pour chacune, Braze crée les huit mêmes placements en même temps. Les mêmes identifiants de placement peuvent être utilisés sur n’importe laquelle ou toutes vos boutiques connectées simultanément.

Si les identifiants de placement par défaut ne correspondent pas à votre configuration ou si vous souhaitez en utiliser d’autres, vous devez créer les placements manuellement. Chaque identifiant de placement doit correspondre à ce qui est configuré dans le bloc d’application Shopify correspondant. Si vous modifiez un identifiant de placement après le lancement, mettez à jour le bloc d’application pour qu’il corresponde, sinon la bannière cessera de s’afficher.

Créer un Banner

Créez votre Banner en tant que Campaign ou Canvas en utilisant l’éditeur par glisser-déposer, le HTML ou un modèle.

Remarque

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

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

1. Lancez votre Campaign ou Canvas à 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. Cela vous permet de vérifier le 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 placer le 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 correspondant au placement choisi (par exemple, global_header) depuis vos placements de Banner.

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

Étape 2 : Tester et lancer

Visitez votre boutique en tant qu’utilisateur test pour confirmer que le Banner s’affiche au bon emplacement et qu’il apparaît comme prévu. Ensuite, modifiez le ciblage de votre Campaign ou Canvas pour atteindre votre audience complète. Pour mesurer les performances, consultez Analyse des Banners.

Important

Les Banners ne sont actuellement pas pris en charge sur les pages de remerciement, de statut de commande ou de compte client. Si vous êtes intéressé par ces placements spécifiques, faites une demande auprès de votre équipe de compte Braze.

Content Cards et Feature Flags

Pour ajouter des Content Cards ou des Feature Flags, collaborez 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égration du 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. Après avoir configuré votre configuration, 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 afin d’activer l’intégration de l’application dans les paramètres du thème de votre boutique.

3. Après avoir activé l’intégration de l’application, 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.