Optimisez vos CTA avec GA4 et Google Tag Manager

L’un des principaux objectifs de votre site web est de convertir vos visiteurs en clients. Pour y parvenir, plusieurs étapes sont nécessaires. La première est bien sûr d’apporter du trafic de qualité sur votre site, puis de proposer du contenu pertinent en rapport avec les attentes de ces visiteurs, mais à ce stade, rien n’est joué ! Il faut ensuite donner envie à vos visiteurs de vous contacter et ainsi les faire passer du statut de visiteur à prospect. C’est là que les Call-To-Actions (CTA) entrent en jeu.

CTA de quoi parle-t-on ?

Un CTA est un lien sous forme d’image, de bouton ou de texte sur votre site. Vous en utilisez déjà probablement pour inciter vos visiteurs à effectuer une action spécifique : inscrivez-vous, prenez rendez-vous, téléchargez le guide, etc… Bien sûr, ces actions vous permettent au passage de récupérer des informations qui vous permettront de contacter ou relancer vos prospects. 

Nous vous conseillons d’indiquer directement l’intérêt du visiteur à vous confier leurs données personnelles. Nous parlons alors de Call-To-Value (CTV) : Profitez des avantages membres (plutôt que inscrivez-vous), Obtenez des conseils (plutôt que prenez rendez-vous), Découvrez notre méthode éprouvée (plutôt que téléchargez le guide).  Les taux de clics sont généralement bien plus élevés.
Dans la suite de cette article pour faciliter la lecture, nous parlerons de CTA pour englober les deux concepts CTA et CTV. 

Multipliez votre chiffre d’affaires par 2, 4, 6 ou plus en augmentant les taux de clics et de conversions de vos CTA.

L’optimisation des clics et des conversions est un principe très connu des utilisateurs de publicité en ligne, Google Adwords, Facebook Ads, etc… En effet,  en améliorant les annonces, le taux de clics et le taux de conversions augmentent, ce qui in fine diminue les coûts d’acquisition. Et bien, la bonne nouvelle est que vous pouvez exploiter ce même axe de progression en améliorant vos CTA.

Sommaire

Pour mettre en place l’analyse de vos CTA, vous allez devoir jongler avec plusieurs compétences, en particulier avec les outils Google Tag Manager et Google Analytics 4, mais cela passera aussi par un peu de code HTML, voici un aperçu des concepts que vous allez apprendre avec cet article.  

    1. Préparez votre code HTML
    2. Configurez votre compte Google Tag Manager
      1. Trackez les vus de vos CTA
        1. Créez votre déclencheur
        2. Créez votre variable
        3. Créez la balise évènement
      2. Trackez les clics de vos CTA 
        1. Créez votre déclencheur
        2. Créez la balise évènement
    3. Visualisez vos données Google Analytics 4
      1. Créez une dimension personnalisée
      2. Visualisez les données
      3. Allez plus loin avec la data visualisation

 

1] Préparez votre code HTML

Pour que Google Tag Manager (GTM) puisse être informé lorsqu’un CTA a été vu ou cliqué (grâce aux déclencheurs étudiés plus loin), il est nécessaire d’ajouter une class aux boutons, images ou autres éléments cliquables (vos CTA).  C’est aussi dans ces balises que vous allez ajouter les informations d’identifications du CTA. Deux éléments donc : 

  • un attribut class : commun à tous les CTA que vous souhaitez suivre
  • les attributs contenant les informations à faire remonter

Par exemple, vous pourriez utiliser une balise similaire à celle-ci pour un bouton situé dans le header de votre site :
« <div cta_name=’Bouton header’ class=’cta’></div> »

Vous découvrirez plus en détail, un peu plus loin,  à quoi correspondent les différents éléments de ce code. Si vous n’êtes pas à l’aise avec le code HTML, n’hésitez pas à nous contacter pour obtenir de l’aide ou l’adresse de prestataires. 

2] Configurez votre compte Google Tag Manager

Trackez les vus de CTA

Pour suivre le nombre de fois qu’un CTA a été vu, il convient de suivre différentes étapes que nous allons aborder dès à présent.

Ce suivi diffère du nombre de vues de page (plus traditionnel). L’intérêt de suivre les vues d’un CTA réside dans le fait qu’il n’est pas forcément vu à chaque chargement de page. Exemple : s’il est situé en bas de page ou lien dans un article, etc….  C’est aussi avec ce fonctionnement que vous pourrez faire de l’A/B testing de CTA sur vos pages et suivre le résultats de manière macro. 

Créez votre déclencheur

Une fois la partie HTML réglée, il faudra s’attaquer au déclencheur, qui s’activera lors de la visualisation de vos CTA.
Pour cela, allez sur le menu à gauche et sélectionnez « Déclencheurs », ensuite cliquez sur sur « Nouveau » pour créer un nouveau déclencheur :

