C’est un invité post de Sebastian Pospischil, Evangelist Digital Analytics at TRKKN. Tout le mérite de la solution lui revient. Les Résumé section est la seule rédigée par Simo Ahava.

Vous connaissez le marché.

Chaque jour, des clients vous contactent pour vous demander suivi des clics personnalisé pour cet appel à l’action sur ce curseur ou ce bouton dans cette section d’une page. Ils vous contactent car il est impossible de répondre à de telles questions dans Google Analytics 4.

Ensuite, vous retroussez vos manches, créez de nouvelles balises, déclencheurs et variables, et finalement le conteneur Google Tag Manager ressemblera à un gâchis. D’une manière ou d’une autre, vous avez atteint un point où presque chaque page vue est également suivi d’un événement de clic. Ça n’a aucun sens.

Aimeriez-vous surmonter cela ? Vous souhaitez aider vos clients sans gâcher leurs conteneurs ? Jetez un œil à ce que cette solution promet de rapporter :

• Dans quelles sections un clic s’est-il produit ?
• Sur quelle page le clic s’est-il produit ?
• Vers quelle page le lien a-t-il redirigé ?
• Quelles sections ont été les plus cliquées au total, par modèle ou par page ?
• Quels événements sont générés sur quelles sections d’une page ou d’un template ?

Oui, vous avez bien lu cette dernière puce – cela fonctionne également pour chaque événement, et pas seulement pour les pages vues !

Tout ce dont tu as besoin c’est une balise et trois petites variables.

Malheureusement, en raison des restrictions du modèle personnalisé JavaScript Sandboxed, vous devrez implémenter cette solution avec JavaScript personnalisé.

Vous pouvez télécharger un espace de travail avec la balise et les variables en cliquant sur ce lien.

Procédure technique

Tu dois divisez votre modèle de site Web en sectionsafin que le script renvoie le bon link_id. Vous devrez également définir ce qu’est un lien pour obtenir des résultats précis.

Les étiqueter fixera alors un biscuit avec le link_id de chaque clic OU lors de l’appui sur Entrée du clavier sur un lien défini. En atteignant la page suivante, les informations seront lues et transmises à Google Analytics 4 avec le page_view un événement. Cela permet d’éviter le spam d’événements dans vos données d’analyse.

Il y aura aussi un link_id_events_cJS variable qui peut être utilisée pour attacher le correspondant link_id à tout événement que vous souhaitez inclure dans cette configuration de suivi. Il n’y a pas de cookie impliqué dans cette approche, car les événements ont lieu sur la page elle-même et les informations n’ont pas besoin d’être conservées sur la page suivante.

REMARQUE! Ce n’est pas une solution pour les débutants en développement GTM / Web. Vous devez savoir comment GTM fonctionne et quels sont les éléments HTML et les sélecteurs CSS. De plus, cet article ne couvre pas l’utilisation link_id spécifiquement pour les applications monopage (SPA).

Comment puis-je le configurer ?

Les étapes que vous devez suivre sont les suivantes :

1. Téléchargez et importez l’espace de travail dans votre conteneur.
2. Configurez la balise et les variables – le code est commenté avec des instructions mais il y a des conseils supplémentaires ci-dessous. Définissez la balise pour qu’elle se déclenche sur le Toutes les pages déclencheur, par exemple.
3. Ajouter link_id_page_cJS (nommez simplement le paramètre d’événement link_id) et link_id_page_template_var(nommer le paramètre d’événement link_id_page_template) à ton page_view étiqueter.
4. Ajouter link_id_events_cJS à vos balises d’événement (nommez le paramètre link_id encore une fois – il est plus facile d’avoir tout sous le même nom de paramètre).
5. Créez les dimensions en conséquence dans l’interface utilisateur GA4 (link_id et link_id_page_template).

REMARQUE! Cette solution doit définir un cookie propriétaire. Vous pouvez le nommer comme vous le souhaitez, mais vous devez l’ajouter à votre politique de confidentialité / avis sur les cookies / autre documentation pertinente pour être conforme à la réglementation légale applicable à l’accès au stockage de l’appareil. La valeur ne contient pas de données personnelles – elle encode simplement des détails sur la page et la section sur lesquelles vous avez cliqué. Le cookie sera supprimé dès que sa valeur sera accessible sur la page suivante.

