Vous pouvez utiliser Balisage côté serveur dans Google Tag Manager pour créer votre propre proxy Universal Analytics personnalisé.
Ce proxy se présente sous la forme d’un nouveau Client modèle personnalisé, qui prend l’entrée /collect demandes et les envoie à Google Analytics. Ce faisant, il renvoie également le _ga biscuit dans un Set-Cookie header, empêchant ainsi Intelligent Tracking Prevention de Safari de limiter son expiration à seulement 7 jours.
Vous pourriez également être intéressé par la solution de Google pour migrer des cookies JavaScript vers ceux définis dans les en-têtes HTTP.
J’ai également créé une vidéo qui est similaire bien qu’un peu plus avancé que ce tutoriel écrit.
NOTE! La vidéo a une omission importante. Lors de la création du Client modèle, assurez-vous de mettre à jour l’autorisation “Envoie des requêtes HTTP” pour inclure “Autoriser les domaines Google”. Sinon, le proxying de analytics.js ne fonctionne pas.
Si la vidéo ne fonctionne pas, vous pouvez la regarder ici.
X
La newsletter Mijoter
Abonnez-vous à la newsletter Simmer pour recevoir les dernières nouvelles et le contenu de Simo Ahava dans votre boîte de réception !
Astuce 117 : Créer un client Universal Analytics
Pour que les choses fonctionnent, vous avez besoin de quelques éléments :
- Une configuration de balisage côté serveur entièrement fonctionnelle.
- Un client s’exécutant dans le conteneur du serveur (nous allons le construire maintenant).
- Une balise Universal Analytics dans le conteneur Server (je vais également l’instruire).
- Modifications à tous les balises Universal Analytics se déclenchent dans le conteneur Web (oui, je vais également vous aider).
Vous utiliserez balises Universal Analytics standard dans le conteneur Web, mais vous définirez leur champ URL de transport pour qu’il pointe vers votre point de terminaison de serveur. Ces balises ne seront utilisées que pour envoyer les données au conteneur du serveur plutôt que directement à Google Analytics.
Suivant, tous les balises Universal Analytics dans le conteneur Web nécessiteront la modification suivante dans leurs champs à définir (il est recommandé d’utiliser une variable de paramètres Google Analytics).
Ce champ empêche le JavaScript d’Universal Analytics d’actualiser le _ga biscuit. Vous voulez faire cela parce que tout le but de la Set-Cookie l’en-tête que nous allons configurer dans le conteneur du serveur est d’empêcher le navigateur Web de définir le _ga cookie avec JavaScript. Tous les cookies définis par JavaScript sont empêchés par Safari d’avoir une expiration supérieure à 7 jours.
N’oubliez pas que ce champ doit être défini dans tous Balises Universal Analytics. Même une seule balise sans cela réécrira le cookie lorsqu’il se déclenchera et annulera ainsi tout avantage que vous avez tiré du client personnalisé.
Enfin, le proxy lui-même.
Créer le client
Pour construire le proxy, vous avez besoin d’un nouveau Modèle client, construit dans le conteneur Serveur. Dans l’interface utilisateur du conteneur de serveur, accédez à Modèles et cliquez pour créer un nouveau Client modèle.
Dans le premier onglet, donnez un nom au modèle et une brève description. Si vous le souhaitez, vous pouvez également ajouter une image d’icône.
Pour ce modèle particulier, vous pouvez ignorer le Des champs languette. Nous n’avons pas besoin du client pour prendre en charge toute personnalisation.
Dans Codecopiez-collez ce qui suit :
const claimRequest = require('claimRequest');
const extractEventsFromMpv1 = require('extractEventsFromMpv1');
const getCookie = require('getCookieValues');
const getRemoteAddress = require('getRemoteAddress');
const getRequestHeader = require('getRequestHeader');
const isRequestMpv1 = require('isRequestMpv1');
const returnResponse = require('returnResponse');
const runContainer = require('runContainer');
const setCookie = require('setCookie');
const setPixelResponse = require('setPixelResponse');
const setResponseHeader = require('setResponseHeader');
// Get User-Agent and IP from incoming request
const ua = getRequestHeader('user-agent');
const ip = getRemoteAddress();
// Check if request is Measurement Protocol
if (isRequestMpv1()) {
// Claim the request
claimRequest();
const events = extractEventsFromMpv1();
const max = events.length - 1;
events.forEach((event, i) => {
// Unless the event had IP and user-agent overrides, manually
// override them with the IP and user-agent from the request
// That way the GA collect call will appear to have originated
// from the user's browser / device.
if(!event.ip_override && ip) event.ip_override = ip;
if(!event.user_agent && ua) event.user_agent = ua;
// Pass the event to a virtual container
runContainer(event, () => {
if (i === max) {
// Rewrite the _ga cookie to avoid Safari expiration.
const ga = getCookie('_ga');
if (ga && ga.length) {
setCookie('_ga', ga[0], {
domain: 'auto',
'max-age': 63072000,
path: '/',
secure: true,
sameSite: 'lax'
});
}
setPixelResponse();
// Make sure no CORS errors pop up with the response
const origin = getRequestHeader('Origin');
if (origin) {
setResponseHeader('Access-Control-Allow-Origin', origin);
setResponseHeader('Access-Control-Allow-Credentials', 'true');
}
returnResponse();
}
});
});
}
Une fois les API chargées, le client récupère l’adresse IP et la chaîne User-Agent de la source avec ceci :
const ua = getRequestHeader('user-agent');
const ip = getRemoteAddress();
Ensuite, le isRequestMpv1 L’API est utilisée pour vérifier automatiquement si la demande HTTP entrante est une demande de protocole de mesure (v1, c’est-à-dire Universal Analytics). Si c’est le cas, alors le Client réclamations la demande, et empêche ainsi les autres Clients de la traiter.
Le reste du client est concerné par l’itération de tous les événements de la demande, en les analysant automatiquement dans le schéma d’événement requis (à l’aide de la extractEventsFromMpv1 API) et en exécutant le conteneur avec tous les événements du lot.
En règle générale, il n’y aura qu’un seul événement dans chaque lot.
if (!event.ip_override && ip) event.ip_override = ip;
if (!event.user_agent && ua) event.user_agent = ua;
Les deux lignes de code ci-dessus ont une fonction très importante. Ils prennent le utilisateurs Adresse IP et chaîne User-Agent et transmettez-les à l’objet de données d’événement afin que la balise Universal Analytics puisse ensuite les ajouter dans la demande sortante à Google. Si vous ne les avez pas définis, l’adresse IP et la chaîne User-Agent seraient définies sur celles du conteneur Server lui-même, ce qui n’est pas très utile.
Une fois tous les événements traités par le conteneur, le bloc de code suivant est exécuté :
const ga = getCookie('_ga');
if (ga && ga.length) {
setCookie('_ga', ga[0], {
domain: 'auto',
'max-age': 63072000,
path: '/',
secure: true,
sameSite: 'lax'
});
}
Ce morceau de code vérifie la requête HTTP entrante pour un cookie nommé _ga. S’il en trouve un, il réécrit le cookie avec un Set-Cookie header, le convertissant ainsi en cookie HTTP et aidant à résoudre les problèmes d’expiration avec l’ITP de Safari.
setPixelResponse() configure automatiquement la réponse à la source de la demande pour qu’elle ressemble à une image GIF 1×1 avec des en-têtes de contournement du cache. Enfin, returnResponse() est invoqué pour signaler que le Client a terminé son travail et peut répondre à la source de la demande initiale.
Définir les autorisations
Dans l’éditeur de modèles, visitez le Autorisations languette.
Définissez les autorisations comme suit :
- Accède à la réponse: N’importe quel
- Lit les valeurs de cookie:
_ga - Demande de lecture: N’importe quel
- Définit un cookie: Réglez comme dans l’image ci-dessus.
Une fois que vous avez terminé avec les autorisations, vous pouvez Sauvegarder le modèle et quittez l’éditeur de modèles.
Créer le client, le déclencheur et la balise
Ensuite, allez à Clients et cliquez sur le Nouveau bouton pour créer un nouveau Client.
Choisissez votre nouveau modèle de client dans la liste des types de clients disponibles. Ensuite, réglez le Priorité champ à une valeur élevée. Il est important que cette valeur soit supérieure à tout autre Universal Analytics Client que vous pourriez avoir dans le conteneur.
Donnez au client un nom descriptif (vous en aurez besoin sous peu), puis sauvegarder cette Cliente.
Ensuite, rendez-vous au Mots clés l’interface utilisateur et cliquez sur le Nouveau bouton pour créer une nouvelle balise.
Choisir Google Analytics : Analyse universelle comme type de balise. Il n’est en aucun cas nécessaire de configurer cette balise.
Sous Déclencheurscliquez sur la zone de déclenchement pour sélectionner un déclencheur.
Dans la superposition, cliquez sur le bleu + dans le coin supérieur droit pour créer un nouveau déclencheur.
Réglez le déclencheur pour qu’il ressemble à ce qui précède. Il a juste besoin de la seule condition. Le nom que vous vérifiez est le nom que vous venez de donner au nouveau client.
Si vous ne voyez pas Nom du client dans la liste des variables disponibles, cela signifie que vous ne l’avez pas activé en tant que Variable intégrée encore. Sélectionner Choisissez la variable intégrée dans la liste déroulante, puis sélectionnez Nom du client dans la superposition qui s’affiche.
Une fois terminé, enregistrez le déclencheur. Ensuite, enregistrez la balise.
Vous avez maintenant le Clientle déclencheret le étiqueter.
Vous êtes prêt à tester l’ensemble de la configuration !
Aperçu et test
Clique le Aperçu bouton dans le conteneur Serveur. Un nouvel onglet devrait s’ouvrir avec le panneau Aperçu du conteneur Serveur.
Dans ton conteneur webcliquez de la même manière sur le Aperçu bouton.
Vous devriez maintenant avoir à la fois votre conteneur Web et le conteneur Serveur en mode Aperçu.
Ensuite, accédez à votre site et faites quelque chose pour déclencher l’une des balises Universal Analytics que vous avez conçues pour la collecte côté serveur. Une fois la balise déclenchée, vérifiez le panneau Aperçu de votre conteneur de serveur. Vous devriez voir quelque chose comme ceci :
Si vous le voyez et qu’il n’y a pas d’erreurs dans l’onglet Erreurs, cela devrait fonctionner !
Vous pouvez déboguer davantage en sélectionnant le Analytique universelle tag lui-même, puis en cliquant sur le Requêtes HTTP sortantes boîte. Cela ouvre les détails de la demande à Google Analytics.
Vérifiez le rapport en temps réel dans votre vue Google Analytics (vous ont créé une propriété distincte pour vos hits de balisage côté serveur, n’est-ce pas ?), et assurez-vous que les données arrivent.
Enfin, vérifiez les cookies dans votre navigateur. Le _ga cookie doit avoir la valeur de Sécurisé mis à true et la valeur de MêmeSite mis à Lax. Si c’est ce que vous voyez, la réécriture des cookies a fonctionné !
Résumé
Il y a beaucoup de nouveautés ici, donc je ne serais pas surpris si c’est difficile à mettre en place. Cependant, si vous suivez attentivement ce guide et assurez-vous qu’aucune balise malveillante ne se déclenche sans cookieUpdatele client doit bien faire son travail.
Si vous rencontrez des problèmes, faites-le moi savoir dans les commentaires et nous pourrons jeter un coup d’œil ensemble.
Le balisage côté serveur est le nouveau paradigme des solutions de balisage de Google. Je peux voir beaucoup de choses étonnantes que vous pouvez faire avec lui à l’avenir, mais en ce moment, vous pouvez également l’utiliser pour améliorer progressivement la qualité de vos données avec des solutions telles que celle-ci.