Le but de ce document est de vous donner quelques lignes directrices et tuyaux généraux pour l'implémentation des scripts d'API de collecte de données Emarsys sur votre site Web, en utilisant votre configuration Google Tag Manager (GTM) existante.
Pour les spécifications et besoins concernant cette implémentation, veuillez vous référer à la Documentation d'API JavaScript de collecte de données.
Vous devrez très certainement étendre votre implémentation GTM pour servir entièrement nos scripts de collecte de données. Vous devrez déclarer de nouvelles variables et créer de nouvelles tâches de balises pour lesquelles vous aurez besoin de ressources IT professionnelles et d'une compréhension approfondie de la configuration de votre site Web.
Contenu :
Introduction
Google Tag Manager fournit un fragment de code unique, appelé le code contenant, qui doit être implémenté une seule fois sur le site Web. Ceci fait, les utilisateurs peuvent ajouter divers fragments de code et autres balises de prestataire tiers, en utilisant une interface utilisateur simple disponible sur https://tagmanager.google.com/.
Toutefois, même en utilisant un système de gestion de balise, l'implémentation de fonctions plus complexes requiert souvent de procéder à du codage supplémentaire.
Ce codage comprend la création ou l'expansion de la prétendue couche de données. La couche de données et une méta structure qui standardise les formats de données et donne à GTM une base de données supplémentaire à utiliser pendant le déploiement de balises avancées telles que celles que vous utiliserez pour la collecte de données.
Besoins en Couche de Données GTM générique
Par défaut, GTM ne voie que les données (variables) présentes sur la page Web. Il est de notoriété publique que GTM peut rencontrer des difficultés dans la capture correcte de certaines de ces variables : le formatage de texte spécial (par exemple les valeurs de prix seront formatées pour différentes monnaies et formats de chiffres) peut rendre la lecture de ces données difficile. De plus, certaines de ces données ne seront peut-être pas présentes sur chaque page par défaut (par exemple, nous demandons au site Web de signaler les contenus de panier sur chaque page, même quand le contenu d'un panier n'est pas énuméré par la page Web par défaut).
La solution à ces difficultés est de transmettre de telles données à GTM en l'ajoutant à la couche de données.
Techniquement, la couche de données est une palette objet JavaScript contenant des paires clé-valeur :
var dataLayer = dataLayer || []; dataLayer.push({ visitorId : 345, visitorEmail : john@doe.tld , }); Vous pouvez en apprendre plus sur la couche de données et comment et où elle doit être placée dans le code source de votre site Web dans la documentation détaillée de Google Tag Manager.
Pour une liste complète des données requises pour votre intégration, veuillez voir le tableau de synthèse ci-dessous.
Lignes directrices pour intégrer l'API JavaScript
En règle générale, il est fortement recommandé aux propriétaires de site Web d'implémenter la couche de donnée Enhanced Ecommerce pour Google Tag Manager. Bien que cela implique un effort de codage initial plus long, grâce à cela les utilisateurs GTM peuvent transmettre des données de produit spécifiques à plusieurs prestataires de balise, y compris Emarsys.
Dans ce guide nous partons du principe que l'implémentation Enhanced Ecommerce est prête à être utilisée et que les codes nécessaires sont placés au-dessus du fragment de code contenant GTM, comme recommandé par Google. Dans n'importe quel autre cas spécial, vous devrez ajuster les déclencheurs et les paramètres en fonction de votre fonctionnalité de site Web spécifique.
Veuillez aussi noter qu'Emarsys ne peut pas vous fournir un guide détaillé de tous les scénarios possibles pour la structure du site Web. Pour toute question spécifique, vous devriez prendre contact avec le support de votre agence ou bien un Partenaire Certifié Google Analytics.**
Créer des variables et des balises contenant le JavaScript Emarsys
Pour supporter tous les éléments nécessaires de votre intégration, vous devrez d'abord créer plusieurs variables GTM :
- ecommerce Une variable de couche de données qui lira vos données Enhanced Ecommerce. Ce sera la source dans vos autres variables et balises pour transmettre des données de produit à Emarsys :
2. Chemin de catégorie Vous devrez inclure la catégorie actuellement visitée par le visiteur dans la couche de données. Il faut qu'elle soit lue à l'intérieure d'une variable GTM.
La valeur de catégorie transmise à la commande JavaScript de catégorie doit correspondre exactement aux valeur de catégories figurant dans le catalogue produit:
3. Contenu de panier Comme mentionné précédemment, Enhanced Ecommerce n'inclut pas les contenus du panier sur toutes les pages, mais cela est exigé par Emarsys. Vous devrez donc l'ajouter vous-même à la déclaration de couche de données initiale dans la balise <head> . Il n'y a pas ici de conventions d'appellation recommandées. Veuillez juste vous assurer d'inclure tout ce dont la commande panier a besoin (par exemple la quantité d'articles ainsi que le prix total).
Vous pouvez ensuite lire la couche de données en utilisant une variable GTM et l'ajouter à la commande panier. La commande panier peut être inclue dans votre balise Emarsys générale décrite ci-dessous.
Créer la Balise Emarsys
Une fois les variables configurées, vous devrez créer une nouvelle balise avec le HTML Personnalisé type. Nous l'appellerons ci-après Balise Emarsys.
La balise Emarsys comprendra le code JavaScript (utilisez l'exemple JSFiddle en lien pour créer votre propre code) contenant toutes les commandes requises par l'API de collecte de données.
Comme vous pouvez le voir dans le JSFiddle, le code charge d'abord l'API de collecte de données lui-même. Il doit porter référence de votre ID Marchand, tel que délivré par Emarsys.
Le code vérifie ensuite le type de page où nous sommes actuellement.
Une fois ceci déterminé, il est simple et facile d'utiliser votre implémentation enhanced e-commerce existante et d'appeler les commandes de collecte de données correctes à partir de la balise : vue ou catégorie ou achat
Utilisez le code exemple JSFiddle pour créer votre propre implémentation de balise :
Identification de l'utilisateur
Les termes de services de GTM interdisent l'utilisation d'informations personnelles dans les balises Google. Vous pouvez toutefois ajouter de telles données à la couche de données mais devez vous assurez qu'elles ne soient pas transmises à aucune balise Google, y compris vos balises Google Analytics. Mais vous pouvez les transmettre à tout prestataire tiers comme Emarsys pour vous assurer que le traçage des clients fonctionne comme prévu.
L'API de collecte de données offre deux méthodes pour transmettre des données de client connecté :
- Fournir l'ID de votre utilisateur dans votre base de données utilisateur.
- Fournir l'adresse email de cet utilisateur.
Remarque : Nous recommandons d'utiliser l'adresse email, puisque cela signifie que vous n'avez pas à entretenir un ID externe. Vous devrez de toute façon l'ajouter comme clé dans votre couche de données initiale ajoutée à la section <head> de votre site Web.
Vous devrez créer une nouvelle variable GTM dans votre contenant GTM qui charge ces données à partir de votre couche de données. Nous prendrons pour exemple une variable GTM appelée Email Utilisateur. Vous pouvez modifier votre balise Emarsys générale, mentionnée plus haut, pour inclure aussi la commande JavaScript qui configure l'email utilisateur en utilisant ce nom de variable Email Utilisateur :
ScarabQueue.push(['setEmail', {{User Email}} ]); Tableau de synthèse des données requises pour l'implémentation
Les types de données dont vous avez besoin pour rendre le JavaScript accessible à Emarsys sont :
| Type de données | Description | commande JavaScript | source GTM |
|---|---|---|---|
| Identifiant utilisateur | Soit votre propre userID interne, soit l'adresse email de l'utilisateur. | setEmail / setCustomerId | Ajouter à la couche de données initiale, par ex. Email utilisateur. |
| Product ID | L'identifiant unique utiliser pour identifier les produits, tel qu'enregistré dans votre Flux Produit Google ou catalogue produit Emarsys en .csv. | vue, panier, achat | Enhanced Ecommerce. Pour la commande cart vous devez ajouter ceci comme un article de couche de données spéraré sur toutes les pages de votre site Web. |
| Chemin de catégorie | Le chemin de catégorie visité, tel qu'enregistré dans votre Flux Produit Google ou catalogue produit Emarsys en .csv. | categorie | Ajouter à la couche de données initiale. |
| Quantité de produit | Quand un produit est ajouté à un panier ou acheté. | vue, achat | Enhanced Ecommerce. Pour la commande cart vous devez ajouter ceci comme un article de couche de données spéraré sur toutes les pages de votre site Web. |
| Prix total du produit | Quand un produit est ajouté à un panier ou acheté (en prenant en compte la quantité et toute réduction). | vue, achat | Enhanced Ecommerce. Pour la commande cart vous devez ajouter ceci comme un article de couche de données spéraré sur toutes les pages de votre site Web. |