Google Tag gestionnaire avec le SDK Braze

À propos de Google Tag gestionnaire pour le Web

Google Tag gestionnaire (GTM) vous permet d’ajouter, de supprimer et de modifier à distance des balises sur votre site web, sans nécessiter de mise en production ni de ressources techniques. Braze propose les modèles suivants pour le SDK Web :

Séquençage des balises pour les balises d’action Braze

La balise Braze Initialization doit se déclencher avant toute balise qui appelle des méthodes du SDK Braze (telles que braze.getUser(), braze.logCustomEvent() ou braze.logPurchase()). Si ces méthodes se déclenchent avant l’initialisation du SDK, vous pourriez rencontrer des erreurs comme Uncaught TypeError: Cannot read properties of undefined (reading 'getUser').

Pour configurer le séquençage des balises dans Google Tag gestionnaire :

1. Ouvrez la balise qui appelle les méthodes du SDK Braze (comme une balise HTML personnalisée ou une balise d’action Braze).
2. Accédez à Advanced Settings > Tag Sequencing.
3. Sélectionnez A tag that fires before [this tag] is fired.
4. Choisissez votre balise Braze Initialization.

Cela garantit que le SDK est entièrement chargé avant que d’autres balises ne tentent d’appeler les méthodes Braze.

Pour plus de détails, consultez Vérifier le séquençage des balises pour les événements personnalisés.

Journaliser des achats avec GTM

Dans les balises d’action Braze et les balises Custom HTML, appelez braze.logPurchase() pour enregistrer le chiffre d’affaires. L’ancien espace de noms appboy.logPurchase() n’est pas pris en charge dans les intégrations actuelles du SDK Web.

Journaliser des événements e-commerce avec GTM

Utilisez le type de balise Log eCommerce Event (New) dans la balise Braze Actions pour envoyer des événements e-commerce recommandés à Braze depuis votre couche de données GTM. Cette balise appelle braze.logEcommerceEvent() et nécessite le SDK Web version 6.8.0 ou ultérieure. Assurez-vous que votre balise Braze Initialization charge une version compatible du SDK.

La balise prend en charge les événements suivants :

Pour journaliser ecommerce.order_cancelled ou ecommerce.order_refunded, utilisez une balise Custom HTML qui appelle braze.logCustomEvent(). Pour des exemples, consultez Journaliser des événements e-commerce.

Remarque

Les types de balises Log Purchase (Legacy) et E-Commerce Purchase (Legacy) continuent de fonctionner. Utilisez Log eCommerce Event (New) pour les nouvelles intégrations.

Étape 1 : Envoyer l’événement à la couche de données

Dans le code de votre site, envoyez l’événement et son objet ecommerce à la couche de données. Par défaut, la balise lit le format standard de couche de données e-commerce GA4. Par exemple, pour journaliser une commande :

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

dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "T_12345",
    value: 29.97,
    currency: "USD",
    items: [
      {
        item_id: "SKU_12345",
        item_name: "Stan and Friends Tee",
        item_variant: "green",
        price: 9.99,
        quantity: 3
      }
    ]
  }
});

Braze exige que les identifiants tels que item_id et transaction_id soient des chaînes de caractères. Envoyez-les en tant que chaînes de caractères, même si vos identifiants sont numériques.

Étape 2 : Créer un déclencheur dans GTM

1. Dans votre conteneur GTM, accédez à Triggers et créez un nouveau déclencheur.
2. Définissez le Trigger Type sur Custom Event.
3. Définissez le Event Name sur l’événement que vous avez envoyé à la couche de données (par exemple, purchase).

Étape 3 : Créer la balise Braze Actions

1. Dans GTM, accédez à Tags et créez une nouvelle balise avec le type Braze Actions Tag.
2. Définissez le Tag Type sur Log eCommerce Event (New).
3. Sélectionnez un eCommerce Event Type.
4. Renseignez les champs pour ce type d’événement, comme décrit dans le tableau suivant.
5. (Facultatif) Ajoutez des métadonnées.
6. Sous Triggering, sélectionnez le déclencheur que vous avez créé à l’étape 2.
7. Configurez le séquençage des balises pour que la balise Braze Initialization se déclenche en premier.
8. Enregistrez et publiez votre conteneur.

