GTM côté serveur pour les applications monopages (SPA)

Le suivi des applications monopages (SPA) peut être délicat car elles ne rechargent pas des pages entières, ce qui rend le suivi standard plus difficile. Le Google Tag Manager (GTM) côté serveur permet de résoudre ce problème en gérant les données côté serveur et en améliorant la précision et les performances du suivi.

Dans ce guide, nous vous expliquerons comment configurer le GTM côté serveur pour les SPA et nous aborderons les meilleures façons de gérer les pages vues, les événements et les interactions.

Une application monopage (SPA) est une application web qui charge initialement une page HTML et met à jour son contenu de manière dynamique au fur et à mesure que les utilisateurs interagissent, au lieu de recharger de nouvelles pages à chaque action ou navigation.

Les SPA sont devenues populaires car elles offrent des avantages considérables par rapport aux sites web traditionnels à plusieurs pages :

Parmi les exemples de SPA, on peut citer Gmail, où le contenu est mis à jour sans recharger la page ; Facebook, qui permet de faire défiler, de publier et de commenter sans rafraîchir ; et Trello, où les tâches sont gérées sur la même page. Les SPA offrent une expérience rapide et fluide pour les applications à forte interaction avec l'utilisateur.

Le suivi des applications monopages (SPA) à l'aide de GA4 et GTM est plus complexe que le suivi des sites Web classiques en raison du fonctionnement des SPA. Nous comprenons cette complexité et sommes là pour vous guider. 

Voici pourquoi :

- Contrairement aux sites Web traditionnels, il n'y a pas de rechargement de page complète, où chaque clic charge une nouvelle page (et déclenche des « Pageviews » GA4). Les SPA chargent le contenu de manière dynamique. Cela signifie que le déclencheur standard « Pageview » ne fonctionne pas de la même manière.

- Des déclencheurs d'événements personnalisés sont nécessaires. Comme il n'y a pas de rechargement de page, vous devez créer des déclencheurs personnalisés qui détectent des interactions spécifiques de l'utilisateur, comme les clics sur les boutons ou les changements d'URL, pour suivre les actions significatives.

- Complexité du suivi des flux d'utilisateurs. Avec les SPA, les utilisateurs peuvent rester sur la même page tout en interagissant avec différentes sections. Le suivi de ces interactions nécessite la mise en place d'un suivi plus détaillé des événements pour capturer ces transitions de page.

- Risque de perte de données. Vous risquez de passer à côté de données d'engagement cruciales si vous ne procédez pas à un suivi approprié, car GA4 ne suit pas automatiquement les changements de contenu sur les SPA. Des configurations personnalisées dans GTM sont nécessaires pour s'assurer que rien ne soit perdu.

La complexité provient en grande partie du comportement dynamique des SPA, qui nécessite davantage de configuration manuelle pour garantir une collecte précise des données. Bien que Google Analytics 4 inclue un suivi intégré pour ces pages vues, il ne fonctionne pas toujours parfaitement dès le départ. En outre, certains sites Web peuvent être compliqués à suivre efficacement.

Pour résoudre ce problème, une configuration supplémentaire est nécessaire pour suivre efficacement ces sites Web ou applications Web. Mais ne vous inquiétez pas, nous vous montrerons comment suivre les applications monopages à l'aide de Google Analytics 4 et de Google Tag Manager.

Voici comment suivre efficacement les SPA à l'aide de trois méthodes courantes :

1. Mesure améliorée des pages vues de GA4

GA4 dispose d'une fonction intégrée qui suit automatiquement les pages vues dans les SPA. Elle fonctionne en détectant les changements d'URL, mais il se peut qu'elle doive être ajustée pour tout suivre correctement, selon la configuration de votre site. C'est un bon point de départ, mais elle peut être améliorée pour certains sites.

2. Déclencheur de changement d’historique de GTM

Google Tag Manager peut suivre la navigation des utilisateurs dans une SPA en utilisant le déclencheur de changement d'historique. Ce déclencheur écoute les changements dans l'historique du navigateur (par exemple lorsque les utilisateurs passent d'une section à l'autre), ce qui vous permet de suivre les interactions même si la page ne se recharge pas complètement.

3. Push de la couche de données avec GTM layer push with GTM

Dans cette méthode, vous transmettez des événements personnalisés ou des modifications de page à la couche de données de votre SPA. GTM peut alors détecter ces transmissions et envoyer les données correctes à GA4. Cette approche vous donne plus de contrôle et vous permet de suivre plus précisément des interactions spécifiques.

Si vous pouvez mettre en œuvre les trois options de suivi, il est préférable de choisir la dernière, qui utilise l'assistance du développeur et le dataLayer.push. Cette méthode vous offre le plus de contrôle et de flexibilité, ce qui en fait la solution la plus fiable. Le fait de pousser des événements spécifiques directement vers la couche de données garantit que les interactions clés sont capturées avec précision, même dans les SPA les plus complexes. Bien que cela puisse nécessiter la contribution d'un développeur, la précision et la robustesse de cette approche en valent la peine. Sur notre blog, vous trouverez un guide complet sur la couche de données dans Google Tag Manager.

