Vous avez monté votre site sur Webflow et vous demandez comment améliorer votre taux de conversion et votre engagement ? Vous vous demandez comment intégrer Google Optimize à Webflow via Google Tag Manager (GTM) ?
Google Optimize est un outil qui vous aidera à optimiser l'UI Design et l'UX de votre site. Il vous permet de mesurer l'impact des changements que vous mettez en place afin de déterminer ceux qui fonctionnent le mieux.
Dans ce tutoriel, nous allons intégrer Google Optimize dans Webflow via Google Tag Manager. Pourquoi n'utilisons pas l'intégration native de Webflow ? Eh bien, parce que d'un point de vue gestion des données, il est plus facile d'être en accord avec le RGPD en utilisant un système de gestion de balise.
Ce guide vous accompagne étape par étape : ce sera très facile de le suivre, même si vous n'avez jamais intégré d'outil dans Webflow auparavant.
Pré-requis à l'installation de Google Optimize à Webflow
Avant de commencer, il est nécessaire d'avoir créé un compte sur les outils suivants :
- Google Analytics ;
- Google Optimize ;
- Google Tag Manager ;
- Un site Webflow.
Vous devrez également :
- Configurer Google Tag Manager sur Webflow,
- Google Analytics avec Google Tag Manager,
Étape 01 - Copiez l'ID de votre conteneur dans Google Optimize
Lorsque vous entrez sur le tableau de bord de Google Optimize (après avoir créé votre compte et votre conteneur), vous aurez besoin d'enregistrer l'ID de votre container Google Optimize.
Suivez ces étapes pour trouver votre ID de conteneur
- Dans votre tableau de bord Google Optimize, vous verrez une boîte avec votre conteneur, cliquez dessus.
- Une fois à l'intérieur de votre conteneur, cliquez sur les paramètres. Vous trouverez le bouton Paramètres dans le coin supérieur droit.
- Une fois dans vos paramètres, vous serez en mesure de voir les détails de votre conteneur. Vous verrez le nom de votre conteneur et son ID. Cet ID est un code composé de chiffres et de lettres.
- Sélectionnez l'ID et copiez-le.
Étape 02 - Créer une nouvelle balise dans Google Tag Manager
Une fois dans votre compte Google Tag Manager, il va ensuite falloir configurer la balise qui déclenchera Google Optimize sur votre site Webflow :
Suivez les étapes suivantes pour créer une nouvelle balise
- Cliquez sur l'option Balises dans le menu.
- Une fois dans Balises, cliquer sur Nouveau.
- Cliquer sur Configuration des balises
- Dans le menu affiché, choisissez l'option Google Optimize.
- Vous pouvez maintenant modifier le nom de la balise dans la case que vous verrez en haut à gauche de la page. Vous pouvez l'appeler Google Optimize.
- Vous verrez une boîte pour coller votre ID Google Optimize. Collez-le.
- Ne sélectionnez aucun déclencheur.
- Enregistrez et quittez la balise.
Étape 03 - Sélectionnez le tag Google Optimize avant Google Analytics.
À partir de votre compte Google Tag Manager, vous devrez configurer les balises pour que la balise Google Optimize se déclenche avant Google Analytics.
Suivez ces étapes pour modifier la séquence de préférence des balises :
- Dans votre compte Google Tag Manager, cliquez sur Balises dans le menu de gauche.
- Cliquez sur votre balise Google Analytics, puis cliquez sur Paramètres avancés.
- Dans la rubrique Séquençage des balises, cliquez sur la case déclenchez Google Optimize AVANT le déclenchement d'Analytics [ou le nom que vous lui aurez donné].
- Cliquez sur le bouton Enregistrer.
Étape 04 - Publiez votre nouvelle version du Tag Manager pour activer les changements
Erreur Classique... passer 1 heure à chercher le problème puis réaliser que le Google Tag Manager n'a pas été mis à jour...!
Depuis GTM, cliquez sur le bouton "Envoyer "*, situé dans le coin supérieur droit de la page. (le bouton bleu)
Suivez les étapes suivantes pour publier votre conteneur :
- Sur la page affichée, vous verrez qu'après avoir cliqué sur le bouton de soumission, vous pourrez modifier le nom et la description de votre version.
- Cliquez sur le bouton de publication.
Corriger le clignotement de la page (Optimize Webflow)
Lors de la mise en œuvre de Google Optimize, il est probable que la page clignote (en fonction de la vitesse de votre connexion). Pour y remédier, vous pouvez retarder l'apparition de la page avec un petit bout de code. De cette façon, Google Optimize aura suffisamment de temps pour charger le conteneur.
Suivez ces étapes pour corriger le clignotement :
- Copiez le code suivant dans toutes les pages dans lesquelles vous avez inclus Optimize aussi haut que possible dans la balise <head>. Le code anti clignotement doit être installé touuuuuut en haut du <head> (en premier ou juste après le Datalayer si vous l'avez configuré).
<style>.async-hide { opacity: 0 !important} </style><script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer',4000,{'CONTAINER_ID':true});</script>
Il ne vous reste plus qu'à remplacer le container ID par l'ID de votre Google Tag Manager et le tour et joué !