Accéder à l’objet Tracker dans votre balise de vue de page

Si vous avez lu mon post précédent sur la récupération du identité du client de l’objet de suivi Universal Analytics avec Google Tag Manager, vous avez peut-être convenu avec moi que c’est nul de ne pas pouvoir accéder à l’interface de l’objet de suivi en temps réel à l’aide de Google Tag Manager. C’est parce que tous les set les commandes que vous ajoutez à un modèle de balise Universal Analytics ont lieu avant la analytics.js est chargé et l’objet tracker est correctement créé.

L’autre problème avec le modèle de balise est qu’il n’y a de toute façon aucun moyen défini d’accéder à l’objet de suivi. Je veux dire, vous pouvez utiliser le set commande, bien sûr, mais vous ne pouvez pas vraiment utiliser get ou, d’ailleurs, utilisez toute autre méthode d’interface que vous voudriez, comme les plugins (plus d’informations à leur sujet dans cet article).

Donc, dans cet article, je veux montrer une méthode que vous pouvez utiliser pour extraire l’objet tracker pour toutes les informations que vous voulez, et en même temps vous assurer que les données sont utilisables au moment où votre balise de vue de page très importante se déclenche. Il s’agit d’une amélioration notable de la méthode dont j’ai parlé dans le post précédent, qui consistait essentiellement à utiliser un déclencheur chargé par fenêtre pour déclencher une balise d’événement non interactive avec l’ID client.

Cet article a été inspiré et alimenté intellectuellement par l’incroyable Carmen Mardiros (suivez-la : @carmenmardiros).

La méthode

Vous devrez utiliser le code HTML personnalisé pour cela. Je sais je sais! C’est un énorme pas en arrière par rapport au monde génial et modélisé auquel vous êtes habitué. L’utilisation d’une balise HTML personnalisée est nécessaire précisément pour les raisons que j’ai énumérées au début. Jusqu’à ce que le modèle de balise prenne en charge l’ajout de code JavaScript arbitraire entre le create et send commandes dans le modèle, vous devrez utiliser une solution de contournement.

L’avantage est que tout ce dont vous avez besoin pour le code HTML personnalisé est de configurer l’objet de suivi, puis de pousser un événement d’initialisation dans dataLayer, qui déclenchera ensuite votre véritable balise de vue de page. Ainsi, vous vous retrouverez avec une balise supplémentaire et un très léger retard sur votre balise de vue de page, mais le retard est si minime qu’il ne fait pas vraiment de différence.

Voici ce qui va se passer :

1. L’objet Tracker pour votre code UA est créé

2. L’ID client est extrait de l’objet tracker dès qu’il est disponible

3. Lorsque l’ID client a été extrait, il est poussé dans dataLayer avec l’événement d’initialisation

4. Cet événement déclenche votre balise de vue de page et vous pouvez utiliser une variable de couche de données normale pour récupérer l’ID client

La balise HTML personnalisée

Alors, commencez par créer un nouveau Balise HTML personnaliséeet assurez-vous qu’il se déclenche sur le déclencheur le plus tôt possible – généralement le déclencheur Toutes les pages.

En ce qui concerne le code qu’il contient, vous l’obtiendrez auprès de votre administrateur Google Analytics, sous Paramètres de propriété -> Informations de suivi -> Code de suivi.

Copiez-collez cela dans votre balise HTML personnalisée. Maintenant, supprimez la ligne qui dit ga('send', 'pageview');. Nous supprimons cela, car nous souhaitons toujours utiliser le modèle de balise réel pour envoyer l’appel de page vue.

Maintenant, si vous devez apporter des modifications, telles que l’ajout de trackers supplémentaires, vous pouvez les configurer ici. Ce guide a été écrit avec une configuration assez basique à l’esprit.

REMARQUE! Toute modification du tracker, telle que allowLinker : trueles paramètres de cookies personnalisés, etc. doivent être configurés sur ce tracker HTML personnalisé, de sorte que l’ID client que vous récupérerez à partir de ce tracker personnalisé corresponde à celui utilisé par votre balise de vue de page principale.

