Dernière mise à jour le 2 mars 2018.
De temps en temps, vous pourriez être invité à exécuter Google Tag Manager et/ou Google Analytics localement, c’est-à-dire sans l’avantage d’un serveur Web servant vos fichiers. En d’autres termes, vous chargez un fichier HTML depuis votre ordinateur dans le navigateur Web. Vous pouvez identifier un fichier exécuté localement par le dossier:/// protocole dans la barre d’adresse.
Maintenant, déployer Google Tag Manager sur ce fichier dans l’espoir d’exécuter des requêtes Google Analytics localement n’est pas très simple. Eh bien, en fait, le déploiement est assez simple, mais le personnaliser pour qu’il envoie réellement des coups utiles nécessite quelques ajustements.
Note! Vous serez ne pas pouvoir courir Aperçu mode avec des fichiers locaux. GTM utilise automatiquement le protocole relatif lors du téléchargement de la bibliothèque de prévisualisation, et le protocole relatif sur les fichiers locaux revient à
file:///pour les requêtes HTTP. Si quelqu’un propose une solution de contournement élégante, faites-le moi savoir dans les commentaires !
1. Modifier l’extrait de conteneur GTM
Tout d’abord, vous devez modifier l’extrait de conteneur Google Tag Manager lui-même. Il utilise protocole relatif dans les URL du chargeur de script, et puisque les fichiers locaux utilisent le dossier Schéma d’URI, vous devez indiquer explicitement à Google Tag Manager d’où récupérer la bibliothèque.
Donc, s’il s’agit de l’extrait de conteneur :
<!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXX');</script> <!-- End Google Tag Manager -->Vous pouvez voir comment les deux URL intégrées dans (//www.googletagmanager.com/ns.html... dans l’iframe et //www.googletagmanager.com/gtm.js... dans le chargeur de script lui-même) n’ont pas de jeu de protocole explicite. Donc, vous devez changer ces deux chaînes pour devenir https://www.googletagmanager.com/ns.html... et https://www.googletagmanager.com/gtm.js..., respectivement. C’est la seule modification que vous devez apporter pour charger Google Tag Manager.
Alors, bien joué !
2. Configurez la ou les balises Google Analytics
L’étape suivante consiste à configurer les balises Google Analytics. GA impose certaines restrictions au navigateur Web s’il est chargé avec ses paramètres par défaut :
-
L’hôte qui fait les demandes à GA doit avoir soit http ou alors https comme protocole.
-
L’hôte doit prendre en charge le stockage de l’ID client dans les cookies du navigateur.
-
L’hébergeur doit être en mesure de transmettre une valeur d’emplacement de document appropriée (l’URL) à Google Analytics.
Chacun de ces trois est violé par des fichiers locaux. Tout d’abord, les fichiers locaux utilisent le dossier:/// protocole, comme indiqué précédemment. Deuxièmement, les navigateurs Web désactivent les cookies lors de la navigation dans les fichiers locaux. Troisièmement, l’URL envoyée par le client à Google Analytics dans le champ Emplacement du document est celle avec le dossier Schéma d’URI, encore une fois, ce qui signifie qu’il n’est pas correctement analysé par GA dans un chemin de page approprié.
Heureusement, Google Analytics dispose de champs que vous pouvez définir pour lui faire passer ces trois vérifications.
Tout d’abord, vous devrez créer une variable d’assistance. C’est un Variable JavaScript personnalisée avec le nom Fonction vide et le code suivant dans :
function() { return function() {} } Ensuite, dans vos balises Google Analytics, parcourez jusqu’à Champs à définirpuis ajoutez les champs et valeurs suivants :
Nom de domaine: checkProtocolTask
Valeur du champ : {{Fonction vide}}
Nom de domaine: stockage
Valeur du champ : rien
Nom de domaine: page
Valeur du champ : {{Chemin de la page}}
Le premier champ indique à GA de ne pas vérifier le protocole valide (http ou https) lors de la demande à /collect.
Le deuxième champ indique à GA de ne pas utiliser de cookies de navigateur pour conserver l’ID client.
Le troisième champ indique à GA de remplacer l’emplacement du document défectueux par le nom de chemin de la page.
Et c’est tout! Avec ces étapes, vous pouvez suivre vos pages vues et vos événements dans vos fichiers locaux, si vous le souhaitez.
3. Conserver l’ID client
Cependant, l’inconvénient de la mise en place storage : none est que vous n’aurez plus d’identifiant client persistant. Ainsi, chaque chargement de page réinitialisera l’ID client, ce qui entraînera un nouvel utilisateur et une nouvelle session avec chaque page.
Nous ne voulons pas cela.
Au lieu de cela, nous pouvons contourner cela en utilisant le navigateur localStorage API pour stocker l’ID client et le récupérer à chaque requête.
Tu auras besoin deux nouvelles Variables.
Le premier est un Variable JavaScript personnalisée avec le nom JS – Définir _clientIdet le code suivant dans :
function() { return function() { if (window.Storage) { window.localStorage.setItem('_clientId', ga.getAll()[0].get('clientId')); } } } La seconde est une Variable JavaScript personnalisée avec le nom JS – Obtenir _clientIdet le code suivant dans :
function() { if (window.Storage) { return window.localStorage.getItem('_clientId') || undefined; } return; } La première variable stocke l’ID client dans le navigateur localStorageet la deuxième Variable le récupère au même endroit (ou renvoie indéfini si l’ID client n’est pas stocké).
Enfin, dans vos balises Google Analytics, rendez-vous à nouveau dans Champs à définir, et paramétrez les deux champs suivants :
Nom de domaine: hitCallback
Valeur du champ : {{JS – Définir _clientId}}
Nom de domaine: identité du client
Valeur du champ : {{JS – Obtenir _clientId}}
Et voilà ! Désormais, la première fois qu’une balise Google Analytics se déclenche, elle stocke l’ID client créé au cours du processus dans le navigateur localStorage. Pour chaque Tag suivant, jusqu’à localStorage est purgé manuellement, les balises récupèrent l’ID client stocké à partir de localStorage et l’envoyer avec les demandes. De cette façon, les sessions et les utilisateurs restent intacts et vous pourrez tirer des informations appropriées des données.
Résumé
Ce hack n’a probablement qu’une utilisation marginale, mais c’est toujours un moyen valable de suivre Google Analytics dans les fichiers locaux. Vous n’avez pas toujours l’avantage (ou les compétences pour déployer) un serveur Web, donc exécuter des fichiers localement est, à tout le moins, un coup de chapeau aux systèmes de gestion de contenu Notepad + FTP des années 1990.
En outre, vous pouvez également utiliser le piratage de l’ID client dans vos trackers habituels, si vous avez une raison d’éviter les cookies du navigateur pour les données persistantes.