Vous devrez cliquer sur « Configuration du déclencheur » pour choisir le type de déclencheur : « Visibilité de l’élément »

Enfin vous devrez paramétrer votre déclencheur :

Explications des différents champs et options à remplir : 

Mode de sélection : choisissez « Sélecteur CSS » cela permettra le déclenchement lorsqu’une balise HTML spécifique est visible.

Sélecteur d’éléments : indiquez ici le nom de la classe HTML de vos CTA. Il faut écrire le nom de sa classe précédé d’un point, dans notre exemple ce sera donc : « .cta »

Concernant les paramètres de visibilité de l’élément, voici les configurations suggérées :

Quand exécuter ce déclencheur : choisissez « Une fois par élément ». Cela déclenchera l’événement une seule fois par CTA sur la page.

Pourcentage visible minimal : réglez-le sur « 100% ». Ainsi, l’événement sera déclenché uniquement lorsque le CTA est entièrement visible à l’écran.

Définir la durée minimale à l’écran (cocher la case préalablement) : fixez cette valeur à « 1000 millisecondes ». Cela signifie que le CTA doit rester visible à l’écran pendant au moins 1 seconde pour déclencher l’événement.

N’hésitez pas à ajuster ces paramètres en fonction de vos besoins spécifiques et des caractéristiques de votre site.

Créez une variable

Savoir qu’un CTA a été vu, c’est bien, avoir des informations sur ce CTA, c’est mieux. C’est grâce aux variables que nous allons y parvenir. Dans notre cas, c’est la valeur de « cta_name »  que nous souhaitons récupérer. Pour ce faire, créez une nouvelle variable dans Google Tag Manager en allant dans l’onglet « Variables » puis en cliquant sur  « Nouvelle » (dans la partie des variables définies par l’utilisateur) :

Choisissez le type « JavaScript personnalisé » :

Il vous suffit ensuite de copier-coller la fonction ci-dessous :

function() {  
var ctaElement = {{Click Element}};  
return ctaElement ? ctaElement.getAttribute('cta_name') : undefined;
}

Ce code a été trouvé grâce à ChatGPT 🙂  Avec les bons prompts, on en fait des belles choses !

 Explication de la fonction :

Cette fonction va récupérer automatiquement la valeur de l’attribut présent dans votre balise HTML.

Si vous avez utilisé un nom d’attribut différent de « cta_name » pour identifier chaque CTA, vous devrez modifier la fonction en remplaçant « cta_name » par votre propre attribut dans la méthode « getAttribute » du code JavaScript.

Une fois que vous avez nommé (dans notre cas cta_name) et enregistré la variable, elle est prête à être utilisée. C’est ce que nous allons voir dans l’étape d’après.

Créez la balise (événement)

Maintenant que vous avez un déclencheur fonctionnel et une variable récupérant le nom du CTA, il nous reste plus qu’à informer Google Analytics 4 à chaque fois qu’un CTA est vu. Pour cela créez une nouvelle balise sur Google Tag Manager, comme tous les autres éléments allez sur l’onglet dédié « Balise » et cliquez sur « Nouvelle » : 

Choisissez le type de balise : « Google Analytics : Evenement GA4 »:

Prérequis : vous devez déjà avoir votre balise Google Analytics 4 pour le suivi global de votre site. 

Explications des différents champs et options à remplir :  

Choisissez le nom de votre balise : CTA view (ce nom n’a pas d’importance)

Balise de configuration : vous devez choisir l’id de votre compte Google Analytics 4

Nom de l’évènement : Ce nom sera utilisé dans GA4 pour identifier cet événement (nous avons choisi « cta_view » en exemple).

Nom du paramètre : C’est dans cette partie que nous allons ajouter les paramètres que nous voulons envoyer avec nos évènements. Dans notre exmple, nous allons donc créer le paramètre « cta_name » et ajouter la variable créer dans la partie précédente. Elle devrait s’afficher avec des doubles accolades {{ }}. 

Pour sélectionner une variable, cliquez sur le logo placé à droite de la zone texte (flèche rouge)

Enfin, associez cette balise avec le déclencheur que vous avez créé précédemment. 

Le nouvel événement créé sera pris en compte lorsque vous enverrez vos modifications GTM (cliquez sur le bouton « Envoyer » en haut à droite de l’écran).

Trackez les clics

Maintenant que le nombre de vues de vos CTA remontent dans Google Analytics 4, il serait assez sympa de savoir s’ils sont cliqués. Vous donc allez créer un deuxième type d’évènement.
Nous allons suivre à peu de choses près  les mêmes étapes que précédemment, création de déclencheur et de balise. Il ne sera cependant pas pas nécessaire de modifier la balise HTML, ni de créer la variable. 

Créez le déclencheur