Examinons de plus près chacune des options.

Pour suivre les applications monopages à l'aide de la mesure améliorée des pages vues de Google Analytics 4, suivez ces étapes simples :

1. Accédez aux paramètres de flux

Connectez-vous à votre compte GA4 et recherchez les paramètres de votre flux de données.

2. Ouvrez les flux de données dans l’administration

Cliquez sur l'icône Administration (en bas à gauche), puis dans la section Propriété, choisissez Flux de données et sélectionnez le flux que vous souhaitez suivre.

Cela vous aidera à configurer le suivi des pages vues pour votre application monopage.

3. Vous verrez les détails du flux Web. Cliquez sur l'icône des paramètres sous Enhanced Measurement.

4. Cliquez sur Show Advanced Settings. 

5. Vérifiez les changements de page en fonction des événements de l'historique du navigateur.

Les événements de mesure améliorés tels que les défilements, les clics sortants et les recherches sur le site doivent être suivis avec précision, ce qui entraîne des données sous-estimées ou surestimées. Pour garantir un suivi précis, il est préférable de les désactiver ou de les configurer à l'aide de GTM.

6. Une fois terminé, cliquez sur le bouton Enregistrer dans le coin supérieur droit.

Pour vérifier si tout fonctionne correctement, utilisez le mode aperçu de GTM. Connectez-vous à GTM, puis cliquez sur Preview dans le coin supérieur droit.

Une nouvelle fenêtre s'ouvrira dans laquelle vous pourrez saisir l'URL de votre site web. Après avoir cliqué sur Se connecter, la page s'actualisera et affichera les détails de suivi de votre site.

Lorsque vous sélectionnez le conteneur GTM en haut, vous devriez voir l'événement de changement d'historique, alias gtm.historyChange-v2.

Ensuite, cliquez sur votre identifiant de mesure GA4 en haut pour vérifier si l'événement de vue de page est suivi et envoyé correctement.

Si les événements ne sont pas envoyés à GA4, ne vous inquiétez pas, cela peut signifier que la configuration actuelle ne capture pas tout correctement. 

Il est judicieux de passer à la deuxième méthode de suivi. Cette méthode peut fournir un moyen plus fiable d'enregistrer avec précision vos événements de page vue et d'autres interactions. Parfois, différentes configurations fonctionnent mieux pour des SPA spécifiques. Expérimenter d'autres méthodes peut donc aider.

Cette méthode surveille également les modifications de l'historique du site web, de la même manière que la fonction de mesure améliorée de GA4.

En détectant ces modifications de l'historique, vous pouvez les utiliser pour déclencher des événements de page vue et les envoyer à GA4.

Voici comment suivre les applications monopages à l'aide du déclencheur de modification de l'historique de Google Tag Manager :

1. Connectez-vous à Google Tag Manager.

2. Allez dans Triggers et cliquez sur New pour créer un nouveau déclencheur.

3. Faites défiler vers le bas et sélectionnez History Change comme type de déclencheur.

4. Définissez le déclencheur pour qu'il se déclenche sur « All History Changes », puis cliquez sur Enregistrer.

Il devrait être configuré maintenant, mais testons-le pour nous en assurer. Entrez en mode aperçu de GTM comme nous l'avons fait dans la première méthode.

Comme vous pouvez le voir, le tag de configuration GA4 se déclenche, mais vous remarquerez peut-être également plusieurs événements d'historique, ce qui peut se produire avec certains SPA.

🚨 Remarque : le nouveau Google Tag a remplacé le tag de configuration GA4.

Si vous rencontrez ce problème, il est essentiel de revoir et d'ajuster vos déclencheurs pour qu'ils se déclenchent sur des modifications spécifiques plutôt que sur toutes les modifications, en veillant à ce que les données restent propres et précises.

La troisième méthode entre en jeu lorsque les deux premières méthodes ne fonctionnent pas. Cette approche nécessite qu'un développeur pousse une couche de données dans le code du site web. La couche de données stocke les valeurs et déclenche les pages vues dans Google Tag Manager.

Here’s an example of how the script code might look:

<script>

 window.dataLayer = window.dataLayer || [];

 window.dataLayer.push({

   'event': 'virtualPageview',

   'pageUrl': 'https://www.example.com/path/?example#example',

   'pageTitle': 'Example title'

 });

</script>

Cela vous permet de capturer directement les pages vues et d'autres événements critiques en les intégrant au code du site.

Les valeurs de pageUrl et pageTitle doivent être dynamiques, car elles changeront pour chaque page ou type de contenu. Idéalement, le développeur gérera cela ainsi que les hashtags, points d'interrogation ou autres paramètres de requête dans les URL.

Une fois la couche de données en place, vous pouvez terminer la configuration dans GTM en trois étapes :

1. Configurer deux variables de couche de données

2. Créer un déclencheur d’évènement personnalisé.

