Introduction au taggage côté serveur

Le taggage côté serveur est une nouvelle façon d'utiliser Google Tag Manager pour instrumenter votre application sur tous les appareils. Les conteneurs de serveur utilisent le même modèle de balise, de déclencheur et de variable que d'habitude, tout en fournissant de nouveaux outils qui vous permettent de mesurer l'activité des utilisateurs partout où elle se produit.

Une configuration type de taggage sans taggage côté serveur repose sur un conteneur sur la page qui envoie les données de mesure à différents serveurs de collecte. La figure 1 illustre comment un conteneur Web Tag Manager exécuté dans un navigateur Web envoie des données à plusieurs serveurs.

Schéma d'un site équipé d'un conteneur Web Google Tag Manager

Figure 1: Schéma d'un site instrumenté pour utiliser un conteneur Web Google Tag Manager

En revanche, un conteneur serveur ne s'exécute ni dans le navigateur, ni sur le téléphone de l'utilisateur. Au lieu de cela, il s'exécute sur un serveur que vous contrôlez.

Schéma d'un site instrumenté à l'aide d'un conteneur de taggage côté serveur

Figure 2: Exemple de configuration de taggage utilisant un conteneur serveur

Le serveur s'exécute dans votre propre projet Google Cloud Platform ou dans un environnement différent de votre choix, et vous seul avez accès aux données du serveur jusqu'à ce que vous décidiez de les envoyer ailleurs. Vous bénéficiez d'un contrôle total sur la forme et l'emplacement des données acheminées à partir du serveur. Les tags sont créés à l'aide de la technologie JavaScript en bac à sable. Les autorisations vous offrent une visibilité sur ce que la balise peut faire, et les règles vous permettent de définir des limites autour du conteneur.

Le serveur reçoit les requêtes Web de l'appareil de l'utilisateur et les transforme en événements. Chaque événement est traité par les balises, les déclencheurs et les variables du conteneur. Les balises, les déclencheurs et les variables d'un conteneur de serveur fonctionnent exactement comme dans d'autres types de conteneurs: les déclencheurs examinent chaque événement pour rechercher certaines conditions et, le cas échéant, déclenchent les balises qui envoient les données d'événement à traiter.

Ce modèle introduit deux questions importantes concernant les conteneurs de serveur:

  • Comment les données de mesure sont-elles transmises de l'appareil de l'utilisateur au conteneur serveur ?
  • Comment les données de mesure envoyées à un conteneur de serveur sont-elles transformées en événement ?

La réponse à ces deux questions est un nouveau type d'entité à utiliser dans les conteneurs serveur: un client.

Fonctionnement des clients

Les clients sont des adaptateurs entre le logiciel exécuté sur l'appareil d'un utilisateur et le conteneur de votre serveur. Le client reçoit des données de mesure d'un appareil, les transforme en un ou plusieurs événements, achemine les données à traiter dans le conteneur et empaquette les résultats pour les renvoyer au demandeur.

C’est beaucoup de choses ! Intéressons-nous de plus près à chaque partie. La figure 3 montre les données qui circulent dans le conteneur serveur à partir du navigateur Web de l'utilisateur, puis de votre serveur Web vers le conteneur serveur.

Schéma d'un site instrumenté à l'aide d'un conteneur de taggage côté serveur

Figure 3: Un client différent gère chaque flux de données.

Les clients reçoivent des données de mesure depuis un appareil. Supposons que vous souhaitiez mesurer l'activité des utilisateurs à trois endroits: sur un site Web, dans une application pour téléphone et sur un grille-pain intelligent. Votre site Web utilise Google Analytics, votre application pour téléphone utilise Firebase Analytics et votre grille-pain utilise un protocole propriétaire appelé "ToastMeasure".

L'instrumentation de ces trois appareils avec Google Tag Manager nécessiterait normalement un conteneur différent pour chaque plate-forme. Étant donné que le conteneur serveur ne s'exécute pas sur l'appareil, le même conteneur peut gérer l'instrumentation d'analyses pour les trois plates-formes d'appareils. Il y a toutefois un problème. Ces appareils ne communiquent pas tous de la même manière. Le protocole Google Analytics est différent du protocole ToastMeasure. C'est là que les clients entrent en jeu.

À la place de ces trois conteneurs, votre conteneur serveur dispose de trois clients. Chaque requête entrant dans le conteneur sera traitée par chaque client dans l'ordre de priorité, en commençant par le client ayant la priorité la plus élevée. La première chose que chaque client fera est de décider s'il sait comment traiter ce type de requête. Si c'est le cas, le client "revendique" la requête et passe à l'étape suivante du traitement. Le fait de revendiquer la requête empêche les clients suivants de s'exécuter. Si le client ne peut pas traiter la requête, il ne fait rien et permet aux autres clients de décider s'ils doivent traiter la requête ou non.