Comment configurer le script

Si vous n’êtes pas familier avec HTML et Sélecteurs CSS, vous pouvez avoir du mal avec ces derniers au départ. Mais je vais t’aider, ne t’inquiète pas !

À titre d’exemple, je vais vous fournir une procédure pas à pas de mon propre projet. Si vous voulez voir cela en action, vous pouvez visiter le site où la configuration est en cours d’exécution : https://www.kunstform.org/.

Divisez le modèle HTML du site Web en sections

Pour ajouter des informations sur lesquelles section de la page sur laquelle le clic s’est produit, vous devez définir ces sections dans le clickIdentifier configuration.

Dans Google Tag Manager, ouvrez la balise HTML personnalisée qui contient le script.

Sous le gtm_link_id l’initialisation de la variable, vous verrez une propriété appelée clickIdentifier. Il s’agit d’un objet dans lequel vous fournissez les détails de la section du site à l’aide d’une syntaxe spéciale :

"[CSS SELECTOR]": "[DYNAMIC VALUE]#[FIXED VALUE]"

Pour le Sélecteur CSSajoutez un sélecteur qui correspond à cette section particulière de la page.

Les valeur fixe est le nom de la section dans la valeur du paramètre.

Si vous spécifiez un valeur dynamiqueil tente d’extraire la valeur du ou des noms d’attribut que vous fournissez.

Lorsqu’un clic atterrit sur l’élément spécifié par le sélecteur CSS, la balise crée le link_id paramètre en concaténant le valeur fixe premier (si disponible), suivi du > séparateur et le valeur dynamique.

Par example:

Pour construire cette liste de rubriques, vous devez vous référer au HTML de vos modèles de pages. Tous les moteurs de modèles ne génèrent pas de code HTML utile, il est donc possible que vous ayez besoin de parler à vos développeurs pour obtenir leur aide pour recâbler la structure HTML de votre site afin qu’elle soit plus conviviale pour le suivi.

Voici comment j’ai configuré cela sur https://www.kunstform.org/ :

1. Ouvrez le site Web, cliquez avec le bouton droit n’importe où sur la page et sélectionnez Inspecter (ou similaire) dans le menu contextuel.

2. Vous devriez maintenant voir quelque chose comme ça. Lorsque vous survolez le code HTML, vous remarquerez comment les différentes sections sont mises en surbrillance. Cliquez sur ces petites flèches grises pour n’afficher que les sections principales. Ce sera notre point de départ.

3. En suivant cet exemple, nous diviserions le modèle dans les sections suivantes (par ID) :
   1. header
   2. navbar
   3. content
   4. left
   5. right
   6. footer
   7. subfooter
   8. cookie_consent

Parce que ce site n’a que le id attribut sur <div> balises, nous pouvons mettre en place ce suivi avec un très Facile clickIdentifier règle:

clickIdentifer: {   "div[id]": "id" } 

Si vous vous souvenez d’en haut, cela signifie que le script suit les clics dans tous <div> éléments qui ont le id attribut. L’étiquette de la section est extraite dynamiquement de la id attribut.

À titre d’exemple de quelque chose de différent, voici ce que je mettrais en place sur le site Web https://www.trkkn.com/ :