Si ecommerce.currency n’est pas défini, la balise utilise le champ currency du premier élément. La balise définit la source de l’événement sur google_tag_manager_web.

Mappage de la couche de données

Lorsque l’option Automatically parse e-commerce event from the data layer est sélectionnée (par défaut), la balise mappe les valeurs de la couche de données aux propriétés de l’événement Braze comme suit :

Saisir manuellement les valeurs de l’événement

Si votre site utilise un format de couche de données e-commerce personnalisé, décochez Automatically parse e-commerce event from the data layer. Saisissez ensuite les valeurs de l’événement dans la balise. Vous pouvez utiliser des variables GTM dans n’importe lequel de ces champs.

Métadonnées des événements e-commerce

Ajoutez des métadonnées pour envoyer des paires clé-valeur supplémentaires avec l’événement. Braze envoie les métadonnées de l’événement dans l’objet metadata de l’événement, et les métadonnées produit dans l’objet metadata de chaque produit.

Métadonnées de l’événement

Utilisez le tableau eCommerce Event Metadata pour ajouter des métadonnées au niveau de l’événement. Ce tableau est disponible que l’analyse automatique soit activée ou non. Pour chaque ligne, saisissez une Metadata property key et une Metadata property value. Vous pouvez utiliser une variable GTM comme valeur. La balise ignore les lignes dont la clé ou la valeur est vide.

Certains types d’événements prennent en charge des clés de métadonnées reconnues. Par exemple, utilisez checkout_url pour Checkout started et order_status_url pour Order placed. Pour la liste complète, consultez Schémas d’événements.

Métadonnées produit

Utilisez la colonne Product Metadata (JSON) du tableau Products pour ajouter des métadonnées à un produit individuel. Saisissez un objet JSON, tel que {"color": "green", "size": "M"}. Les métadonnées produit présentent les limitations suivantes :

• Les métadonnées produit ne sont disponibles que lorsque vous décochez Automatically parse e-commerce event from the data layer.
• La balise envoie les métadonnées produit pour les événements Cart Updated, Checkout started et Order placed. Elle n’envoie pas de métadonnées produit pour Product Viewed, car cet événement ne possède pas de tableau de produits. Utilisez plutôt le tableau eCommerce Event Metadata pour Product Viewed.
• Si le JSON n’est pas un objet valide, la balise l’ignore.

Vérifier les événements e-commerce

Le SDK Web de Braze valide chaque événement e-commerce. Si une valeur est invalide, le SDK ne journalise pas l’événement et écrit une erreur dans la console du navigateur. GTM affiche tout de même la balise comme déclenchée. Pour résoudre un problème d’événement manquant :

1. Sélectionnez Enable GTM Tag Debugging dans la balise. La balise journalise alors un message dans la console du navigateur lorsqu’elle ne peut pas lire une valeur de la couche de données, ne trouve aucun produit ou ignore des métadonnées produit invalides.
2. Ouvrez la console de développement de votre navigateur et recherchez les erreurs du SDK Web de Braze.
3. Vérifiez les champs obligatoires pour votre type d’événement. Confirmez que les identifiants sont des chaînes de caractères, que price et total_value sont des nombres valides et que quantity est un nombre entier.

Pour les schémas d’événements et la validation à l’ingestion, consultez Journaliser des événements e-commerce et Validation des événements et résolution des problèmes.

Journaliser des événements personnalisés avec GTM

Vous pouvez journaliser des événements personnalisés à l’aide d’une balise Custom HTML dans GTM. Cette approche utilise la couche de données GTM pour transmettre les données d’événement de votre site à une balise GTM qui appelle le SDK Web de Braze.

Étape 1 : Envoyer l’événement à la couche de données

Dans le code de votre site, envoyez un événement à la couche de données à l’endroit où vous souhaitez déclencher l’événement personnalisé. Par exemple, pour journaliser un événement personnalisé lors d’un clic sur un bouton :

1

<button onclick="dataLayer.push({'event': 'my_custom_event'});">Track Event</button>

