Préambule
De retour sur la série PrestaShop, avec cette fois un épisode 4.1, où nous verrons comment intégrer Google Tag Manager sur la boutique PrestaShop. Et oui l’épisode 4, sera rédiger en plusieurs parties, car il concernera la mise en place des différentes balises de suivis Analytics, bouton Facebook, et autres. Il se terminera par l’implémentation d’un gestionnaire de cookies selon le RGPD.
C’est pourquoi, je vous propose donc aujourd’hui de suivre la première partie, en intégrant les balises de Google Tag Manager (appelé GTM) sur notre site. Étant donné que cet outil est destiné à gérer des balises (tags), nous verrons comment configurer cela, avec plusieurs cas concrets. Enfin, nous verrons comment mettre en place Google Analytics pour notre boutique en ligne, sans avoir à ajouter un nouveau script dans notre code, mais simplement en le couplant avec GTM.
Le choix du roi
Comme toujours sur le blog Activateur Web, vous le savez, vous avez le choix entre suivre ce tutoriel par le biais du tutoriel vidéo, ou vous pouvez également suivre ce tutoriel à lire où je vous guide pas à pas dans la mise en place des différentes étapes.
A vous de voir, mais vous êtes libres de faire les 2 à la fois, bien entendu.
Bon visionnage ou bonne lecture.
Le Tutoriel en Vidéo : Google Tag Manager dans PrestaShop
Le Tutoriel à lire et à suivre pas à pas
Cliquez sur la double flèche de la table des matières pour ouvrir ou fermer celle-ci.
Table des matières
Prérequis et Avertissements
Ce tutoriel de la série PrestaShop, est réalisé sur un environnement de développement (serveur local, boutique locale de même version que la boutique en ligne, etc.), et en utilisant un thème enfant.
La configuration est en mode développement (réglages des paramètres du mode développement).
Si vous n’avez pas encore mis en place votre environnement de développement, ainsi qu’un thème enfant, je vous conseille de suivre ce tutoriel sur la création et la configuration du mode développement dans PrestaShop.
Pour conclure ces prérequis, si tout est opérationnel de votre côté, nous pouvons donc nous lancer dans la mise en place de Google Tag Manager, couplé à Google Analytics sur votre boutique.
Google Tag Manager ? Pour quoi faire ?
Pour ceux qui se posent la question, sachez que Google Tag Manager (connu sous le diminutif de GTM) est un outil gratuit permettant de gérer et d’implémenter des balises de suivi et de marketing sur votre site web ou application. Avec lui, vous mettrez en place des balises de suivis de façon simple et fiable, sans avoir à modifier le code de votre site.
Si vous avez une boutique en ligne, il y a de fortes chances que vous souhaiteriez mettre en place un système de suivi et d’analyse, afin d’établir votre stratégie marketing.
Analyses des données
Les analyses peuvent être nombreuses et variées :
- Pages du site les plus consultées,
- Tranches d’âge de vos utilisateurs/clients,
- Nombre de téléchargements d’une vidéo,
- Combien de fois ce bouton a reçu un clic,
- La quantité de pages vues en entier,
- Chiffres d’affaires,
- Taux de rebond,
- etc.
Afin d’avoir des analyses complètes, vous devrez avoir un outil tel que Google Analytics, ou d’autres outils d’analyses.
Pour les possesseurs d’une page entreprise sur Facebook, il y a des chance que vous devrez, à un moment ou à un autre, implémenter le pixel Facebook sur votre site.
Si vous décidez d’utiliser des outils de publicités, tels que Facebook Ads ou Google Ads, mieux vaut mettre en place des analyses afin de connaître l’impact de vos campagnes lors de leurs diffusions.
La force de Google Tag Manager
Mais plutôt que devoir implémenter toutes ces balises de code (Google Analytics, Facebook, Google Ads, Facebook Ads, etc.) sur votre site, vous allez le faire depuis Google Tag Manager uniquement.
Nous verrons comment coupler GTM à Analytics dans ce tutoriel.
Et c’est là toute la force de cet outil. Couplé à Analytics, vous pourrez collecter beaucoup plus de données.
Lorsque GTM est installé sur votre site, celui-ci est donc en mesure de communiquer avec les serveurs de Google Tag Manager.
Il faudra bien entendu configurer votre espace de travail afin de récupérer les données qui vous intéressent, et nous verrons comment faire cela par la suite.
Création d’un compte Google Tag Manager
La première chose à faire est bien entendu de posséder un compte Google Tag Manager.
Pour cela, vous aurez besoin d’un compte Google et de l’adresse email avec laquelle vous vous connecterez à ce compte.
Vous pouvez vous rendre sur cette page Tag Manager pour créer votre compte.
Pour vous connecter à Google Tag Manager, cliquez sur le bouton “Commencer gratuitement”. Un nouvel onglet s’ouvre en vous demandant l’adresse e-mail puis votre mot de passe. Une fois vos identifiants renseignés, vous devriez atterrir sur votre compte Google Tag Manager.
Création d’un compte pour votre entreprise.
Votre compte “Administrateur” Google Tag Manager est maintenant créé, mais comme vous pouvez le voir, pour l’instant rien n’apparaît ! Il faudra pour cela créer un compte ! (Un conteneur appelé compte également par GTM ! )
Sachez tout d’abord que dans Google Tag Manager, nous pouvons créer plusieurs comptes. Si par exemple, vous possédez plusieurs boutiques, cela permet de gérer l’analyse de vos différentes boutiques au même endroit. Pour quelqu’un comme moi, qui peut gérer les comptes analytiques de plusieurs clients au même endroit, c’est plutôt très pratique.
Gestion des utilisateurs ou comptes délégués
Sachez toutefois que si vous souhaitez confier cette tâche d’analyse à une agence web, ou à un développeur freelance comme moi, cela est possible, mais vous devrez au préalable créer un compte GTM pour votre entreprise, avant d’ajouter le compte Google de l’agence en tant qu’utilisateur. Soyez vigilant également, si vous accordez des droits à certains membres de vos équipes. Mieux vaut réfléchir et mettre une stratégie en place, au cas où ces salariés quittent l’entreprise et que leurs identifiants de compte soient désactivés.
Mais ce n’est pas le sujet de ce tutoriel, et pour la suite, je ferai donc comme si vous gérez vous-même cette tâche.
Si toutefois, vous souhaitez déléguer ce rôle, n’hésitez pas à me contacter ! : )
Création d’un conteneur pour votre boutique
Il est de bonne pratique de configurer un conteneur par domaine web. Nous allons donc créer un conteneur pour notre boutique. Pour ma part, je ferai cette démonstration avec ma boutique de test en local se nommant “AwPrestaTutosEnDirect_v811”. Bien entendu, si votre boutique est déjà en ligne, vous utiliserez votre nom de domaine. Vous pouvez également mettre en place un conteneur pour la boutique de tests en local, et un autre conteneur pour votre boutique en ligne. C’est aussi pour cela que c’est intéressant de pouvoir gérer les différents conteneurs au même endroit.
Ceci étant, je vais donc cliquer sur le bouton “Créer un compte” :
Je renseigne ensuite les différents champs du formulaire de création du conteneur :
Simplicité est mère de sureté pour s'y retrouver..
Premièrement, sachez que vous pouvez donner les noms qui vous conviennent. Mais comme toujours pour savoir de quoi, on parle, mieux vaut rester simple. C’est pourquoi je donne des noms en rapport avec le nom de ma boutique.
On peut ensuite cliquer sur le bouton “Créer”.
A la suite du clic sur ce bouton, il faudra, après les avoir lues bien sûr, accepter les Conditions d’utilisation de Google Tag Manager, en cochant la case tout en bas, puis sur le bouton “Oui en haut à gauche (qui apparaît après avoir coché la case).
Installer, Intégrer Google Tag Manager
Après avoir validé les conditions, votre espace de travail est maintenant disponible, et une fenêtre modale “Installer Google Tag Manager” a dû s’ouvrir sur cet espace.
Cette fenêtre modale, nous dit où nous devons copier le code pour intégrer Google Tag Manager à notre boutique.
Laissons cette fenêtre ouverte, et ouvrons notre boutique avec l’éditeur de code.
Ouvrir le dossier contenant les dossiers et fichiers de la boutique avec l’éditeur de code
Pour ma part, j’utilise VSCode et je vais donc ouvrir ma boutique “AwPrestaTutosEnDirect_v811” à l’intérieur de celui-ci.
Puis je vais ouvrir le dossier “themes”.
Vous le savez, si vous me suivez, mais je ne touche jamais aux fichiers “cœurs” de PrestaShop, et comme toujours, je créerai ou modifierai la structure de mon thème enfant (voir épisode 3). Mon thème enfant se nomme “classic_child”, et est, bien entendu, activé sur ma boutique PrestaShop.
Avertissement
Je ne le dirai jamais assez, mais mettre en place et modifier un thème enfant vous permettra de conserver toutes vos modifications, le jour où votre version de PrestaShop sera obsolète et que vous devrez la mettre à jour. Si vous modifiez directement le thème parent (“classic ou un autre”), lors d’une mise à jour, tout sera perdu et vous devrez tout coder de nouveau.
Et comme on dit souvent : un bon développeur est un développeur fainéant !!! 😉
On applique un principe : le principe DRY : Don’t Repeat Yourself !
Code Google Tag Manager dans le head
Pour intégrer Google Tag Manager, on nous demande de coller le premier code le plus haut possible de la section head de la page.
Afin que cette balise fonctionne sur toutes les pages, nous devons donc intégrer ce code dans le fichier head.tpl de notre boutique PrestaShop.
Structure du thème parent
Ensuite, pour pouvoir recréer la structure de nos fichiers dans le thème enfant, on commence par regarder ou se trouve le head.tpl dans le thème parent. Je vais donc ouvrir le thème “Classic” (qui est le thème par défaut), puis le dossier templates, ou se trouve tous les fichiers .tpl du thème. Je vois ensuite que ce fichier head.tpl se situe dans un dossier nommé “_partials” . J’ouvre donc ce fichier, et j’en profite pour rechercher quelle balise “block”, je vais pouvoir utiliser pour insérer mon code. On remarque que PrestaShop a bien fait les choses, puisque qu’à la fin du fichier, ils nous ont mis un bloc nommé ‘hook_extra’. Nous utiliserons donc ce bloc.
Modification du thème enfant
Comme annoncé, je vais donc devoir recréer la même structure de dossiers et de fichiers dans mon thème enfant.
Étant donné mon fichier head.tpl n’existe pas encore dans mon thème enfant, je dois donc créer dans mon dossier templates de classic_child, un premier dossier que je nomme “_partials”, puis mon fichier “head.tpl”.
Enfin, comme je ne veux pas recopier le code entier de ce fichier, je “l’étends” depuis le thème parent en l’indiquant en première ligne avec ce code :
{extends file='parent:_partials/head.tpl'}
Puis comme je veux me servir de la balise “block” nommée ‘hook_extra’, pour y placer mon code, je mets donc ce block sur mon fichier enfant :
{block name=’hook_extra’} {/block}
Mise en place du code Tag Manager dans le head.
Notre fichier est maintenant prêt à recevoir le code d’intégration de Google Tag Manager. Enfin le code se situant le premier dans la fenêtre modale : on peut simplement cliquer sur l’icône “copier” ou sélectionner le code et le copier.
Après avoir copié ce code, vous l’aurez deviné, il nous faut le coller dans notre balise “block” de notre fichier “head.tpl” du thème enfant.
Alors autant le dire tout de suite, ce code ne fonctionnera pas ainsi :
Si j’actualise la page de mon site, voilà ce qui arrive :
Erreur de compilation Smarty
En fait, nous avons commis une erreur de compilation. Vous le savez peut-être, mais le moteur de templates de PrestaShop sur le front-end est Smarty. Et bien Smarty ne sait pas interpréter ce code. Tout ce qui est [], {}, etc. lui est inconnu.
Il faut pour éviter cette erreur de compilation, mettre notre code à l’intérieur de balises {literal} {/literal}. On ouvre la balise “literal”, on met notre code, et on ferme la balise “literal”.
{literal}
<!--Code de Google Tag Manager-->
{/literal}
Après avoir fait ceci, j’actualise la page de mon site et celui-ci s’affiche de nouveau normalement.
Il nous reste à intégrer le code du body.
Mise en place du code de Tag Manager dans le body.
Continuons notre procédure d’intégration de GTM sur la boutique PrestaShop.
La fenêtre modale nous invite à copier le code après la balise d’ouverture du body.
Sachez que ce code est selon moi optionnel ! En effet, ce code est un iframe dans des balises <noscript>.
Cela veut dire que ce code s’exécutera, uniquement, si le script que nous venons de mettre dans notre head.tpl ne s’exécute pas lui-même. Or, je ne vois pas pourquoi celui-ci ne devrait pas s’exécuter. Mais bon disons que Google garantit ainsi que son outil aura une chance de s’exécuter si nous sommes de mauvais développeurs… :)
Pour intégrer ce code, nous devons le mettre juste après l’ouverture du body.
Je vais donc commencer par regarder dans mon thème parent la structure à adopter dans mon thème enfant.
Connaître le template et la mise en page utilisée sur ma boutique
Si vous avez suivi l’épisode 3, vous le savez déjà, mais pour rappel, on peut facilement voir quel template et quelle mise en page est utilisée en nous servant des outils du navigateur.
Pour cela, je me place sur la page principale de ma boutique, et je tape sur la touche F12 de mon clavier (ou je fais un clic droit, et je tape sur ‘Inspecter’). Je me rends ensuite dans l’onglet ‘Éléments’ des outils et je peux voir en commentaire, le nom de mon template utilisé.
Ouverture du layout-both-columns.tpl du thème parent
Afin de chercher un bloc qui s’ouvre juste après le body, on commence par ouvrir le template (layout-both-columns.tpl) du thème parent.
On peut voir dans ce fichier, la balise body, et celle-ci est suivie d’une balise “block” nommé “hook_after_body_opening_tag” que l’on peut traduire en français : “crochet après l’ouverture de la balise body”. Parfait, c’est ce que nous sommes venus chercher !
Mise en place du template layout-both-columns.tpl dans le thème enfant.
Nous devons donc mettre en place ce fichier layout-both-columns.tpl dans le thème enfant.
Pour ma part, je me suis déjà servi de ce fichier dans les épisodes précédents. Je n’aurai donc pas à créer ma structure. Si de votre côté, vous n’avez pas encore ce fichier dans votre thème enfant, il vous faudra alors depuis le dossier “templates” de votre thème enfant, créer un dossier nommé “layouts”, puis à l’intérieur de celui-ci, un nouveau fichier “layout-both-columns.tpl”. Vous “étendrez” ensuite le thème parent avec ce code en première ligne de votre fichier :
{extends file='parent:layouts/layout-both-columns.tpl'}
Mise en place du block “hook_after_body_opening_tag” .
On peut ensuite mettre en place notre balise “block” :
Intégration du code GTM après l’ouverture du body
Maintenant, que nous avons implémenté la balise “block”, il nous faut placer le code d’intégration de Google Tag Manager à l’intérieur de celui-ci. Je commence donc par copier ce code :
Il nous reste maintenant à coller ce code dans la balise “block” que nous avons préparé spécialement pour le recevoir :
Vérification de la présence du code de Google Tag Manager sur la boutique PrestaShop
Premièrement, vérifions que le code GTM est bien présent et que nous avons bien fait les choses depuis les fichiers du thème enfant. Pour cela, retournons sur notre page principale, et toujours dans l’onglet “Eléments” des outils de navigateur, regardons aux 2 endroits ou doit se trouver le code :
Vérification du code GTM dans le head.tpl :
Ce code doit être un script, et même mieux que cela, ce code exécutera en fait 2 scripts.
Vous verrez une première balise <script> contenant votre identifiant (id) Google Tag Manager à la fin de celui-ci. Mais l’important est que cette balise <script> commence avec le mot clé “async” comme asynchrone ! Cela permet à votre page et au restant du code de s’exécuter même si le script Google Tag Manager n’est pas encore chargé.
Et Google a donc placé un second script qui lui contient le code que nous avons intégré et qui s’exécutera après le chargement de la page.
Parfait, pour le moment cela semble être en ordre.
Vérification du code GTM dans le body
Vérifions la présence du code que nous avons placé après l’ouverture de la balise body.
Ouvrons donc la balise body, toujours avec notre outil d’inspection du navigateur :
Nous avons donc intégré avec succès le code Google Tag Manager sur la boutique PrestaShop.
C’est bien, mais pour le moment ce code n’a aucune utilité ! Pour qu’il en soit une, il va falloir configurer le conteneur GTM. Alors voyons cela.
Configuration de l’espace de travail Tag Manager
Afin de comprendre le rôle de Google Tag Manager, revenons rapidement sur sa définition et sur son comportement.
Google Tag Manager est un système de gestion de balises. Les balises représentent les codes de suivi ou les fragments de code nécessaires à ce suivi.
Pour débuter, il faudra configurer depuis l’espace de travail de Google Tag Manager, vos balises de suivi, définir des déclencheurs qui activent votre balise lorsque certains événements se produisent, et également créer des variables pouvant simplifier et automatiser les configurations de vos balises.
Un conteneur est donc une collection de balises, de déclencheurs, de variables.
Mais plus que les mots, rien n’est jamais plus compréhensible que par la pratique.
Pour aller plus loin :
Une balise (Tag)
Une balise est un extrait de code (JavaScript très souvent) ajouté à une page ou un pixel de suivi issu d’outils tiers.
Google Tag Manager possède nativement de nombreuses configurations de balises Google et balises tierces. Toutefois, il est possible également de créer des balises personnalisées pour implémenter des codes de suivis qui ne sont pas encore pris en charge.
Une balise doit avoir au moins un déclencheur pour être activée.
Exemples de balises natives :
- Code de suivi de Google Analytics.
- Code de remarketing Google Ads.
- Code de suivis des conversions Google Ads.
- Pixel Facebook.
- Etc.
Un déclencheur
Un déclencheur définit à quel moment et où les balises sont exécutées. Il indique à GTM quand faire ce que nous voulons faire et s’active en réponse à un événement, comme la soumission d’un formulaire, le clic sur un bouton, le chargement d’une page, etc.
Un déclencheur est activé par défaut pour le type d’événement associé. Mais nous pouvons utiliser des filtres pour indiquer avec plus de précisions quand ce déclencheur doit s’exécuter.
Filtres de déclencheurs
Chaque filtre de déclencheur est composé d’une variable, d’un opérateur et d’une valeur.
Par exemple, si nous décidons d’analyser uniquement les pages produits d’un site, nous pourrons utiliser une balise associée à un déclencheur se basant sur l’événement “page vue”, et nous ajouterons un filtre à ce déclencheur pour indiquer que nous voulons analyser les URL de la page contenant /produit/ . Ainsi, la variable du filtre sera “URL de la page”, l’opérateur du filtre sera “contient” et sa valeur sera “/produit/”.
Un exemple frappant : “Chaque fois qu’un visiteur ouvre une page”.
Une variable
Alors que les balises dépendent des déclencheurs, ces derniers eux, dépendent des variables.
Une variable est une information supplémentaire dont GTM peut avoir besoin pour la balise et pour pouvoir déclencher l’événement. Elle contient la valeur qu’un déclencheur doit évaluer pour savoir s’il doit être activé ou bloqué.
Il existe 2 types de variables : une variable intégrée (une variable courante, prête à l’emploi.), et une variable définie par l’utilisateur (variable à personnalisée).
Couplé à Google Analytics, le type de variable le plus utilisé est l’identifiant de suivi de Google Analytics.
Les datalayer
Enfin, vous le verrez, peut être, après vous êtes suffisamment documenté sur l’utilisation de GTM, mais vous aurez la possibilité de créer des datalayer ou couches de données en français, sur votre site. Ceci afin de regrouper toutes les informations dont une balise aura besoin pour se charger, et vous apporter des mesures et analyses spécifiques sur les éléments de votre site.
Mais assez d’explications et revenons à la pratique.
Création d’un compte Google Analytics.
Nous l’avons vu et indiqué, afin de recueillir beaucoup plus de données, nous devons utiliser un outil comme Google Analytics et le coupler ensuite à notre Google Tag Manager.
Rendons-nous sur la page d’Analytics.
Une fois sur cette page, cliquez sur le bouton “Lancez-vous dès maintenant”.
Cliquez ensuite sur le bouton “Commencer à mesurer”.
Compte entreprise
Maintenant, nous devons créer le compte pour l’entreprise.
Propriété Analytics
Par ailleurs, nous devons maintenant créer une propriété Analytics, en lui donnant un nom, le pays où se situe l’entreprise, et la monnaie utilisée.
Après avoir cliqué sur le bouton suivant, je me trouve à présent sur l’onglet “Infos complémentaires”. Sur cette page, j’indiquerai la catégorie sectorielle de mon activité ainsi que la taille de mon entreprise. Étant donné que je cible la boutique en ligne PrestaShop, j’indique ici, que je suis dans le secteur “Shopping”. Bien entendu, cela uniquement pour les besoins de ce tutoriel. En vérité, le secteur de mon entreprise (Activateur Web) se situe dans l’informatique/Services. Mais encore une fois, je me mets à votre place et suppose que si vous vendez en ligne avec une boutique PrestaShop, il est fort à parier que votre secteur d’activités soit le shopping (commerce).
Objectifs commerciaux
Nous arrivons maintenant sur la page “Objectifs commerciaux” :
Vous choisirez en cochant les cases adéquates les objectifs de votre entreprise, ou, autrement dit, indiquez pourquoi vous souhaitez mettre en place les futures analyses.
Cliquez bien évidemment sur le bouton “Créer” pour atterrir sur la page “Collecte des données”. Vous devez au préalable accepter les conditions d’utilisation de Google Analytics, qui s’affichent dans une fenêtre modale. Choisissez votre pays, lisez les conditions, cochez la case, puis cliquez sur le bouton “J’accepte”.
Collecte des données
Nous atterrissons maintenant sur la page “Collecte des données”, ou nous devons sélectionner la plateforme utilisée par notre site web. Si toutefois, votre boutique possède à la fois un site web et une application, je vous conseille de créer une propriété par plateforme. Tout comme je vous conseille de créer un conteneur sur GTM par plateforme également.
Ici, j’indique donc Web, pour la boutique PrestaShop que j’utilise.
Un menu s’ouvre où je dois indiquer l’URL de ma boutique, et donner un nom à ce flux. Je choisis d’activer les mesures communes par défaut. Enfin, je clique sur le bouton “Créer un flux”.
Collecte de données Google Analytics non active !
Après avoir fait cela, Google Analytics nous indique que la collecte de données n’est pas active, et ouvre une page avec des instructions d’intégration.
Instructions d’intégration
On peut choisir de l’intégrer avec un outil de création de site web ou un CMS, ou de le faire manuellement.
Et bien, NON, nous ne voulons ni l’un ni l’autre ! Sinon il n’aurait servi à rien d’intégrer Google Tag Manager sur notre site. On est d’accord ? Vous me suivez, j’espère ?
Nous pouvons donc fermer ces instructions d’intégration.
Détails du flux web
Nous avons ensuite affiché les détails de notre flux Web. On nous indique cet avertissement :
La collecte de données n’est pas active pour votre site. Si vous avez inséré les balises il y a plus de 48 heures, assurez-vous qu’elles sont correctement configurées.
Oui, on le sait, mais nous n’entrerons pas ces balises sur notre site ! Enfin pas directement ! Nous le ferons en utilisant notre Tag Manager.
Et bien pour l’instant, laissons cette page ouverte et retournons sur notre compte Google Tag Manager.
Configuration Google Analytics depuis Tag Manager.
De retour dans GTM, nous allons créer notre première balise.
Pour cela, rendez vous dans l’onglet Balises (à gauche de la page) puis cliquez sur le bouton “Nouvelle”.
Donner un nom à la balise, puis cliquez dans le panneau “Configuration de la balise”.
Je décide de donner comme nom “GA-Analytics”, étant donné que cette balise mettra en relation le compte Analytics avec GTM.
Après avoir cliqué sur la configuration de la balise, sélectionnez la balise native “Google Analytics”.
A la suite du clic sur la balise native “Google Analytics”, nous avons une information nous indiquant d’utiliser conjointement la balise Google et la balise Google Analytics : Événement GA4.
Effectivement,vous le savez sans doute, mais depuis milieu d’année 2023, les anciennes balises Analytics dites Universal ne sont plus prises en compte. Il faut donc obligatoirement maintenant utiliser les propriétés Analytics GA4.
Commençons donc par charger la balise Google. Sélectionner cette balise.
A la suite du chargement de cette balise, nous devons renseigner l’ID de la balise. Autrement dit son identifiant.
Nous retournons donc rapidement sur notre compte Google Analytics afin de copier l’ID de mesure de notre flux.
Copier l'ID de mesure sur le compte Google Analytics
Coller ensuite cet ID dans notre balise Google sur GTM.
Déclenchement de la balise
Ensuite cliquez maintenant sur le panneau “Déclenchement” :
Enregistrez ensuite votre balise, en cliquant sur le bouton prévu à cet effet.
Bravo ! Vous venez de configurer votre première balise dans Google Tag Manager.
Voyons immédiatement le résultat.
Prévisualiser la balise Ga-Analytics
Nous pouvons commencer par cliquer sur le bouton “Prévisualiser” de notre espace de travail.
Après avoir cliqué, une fenêtre Tag Assistant s’ouvre et nous demande de connecter Tag Assistant à notre site.
Sachez ici que nous avons 2 possibilités : soit nous renseignons l’URL de la boutique dans cette fenêtre, soit nous avons également la possibilité d’installer une extension pour Chrome. Si vous installez cette extension, vous pourrez accéder à l’assistant directement depuis la page de votre boutique.
Mais saisissons simplement l’URL de la boutique PrestaShop dans cette fenêtre d’assistant.
Cliquons, ensuite, sur le bouton “Connect”.
Analyses des pages de mon site
Vous avez pu le constater, nous avons 2 fenêtres ouvertes : une avec le site web de la boutique et l’autre avec le TAG Assistant.
Cette dernière nous indique via une pop-up que nous sommes bien connecté au domaine du site que nous avons configuré. Cliquez sur le bouton “Continue” de cette fenêtre.
Informations de TAG Assistant :
Dans l’assistant, nous avons accès aux balises qui ont été activées. On peut voir qu’au-dessus de notre balise Ga-Analytics, il est indiqué “Tags Fired”. Autrement dit “Balise déclenchée”.
Sur la gauche de l’assistant, vous avez tous les événements qui se produisent.
Mais encore…
Alors c’est bien beau me direz vous, mais rien d’extraordinaire jusque-là !
Maintenant, je vous invite à vous positionner sur la page de votre site et scrollez la page jusqu’en bas, et si possible, essayez de voir ce qui se produit dans la fenêtre de TAG Assistant en même temps. Sinon naviguez d’une page à l’autre.
Vous le voyez, un nouvel événement a fait son apparition, et cet événement m’indique que quelqu’un a scrollé la page. Cela peut être intéressant lorsqu’on veut savoir combien de pages sont lues en entier !
Rendons nous maintenant sur une page “produit” en cliquant sur l’un d’entre eux.
Remarquez, une nouvelle liste d’événements est affichée pour cette page produit spécifique. Nous pourrions donc avoir un suivi nous indiquant quelles sont les pages produits les plus regardées. Bien entendu, il faudra paramétrer cela avec une balise spécifique.
Regardons côté Analytics :
Si maintenant, nous venons sur la page d’accueil du compte Analytics, nous pouvons voir le nombre d’utilisateurs qui sont venus visiter notre site, le pays à partir duquel ils étaient connectés, les nouveaux utilisateurs, ou utilisateurs récurrents, les pages qui ont été visitées, le nombre d’événements qui se sont produits, etc., etc.
Notez tout de même que Google a besoin de 48 heures après la création de votre compte Analytics pour vous envoyer des données fiables.
C’est encourageant, cela signifie que nous avons réussi à configurer Google Analytics depuis notre conteneur Google Tag Manager, et cela, sans ajouter de code supplémentaire sur le site web de la boutique PrestaShop. Et en termes de performances, je vous assure que c’est une bonne chance. Car n’oublions jamais qu’un script + un script + un script, ça fait 3 scripts ! Non, sérieusement plus vous aurez de scripts sur vos pages, et plus le temps de chargement de celles-ci sera long ! Et une page web qui est longue à se charger, est une page qui perd de l’audience et des clients potentiels.
Pensez à enregistrer le conteneur Google Tag Manager
Nous avons vu que la balise Analytics fonctionne. Dans l’état actuel des choses, il faut maintenant penser à enregistrer le conteneur GTM. En fait, on ne dit pas enregistrer, mais “Publier”.
Commençons par fermer la fenêtre TAG Assistant. Pour cela, cliquez sur le bouton “Finish” situé en bas de la fenêtre de l’assistant où s’exécute la page Web de votre boutique.
Cela étant, fermer également l’onglet ou s’affiche le TAG Assistant.
De retour sur l’espace de travail de Google Tag Manager, cliquez sur le bouton “Envoyer”.
Publier
Après avoir cliqué sur ce bouton “Envoyer”, un menu pour configurer l’envoi apparaît.
Dans ce menu, vous avez 2 possibilités :
Publier et créer une version ou créer une version.
La première permet d’appliquer les modifications que nous avons faites pour la boutique en écrasant les données (mais comme il n’y en avait encore aucune, on ne risque rien.).
La seconde permet de créer une nouvelle version en gardant la version précédente.
Pour cette première, choisissons la première méthode, et renseignons les champs existants.
A la suite de votre publication, une fenêtre vous affichera la présentation de cette version, les modifications apportées, les balises utilisées, etc.
Ensuite, vous avez, dans l’onglet “Versions” de votre espace de travail, l’indication que cette nouvelle version est celle qui est active actuellement.
Bravo le conteneur de votre espace de travail est maintenant actif et prêt à recevoir d’autres modifications à l’avenir.
Création d’un compte pour votre entreprise.
J’espère que ce tutoriel vous aidera dans la mise en place de vos outils d’analyse sur votre boutique. Vous vous en doutez, les possibilités de suivis, d’analyses, etc. sont très nombreuses, et je ne pourrais en aucun cas les détailler toutes dans un seul tutoriel.
Toutefois, pour la forme et pour comme dit au début de ce tutoriel, essayer d’être toujours le plus complet possible, je vais réaliser avec vous un dernier cas concret.
Nous verrons comment configurer un événement. Et pour que cela soit vraiment concret, nous prendrons le cas où nous voulons analyser à chaque fois qu’un utilisateur clique sur le bouton pour s’inscrire à la newsletter de la boutique PrestaShop.
Je vous conseille dans un premier temps, peut être, d’essayer de le faire de vous-même. Ainsi, vous allez vous familiariser avec votre espace de travail.
Configuration d’un événement lors du clic sur le bouton d’inscription à la newsletter
Étape 1 : Créer une balise d’événement GA4.
Pour pouvoir suivre cet événement personnalisé, nous aurons besoin de créer une balise “Google Analytics: Événement GA4”.
Création de la balise “Google Analytics: Événement GA4”
Pour cela, si vous vous souvenez, on clique sur l’onglet balise, puis sur le bouton “Nouvelle”.
Ensuite, on clique dans le panneau “Configuration de la balise”, et on sélectionne la balise native “Google Analytics”, puis ensuite sur la balise “Google Analytics: Événement GA4” .
A la suite de quoi, nous devons indiquer l’ID de notre propriété Google Analytics. Si vous avez fermé cet onglet, connectez vous à Google Analytics, puis rendez- vous dans le panneau d’administration, en cliquant sur l’icône située en bas à gauche. Cliquez ensuite sur “flux de données”.
Après avoir cliqué sur le “Flux de données”, ouvrez celui-ci en cliquant dessus, et vous pourrez de nouveau copier l’ID de mesure de votre flux.
Retour sur Google Tag Manager
De retour sur Google Tag Manager et la configuration de la balise, coller le code ID dans le champ ID de mesure.
Ensuite, indiquez un nom pour votre événement. J’indique pour ma part, “inscription_newsletter”.
Étape 2 : Création d’un déclencheur.
Afin d’envoyer l’événement lorsqu’un utilisateur cliquera sur le bouton d’inscription à la newsletter, nous devons créer un déclencheur.
Rendez vous dans le panneau “Choisir un déclencheur”, et cliquez sur l’icône du signe +, située en haut à droite, pour ajouter un déclencheur.
Commencez par donner un nom à votre déclencheur personnalisé. Ensuite, cliquez dans le panneau “Configuration du déclencheur”. Sélectionner le type de déclencheur “Clic” et “Tous les éléments” Puis dans le panneau de configuration, cocher le bouton radio “Certains clics” pour les conditions dans lesquelles le déclencheur est exécuté.
Conditions de déclenchement (filtres du déclencheur)
Pour s’assurer que cet événement ne se produira que lors du clic sur le bouton d’inscription à la newsletter de ma boutique PrestaShop, je dois au préalable inspecter ce bouton, avec l’aide de mes outils de navigateur.
Je peux voir que celui-ci est une balise input ayant comme valeur “S’abonner”. Cette balise, de type input, se situe dans un formulaire.
Fausse bonne idée !
On pourrait être tenté de cibler un élément de type texte contenant “S’abonner”.
On mettrait alors comme condition Click Text (comme variable intégrée) contient (opérateur) S’abonner(valeur).
Mais je vous arrête tout de suite, cela ne fonctionnera pas !!
D’abord, il faut savoir que même si mon site s’affiche en français, cela provient des traductions, mais que les valeurs et éléments de nos pages sont tous codés en anglais, qui est la langue universelle des développeurs.
Ensuite, il faut savoir que ce formulaire d’inscription à la newsletter provient d’un module et que ce formulaire est donc injecté dynamiquement grâce à ce module. Je ne vais pas faire un cours sur le DOM, mais cela veut dire que nous aurons des nœuds node.
Mais ne vous inquiétez pas, on veut faire un suivi de ce bouton et on le fera !
Afin de m’assurer que l’événement ne se produit que sur cet élément, je vous donne une petite astuce.
Ajout d’un id à la balise input du formulaire
On sait que sur une page web, un élément se définissant comme étant unique peut être défini grâce à un ID. Je vais donc commencer par ajouter un ‘id’ à cette balise input de mon formulaire d’inscription à la newsletter.
Dans PrestaShop, cette inscription à la newsletter se fait grâce à l’utilisation d’un module nommé ps_emailsubscription.
Je vais donc dans ce module, et je peux voir à l’intérieur qu’il y a 2 templates :
- ps_emailsubscription-column.tpl
- ps_emailsubscription.tpl
Celui qui est appelé sur la page d’accueil de la boutique PrestaShop est le second.
J’ajoute donc un id que je décide de nommer ‘subscribe_newsletter’ à la balise de type input.
<input
class="btn btn-primary float-xs-right hidden-xs-down"
name="submitNewsletter"
id="subscribe_newsletter"
type="submit"
value="{l s='Subscribe' d='Shop.Theme.Actions'}"
>
Conditions d'exécution du déclencheur
Dans la configuration de mon déclencheur, je vais donc définir les conditions d’exécution de mon déclencheur, en définissant qu’il sera déclenché en cliquant sur l’ID qui contient “ subscribe_newsletter”.
Je clique donc sur le premier champ de filtre (la variable) et je choisis “Choisir une variable intégrée”. Dans la liste des variables intégrées qui me sont proposées, je clique ensuite sur “Click ID”.
Ensuite dans le second champ (l’opérateur) , je laisse sur “contient”, et enfin dans le 3ème champ (la valeur), j’indique la valeur que j’ai donné à mon ID “subscribe_newsletter’.
Enregistrer le déclencheur
Nous pouvons maintenant enregistrer notre déclencheur en cliquant sur le bouton “Enregistrer” en haut à droite.
Ensuite, faisons en de même pour notre balise, et cliquons sur le bouton Enregistrer situé là aussi en haut à droite.
Bravo, vous venez de créer votre seconde balise avec un événement personnalisé cette fois.
C’est l’heure de la révélation ! Aurons-nous été à la hauteur et cette balise va-t-elle fonctionner ?
Étape 3 : Tests de fonctionnement de la balise
Testons cela tout de suite, en cliquant sur le bouton “Prévisualiser” de l’espace de travail.
Dans le TAG Assistant, cliquons sur le bouton Connect (après s’être assuré que l’URL du site est bien renseignée dans le champ prévu à cet effet).
Une fois connecté dans le TAG Assistant, je clique sur le bouton “Continue”.
Pour le moment, si vous avez fait la même chose que moi, on peut voir que notre balise Ga-Analytics est dans la liste des “Tags Fired”, mais notre balise “clic_inscription_newsletter”, elle est dans la liste des “Tags Not Fired”.
La révélation...
Nous y voici les amis, commençons par scroller notre page d’accueil de la boutique PrestaShop, afin de voir le bouton d’inscription à la newsletter. Ensuite, je vais renseigner l’adresse email avec laquelle m’inscrire, et enfin appuyer sur le bouton “S’abonner”.
Je vous rappelle que l’on s’attend à voir ensuite notre balise clic_inscription_newsletter se déclencher dans le TAG Assistant.
Et la lumière fut..
Nous avons vu plusieurs événements se produire :
- Lorsque nous avons scrollé notre page, nous avons vu apparaître 2 événements : un nommé Scroll Depth et un autre nommé Scrolls.
- Lorsque nous avons saisi l’adresse dans le champ de formulaire, nous avons eu la encore 2 événements : un premier nommé Click, et un second nommé form_start.
- Enfin, lorsque nous avons soumis le formulaire en cliquant sur notre bouton “S’abonner”, nous avons vu notre balise clic_inscription_newsletter s’exécuter et donc passer dans la liste des balises “Tags Fired”, et enfin l’événement Click qui s’est ajouté à la liste des événements.
Bravo ! Nouvelle balise ajoutée avec succès. Vous pourrez maintenant suivre le nombre de clics sur le bouton d’inscription à la newsletter et donc, autrement dit, le nombre de vos abonnés.
Détails d'événement
Vous pouvez, bien entendu, consulter le détail d’un événement en cliquant sur celui-ci dans la liste. Si on clique sur le dernier (qui est le click sur le bouton), on peut voir que c’est bien lui qui a déclenché l’exécution de notre balise ‘clic_inscription_newsletter’.
A chacun sa méthode et son code...
J’avoue qu’il existe certainement une autre manière de faire ou de cibler notre bouton “S’abonner”, sans avoir à ajouter un id à l’input du formulaire, mais c’est ma façon de faire et de le faire simplement, sans avoir à se prendre la tête pendant des heures. Ce qui compte, c’est le résultat et que cela fonctionne au final.
Publiez
Comme tout cela fonctionne, n’oubliez pas d’enregistrer les modifications, en publiant une nouvelle version de votre espace de travail.
Et sur Analytics, que s’est il passé ?
Et si pour finir, nous allions voir ce qui s’est passé dans Analytics ?
Nous pouvons voir que l’événement que nous avons nommé “inscription_newsletter” dans Google Tag Manager s’affiche bien dans la liste des événements Google Analytics.
Mission réussie !!
Pour conclure
Ce tutoriel touche à sa fin. Bien sûr, tout reste à faire en termes de mise en place de vos balises de suivis et de marketing. N’hésitez pas à suivre la documentation de Google sur Tag Manager et Analytics, pour en apprendre davantage.
Mais sachez que vous avez maintenant un outil de gestion de balises performant. Lorsque vous devrez implémenter le pixel Facebook, ou toute autres balises utiles à votre entreprise, ne pensez plus à connaître comment et où implémenter cela dans votre code. Vous devez penser : comment j’intègre ces balises/pixels, en les configurant dans Google Tag Manager, pour que ce soit lui qui le fasse pour vous.
Rappelez-vous qu’un script + un script + un script…. (Ceux qui ont lu, ce tutoriel en entier, comprendront ! :) )
Stratégie marketing
Si toutefois, vous êtes un professionnel et que vous souhaitez mettre en place des analyses solides, avec des rapports permettant de mettre en place une stratégie marketing, et que vous souhaitez me déléguer cette tâche, parlons en.
Récapitulatif
Mais nous aurons tout de même vu, ensemble, pas mal de choses :
- Nous avons vu comment créer un compte Google Tag Manager.
- Vu comment configurer un conteneur pour son nom de domaine (en local, mais cela reste la même opération sur un serveur d’hébergement distant).
- Vu comment intégrer les balises de Google Tag Manager dans le code de votre boutique PrestaShop.
- Comme GTM sert à gérer des balises, nous avons vu l’utilité et la nécessité de lui donner sa première balise à gérer : la renommée balise Google Analytics !! He oui, il est comme ça, il a besoin de données…
- Nous avons donc ensuite créé un compte G. Analytics pour notre boutique afin d’obtenir un ID de suivi.
- À la suite de quoi, pour éviter de devoir implémenter de nouveaux scripts sur notre site web, que nous souhaitons le plus performant possible, nous avons utilisé notre nouvel outil, le manager de tag !
- Nous avons créé une balise Google dans GTM que nous avons couplé à Analytics avec l’ID de suivi. Notez bien que cette balise Google est la nouvelle version de ce qui était avant la balise Google Analytics: Configuration GA4. Elle gère toute la partie configuration.
- Après la balise de configuration, nous avons mis en place une balise d’événement GA4, avec la configuration d’une balise Analytics pour le suivi du nombre de clics sur le bouton d’inscription à la newsletter de notre site.
Testez et pratiquez
Tout d’abord, il ne faut pas hésiter à tester entre chaque implémentation de balises, ou de déclencheurs, de variables. Deuxièmement, vous pouvez tester avant de publier en utilisant la prévisualisation de votre espace de travail. Et parfois, si une balise ne s’exécute pas, il faut alors reprendre sa configuration.
Voilà, pour ce tutoriel assez long, je l’avoue, mais difficile de suivre toutes ces étapes en faisant court, tout en essayant d’être complet.
À venir et à suivre
Le sujet est loin d’être clos, car je compte bien publier d’autres articles concernant la configuration de ces balises. Je pense qu’il y a de quoi pouvoir utiliser les données collectées par ces outils, et de pouvoir mettre en place une belle stratégie marketing. Il y a de quoi pousser très loin le bouchon, je pense… (sincères salutations aux data-analystes).
Affaire à suivre donc…
À vos Encouragements..
Avant de vous quitter, si cet article de blog vous a intéressé, vous a aider, ou ne vous a rien appris du tout, vous pouvez, si vous le souhaitez, m’aider à faire grandir mes statistiques et mes analyses !😉 , en me laissant un commentaire sur cet article, ou en vous inscrivant sur le site, pour être averti en avant-première des sorties de nouveaux articles, en vous abonnant à ma page Facebook (Je pourrai ainsi vérifier le fonctionnement de mon pixel Facebook, configuré depuis Google Tag Manager, bien entendu ! ) , et si vous aimez mieux le format vidéo, abonnez vous à la chaîne YouTube Activateur Web.
J’espère que vous prendrez quelques secondes ou quelques minutes, si j’ai pu de mon côté vous faire gagner un peu de temps.
À très vite sur le blog Activateur Web, je vous souhaite à tous du courage pour vos projets à venir, en attendant, prenez soin de vous et surtout : Restez curieux !