3. Configurer un tag d’évènement page_view pour envoyer les données à GA4

Commençons par créer les variables de couche de données pour pageUrl et pageTitle :

1. Allez dans Variables

2. Cliquez sur Nouveau

3. Sélectionnez Variable de couche de données comme type, et configurez les variables en conséquence pour pageUrl et pageTitle.

4. Maintenant que nous avons stocké les valeurs de l'URL de la page et du titre de la page dans les variables de la couche de données, l'étape suivante consiste à créer un déclencheur basé sur l'événement personnalisé (virtualPageview) que nous avons défini précédemment dans la couche de données.

Voici comment configurer le déclencheur d'événement personnalisé :

De déclencheur s’activera chaque fois que l’évènement virtualPageview sera poussé vers la couche de données.

5. Ensuite, nous allons créer le tag d'événement GA4 pour envoyer les données à GA4. Voici comment le configurer :

Configurez le tag comme suit :

- Nom de l’évènement : page_view

- Paramètres et valeur de l’évènement :

- Déclencheur : Définissez le déclencheur pour qu’il se déclenche chaque fois que l’évènement personnalisé virtualPageview est détecté.

Cela enverra les données de consultation de page, y compris l'URL et le titre dynamiques, à GA4.

Veillez à tester la troisième méthode en mode aperçu de GTM et dans DebugView de GA4 pour vous assurer que les bonnes données sont collectées, en particulier pour les paramètres page_location (URL) et page_title.

Nous n'avons pas ajouté ces paramètres au tag de configuration GA4 car GA4 ne les lit qu'une seule fois lors du chargement initial de la page. Cela signifie qu'il manquerait les modifications ultérieures sur une SPA puisque la page ne se recharge pas complètement.

Bien que certaines de ces méthodes puissent être difficiles, elles sont généralement réalisables avec une configuration soigneuse.

Il n'est pas indispensable de comprendre les défis des SPA, mais cela peut faciliter la gestion des problèmes de suivi lorsqu'ils surviennent. Voici quelques défis courants :

1. Dépendance à JavaScript : les SPA dépendent fortement de JavaScript pour fonctionner. Si JavaScript est désactivé, aucune des interactions ne sera suivie, car l'application ne fonctionnera pas. Bien que le rendu côté serveur puisse offrir une solution de contournement, il peut compliquer les choses, car d'autres fonctions dynamiques peuvent ne pas se comporter comme prévu.

2. Suivi des URL avec paramètres ou fragments : les URL contenant des paramètres tels que des hashtags ou des points d'interrogation ne sont pas suivies automatiquement. Pour gérer cela, vous devrez capturer l'URL complète en utilisant window.location.href dans une variable JavaScript et remplacer le paramètre page_location par cette valeur pour chaque tag d'événement GA4, en vous assurant que l'URL complète est capturée avec précision.

3. Si plusieurs événements de modification de l'historique apparaissent dans le mode d'aperçu de GTM, il est essentiel d'examiner et d'éliminer toute donnée en double. Pour ce faire, vous pouvez ajuster le déclencheur afin qu'il ne se déclenche que pour des événements de modification de l'historique spécifiques, et non pour tous.

4. Si vous utilisez la méthode de la couche de données et que vous remarquez que l'événement virtualPageview se déclenche à chaque chargement du site web, vous devez désactiver l'option Send a page view event when this configuration loads pour éviter les événements de page vue inutiles.

5. Il est essentiel de résoudre le problème des faux référencements, où Google attribue par erreur du trafic payant comme étant organique. Pour plus de détails, consultez l'article de Simo Ahava sur le sujet. Malheureusement, cette solution spécifique n'est actuellement pas compatible avec GA4.

N'oubliez pas qu'il s'agit d'une liste partielle des défis, car d'autres peuvent survenir en fonction de la configuration de votre site web. Cependant, ces points devraient vous donner une bonne idée de ce à quoi vous attendre.

Pour suivre efficacement les SPA, il est essentiel de suivre ces bonnes pratiques :

Le respect de ces bonnes pratiques peut vous aider à éviter les problèmes courants et à collecter des données précises et fiables lors du suivi des SPA avec GA4 et GTM.

Le suivi des applications monopages (SPA) peut être délicat, mais le Google Tag Manager (GTM) côté serveur facilite grandement l'obtention de données précises. Que vous utilisiez les outils de GA4, le déclencheur d'historique de GTM ou la méthode de la couche de données, ces options vous aident à suivre correctement votre contenu dynamique.

Chez Stape.io, nous sommes experts en suivi côté serveur et nous fournissons des outils tels que l'intégration de la couche de données et le mode aperçu pour garantir le bon fonctionnement de votre configuration.

Vous souhaitez améliorer votre suivi ? Inscrivez-vous gratuitement dès aujourd'hui à Stape et laissez-nous vous aider à obtenir les résultats les plus précis pour vos applications de micro-paiement ! Après votre inscription, vous pourrez utiliser nos guides détaillés en texte et en vidéo sur la configuration du suivi côté serveur avec Stape.