Les clients transforment les données de requête en un ou plusieurs événements. Une fois que le client ToastMeasure a revendiqué une requête, il doit la transformer en un élément compréhensible par le reste du conteneur. Un élément est un ensemble d'événements.

Les événements sont des événements qui se produisent que vous souhaitez mesurer. Il peut s'agir de n'importe quel élément : start_toasting, finish_toasting ou buy_bread. Il existe des recommandations concernant la structure des événements générés par un client, mais la seule condition requise est que le reste du conteneur les comprenne.

Les clients exécutent le conteneur. Le client a revendiqué la requête et l'a transformée en événements. L'heure est venue pour les balises, les déclencheurs et les variables. Le client transmet chaque événement au reste du conteneur pour un traitement ultérieur.

Les clients regroupent les résultats pour les renvoyer à l'appareil. Une fois le conteneur exécuté, il est temps de répondre au grille-pain. La réponse peut prendre plusieurs formes. Peut-être que le client dit simplement « OK, terminé ». L'un des tags veut peut-être rediriger la demande vers un autre serveur de collecte. Ou peut-être que l'une des balises indique aux lumières du grille-pain de changer de couleur. Quelle que soit la méthode choisie, le client doit préparer les résultats et les renvoyer au demandeur.

Heureusement, Tag Manager s'en charge en grande partie pour vous. Les conteneurs serveur intègrent trois clients: Google Analytics 4, Google Analytics: Universal Analytics et le protocole de mesure. Ces clients fournissent les outils dont vous avez besoin pour commencer à instrumenter votre application dès que vous avez créé votre conteneur.

Un bref exemple

Prenons un exemple rapide pour voir comment toutes les pièces s'emboîtent. Dans cet exemple, vous allez créer les éléments suivants:

  1. Un site Web simple qui utilise gtag.js pour envoyer un événement click à un conteneur de serveur.
  2. Un client Google Analytics 4 qui reçoit l'événement.
  3. Déclencheur qui s'exécute lors d'un événement click.
  4. Une balise Google Analytics 4 qui envoie les données d'événement à Google Analytics pour traitement.

Pour cet exemple, nous supposons que vous avez déjà créé et déployé votre conteneur de serveur.

Configurer gtag.js

Commencez par configurer gtag.js afin qu'il envoie les données à votre conteneur serveur. Avec gtag.js, l'envoi de données à votre conteneur serveur fonctionne comme l'envoi de données à Google Analytics, avec une seule modification. Comme dans la page d'exemple ci-dessous, définissez l'option de configuration server_container_url pour qu'elle pointe vers le conteneur serveur.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });
</script>

Remplacez TAG_ID par l'ID de votre balise. Remplacez https://analytics.example.com par l'URL de votre conteneur de serveur.

Ensuite, ajoutez une fonction sendEvent() pour gérer les événements click:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

Remplacez TAG_ID par l'ID de votre balise. Remplacez https://analytics.example.com par l'URL de votre conteneur de serveur.

Avec cette configuration, les gestionnaires d'événements tels que la fonction sendEvent() incluse dans cet exemple enverront un événement click à votre conteneur serveur.

Client Google Analytics 4

Votre conteneur a besoin qu'un client reçoive l'événement une fois qu'il atteint le serveur. Heureusement, les conteneurs serveur sont fournis avec un client Google Analytics 4 préinstallé, ce qui vous a déjà permis de terminer cette étape.

Déclencheur de clic

Créez ensuite un déclencheur qui s'active lors de l'événement click. Créez un déclencheur personnalisé qui se déclenche lorsque la variable intégrée Nom de l'événement est égale à "clic".

configuration du déclencheur

Balise Google Analytics 4

Enfin, associez une balise GA4 au déclencheur. Comme pour les clients, un conteneur de serveur inclut une balise GA4. Créez la balise, configurez vos paramètres, et votre conteneur est maintenant configuré. Les clients GA4 et les balises GA4 sont conçus pour fonctionner ensemble. Cela signifie qu'il vous suffit de créer une balise GA4 et sa configuration sera automatiquement extraite des événements provenant du client.

Prévisualiser le conteneur

Maintenant que le conteneur est configuré, cliquez sur Aperçu. Accédez à votre site Web dans une autre fenêtre de navigateur. À mesure que des requêtes et des événements sont envoyés à votre conteneur de serveur, les requêtes et les événements apparaissent à gauche de la page d'aperçu.

Une fois que vous êtes satisfait de vos modifications, publiez le conteneur de serveur.

Configurer votre serveur pour le mode production avec une diffusion propriétaire

Avant d'envoyer tout trafic de production vers votre conteneur serveur, nous vous recommandons vivement d'installer le serveur sur votre domaine propriétaire et de le mettre à niveau en mode de production.