Blog

Retour aux articles

Retour d’expérience sur le tracking d’un site en SPA (Single Page App) avec Google Tag Manager

Partager

2560

Retour d’expérience sur le tracking d’un site en SPA (Single Page App) avec Google Tag Manager

Ces derniers mois, nous avons suivi certains clients dans l’implémentation d’un plan de taggage personnalisé pour leur nouveau site dans le cadre d’une refonte. Nous avons (enfin) pu expérimenter l’implémentation de Google Tag Manager sur un site SPA (Single Page App).  C’est aujourd’hui le thème de notre article. 

  • Oui, dans le fond, le monsieur avec les lunettes.
  •  Qu’est-ce qu’une SPA ? 
  • Excellente question mon bon monsieur !

Une SPA est une application web accessible via une page web unique. Le contenu est donc poussé dynamiquement, l’url se modifie et cela ne fait que fluidifier l’expérience utilisateur mais en réalité, il n’y a pas de chargement de page. 

  • Qu’est-ce que ça change pour nous ? 

Et bien tout. Rappelez-vous, sur un site « ordinaire » lorsque vous mettez en place le trackeur analytics via GTM, vous insérez une balise de suivi des « pages vues » et vous définissez le déclencheur comme « All Pages ». 

A chaque fois qu’une page se charge, les 3 éléments suivants se déclenchent :

  1. Container Loaded
  2. DOM Ready
  3. Window loaded

Le « All Pages » (œil bleu) qui est configuré par défaut dans votre plateforme GTM pourrait être traduit de la manière suivante « Ok Google, à chaque fois que tu vois un « container Loaded », tu envoies une page vue (et ses caractéristiques) dans GA ».

Qui dit chargement de page, dit trio ; qui dit trio, dit « container loaded », qui dit « container loaded », dit « all pages » déclenché ; qui dit « all page » déclenché, dit envoi de la page vue dans Google Analytics. 

Sur un site ordinaire, à chaque fois qu’un utilisateur quitte une page pour arriver sur une nouvelle, ce trio se déclenche et par conséquent une nouvelle page vue sera envoyée dans GA. 

En revanche, si vous faites cette même installation pour un site SPA, vous ne collectez QUE la première page (page de destination) de la session. Pourquoi ? Parce que le contenu consulté par votre utilisateur sera appelé de manière dynamique (cf définition), il n’y aura plus de trio chargé, et donc aucun envoi ne sera fait. Le seul chargement aura lieu à la première page consultée ! 

  • Mais alors comment doit-on faire ? 

La suite dépend de ce que vous avez à disposition via la technologie de développement utilisée. 

Premier réflexe : Se rendre dans GTM et mettre en place un « History » Listener

  • Qu’est-ce que c’est encore que ces carabistouilles ? 

Je vous montre. On vient de voir que le contenu était poussé dynamiquement et par conséquent, il n’y avait pas de chargement de page. Mettre en place un « history listener » va nous permettre de voir si GTM arrive automatiquement à cerner les changements dynamiques. 

Rendez-vous dans « Déclencheurs » > Nouveau. Vous pouvez le nommer comme vous le souhaitez mais vous devez sélectionner comme type de déclencheur (l’horloge rose) « Modification de l’historique »

Vous enregistrez ce déclencheur sans lui affecter aucune balise pour l’instant. C’est pour cela qu’on appelle ça un « listener » : il nous permet juste de voir les changements. 

Voyons si cela fonctionne de votre côté. Nous lançons le mode « prévisualiser ». 

Lorsque j’arrive sur la première page, voilà ce que j’obtiens : 

Jusque-là rien d’anormal ! On continue. Je consulte une autre page (avec chargement dynamique). 

** Attention, certains sites sont des versions hybrides. Ils ont des pages « ordinaires » et d’autres contenus dynamiques ». **

Je suis sur une autre page (d’un point de vue utilisateur) et pourtant, le trio ne s’est pas rechargé. En revanche, mon « history listener » s’est déclenché ! 

Je fais plusieurs tests pour voir si « History » correspond bien aux changements de pages (point de vue utilisateur) entrepris et surtout qu’il n’y ait pas de doublon (ex 7 History et 8 history). 

Si votre history ne remonte pas, vérifiez votre installation. Si le problème persiste, il faudra voir avec vos développeurs s’ils peuvent mettre en place un événement de dataLayer ‘pageview ‘ a chaque fois qu’un contenu est dynamiquement poussé. 

Ok, à cette étape, j’ai vérifié que j’avais bien un listener qui confirmait les changements dynamiques. Il ne me reste plus qu’à configurer ma balise Google Analytics « Page vue ». 

Je vais donc vouloir envoyer cette page vue à chaque fois qu’une page est chargée « Container Loaded » ET quand l’utilisateur appelle un chargement dynamique «history ». 

Une page vue sera donc envoyée à chaque fois qu’un utilisateur navigue sur une page de votre site, qu’elle soit « ordinaire » (chargement) ou dynamique ! 

ATTENTION : Il s’agit du cas le plus facile. Sur certains blogs consultés, certaines implémentations ne se sont pas aussi bien passées et nécessitent d’autres développements (notamment le transfert des balises UTMs). Alors soyez prudents ! 

Je vous laisse avec le meilleur et son article sur le problème des sources supports dans cette configuration : https://www.simoahava.com/gtm-tips/fix-rogue-referral-problem-single-page-sites/

Merci pour ton attention, jeune lecteur



Cet article vous a plu ? Abonnez-vous à notre newsletter et recevez notre actualité et plus de contenus sur l’expérience utilisateur.  😉


Auteur