.
A l'unanimité, Webflow est un outil fantastique pour les férus de marketing digital. De ce fait un grand nombre de ressources est disponible sur le web pour à peu près tout. A commencer par l'University de l'équipe Webflow. Elle regroupe un ensemble de tutos vidéos pour apprendre sur différentes fonctionnalités : introduction à HTML / CSS, intéractions, SEO etc..
Néanmoins, concernant la question de la data et du tracking, c'est pauvre. Les tutos sont peu nombreux, voire inexistants en français. J'ai donc décidé d'écrire ce guide qui permettra à chacun de récolter de la donnée de qualité sur Google Analytics.
Sans rappeler en détails ce qu'est Google Tag Manager (GTM) ou Google Analytics (GA), je vais essayer de rendre ce tutoriel accessible à tous en se basant sur mon propre site et tracking.
Google Tag Manager est un TMS (Tag Management System) c'est à dire qu'il permet de centraliser la pose de tags sur son site web. Avant l'apparition de tels outils, on posait les tags en dur sur le site. Ainsi, un site pouvait facilement avoir des dizaines de tags posés en dur. Il y a trois inconvénients majeurs :
Désormais, on pose le tag de Google Tag Manager sur son site et la suite se déroule au sein de GTM, qui va centraliser tous les tags et donc également les variables et les déclencheurs.
Google Analytics, quant à lui, permet de stocker la donnée récoltée via GTM. On pourra donc y mesurer la performance de votre site web avec un grand nombre de métriques disponibles. Vous pourrez donc voir le nombre de sessions, analyser la provenance de trafic ou encore mesurer les conversions (comme le chiffre d'affaires ou les leads). L'analyse des audiences est évidemment au cœur de l'outil !
Ces deux outils proposés par Google sont gratuits même si des versions payantes (versions 360 plus poussées) existent.
Maintenant, je vais rentrer dans le vif du sujet en commençant par la création du compte GTM et son installation sur son site Webflow.
Rendez-vous sur le site de GTM, connectez-vous avec votre compte Google et créez un compte.
Donnez un nom à ce compte et créez votre 1er conteneur en mettant votre site et la plateforme ciblée (Web, iOs, Android ou AMP). Ici je vais prendre l'exemple en créant un conteneur pour mon site benoiteveillard.com
Une fois que vous avez cliqué sur Créer et accepté les conditions de Google, une pop-up avec deux codes vont s'ouvrir.
Copiez le premier code comme celui-ci dessous qui est identique hormis l'ID qui vous est propre.
<p> CODE: </p>https://gist.github.com/benoiteveillard/16fbadc8f526440fc1ad7ffcaaed3206.js<p></p>
Ensuite, il faut aller dans la partie Settings de Webflow puis dans Custom Code et copier le code dans la section Head.
Votre première partie de conteneur est maintenant installée.
Maintenant il faut mettre la deuxième partie sur chaque page de votre site Webflow. Je vais donc insérer un élément HTML Embed que l'on va transformer en Symbol. Au sein de cet élément vous allez coller le bout de code fourni dans GTM.
<p> CODE: </p>https://gist.github.com/benoiteveillard/4d4a915718b444315dea63e282788910.js<p></p>
2 avantages à utiliser un Symbol :
Mettez ce Symbol tout en haut de votre navigation de chaque page, juste sous Body.
Pour vérifier que votre installation Google Tag Manager est bien fonctionnelle, installez l'extension Tag Assistant. Ensuite cliquez sur Enable et rafraîchissez la page.
Vous devriez voir Google Tag Manager en bleu ou vert. Si c'est en rouge, reprenez les étapes précédentes une à une.
Maintenant que vous avez créé votre compte GTM et que c'est fonctionnel sur votre site, je vais créer le compte Google Analytics.
Pour cela rendez-vous sur analytics.google.com et connectez-vous. Si c'est la 1ère fois que vous accédez à GA, vous devez cliquer sur "Commencer les mesures" puis créer un compte en lui donnant un nom.
Ensuite mettez Web puisqu'on a paramétré GTM pour le Web. Entez un nom pour le site web ainsi que l'URL. Remplissez également votre secteur et votre fuseau horaire. Votre compte GA est désormais créé 😃
Un compte GA se compose de 3 sections :
Dans la propriété créée, on va faire deux choses en se rendant dans l'administration via cet icône.
.png)
Dans les prochaines sections on va voir comment lier ses Google Analytics & Google Tag Manager. 2 minutes suffisent.
Point petit vocabulaire :
Pour commencer on va activer les différentes variables intégrées dans GTM en se rendant dans Variables puis Configurer
.png)
A partir d'ici, activez toutes les variables des familles suivantes : Pages, Clics et Formulaires. Pour ce tuto vous n'aurez pas besoin des autres variables intégrées.
Nous allons également configurer une variable définie par l'utilisateur en cliquant sur Nouvelle sous les variables intégrées. Vous allez créer une variable de type Paramètres Google Analytics en rentrant l'ID de suivi que vous avez gardé au chaud dans le point 1.3. Vous devriez avoir une variable ressemblant à celle-ci :
Focus rapide sur les variables de couches de données.
Les variables de couches de données permettent d'enrichir la donnée collectée de manière dynamique.
Imaginons que je souhaite récupérer, dans Google Analytics, le montant du budget qu'est prêt à investir un prospect dans son acquisition (étape 4 de mon formulaire). Ce montant varie en fonction de chaque utilisateur. Il faut donc insérer une variable dynamique.
Tout d'abord je me rends sur mon site. Je remplis ensuite le formulaire comme si j'étais un prospect.
Ensuite je vais me rendre dans la console en faisant clic droit → inspecter. Après avoir cliqué sur le panneau interdit pour nettoyer les éléments je tape dataLayer. Je vois ceci apparaître :
J'ouvre l’élément 4 car il contient gtm.formSubmit et correspond à l'envoi de mon formulaire.
J'ouvre ensuite gtm.element : form#from-prospects.form. Si vous avez bien donné un ID à chaque champ de votre formulaire vous devriez les voir dans la capture ci-dessous comme c'est le cas pour moi :
Je repère donc le champ concernant le budget est bien présent avec le numéro 8 devant. J'ouvre donc cet élément. Je cherche la variable "value" donc il faut scroller avant de l'atteindre. En face, je vois bien 1000 qui est la valeur que j'avais entré lors de mon envoi de formulaire.
J'ai donc tous les éléments pour créer cette variable dans GTM. Je me rends donc dans Variables puis je créé une nouvelle variable définie par l'utilisateur. En type je choisis "Variable de couche de données".
Ici je vais mettre à la suite des uns des autres les différents éléments ouverts dans la console sur mon site. Chacun séparé par un point.
Je commence donc par gtm.element puis par le chiffre 8 qui correspondait à l'ID budget et enfin par value car je veux récupérer la valeur de l'élément value.
Ma variable ressemble donc à cela.
Donnez lui un titre personnalisé car on l'utilisera ensuite dans la balise pour envoyer l'information dans GA.
Si vous souhaitez aller plus loin dans la compréhension des variables de couches de données et du dataLayer, je vous conseille de lire ce guide.
Je vais maintenant m'intéresser aux déclencheurs. Automatiquement GTM créé le déclencheur Toutes les Pages qui n'apparaît pas ici. On va en créer deux autres. Le premier sera un envoi de formulaire. Le deuxième sera un clic sur un bouton.
Je créé donc un déclencheur correspondant à un envoi de formulaire.
Dans l'onglet Déclencheurs, créez un nouveau déclencheur en sélectionnant le type Envoi de formulaire. On va maintenant sélectionner une variable pour dire que l'on veut un formulaire précis (et non pas tous les formulaires). On va donc jouer avec les variables. En l’occurrence, vous allez prendre celle nommée Form ID avec l'opérateur est égal à.
On va maintenant aller sur Webflow pour récupérer l'ID du formulaire que l'on souhaite tracker. Dans mon cas je souhaite suivre le nombre de formulaires envoyés depuis cette page.
En retournant dans ma configuration de variables dans GTM je vais donc mettre form-prospects en tant que valeur de mon Form ID. J'ai donc un déclencheur ressemblant à cela :
Passons maintenant au deuxième déclencheur, le clic un bouton. Pour avoir une vue complète de votre tunnel d'acquisition, il est important de tracker les clics sur les différents Call To Action présents sur votre site. Par exemple, dans mon exemple je veux savoir qui clique sur le bouton "Booster mon acquisition" de ma 1ère section.
On va procéder de la même façon en créant un nouveau déclencheur et cette fois-ci en choisissant un type de déclencheur "Liens uniquement" de la famille Clic.
On choisit "Certains clics" avec la variable Clicks Classes est égal(e) à.
En parallèle, on se rend sur Webflow pour chercher la class du bouton que je souhaite tracker. La class se nomme ici hero-button.
Je vais donc rentrer hero-button comme la valeur de Click Classes pour mon déclencheur GTM. Votre déclencheur est donc le suivant :
Vous avez désormais compris comment fonctionnaient les variables et les déclencheurs, vous pouvez en créer à souhait.
Une fois que le déclencheur est associé à une variable et est paramétré, il ne reste qu'à créer une balise pour envoyer l'information collectée dans vos outils de webanalyse (Google Analytics, Amplitude etc..) ou média par exemple (Facebook, Google, Criteo etc...).
On va donc ici créer 3 balises Google Analytics mais le procédé est peu ou prou le même pour les autres types de balise:
Pour cela, allez dans Balises → Nouveau → Google Analytics : Universal Analytics avec un type de suivi Page vue.
En paramètres Google Analytics vous allez choisir la 1ère variable que vous aviez créée à savoir {{UA -ID}} qui correspond au code de suivi GA. Choisissez All Pages en tant que Déclencheur. Nommez cette balise et c'est bon ! Trop facile non ?
On va à nouveau créer une balise GA mais avec un type de suivi "Evénement" car le clic sur un bouton correspond à une interaction d'un utilisateur avec le contenu du site.
Choisissez une catégorie, une action et un libellé puis associez à nouveau l'UA-ID. Le déclencheur correspond à l'exemple créé tout à l'heure à savoir celui nommé "Clic Bouton Hero Section".
Et la voici ci-dessous. En 1 minute top chrono c'est créé.
Créez à nouveau une balise GA de type Evénement. Choisissez un nom de catégorie, une action & un libellé. On va cette fois-ci remplir le paramètre "Valeur" en s'aidant de la variable de couche de données créée plus haut.
On va donc insérer deux accolades et les variables devraient apparaître. Sélectionnez celle correspondant au budget et l'accolade devrait se fermer d'elle-même.
Ensuite comme précédemment mettez l'UA-ID en tant que Paramètres Google Analytics.
Le déclencheur est bien entendu celui correspondant à l'envoi de formulaire.
Et voici à quoi ressemble le tag d'envoi de formulaire avec paramètres dynamiques 😃
Bravo ! Vous avez créé des variables, déclencheurs et balises. Votre donnée est désormais collectée sur Google Analytics. Il ne reste plus qu'à organiser un peu cette donnée pour faciliter sa lecture.
Pour faciliter la lecture et l’analyse de vos données, la création d’objectifs est essentiel. Cela vous permettra par exemple de suivre vos parcours de conversions ou de faire des études d’attribution. Ici en fonction des balises créées on va créer un seul objectif pour la balise d'envoi de formulaire.
Dans Google Analytics, allez dans l'administration et dans la colonne vue (en veillant à sélectionner la vue webanalyse créée), cliquez sur Objectifs puis Nouvel Objectif.
Choisissez un objectif personnalisé, donnez lui un nom et choisissez Evénement en type. Le même que celui qu'on avait choisi sur GTM.
Ensuite dans la section "Détails de l'objectif", vous devez remplir exactement pareil que ce qui est mis dans la balise GTM correspondante. Ainsi, ici il faudra mettre comme sur la capture ci-dessous (qui reprend les éléments de la balise) :
.png)
La valeur étant un paramètre Dynamique, il faut le laisser vide dans Google Analytics.
Vous pouvez créer des objectifs pour un tas de choses : une page vue, une durée, un événement etc..
Votre lecture sera facilitée dans les différents rapports. Prenons l'exemple du rapport Acquisition qui vous permettra de connaître le nombre de sessions mais surtout le nombre conversions et le taux de conversions pour un objectif donné.
Avoir de la donnée de qualité est primordial. Il faut maintenant trier toute la donnée récoltée dans GA. En effet, vous ne souhaitez pas que votre trafic interne soit comptabilisé dans les sessions ou événements. On va donc exclure ce trafic.
Pour cela, toujours dans Administration → Vues, vous vous rendez dans Filtres pour en ajouter un.
Donnez lui un nom comme "Exclusion IP Benoît" et choisir un filtre prédéfini, de type Exclure avec comme source "Trafic provenant des adresses IP" et avec l'expression égal à.
Une fois que vous connaissez votre IP grâce à ce site par exemple, vous n'avez plus qu'à copier-coller.
Enregistrez votre filtre et vous pouvez désormais vous balader sur votre site, faire des tests ou encore remplir des formulaires sans fausser la data. Ajoutez les adresses IP de vos collaborateurs afin d'être le plus exhaustif possible.
Dans le cas de webflow il faut également exclure le paramètres pouvant provenir de leurs sous-domaines. Ainsi, on va procéder de la sorte : création d'un nouveau filtre prédéfini dans lequel on va exclure le trafic à partir du domaine de FAI contenant domain.webflow.io.
La force de GA réside aussi dans ses intégrations natives avec Google Ads et la Search Console. On va donc lier ces 2 outils à Google Analytics.
Premièrement on va faire la liaison pour Google Ads qui va nous permettre aux données de campagnes de remonter automatiquement dans GA (et d’avoir certaines donnés Google Analytics dans Google Ads). Le marquage automatique est fortement conseillé dans ce cas précis.
Il faut se rendre dans l'Administration et dans la colonne Propriété → Association à Google Ads. Cliquez sur Nouveau Groupe d'Associations et choisissez le ou les comptes Adwords que vous souhaitez associer.
Vous pouvez ensuite choisir les vues pour lesquelles vous souhaitez voir les données Google Ads remonter. Je vous conseille de mettre uniquement Webanalyse mais il n'y aura aucune incidence si vous choisissez également la vue par défaut.
La mention "Cette association active le marquage automatique...." signifie que vous n'avez pas besoin de tracker vos campagnes SEA Google avec des utm spécifiques. En effet, cela signifie de Google va suivre tous les clics et les associer aux mots clés, groupes d'annonces et campagnes. Automatiquement et sans avoir à mettre un place un tracking particulier.
Deuxièmement, pour la Google Search Console cela nous permettra de disposer des données SEO au sein de Google Analytics. Les requêtes et les pages de destination apparaîtront par exemple.
Pour effectuer la liaison, allez dans Associations de produits -> Tous les produits. Ici vous verrez différents produits Google dont la Search Console. Il faut donc cliquer sur Associer puis Ajouter. Vous allez donc arriver sur la page de la Search Console qui vous permettra de choisir le site associé.
Tadaaaa, les données sont partagées entre les outils Search Console et GA et nous voici à la fin de ce tutoriel !
Grâce à ce tutoriel, vous devriez avoir une bonne vue d'ensemble de ce qu'il est possible de faire avec Google Tag Manager. Bien sûr, vous pouvez aller beaucoup plus loin car une seulement une partie du potentiel du couple GA / GTM a été abordé.
Néanmoins, pour tracker votre landing page ou votre site Webflow, cela devrait être largement suffisant !
Google Tag Manager est un TMS (Tag Management System) c'est à dire qu'il permet de centraliser la pose de tags sur son site web. Il est proposé par Google et est gratuit. D'autres outils comme TagCommander ou Segment ont la même utilité.
Utiliser GTM présente deux bénéfices principaux. D'abord, les équipes marketing / data sont autonomes pour mettre en place le tracking. De plus, il permet une meilleure lisibilité et gestion grâce à une interface optimisée.
Premièrement, Google Tag Manager, dans sa forme gratuite, propose beaucoup plus de fonctionnalités que Segment. Deuxièmement, GTM faisant partie de l'écosystème Google, l'intégration avec Google Analytics ou Google Ads est facilitée.
Google Analytics est un puissant outil de webanalyse permettant d'analyser le trafic d'un site web. Il permet notamment d'analyser l'audience qui visite son site.
Lorsque vous possédez un site web, un outil comme Google Analytics permet de connaître son audience, ses sources de trafic ou encore les chemins de conversions. Il vous permettra donc de proposer une meilleure expérience aux visiteurs.
Le plus facile est d'utiliser l'extension Tag Assistant. Aussi, elle permet de savoir en 2 clics si le tag de page vue Google Analytics est installé.
Webflow est un Content Management System (CMS) c'est-à-dire qu'il permet la création, la conception et mise à jour de contenu de mise à jour dynamique. De plus, il offre les fonctionnalités de design les plus avancées du marché sans délaisser d'autres aspects importants comme le SEO.
Wordpress est plus facile de prise en main et est idéal pour des non-experts souhaitant créer un blog et l'alimenter facilement par exemple. Webflow a initialement été conçu pour les designers et offre des fonctionnalités avancées. C'est un outil récent qui offre un nombre infini de posibilités.