clickIdentifier: {   "nav": "#navigation", // Fixed value: "navigation"   "footer": "#footer", // Fixed value: "footer"   "header": "#header", // Fixed value "header"   "main section": "class", // Dynamic value from the [class] attribute   "div[id]": "id" // Fallback, passes the dynamic value of the [id] attribute of the clicked <div> element } 

J’espère que c’est clair maintenant. Après avoir précisé le basique sections du modèle, nous pouvons approfondir la section de contenu de la page.

Par exemple, nous voulons suivre ce curseur et cette section de vente :

Voici ce que la mise à jour clickIdentifier ressemblerait à :

clickIdentifier: {   "div#mainstage": "#slider_main",   "div#index": "#sale",   "div[id]": "id" } 

Nous les avons ajoutés en haut de la liste, car le script évalue les sélecteurs dans l’ordre du premier au dernier et utilise la première correspondance pour générer l’étiquette.

Vous pouvez utiliser la technique pour diviser encore plus votre modèle, si vous le souhaitez.

Je vous recommande de commencer doucement au début. Spécifiez d’abord les sections de base et saupoudrez peut-être certaines sections détaillées sur la page d’accueil. Vous pouvez ensuite collecter des données pendant un certain temps avant d’ajouter également des sections de contenu supplémentaires sur d’autres pages.

Définir quelles interactions constituent un clic

Pour que cette solution soit précise, nous devrons spécifier ce que nous considérons comme un “clic de lien”. Par exemple, en plus de <a> les éléments de lien, certaines soumissions de formulaires et certains clics sur des boutons peuvent également générer une redirection.

Pour spécifier les sélecteurs de ce que vous souhaitez traiter comme un lien lorsqu’il est ciblé par un clic, modifiez le clickSelector propriété dans le gtm_link_id objet d’initialisation.

Définissez sa valeur sur une liste de sélecteurs séparés par des virgules qui correspondent aux éléments sur lesquels un clic doit être considéré comme un « clic sur un lien ». Par exemple, voici un bon point de départ :

clickSelector : ‘a,entrée[type=”submit”],bouton’`

Sur le site https://www.kunstform.org, nous devons également ajouter le champ de recherche, car le fait d’y appuyer sur Entrée conduira à une redirection vers la page des résultats de la recherche.

Voici ce que la mise à jour clickSelector ressemble à:

clickSelector: 'a,input[type="submit"],button,#input_search'

À ce stade, vous vous demandez peut-être combien vous devez configurer pour que cela fonctionne. Avez-vous besoin de parcourir toutes les pages du site Web pour voir si vous avez manqué quelque chose ?

Ce serait peut-être une bonne idée de jeter un œil au rapports à ce stade pour aider à apaiser votre esprit.

Rapports dans Google Analytics 4

Voici quelques exemples de configurations de rapport que vous pouvez utiliser une fois que vous avez créé les dimensions personnalisées requises (link_id et link_id_page_template).

Quelles sont les sections les plus cliquées dans l’ensemble ?

• Dimension: link_id
• Filtre: event equals page_view

Remarquez les entrées marquées en jaune ? Lorsque cette solution a été déployée sur le site, il y avait quelques lacunes dans la collecte des données. Ces entrées spéciales sont utilisées pour fournir plus de détails.

• (retour_avant): L’utilisateur a navigué avec le bouton Précédent ou Suivant du navigateur.
• (recharger): L’utilisateur a rechargé la page.
• (page de destination): L’utilisateur est arrivé sur le site via cette page, car le document.referrer est un site différent du vôtre.
• (cookie manquant)(naviguer): Il n’y a pas de cookie mais l’utilisateur a bien navigué. Cela signifie qu’il existe encore des sections que vous n’avez pas suivies en tant que sources de navigation potentielles dans clickSelector.
• (Erreur): Il y a eu une erreur avec le PerformanceNavigationTiming API

Comment réparer (cookie manquant)(naviguer) ?

• Dimensions: link_id, Page referrer, Page path and screen class
• Filtre: event equals page_view, link_id equals (cookie missing)(navigate)

Ce rapport nous indique sur quelle page l’utilisateur était (Page referrer) et vers quelle page ils ont navigué (Page path and screen class).

Dans la première entrée, lorsque nous survolons le Page referrer valeur, nous pouvons voir que l’utilisateur a navigué à partir de /shopping_cart pour /shopping_cart. Hein?

Il n’y a que deux interactions qui génèrent un nouveau chargement de page : MISE À JOUR PANIER et ÉLIMINER. Cliquons sur ces deux boutons pour découvrir comment notre solution réagit :

• Quand je clique MISE À JOUR PANIERle libellé du lien est défini sur contentdonc ça marche bien.
• Quand je clique ÉLIMINER, il ne se passe rien. Vous devez cliquer MISE À JOUR PANIER en tous cas.

Ce n’est donc ni l’un ni l’autre. Qu’est ce que ça pourrait être?

Eh bien, si je change la quantité d’un article dans le champ de saisie respectif et que j’appuie sur Enterun événement avec (cookie manquant)(naviguer) est distribué en tant que valeur de paramètre d’événement. Trouvé !

Si nous inspectons ce champ, nous pouvons voir comment nous devrions mettre à jour clickSelector.

Cette <input> l’élément est ne pas sur notre liste de valides clickSelector options. Nous devons donc le mettre à jour. Voici ce que le nouveau clickSelector ressemble à:

clickSelector: 'a,input[type="submit"],button,#input_search,input[name="cart_quantity[]"]'

Maintenant, quand je change la quantité et que j’appuie sur Enterla solution le suit correctement.

Vous pouvez maintenant faire le même parcours avec toutes les entrées obscures de la liste. Si vous faites votre travail avec soin, le nombre de (cookie manquant)(naviguer) les entrées diminueront avec le temps.

Les gens cliquent-ils sur mon curseur sur la page d’accueil ?

• Dimension: Page path and screen class
• Filtre: event equals page_view, Page referrer equals https://www.kunstform.org/de/, link_id equals mainstage

Il y a trois cartes sur le curseur de la page d’accueil. Lequel obtient le plus de clics ?

Voici ce que nous dit le rapport :

Dans ce cas, la première diapositive obtient le plus de clics. Aucun suivi d’événement supplémentaire n’était nécessaire – notre solution s’en est chargée pour nous ! Nous pouvons utiliser ces informations pour exécuter des tests A/B, par exemple, pour nous assurer que notre slider attire les utilisateurs de la meilleure façon possible.

Quelles sections sont les plus cliquées sur une page donnée ?

• Dimension: link_id, Page referrer
• Filtre: event equals page_view, Page referrer contains [PAGE_TO_BE_ANALYZED]

Dans ce cas, j’ai filtré spécifiquement les clics sur la page d’accueil. Je voulais savoir si les utilisateurs ont tendance à utiliser notre recherche de pièces plus que la navigation principale.

D’après le rapport, il semble certainement que le findernav C’est très populaire.

Quels modules reçoivent le plus de clics par modèle de page ?

• Dimension: link_id
• Filtre: event equals page_view, link_id_page_template equals product_detail

Sur les pages de détails des produits, les utilisateurs ont tendance à interagir d’abord avec le panneau des prix. Et c’est une bonne nouvelle !

Qu’en est-il de tous les autres événements en plus page_view?

La variable Google Tag Manager link_id_events_cJS attachera le link_id à la balise à laquelle la variable est ajoutée. Aucun cookie ne doit être défini, car l’événement se produit sur la page sans qu’une redirection n’ait lieu.

Soit conscient que link_id_page_template contiendra la valeur du précédent page_view un événement. Si nous voulons analyser les événements par modèle de page, nous devons utiliser page_type dans notre exemple ci-dessous à la place.

En dehors de cela, vous pouvez faire la même analyse avec d’autres événements comme vous l’avez fait avec page_view. N’oubliez pas que l’analyse des événements se produit sur la même page où l’événement a été collecté, donc lorsque vous créez les rapports, vous pouvez utiliser Page path and screen class comme la dimension plutôt que Page referrer. Ceci est également pertinent lorsque vous travaillez avec des applications monopage (SPA).

Résumé (par Simo)

Merci, Sébastien !

Cela peut sembler une chose compliquée à faire fonctionner, mais une fois que vous avez déterminé les sélecteurs CSS appropriés pour les sections de votre site, et une fois que vous avez déterminé quelles interactions d’éléments doivent être classées comme “clics de lien”, le script réel fera le reste de le travail pour vous.

Le résultat final est un moyen assez autonome de suivre les clics qui mènent à des événements de navigation/redirection.

Vous pouvez utiliser ces informations pour construire rapports de chemin de navigation bien sûr, mais vous pouvez également l’utiliser pour construire cartes thermiques et pour valider quel sections de vos modèles de page reçoivent le plus d’attention.

Si vous avez des questions sur la configuration ou sur la mise en œuvre elle-même, n’hésitez pas à les ajouter aux commentaires du blog !