Pour ajouter les cookies à votre site Webflow vous avez besoin de Google tag manager ou d’une plateforme comme Axeptio. La configuration sur Google Tag manager peut paraître compliquée, mais elle reste relativement simple vous allez voir !

Pour cet article, nous allons simplement utiliser Google Analytics comme outil de tracking, et avec l’aide de Google tag manager et des cookies Axeptio, nous allons laisser les utilisateurs choisir si oui ou non, ils acceptent d’être traqués par Google Analytics.

‍

Pourquoi activer les cookies sur mon site internet ?

En Europe, il y a la protection des données (RGPD), votre site web doit donc permettre aux utilisateurs européens de contrôler l'activation des cookies et des traceurs qui collectent leurs données personnelles.

Si vous souhaitez pousser le sujet de la protection des données, taper RGPD dans votre navigateur, ce ne sont pas les ressources qui manquent.

Bref, maintenant que vous savez, on passe aux choses sérieuses !

‍

‍

Configurer GTM et Axeptio avec Webflow

‍

Le rôle de Google tag manager

Il fait office de passerelle entre votre site web et les outils marketing que vous utiliser sur votre site.

‍

‍

Google tag manager avec Webflow

La première étape est de vous créer un compte sur Google tag manager et de connecter votre site web. Une fois les conditions d’utilisation acceptées, un pop-up avec les balises de code à copier apparaît.

Il y a 2 codes : le premier code est à coller dans les paramètres de votre projet Webflow dans la section custom code, assurer vous de coller ce code tout en haut.

‍

Exemple en image :

‍

Pour ce qui est du 2ᵉ code, il est important de le placer après l’ouverture de la balise body, il est donc nécessaire d’aller dans le designer de Webflow.

Vous ajoutez alors un Embed juste en dessous du body.

‍

Petite astuce pour vous faciliter le travail en amont, créer un symbole pour cet Embed.

Vous copier le code Tag manager dans cet Embed et vous dupliquer votre symbole sur toutes les pages de votre site web, et il ne vous reste plus qu’à publier votre site web pour passer aux étapes suivantes.

‍

‍

Axeptio

• Créer un compte Axeptio, si ce n’est pas déjà fait.
• Créer un nouveau projet.

‍

Vous allez ensuite vous retrouver sur cette interface (voir image ci-dessous), vous avez la possibilité ici de venir personnaliser votre pop-up de cookie, et de venir indiquer les outils marketing que l’utilisateur va accepter ou non.

‍

En mode gratuit, la personnalisation de votre pop-up est minime. Pour personnaliser la couleur ou bien l’image, il vous faudra souscrire à un abonnement Axeptio. Mais vous avez tout de même la possibilité de supprimer la tache jaune avec la version gratuite.

Pour continuer, cliquez sur “on vous présente nos cookies !” et ajoutez les outils marketing utilisés sur votre site. Dans notre cas, nous ajoutons Google Analytics. Vous allez constater qu’il y a la possibilité d’ajouter beaucoup, beaucoup de cookies (outils marketing), le choix est monstre, donc pas de panique si vous pensez utiliser un outil peu ordinaire, Axeptio le connait déjà surement.

‍

Axeptio avec Google Tag Manager

Pour la suite nous allons scroller sur le site d’Axeptio pour cliquer sur “intégration des cookies sur votre site”.

‍

Vous récupérez ensuite le code qui vous est donné, pour le copier sur Google Tag manager.

‍

1. Copier le code

‍

2. Vous retournez sur tag manager, et vous créez une nouvelle balise HTML personnalisée, en cliquant sur la fenêtre “configuration de la balise”.

‍

3. Vous collez le code d’Axeptio et pour ce qui est du déclenchement, c’est dès que la page est vue, (“All pages”).

‍

‍

Configuration de Google Analytic

Après avoir intégré Tag manager sur votre site web et connecté Axeptio, il vous faut créer une balise dans GTM pour venir ajouter Google Analytic.

Important : Nommer vos balises avant de commencer chaque configuration, pour cette balise ci, préciser “GA4 - ALL PAGE” par exemple.

‍

‍

• Le rôle de la première fenêtre (configuration de la balise) est de sélectionner le services auxquels nous voulons envoyer les informations, dans notre cas Google Analytics.

‍

• Le rôle de la deuxième fenêtre (déclenchement) est de nous permettre de décider quand est-ce-que nous allons envoyer les informations.

‍

Rendez-vous dans la 1ère fenêtre pour sélectionner “Google Analytics - configuration GA4”.

Et pour terminer la configuration il nous faut l’ID de mesure, pour ça rendez-vous sur votre compte Google Analytics dans administration. (🤓vous trouverez “administration” tout en bas à gauche).

Nous allons ensuite se rendre dans le Flux de données pour choisir celui qui nous intéresse, c’est à dire notre (votre) site web, et copier l’ID de mesure.

‍

‍

‍

Ajouter le layer Cookies à Google Analytics.

En vous rendant sur le site d’Axeptio, sur la même page où nous avons copié le code à intégrer à Google Tag Manager, plus bas se trouve un code pour personnaliser le déclenchement sur Google tag manager.

C’est ce code qui vous permet d’ajouter les cookies, et de permettre aux utilisateurs de votre site web d’accepter ou non la récupération de leurs données.

‍

‍

Le but ici va être de modifier le déclencheur de Google Analytics, vous allez donc récupérer ce code et retourner sur Google Tag Manager pour modifier le déclencheur.

Vous sélectionnez “événement personnalisé” pour vous permettre d’utiliser le code.

‍

1. Choisissez un déclencheur - événement personnalisé

‍

‍

2. Copiez le code et enregistrez tout simplement.

‍

Votre site internet est maintenant RGPD friendly 💪 il ne vous reste plus qu’à envoyer les informations à Google Tag Manager en précisant la version des modifications effectuées et le tour est joué !

‍

‍

Si vous avez besoin d’aide pour ajouter les cookies sur votre site Webflow et à les configurer, fait appel à un expert Viby. 😄