La partie suivante est importante. Le analytics.js la bibliothèque est chargée de manière asynchronece qui signifie que vous ne savez pas réellement quand l’objet tracker a été créé et son get méthode peut être invoquée. Ainsi, la bibliothèque vous permet de passer une fonction de rappel au ga objet, qui sera exécuté une fois la bibliothèque chargée et le tracker créé. Comme je le dis au début : cette fonctionnalité n’est pas disponible dans le modèle de tag par défautc’est pourquoi nous avons besoin de cette solution de contournement.

Pour ajouter le rappel, vous ajoutez les lignes de code suivantes après le ga('create', ...); expression:

ga(function(tracker) {   ...any methods which need the tracker object }); 

Tout code dans la fonction de rappel ne sera exécuté qu’une fois la bibliothèque chargée, le tracker créé et l’objet tracker répondant aux méthodes d’interface. Dans cette fonction de rappel, nous allons d’abord récupérer l’ID client, puis le pousser dans dataLayer avec un événement d’initialisation :

ga(function(tracker) {   window.dataLayer.push({     'event' : 'trackerReady',     'cid' : tracker.get('clientId')   }); }); 

Comme vous pouvez le voir, j’invoque le get commande de l’objet tracker, et demandant de récupérer l’ID client du tracker. Cela ne serait pas possible sans la ga(function(tracker) {}) appel.

Mon exemple personnel et fini pour la balise HTML personnalisée ressemble à ceci. N’oubliez pas que toutes les personnalisations dont vous avez besoin pour l’objet de suivi doivent également être effectuées ici. Assurez-vous donc de lire comment configurer des configurations avancées pour votre code de suivi Universal Analytics.

<script>   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');    ga('create', '{{GA Tracking Code}}', 'auto', {'allowLinker' : 'true'});     ga('require', 'simoPlugin'); // Any plugins you want to load would go here     ga(function(tracker) {       window.dataLayer.push({           'event' : 'trackerReady',           'cid' : tracker.get('clientId')       });   }); </script>

Juste quelques commentaires sur les personnalisations :

• {{Code de suivi GA}} est une variable de table de consultation qui renvoie l’ID de propriété en fonction de quelques conditions.

• ga('require', 'simoPlugin'); est l’endroit où vous chargeriez tous les plugins que vous souhaitez utiliser avec vos balises. Cela manque dans les modèles de balises, et j’espère vraiment que nous aurons bientôt la possibilité de charger des plugins.

C’est tout pour la balise HTML personnalisée. Le reste est des choses très simples.

Variable de couche de données et déclencheur d’événement personnalisé

Les deux autres choses dont vous aurez besoin sont un Variable de couche de données pour l’ID client, et un Déclencheur d’événement personnalisé pour le trackerReady un événement.

Rien de compliqué à ce sujet. Le déclencheur est également très simple :

Une fois que vous avez ces deux configurations, tout ce que vous avez à faire est de modifier votre balise de vue de page existante pour tenir compte de ces changements.

Mon tag, par exemple, a maintenant l’ID client comme dimension personnalisée, et il est configuré pour se déclencher avec le Événement – trackerReady Déclencheur que nous venons de créer.

Résumé

C’est l’un de ces articles qui, je l’espère, deviendra bientôt obsolète. Les modèles de balises Universal Analytics actuels ne vous permettent pas d’exécuter du code JavaScript arbitraire (par exemple, charger des plug-ins) ou d’accéder à l’objet de suivi après sa création, mais avant que le hit ‘page vue’ est envoyé.

C’est pourquoi vous avez besoin de cette solution de contournement. D’un autre côté, ce n’est pas exactement une chose très complexe à faire, car vous ne créez qu’une balise supplémentaire pour configurer le tracker et canaliser toutes les balises suivantes pour qu’elles ne se déclenchent pas tant que la fonction de rappel de l’objet tracker n’a pas été exécutée.

Le temps nous dira quand le modèle de balise Universal Analytics prendra en charge ces fonctionnalités. Personnellement, j’espère bientôt. Google Tag Manager est déjà le de facto mécanisme de mise en œuvre pour Universal Analytics, mais s’il ne prend pas en charge la configuration avancée de l’objet de suivi, les grandes organisations en particulier pourraient être dissuadées de migrer jusqu’à ce que ces fonctionnalités soient prises en charge prêtes à l’emploi.