Étape 2 : Créer un déclencheur dans GTM

1. Dans votre conteneur GTM, accédez à Triggers et créez un nouveau déclencheur.
2. Définissez le Trigger Type sur Custom Event.
3. Définissez le Event Name sur la même valeur que celle que vous avez envoyée à la couche de données (par exemple, my_custom_event).
4. Choisissez quand le déclencheur doit se déclencher (par exemple, All Custom Events).

Étape 3 : Créer une balise Custom HTML

1. Dans GTM, accédez à Tags et créez une nouvelle balise.
2. Définissez le Tag Type sur Custom HTML.

3. Dans le champ HTML, ajoutez le code suivant :

   
   1
   2
   3
   
    <script>
    window.braze.logCustomEvent("my_custom_event");
    </script>
   
   

4. Sous Triggering, sélectionnez le déclencheur que vous avez créé à l’étape 2.
5. Enregistrez et publiez votre conteneur.

Pour inclure des propriétés d’événement, transmettez-les comme second argument :

1
2
3

<script>
window.braze.logCustomEvent("my_custom_event", {"property_key": "property_value"});
</script>

Environnements CSP stricts (basés sur le nonce)

La balise Braze Initialization ne prend actuellement pas en charge la transmission de contentSecurityNonce à braze.initialize(). Si votre site applique une CSP stricte basée sur le nonce, utilisez une balise Custom HTML au lieu de la balise Braze Initialization.

1. Suspendez ou supprimez la balise Braze Initialization de votre conteneur GTM si vous l’avez déjà configurée.

2. Envoyez votre nonce généré par le serveur vers dataLayer avant l’extrait de code GTM dans le HTML de votre site :

   
   1
   2
   3
   4
   
    <script nonce="SERVER_GENERATED_NONCE">
      dataLayer = window.dataLayer || [];
      dataLayer.push({ cspNonce: 'SERVER_GENERATED_NONCE' });
    </script>
   
   

3. Dans GTM, créez une Data Layer Variable mappée sur cspNonce (par exemple, DLV - cspNonce).

4. Créez une balise Custom HTML avec le déclencheur défini sur Initialization - All Pages :

   Personnalisez le modèle suivant pour votre environnement.

   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   
    <script nonce="{{DLV - cspNonce}}">
      var s = document.createElement('script');
      s.src = 'https://js.appboycdn.com/web-sdk/YOUR_SDK_VERSION/braze.min.js';
      s.setAttribute('nonce', '{{DLV - cspNonce}}');
      s.onload = function() {
        braze.initialize('YOUR_API_KEY', {
          baseUrl: 'YOUR_SDK_ENDPOINT',
          contentSecurityNonce: '{{DLV - cspNonce}}'
        });
        braze.openSession();
      };
      document.head.appendChild(s);
    </script>
   
   

5. Pour la balise Braze Actions ou toute balise Custom HTML qui appelle des méthodes Braze, configurez le séquençage des balises pour qu’elle se déclenche après cette balise Custom HTML.

Politique de consentement des utilisateurs de l’UE de Google

Important

Google met à jour sa politique de consentement des utilisateurs de l’UE en réponse aux modifications du Digital Markets Act (DMA), en vigueur depuis le 6 mars 2024. Ce nouveau changement exige que les annonceurs divulguent certaines informations à leurs utilisateurs finaux de l’EEE et du Royaume-Uni, et qu’ils obtiennent les consentements nécessaires de leur part. Consultez la documentation suivante pour en savoir plus.

Dans le cadre de la politique de consentement des utilisateurs de l’UE de Google, les attributs personnalisés booléens suivants doivent être journalisés dans les profils utilisateur :

• $google_ad_user_data
• $google_ad_personalization

Si vous les définissez via l’intégration GTM, les attributs personnalisés nécessitent la création d’une balise HTML personnalisée. Voici un exemple de la manière de journaliser ces valeurs en tant que types de données booléens (et non en tant que chaînes de caractères) :

1
2
3

<script>
window.braze.getUser().setCustomUserAttribute("$google_ad_personalization", true);
</script>

Pour plus d’informations, consultez Audience Sync vers Google.