On reprend les mêmes ingrédients et on recommence 🙂 Retour donc dans la partie déclencheur et cliquez sur « Nouveau déclencheur », choisissez cette fois-ci « Clic – Tous les éléments »:

Explications des différents champs et options à remplir :  

Condition dans lesquelles le déclencheur est exécuté : sélectionnez « Certains clics » afin de filtrer les clics sur vos CTA. Il existe plusieurs façons de le faire, mais nous vous recommandons d’utiliser l’option « Click Classes » et de filtrer les éléments qui contient : « cta ».

Avec ce déclencheur, chaque fois qu’un clic est effectué sur un élément de classe HTML contenant « cta », l’événement sera déclenché. Le fonctionnement est similaire du premier déclencheur créé. 

Si vous rencontrez des difficultés pour récupérer le nom du CTA lors des clics, elles seront probablement liées à une structure HTML spécifique. N’hésitez pas à nous contacter, nous ferons de notre mieux pour vous aider

Créez la balise (événement)

Vous devez ensuite créer la balise évènement, c’est la même manipulation que précédemment avec juste le nom de la balise et de l’évènement à changer. 

Explications des différents champs et options à remplir :   

Nom de la balise : « CTA clic »
Nom de l’évènement :  Nous avons choisi « cta_clic », vous pouvez donc faire pareil.

Paramètre de l’évènement : ajoutez le même nom que pour le suivi des vues, donc « cta_name » et ajouter la variable.

Enfin, associez la balise au déclencheur que vous venez de créer pour les clics.

Une fois toutes ces étapes effectuées, n’oubliez pas de les publier. 

3] Visualisez les résultats sur Google Analytics 4

Créez votre dimension personnalisée

Les dimensions personnalisées dans Google Analytics 4 correspondent aux paramètres d’évènement envoyés avec les balises évènements du Google Tag manager. Elles nous permettent de retrouver les informations dans les différents rapports.

Puisque vous avez envoyé un paramètre d’évènement, « cta_name », vous allez devoir créer une dimension personnalisée qui correspondra à « cta_name ». 

Rendez-vous dans la rubrique « Admin » et cliquez sur « Créez une nouvelle dimension », vous devriez alors avoir le résultat suivant : 

 Suivez-nous sur les réseaux sociaux pour découvrir très prochainement notre article complet sur les dimensions personnalisées.

Visualisez les résultats

Maintenant que vous avez tout configuré, il reste la partie la plus sympa : vous allez pouvoir consulter quels CTA sont efficaces !

Testez votre installation

Pour vérifier si votre installation fonctionne correctement, nous vous recommandons de suivre les étapes suivantes :

Sur Google Analytics (GA4), accédez à la section « Temps réel ». En parallèle, ouvrez votre site web et cliquez sur l’un de vos CTA. Les événements de visualisation et de clics devraient apparaître en temps réel dans la section « Événements » de l’onglet « Temps réel » (après quelques secondes).

Vous devriez avoir ce genre de résultat : 

Et si vous cliquez sur les évènements, vous aurez les détails : 

Si vous n’avez pas le résultat attendu, il serait bien de relire l’article depuis le début et de vérifier toutes les manipulations. 

Visualisez vos résultats dans les rapports

Une fois l’installation fonctionnelle, après quelques heures, vous aurez les données accessibles dans votre compte Analytics, et vous devriez les voir apparaître dans vos rapports. Exemple avec le rapport « Engagement » >  « Évènements » : 

Utilisez l’outil Explorer

L’outil « Explorer » de Google Analytics 4 vous offre une façon plus aboutie pour analyser vos résultats. Voyez ce que l’on en a fait : 

Les limites

Vous vous apercevrez rapidement que vous avez beaucoup de data, mais qu’il est difficile de l’exploiter pleinement au sein de Google Analytics 4.
Le premier point de blocage réside dans le fait qu’il n’est pas possible d’obtenir le taux de conversion directement dans votre outil Analytics, or, le taux est déterminant pour juger rapidement de la performance. 
Le second souci réside dans l’outil dans sa globalité. Chez Data Driven Solution, nous considérons GA4 comme une formidable base de données qui stockent le comportement des utilisateurs du site, notamment grâce à Google Tag Manager, mais ce n’est pas un outil de data visualisation. Il faut se rendre à l’évidence. 
Le gros avantage est que Google offre une formidable API qui permet d’extraire toute la data en quelques clics seulement. 

Allez plus loin avec la data visualisation

Pour conclure, et parce qu’il serait dommage de finir cet article sur une note négative, nous vous mettons ci-dessous un tableau de bord fait avec l’outil de data visualisation Zoho Analytics (voir le tableau de bord grand format) :

Envie de vous former ?

Étudions vos besoins

Formations qui pourraient vous être utiles

Télécharger le PDF
Retour en haut