Comment créer une carte de clic pour votre site Web à l'aide de Google Analytics Event Tracking et de Google Data Studio

Photo par thr3 yeux sur Unsplash

Avez-vous déjà vu l'une de ces cartes thermiques sophistiquées que des outils tels que Hotjar et CrazyEgg peuvent produire, mais vous hésitiez à appuyer sur un abonnement mensuel de plus de 70 $? Eh bien, je peux avoir une solution pour vous en utilisant la version gratuite de Google Analytics. Ce tutoriel vous guidera à travers tout ce que vous devrez faire pour créer un visuel époustouflant comme celui ci-dessous. Les conditions préalables pour ce didacticiel incluent une compréhension de base de Google Analytics, de Google Tag Manager et de Data Studio. Il y a du javascript personnalisé, mais tout ce que vous avez besoin de savoir faire est de copier / coller du code. Commençons!

À quoi ma carte de chaleur ressemblera-t-elle lorsque j'aurai terminé?

Voici un exemple de ce que j'ai pu créer en utilisant cette méthode:

Que puis-je utiliser avec une carte de chaleur au clic?

Les données de cartographie thermique sont essentielles aux décisions de conception UX et à la compréhension de la manière dont les utilisateurs interagissent avec votre site Web. Vous pouvez détecter des tendances dans les actions des utilisateurs (par exemple, la plupart des utilisateurs cliquent sur X depuis la page d'accueil) et identifient des points de friction dans l'expérience. Les cartes thermiques aident à stimuler la conversation au sein de votre organisation car elles sont faciles à comprendre et à interpréter pour tous. Avoir toutes ces données dans GA vous donne également le pouvoir de découper votre carte thermique en fonction d'autres attributs de l'utilisateur, tels que l'appareil, le navigateur, le comportement d'achat, la source, etc. Ce didacticiel couvre la configuration de base, mais il existe des applications bien au-delà. est couvert ici. Si tout cela vous semble intéressant et utile, veuillez suivre les trois étapes ci-dessous pour créer votre propre carte de chaleur par clic.

Étape 1: créez vos événements Click dans Google Tag Manager

Créez vos variables définies par l'utilisateur dans Google Tag Manager

Afin de capturer toutes les données dont nous avons besoin pour notre rapport, nous devrons créer des variables javascript personnalisées dans Google Tag Manager (GTM). Je vais décrire chacun ci-dessous et expliquer ce qu'il fait.

JS - Click Text Clean: Cette variable nous fournira une version propre du texte sur lequel l'utilisateur clique. Assurez-vous que la variable intégrée Click Text est activée avant de configurer celle-ci. Le code ci-dessous vérifie si Click Text est défini. Si ce n’est pas le cas, il appellera votre Click Text comme étant «non défini». Le code tronque également les textes de clic de plus de 100 caractères et convertit le tout en minuscule. Vous pouvez utiliser l'ancien texte standard si vous préférez, mais vous risquez de passer des chaînes trop longues pour que GA ingère et / ou que vous disposiez de structures de cas funky menant à l'éclatement des données (GA est sensible à la casse).

une fonction() {
 
 sortie var;
 var input = {{Cliquez sur le texte}};
 
 if (input == null || input == ‘’) {
 sortie = ‘non défini’;
 } autre {
 si (longueur.entrée> 100) {
 output = input.substring (0,100) .toLowerCase () + ‘… ';
 } autre {
 output = input.toLowerCase ();
 }
 }
 
 retourner la sortie;
}

JS - Coordonnée X du clic: Cette variable nous fournira la position de la souris le long de l'axe des x (horizontal) où l'utilisateur clique. Ceci est mesuré en pixels.

une fonction() {
 
 var coordonnéeX;
 
 if (event == null) {
 coordonnéeX = 0;
 } autre {
 coordonnéeX = événement.pageX;
 }
 
 retour coordonnéeX;
}

JS - Coordonnée Y du clic: Identique à la variable ci-dessus, sauf que la position du clic de la souris sur l'axe des y (verticale).

une fonction() {
 
 var coordonnéeY;
 
 if (event == null) {
 coordonnéeY = 0;
 } autre {
 coordonnéeY = événement.pageY;
 }
 
 renvoyer coordonnéeY;
}

JS - Coordonnée X de l’écran: Cette variable nous fournira la largeur totale de la fenêtre de visualisation de l’utilisateur.

une fonction () {
 
 var body = document.body;
 var html = document.documentElement;
 var width = Math.max (body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
 
 largeur de retour;
 
}

JS - Coordonnée Y de l’écran: Cette variable nous fournira la hauteur totale de la fenêtre de visualisation de l’utilisateur.

une fonction () {
 
 var body = document.body;
 var html = document.documentElement;
 var height = Math.max (body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
 
 hauteur de retour;
 
}

JS - Coordonnée X relative: place à des maths amusants! Nous prenons la coordonnée Cliquez X et la divisons par la coordonnée X à l'écran pour créer un index. Cela devrait s'ajuster à la variabilité des différentes tailles d'écran.

une fonction() {
 
 var clickCoordinateX = {{JS - Cliquez sur Coordonnée X}};
 var screenCoordinateX = {{JS - Coordonnées de l'écran X}};
 var relativeX;
relativeX = (clickCoordinateX / screenCoordinateX) .toFixed (2);
renvoie relativeX;
 
}

JS - Coordonnée Y relative: Nous faisons la même chose que ci-dessus, mais pour la coordonnée Y.

une fonction() {
 
 var clickCoordinateY = {{JS - Cliquez sur la coordonnée Y}};
 var screenCoordinateY = {{JS - Coordonnée Y à l'écran}};
 var relative;
relativeY = (clickCoordinateY / screenCoordinateY) .toFixed (2);
retour relativeY;
 
}

Ce sont toutes les variables personnalisées dont vous aurez besoin pour cet exercice.

Créez votre déclencheur

Nous aurons besoin de créer un déclencheur dans GTM pour déclarer le moment où notre balise doit être déclenchée et envoyer les données à GA. Cela pourrait être l'étape la plus facile dans ce processus. Dans GTM, créez un nouveau déclencheur qui se déclenche sur tous les clics de lien. C'est là que vous pouvez obtenir un peu de créativité. Si vous préférez limiter ce déclencheur à quelques pages seulement (comme votre page d'accueil), vous pouvez ajouter une condition pour ne déclencher que sur lesdites pages. Vous pouvez également expérimenter avec un déclencheur de tous les éléments plutôt que simplement des clics de lien. Lors de mes tests, j'ai trouvé que tous les éléments transmettaient trop de données superflues. Je me suis donc limité aux miens en cliquant sur des liens. Votre déclencheur devrait ressembler à ceci:

Créez votre tag

La dernière étape de votre configuration GTM consiste à créer votre balise d'événement GA. Vous avez certaines libertés avec la façon dont vous nommez votre catégorie d’événement et votre action, mais je vous recommande de vous en tenir à ma structure d’étiquette d’événement pour que le reste du didacticiel soit facile à suivre.

Catégorie d'événement: cartographie thermique
Action événementielle: cliquez sur
Libellé de l'événement: pu: {{URL de la page}} | ct: {{JS - Cliquez sur Nettoyer le texte}} | rx: {{JS - Coordonnée X relative}} | ry: {{JS - Coordonnée Y relative}}

^ euh .. quoi? Vous pourriez être jeté par cette étiquette d'événement. Laissez-moi décomposer ce qui est collecté et pourquoi. Tout d’abord, la structure de l’étiquette d’événement est configurée de sorte qu’il est facile de scinder le délimiteur ‘|’ (caractère de canal) ultérieurement dans Data Studio ou l’outil de visualisation de données que vous choisissez d’utiliser. J'utilise également des paires clé-valeur pour faciliter la mémorisation de ce que chaque espace délimité représente. Voici un exemple de sortie:

pu: www.compassred.com/ // l'utilisateur était sur la page d'accueil CompassRed lorsque cet événement s'est produit
ct: about // l'utilisateur a cliqué sur le lien À propos de la page d'accueil
rx: 0.50 // l'utilisateur a cliqué au milieu de la page le long de l'axe des x
ry: 0.05 // l'utilisateur a cliqué à 5% du bas de la page

Une fois que vous êtes satisfait des paramètres de votre tag, veillez à prévisualiser votre travail et à publier.

Étape 2: vérifiez vos données dans Google Analytics

Une fois que vous avez publié vos modifications dans GTM, assurez-vous de passer à la création de rapports en temps réel dans Google Analytics afin de voir vos nouvelles données acheminées dans votre propriété. Vous voudrez vous assurer que tous les points de données passent comme prévu - vérifiez votre étiquette d'événement avec un contrôle supplémentaire, car c'est la pièce la plus importante du puzzle.

Si tout va bien, passez à l'étape 3.

Étape 3: créez votre rapport dans Google Data Studio

Vous pouvez utiliser n'importe quel outil de création de rapports que vous souhaitez, mais j'ai choisi Data Studio pour ce didacticiel, car il est gratuit et assez simple à configurer.

Créer un nouveau rapport et se connecter à votre compte GA

Accédez à datastudio.google.com et cliquez sur le gros bouton bleu + pour créer un nouveau rapport. Vous serez invité à vous connecter à une source de données. Choisissez Google Analytics, puis recherchez le compte> Propriété> Afficher l'emplacement des données nouvellement créées.

Créer des champs personnalisés

Rappelez-vous cette longue chaîne d'étiquette d'événement que nous avons créée dans GTM? Eh bien, il est temps de le séparer en morceaux individuels. Je dois admettre que Data Studio ne facilite pas les choses, mais si vous avez suivi à la lettre les conventions de dénomination, vous devriez pouvoir copier et coller les fonctions ci-dessous sans erreur.

Ouvrez l'éditeur de source de données - vous pouvez accéder à l'éditeur de source de données de plusieurs manières. Une solution consiste à cliquer sur Ressources> Gérer les sources de données ajoutées dans la navigation de niveau supérieur. Une fois que vous y êtes, cliquez sur Modifier sur la source de données appropriée.

Pour tous les champs personnalisés ci-dessous, cliquez sur le bouton Ajouter un champ, attribuez un nom à votre champ personnalisé, collez le code que je fournis et cliquez sur Enregistrer.

Etiquette d'événement - URL de la page: Cette action extrait l'URL de la page de votre étiquette d'événement.

REGEXP_EXTRACT (libellé d’événement, ’pu: (. *?) (\\ || $)’)

Etiquette d'événement - Texte de clic: Cette option extrait le texte de clic de votre étiquette d'événement.

REGEXP_EXTRACT (libellé d’événement, ct: (. *?) (\\ || $) ’)

Etiquette d'événement - X relatif: Cette option extrait la coordonnée X relative de votre étiquette d'événement.

REGEXP_EXTRACT (Libellé de l’événement, ’rx: (. *?) (\\ || $)’)

Etiquette d'événement - Y relatif: Cette option extrait les coordonnées Y relatives de votre étiquette d'événement.

REGEXP_EXTRACT (Label de l’événement, ’ry: (. *?) (\\ || $)’)

La dernière chose à faire est de dupliquer les champs personnalisés Libellé de l’événement - Relatif X et Libellé de l’événement - Relative Y. La raison en est que vous pouvez stocker une version sous forme de texte et l'autre sous forme de nombre. Une fois que vous dupliquez ces deux champs personnalisés, veillez à les convertir en nombres et à leur attribuer de nouveaux noms afin de pouvoir distinguer les deux versions. Voici à quoi devrait ressembler votre liste de champs personnalisés finale:

Créez votre visualisation de carte thermique

Il est enfin temps de créer votre visualisation. Avant de commencer, vous aurez besoin d’une capture d’écran de la page que vous souhaitez analyser. J'utilise l'extension Fireshot Chrome, qui est gratuite et vous permet de capturer la page Web entière en une fois et de l'enregistrer en tant qu'image.

Une fois que vous avez votre capture d’écran, insérez-la en tant qu’image sur votre tableau de bord et redimensionnez-la en conséquence.

Créez ensuite un visuel de diagramme de dispersion et ajoutez les champs suivants à votre visuel:

Le style dépend en grande partie de vous, mais vous voudrez certainement faire certaines choses:

Retournez l’axe des Y pour que 0 commence en haut, ce qui correspond à la façon dont vos données ont été collectées. Supprimez toutes les étiquettes d'axe, les lignes de grille, les légendes, etc. Je vous recommanderais également de réduire la taille des bulles et d'ajuster l'opacité du graphique global entre 50 et 70% afin que l'arrière-plan soit visible.

Terminez votre visuel en le superposant sur la capture d'écran que vous avez insérée. Cette partie nécessitera quelques ajustements, mais si vous avez beaucoup de données, il ne vous faudra pas longtemps pour les mettre au bon endroit.

Toutes nos félicitations! Vous avez réussi à créer une carte de chaleur par clic à partir de zéro en utilisant uniquement des outils gratuits et un peu de code personnalisé.

J'espère que vous avez trouvé ce tutoriel utile. Envisagez de suivre Patrick Strickler et CompassRed Data Labs pour rester informé des nouveautés publiées.