Important
4escape ne fournit pas de support pour Google Analytics ni Google Tag Manager.
Cet article est uniquement valable pour les intégrations "widget" des calendriers de réservation.
Cet article n'est pas valable pour les intégrations "iframe".
Cet article est une manière parmi d'autres de réaliser l'intégration.
En mode "widget", le tracking se fait exclusivement sur votre site et non sur les pages de 4escape.
En intégrant Google Analytics, vous vous engagez à mettre en place une popup de consentement et à la configurer de manière à ce que seuls les visiteurs ayant accepté d'être trackés le soient.
En intégrant Google Analytics et en identifiant vos visiteurs, vous vous engagez à être conformes aux lois RGPD.
En intégrant Google Analytics, il est important de noter que vous ne pourrez suivre qu'une partie de votre trafic réel. En effet, certains visiteurs peuvent bloquer les trackers à l'aide de bloqueurs de publicités, de VPN filtrant le tracking, de navigateurs privés, de DNS de filtrage, ou d'autres outils similaires, ce qui empêchera le suivi de leur activité sur votre site web.
Avant de commencer, il est important de noter que pour configurer le tracking Google Analytics 4 via Google Tag Manager, vous devez disposer d'un compte Google Tag Manager. Si vous n'avez pas encore créé de compte, vous pouvez en créer un gratuitement sur le site de Google.
Qu'est ce que Google Tag Manager ?
Google Tag Manager est un outil de gestion de balises qui permet aux entreprises et aux spécialistes du marketing de gérer les tags, codes de suivi et pixels de suivi sur leurs sites web sans avoir à impliquer les développeurs.
Pour plus de détails, voici quelques liens :
Les avantages de Google Tag Manager
Simplicité de mise en œuvre: Les utilisateurs peuvent facilement implémenter de nouveaux tags sans avoir à changer le code source de leur site.
Centralisation: Toutes les données de suivi peuvent être gérées à partir d'un seul endroit, ce qui permet une meilleure visibilité sur les performances du site.
Amélioration de la vitesse du site: Les tags peuvent être chargés de manière asynchrone, ce qui peut améliorer les temps de chargement du site.
Flexibilité: Les utilisateurs peuvent créer des déclencheurs personnalisés pour contrôler quand et où les tags sont chargés.
Économie de temps et d'argent: La gestion centralisée des tags peut économiser du temps et de l'argent en minimisant les erreurs et en simplifiant les processus de suivi.
Fonctionnement avec des produits non-Google
Les termes à connaître
Balises (Tags)
Code qui vous permet d'ajouter du Javascript sur votre site. Par exemple :
indiquer une page vue à Google Analytics
indiquer une conversion à Adwords
ajouter un pixel de tracking Facebook
Déclencheurs (Triggers) :
Moyen par lequel une balise va être utilisée sur le site. Les déclencheurs associés à une balise définissent les conditions selon lesquelles une balise est déclenchée ou non. Par exemple :
à chaque chargement de page
lors d'un achat sur le site
lorsqu'un visiteur est resté plus de 3 minutes sur une page
Variables :
Tout comme chaque Tag est associé à un déclencheur, chaque déclencheur est associé à une variable. La variable est une règle qui conditionnera le déclenchement du tag. Elle sert aussi de moyen de stockage d'informations pour simplifier l'utilisation de GTM. Par exemple :
URL de la page
Stocker l'identifiant de commande présent dans la page
Stocker l'identifiant de compte Adwords ou Analytics
Google Tag Assistant :
Extension Chrome (officielle) qui permet de vous assurer de la bonne configuration et installation de vos balises (Tag Manager, Analytics, Adwords, etc...). https://tagassistant.google.com/
Création du conteneur GTM
Rendez-vous sur https://tagmanager.google.com pour créer votre nouveau conteneur de type "Web".
Après avoir créé votre conteneur, vous êtes prêt à intégrer le code de suivi sur votre site web. Vous pouvez intégrer directement l'HTML généré par Google Tag Manager sur votre site web, tel que cela est indiqué sur la popup après la création du conteneur.
Vous pouvez également utiliser d'autres méthodes d'intégration, comme un plugin pour votre CMS, si vous en utilisez un. Il est important de noter que le processus d'intégration peut varier en fonction de la plateforme de votre site web, mais la plupart des plateformes proposent une méthode facile pour intégrer le code de suivi.
Utilisation des événements recommandés de Google Analytics 4
Dans le cadre de la mise en place du suivi Google Analytics 4 via Google Tag Manager, nous nous basons sur les événements recommandés par Google. Ces événements incluent des propriétés requises telles que "currency", "items", "payment_type", "transaction_id" et "value". Il est important de nommer les variables que vous créerez pour ces propriétés de manière à correspondre à ces noms requis, afin de les rendre cohérents et standardisés.
Pour plus d'informations sur les événements recommandés de Google Analytics 4, vous pouvez vous référer à la documentation officielle disponible sur le site de Google Developers : https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm.
Création des variables
Vous devrez créer des variables pour stocker les informations de transaction et de commerce électronique. Vous allez créer des variables de couche de données pour stocker la devise de l'achat, la valeur de l'achat, les produits achetés, le type de paiement et l'identifiant de transaction.
Veuillez créer les variables suivantes, elles seront de type "Variable de couche de données" :
GA4 DLV - ecom currency
Nom de la variable de couche de données : ecommerce.currency
GA4 DLV - ecom items
Nom de la variable de couche de données : ecommerce.items
GA4 DLV - ecom payment_type
Nom de la variable de couche de données : ecommerce.payment_type
GA4 DLV - ecom transaction_id
Nom de la variable de couche de données : ecommerce.transaction_id
GA4 DLV - ecom value
Nom de la variable de couche de données : ecommerce.value
Création des déclencheurs
Les déclencheurs sont utilisés pour déterminer quand un événement spécifique doit être déclenché et envoyer les informations à Google Analytics 4. Dans cette section, nous allons vous montrer comment créer des déclencheurs pour les événements suivants : add_payment_info, add_to_cart, remove_from_cart, begin_checkout, purchase, et view_cart.
Créez des déclencheurs de type "Événement personnalisé".
Event - add_payment_info
Cet événement signifie qu'un utilisateur a envoyé ses informations de paiement.
Nom de l'événement : add_payment_info
Event - add_to_cart
Cet événement signifie qu'un article a été ajouté à un panier.
Nom de l'événement : add_to_cart
Event - begin_checkout
Cet événement signifie qu'un utilisateur a commencé à remplir ses informations client.
Nom de l'événement : begin_checkout
Event - purchase
Cet événement correspond à l'achat d'un ou de plusieurs articles par un utilisateur.
Nom de l'événement : purchase
Event - remove_from_cart
Cet événement signifie qu'un article a été supprimé du panier.
Nom de l'événement : remove_from_cart
Event - view_cart
Cet événement signifie qu'un utilisateur a consulté son panier.
Nom de l'événement : view_cart
Création d'une balise "GA4 Config"
La balise sera de type "Balise Google".
Vous devrez renseigner votre ID de mesure dans la balise pour que les données soient envoyées à la propriété Google Analytics 4 de type G-XXXXXXXXXX.
Pour récupérer cette balise, rendez-vous dans la configuration de votre propriété sur Google Analytics 4 et sélectionnez "Flux de données".
Sélectionnez la vue web de votre site internet et récupérez votre "ID de mesure".
C'est cet ID qu'il faudra renseigner sur Tag Manager comme identifiant de balise Google.
Nous vous recommandons de mettre en place un déclencheur "Initialization - All Pages" à des fins de test, mais il est important de noter que pour être conforme à la RGPD, vous devrez modifier ce déclencheur en "Consent Initialization - All Pages" et configurer la balise pour qu'elle s'exécute uniquement lorsque l'utilisateur a accepté le bandeau de validation de cookie. En l'absence de consentement explicite, vous ne pouvez pas identifier un utilisateur par le biais de Google Analytics.
Nous ne couvrons pas l'installation et la configuration des multiples outils de bandeaux de cookie (CookiePro, Axeptio, Didomi, etc.). Veuillez vous référer à leur documentation pour en savoir plus.
Création des balises d'événement GA4
Créez les balises suivantes de type "Google Analytics : Événement GA4", avec la balise de configuration "GA4 Config" que vous avez créée précédemment.
Ces balises sont utilisées pour envoyer des informations d'événements spécifiques à Google Analytics 4, comme des achats, des ajouts de produits au panier ou des informations de paiement. Les informations sont stockées dans les variables que vous avez créées précédemment. Les balises sont ensuite déclenchées lorsqu'un événement spécifique survient, en fonction du déclencheur que vous avez configuré.
Voici les informations dont vous aurez besoin pour chacune des balises :
GA4 Event - add_payment_info
Nom de l'événement : add_payment_info
Paramètres de l'événement :
items :
{{GA4 DLV - ecom items}}value :
{{GA4 DLV - ecom value}}currency :
{{GA4 DLV - ecom currency}}payment_type :
{{GA4 DLV - ecom payment_type}}
Déclenchement :
Event - add_payment_info
GA4 Event - add_to_cart
Nom de l'événement : add_to_cart
Paramètres de l'événement :
items :
{{GA4 DLV - ecom items}}value :
{{GA4 DLV - ecom value}}currency :
{{GA4 DLV - ecom currency}}
Déclenchement :
Event - add_to_cart
GA4 Event - begin_checkout
Nom de l'événement : begin_checkout
Paramètres de l'événement :
items :
{{GA4 DLV - ecom items}}value :
{{GA4 DLV - ecom value}}currency :
{{GA4 DLV - ecom currency}}
Déclenchement :
Event - begin_checkout
GA4 Event - purchase
Nom de l'événement : purchase
Paramètres de l'événement :
items :
{{GA4 DLV - ecom items}}value :
{{GA4 DLV - ecom value}}currency :
{{GA4 DLV - ecom currency}}transaction_id :
{{GA4 DLV - ecom transaction_id}}
Déclenchement :
Event - purchase
GA4 Event - remove_from_cart
Une anomalie a été détectée concernant cette fonctionnalité. Dans certaines situations, lorsque le panier devient vide suite à une action, l'événement n'est pas traité correctement avant la redirection vers la page suivante. Nos équipes sont actuellement en train d'investiguer et de travailler sur une solution pour résoudre ce problème.
Nom de l'événement : remove_from_cart
Paramètres de l'événement :
items :
{{GA4 DLV - ecom items}}value :
{{GA4 DLV - ecom value}}currency :
{{GA4 DLV - ecom currency}}
Déclenchement :
Event - remove_from_cart
GA4 Event - view_cart
Nom de l'événement : view_cart
Paramètres de l'événement :
items :
{{GA4 DLV - ecom items}}value :
{{GA4 DLV - ecom value}}currency :
{{GA4 DLV - ecom currency}}
Déclenchement :
Event - view_cart
Création de la balise de lien entre les événements 4escape et GA4
Créez une balise de type "HTML personnalisé" nommée "4escape - GA4 - widget event linker" qui contient le code suivant :
<script>
(function () {
var useCapture = true;
var analyticsEvents = [
"add_to_cart",
"remove_from_cart",
"view_cart",
"begin_checkout",
"add_payment_info",
"purchase",
];
analyticsEvents.forEach(function (eventName) {
document.addEventListener("analytics:" + eventName, function (e) {
if (e && e.detail) {
dataLayer && dataLayer.push({ ecommerce: null });
dataLayer && dataLayer.push({ event: eventName, ecommerce: e.detail });
}
}, useCapture);
});
document.addEventListener("analyticsVariable", function (e) {
if (e && e.detail && e.detail.name) {
var data = {};
data[e.detail.name] = e.detail.value || null;
dataLayer && dataLayer.push(data);
}
}, useCapture);
})();
</script>
Déclenchement : "Toutes les pages".
Cette balise est utilisée pour relier les événements 4escape aux événements Google Analytics 4. Elle permet de suivre les actions de l'utilisateur sur votre site web et d'envoyer ces données à Google Analytics 4. Vous devez la placer sur toutes les pages de votre site pour que les données soient correctement collectées.
Le code à ajouter dans la balise doit être copié et collé tel quel.
Test et déploiement du conteneur GTM
Une fois que vous avez créé toutes les balises, variables et déclencheurs, vous êtes prêt à tester votre conteneur GTM. Voici comment procéder :
Cliquez sur le bouton "Prévisualiser" en haut de l'écran dans GTM. Cela vous permettra de tester les modifications sur votre site web sans qu'elles soient visibles par les visiteurs.
Testez votre conteneur GTM en naviguant sur votre site web sur la page du calendrier de réservation. Vérifiez que toutes les balises et tous les événements fonctionnent correctement et que les données sont correctement collectées dans Google Analytics 4.
Si tout fonctionne correctement, cliquez sur le bouton "Publier" pour déployer votre conteneur GTM en direct sur votre site web.
Après avoir publié votre conteneur GTM, vous pouvez commencer à collecter des données de suivi pour Google Analytics 4.
Il est important de noter que les modifications apportées à votre conteneur GTM peuvent prendre quelques heures pour être prises en compte par Google Analytics. Vous devrez donc attendre un certain temps avant de voir les données de suivi dans votre compte Google Analytics 4.