Mise à jour le 31 juin 2023
Important
Cet article est uniquement valable pour les intégrations "iframe" des calendriers de réservation.
Cet article n'est pas valable pour les intégrations "widget".
Cet article est une manière parmi d'autres de réaliser l'intégration.
4escape ne fournit pas de support pour Google Analytics ni Google Tag Manager.
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 d'un conteneur Google Tag Manager
Rendez-vous sur https://tagmanager.google.com pour démarrer.
Si vous n'avez pas encore de compte, créez-en un en spécifiant le nom du compte, le pays et en décochant "Partager des données anonymement avec Google et des tiers". Nommez le conteneur "www.votresite.com" et sélectionnez "Web" comme plateforme cible.
Google Tag Manager créera automatiquement un conteneur pour vous et affichera le code à installer sur votre site web. Pour plus d'informations sur l'installation de l'extrait de Google Tag Manager, veuillez consulter leur guide de démarrage rapide.
Installation de Google Tag Manager
Intégration de GTM sur votre site web
Manuellement
Dans Tag Manager, cliquez sur Espace de travail.
En haut de la fenêtre, recherchez l'ID de votre conteneur. Il se présente sous la forme "GTM-XXXXX".
Cliquez sur l'ID de votre conteneur pour lancer la fenêtre d'installation de Tag Manager.
Copiez les extraits de code et collez-les dans votre site Web, comme indiqué dans la fenêtre d'installation de Tag Manager.
Insérez l'extrait de code <script> dans l'élément <head> du code HTML de votre page Web, de préférence aussi près que possible de la balise <head>, mais sous les déclarations dataLayer.
Insérez l'extrait de code <noscript> juste après la balise <body> de votre code HTML.
Wordpress - GTM4WP
Installez le plugin https://wordpress.org/plugins/duracelltomi-google-tag-manager/ et laissez-vous guider.
Wordpress - Divi
Dans les options du Theme Divi, cliquez sur l'onglet "Integration".
Dans "Add code to the < head > of your blog", Insérez l'extrait de code <script>.
Dans "Add code to the < body > (good for tracking codes such as google analytics)", Insérez l'extrait de code <noscript>.
Wordpress - Elementor
Accédez au tableau de bord > Elementor Custom Code
Créez un nouveau code personnalisé et nommez-le Google Tag Manager (ou comme vous le souhaitez)
Collez le code que vous obtenez de Google dans la zone de contenu principale de l'éditeur de code personnalisé
Sélectionnez l'emplacement du code à charger dans l'en-tête
Définissez les conditions d'affichage sur l'ensemble du site ou sur une page d'atterrissage sélectionnée si nécessaire.
Intégration de GTM sur 4escape
Une fois le code installé sur votre site internet, il faut a présent l'activer dans 4escape.
Récupérez l'identifiant du conteneur sur GTM, en haut à droite de l'écran :
C'est cet identifiant que vous aurez à configurer dans les paramètres de votre 4escape.
Rendez-vous en tant qu'administrateur sur 4escape dans Société > Personnalisation > Styles & Scripts > Tracking Google et renseignez votre Identifiant de conteneur (GTM-XXXXXX).
Google Tag Manager sera automatiquement chargé à chaque utilisation des pages publiques de votre 4escape.
Création d'une propriété GA4
Dans le cas ou vous n'en ayez pas déjà une, voici un tutoriel rapide pour créer une nouvelle propriété Google Analytics 4 (GA4) :
Connectez-vous à votre compte Google Analytics : Si vous n'avez pas encore de compte Google Analytics, vous devrez en créer un.
Accédez à la console d'administration : Cliquez sur l'icône d'engrenage en bas à gauche de l'écran pour accéder à la console d'administration de Google Analytics.
Sélectionnez "Créer une propriété" : Dans la colonne du milieu ("Propriété"), cliquez sur le bouton "Créer une propriété".
Saisissez les informations de votre propriété :
Nom de la propriété : Saisissez le nom de la propriété que vous souhaitez suivre, généralement le nom de votre entreprise ou de votre site web.
Devise : Sélectionnez la devise que vous souhaitez utiliser pour les rapports.
Fuseau horaire : Sélectionnez le fuseau horaire dans lequel vous souhaitez que les rapports soient générés.
Choisissez vos objectifs :
Choisissez le type de flux Web de données à associer à votre propriété GA4 :
Cliquez sur le bouton "Créer un flux" pour terminer. Google Analytics créera alors un nouveau flux de données et vous fournira un code de suivi. Vous n'aurez besoin de noter que de l'ID DE MESURE.
Configuration de GA4 dans GTM
1 - Création de la variable GA4 - ID de Mesure
Dans Google Tag Manager, commencez par créer la variable de paramètres de Google Analytics 4.
Dans le menu sur la gauche, cliquez sur "Variables" puis créez une nouvelle variable :
Donnez-lui un nom explicite comme GA4 - Tracking ID
Choisissez son type : Utilitaires > Constant
Saisissez l'identifiant de Mesure Google Analytics 4 (au format G-XXXXXXXXXX)
2 - Création de la balise de Configuration GA4
Dans le menu de gauche, cliquez sur "Balises" puis créez une nouvelle balise :
Donnez-lui un nom explicite tel que GA4 - Configuration
Dans le bloc "Configuration de la balise", choisissez le type : Google Analytics : Configuration GA4
Dans le champ "ID de mesure", sélectionnez la variable précédemment créée : "GA4 - Tracking ID".
Dans le bloc "Déclenchement" sélectionnez "All Pages".
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. Veuillez vous référer à leur documentation pour en savoir plus.
Configuration de l'URL de retour vers votre site internet
Afin d'optimiser le tracking, nous vous recommandons de rediriger vos clients vers une page de votre site internet lorsque le paiement d'une commande est réussi.
Pour cela, depuis 4escape, rendez-vous dans Personnalisation > Commandes > Redirections > "URL de redirection sur la page de remerciement pour les paiements réussis" et renseignez l'URL d'une page de votre site internet que vous aurez préalablement créée ( par exemple https://votre-site.com/remerciements/ ).
Configuration des variables 4escape dans GTM
Depuis le 01 novembre 2022, les variables sont passées dans l'url post paiement, que ce soit sans configuration de votre part vers votre instance 4escape, mais également si vous avez spécifié une URL de retour vers votre site web.
Les URLs de destination ont cette forme ci :
https://www.votresite.com/remerciements/#paymentSuccess=1&orderUid=54e7cb98-62ac-4bc8-8926-bdca22218aba&orderAmount=10000&paymentAmount=5000&transactionId=33740238071ba853ed2f2745&transactionStatus=captured
Attention, les montants sont en centimes.
Dans GTM, vous allez donc devoir créer les variables sous la forme "Javascript personnalisé"
Créez la variable 4escape - Payment Success avec le code "Javascript personnalisé" suivant :
function () {
var hashParam = window.location.hash.match(new RegExp('[#?&]' + 'paymentSuccess' + '=([^&#]*)'));
if (hashParam && hashParam[1]) {
return (parseInt(hashParam[1], 10) === 1) ? 1 : 0;
}
if (typeof window.paymentSuccess !== 'undefined') {
return (parseInt(window.paymentSuccess, 10) === 1) ? 1 : 0;
}
return null;
}Cette variable contiendra la valeur 1 ou 0 pour savoir si le paiement a été directement validé ou non par la banque.
Créez la variable 4escape - Order Amount avec le code "Javascript personnalisé" suivant :
function () {
var hashParam = window.location.hash.match(new RegExp('[#?&]' + 'orderAmount' + '=([^&#]*)'));
if (hashParam && hashParam[1]) {
return parseFloat(hashParam[1] || '0') / 100;
}
if (typeof window.orderAmount !== 'undefined') {
return parseFloat(window.orderAmount);
}
return null;
}Cette variable contiendra le montant total de la commande (déjà divisé par 100 pour la conversion à partir des centimes).
Créez la variable 4escape - Order uid avec le code "Javascript personnalisé" suivant :
function () {
var hashParam = window.location.hash.match(new RegExp('[#?&]' + 'orderUid' + '=([^&#]*)'));
if (hashParam && hashParam[1]) {
return hashParam[1];
}
if (typeof window.orderId !== 'undefined') {
return window.orderId || null;
}
return null;
}Cette variable contiendra l'identifiant unique de la commande.
Créez la variable 4escape - Order Items avec le code "Javascript personnalisé" suivant :
function () {
var items = [];
var orderLines = (window.App.CheckoutData && window.App.CheckoutData.order && window.App.CheckoutData.order.lines) || [];
orderLines.forEach(function(line) {
if (line.product) {
items.push({
item_id: line.product.reference || line.product._id,
item_name: line.product.name || line.product._id,
quantity: line.quantity
});
}
});
return items;
}Cette variable contiendra les lignes de la commande qui contiennent un produit.
Créez la variable 4escape - Payment Amount avec le code "Javascript personnalisé" suivant :
function () {
var hashParam = window.location.hash.match(new RegExp('[#?&]' + 'paymentAmount' + '=([^&#]*)'));
if (hashParam && hashParam[1]) {
return parseFloat(hashParam[1] || '0') / 100;
}
if (typeof window.paymentAmount !== 'undefined') {
return parseFloat(window.paymentAmount) / 100;
}
return null;
}Cette variable contiendra le montant du paiement qui vient d'être réalisé (déjà divisé par 100 pour la conversion à partir des centimes).
Créez la variable 4escape - Transaction Id avec le code "Javascript personnalisé" suivant :
function () {
var hashParam = window.location.hash.match(new RegExp('[#?&]' + 'transactionId' + '=([^&#]*)'));
if (hashParam && hashParam[1]) {
return hashParam[1];
}
var queryParam = window.location.href.match(new RegExp('[?&]paymentId(=([^&#]*))'));
if (queryParam && queryParam[2]) {
return queryParam[2];
}
return null;
}Cette variable contiendra l'identifiant unique du paiement / transaction.
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.
Créez des déclencheurs de type "Événement personnalisé".
4escape - Trigger - purchase
Ce déclencheur détectera s'il y a lieu d'envoyer un évènement de notification d'achat.
Type d'évènement : Page vue - DOM prêt
Conditions :
4escape - Payment Success - est égal(e) à - 1
4escape - Transaction Id - n'est pas égal(e) à - null
Event - purchase
Ce déclencheur sert au lien entre le push du datalayer et GA4
Type d'évènement : Événement personnalisé
Nom de l'événement : purchase
Conditions dans lesquelles le déclencheur est exécuté : Tous les événements personnalisés
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 - Configuration" 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 - purchase
Cette balise enverra a GA4 les données ecommerce contenue dans le Data Layer.
Balise de configuration : GA4 - Configuration
Nom de l'événement : purchase
Plus de paramètres > Ecommerce :
Cochez Envoyer des données d'e-commerce
Source de données: Data Layer
Déclenchement :
Event - purchase
4escape - Ecommerce push to DL
Cette balise se déclenchera sur les pages de confirmation de commandes et ajoutera des données dans le Data Layer qui seront collectées pour GA4.
Type de balise : HTML personnalisée
Contenu :
<script>
dataLayer && dataLayer.push({ ecommerce: null });
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'value': ##{{4escape - Order Amount}},
'currency': 'EUR',
'transaction_id': '##{{4escape - Transaction Id}}',
'items': ##{{4escape - Order Items}}
}
});
</script>
Déclenchement : 4escape - Trigger - purchase
Test et déploiement
Pour tester si la balise Google Analytics est opérationnelle, il vous suffit de cliquer sur [Prévisualiser] tout en haut à droite, puis saisir l'URL de test.
Comment tracker les conversions - Google Ads ?
Avant Google Tag Manager, vous demandiez à votre webmaster d'ajouter du code supplémentaire, sur une page dédiée, et ce en fonction de ce que votre prestataire Analytics ou AdWords vous avait lui-même demandé... Plutot chronophage.
Avec Google Tag Manager vous pouvez donner un acces limité à votre consultant Analytics et il pourra se charger lui meme d'ajouter les conditions nécessaires à ses mesures.
Le reste de l'article est en cours de rédaction, mais à partir de l'évènement "purchase" déjà mis en place si dessus, n'importe quel professionnel du Digital Analytics sera en mesure d'y greffer Google Ads.
D'autant plus que l'évènement "purchase" étant natif dans GA4 le lien se fait facilement.
Voici quelques liens qui pourraient vous être utiles :
Pour aller plus loin...
Il y a énormément de possibilités de configuration d'Analytics que nous ne pouvons détailler ici.
Si vous souhaitez être bien accompagné, nous vous recommandons de de contacter Benjamin CHIOETTO : https://www.benjaminchioetto.fr/