Configuration avancée: suivi Web (Analytics.js)

Ce document fournit une vue d’ensemble de la bibliothèque de données de données analytiques.js.

fragment JavaScript

Pour activer Google Analytics sur votre site Web, vous devez ajouter un fragment JavaScript avant l’étiquette </head> fermeture de la page. Ceci fait partie du fragment:

(function(i,s,o,g,r,a,m){i=r;i=i||function(){(i.q=i.q||).push(arguments)},i.l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o);a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

Lorsque le fragment est exécuté, crée d’abord une nouvelle fonction globale appelée ga Ensuite, la fragment charge de manière asynchrone de la bibliothèque analytique.js sur la page.

La fonction globale ga est le mode principal d’interaction avec la bibliothèque d’analyses .js La fonction accepte une séquence de paramètres, où le premier représente une commande Google Analytics. Par exemple, dans le fragment par défaut:

ga('create', 'UA-XXXX-Y', 'auto'); // Creates a tracker.ga('send', 'pageview'); // Sends a pageview.

La première ligne appelle la commande create et, la deuxième, send.

Bien que le code JavaScript charge la bibliothèque analytique.js Asynchrone, le a été conçu pour être conçu pour être conçu pour utilisé avant la charge de la bibliothèque. Lorsque vous commencez à exécuter les commandes pour la première fois, chacun est ajouté à une file d’attente. Lorsque la bibliothèque termine le chargement, toutes les commandes de la file d’attente et les nouvelles commandes sont exécutées immédiatement. De cette manière, les programmeurs peuvent ignorer la nature asynchrone de Google Analytics et se concentrer sur l’utilisation de la fonction ga.

Modifier le nom de l’objet global

Dans certains cas, il est possible qu’un objet sur la page utilise déjà le nom de la variable ga. Pour empêcher l’objet d’être annulé, vous pouvez modifier le nom de la fonction ga, par exemple, sur __gaTracker. Pour cela, il vous suffit de remplacer le paramètre ga dans le fragment précédent:

(function(i,s,o,g,r,a,m){i=r;i=i||function(){(i.q=i.q||).push(arguments)},i.l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o);a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker');

Après, vous pouvez Utilisez __gaTracker au lieu de ga pour appeler les commandes:

__gaTracker('create', 'UA-XXXX-Y', 'auto');__gaTracker('send', 'pageview');

Référence de fragment JavaScript

Dans la référence suivante, le fragment JavaScript de base est affiché, à quels commentaires et espaces vides ont été ajoutés:

<!-- Google Analytics --><script>/** * Creates a temporary global ga object and loads analy tics.js. * Paramenters o, a, and m are all used internally. They could have been declared using 'var', * instead they are declared as parameters to save 4 bytes ('var '). * * @param {Window} i The global context object. * @param {Document} s The DOM document object. * @param {string} o Must be 'script'. * @param {string} g URL of the analytics.js script. Inherits protocol from page. * @param {string} r Global name of analytics object. Defaults to 'ga'. * @param {DOMElement?} a Async script tag. * @param {DOMElement?} m First script tag in document. */(function(i, s, o, g, r, a, m){ i = r; // Acts as a pointer to support renaming. // Creates an initial ga() function. The queued commands will be executed once analytics.js loads. i = i || function() { (i.q = i.q || ).push(arguments) }, // Sets the time (as an integer) this tag was executed. Used for timing hits. i.l = 1 * new Date(); // Insert the script tag asynchronously. Inserts above current tag to prevent blocking in // addition to using the async attribute. a = s.createElement(o), m = s.getElementsByTagName(o); a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');ga('create', 'UA-XXXX-Y', 'auto'); // Creates the tracker with default parameters.ga('send', 'pageview'); // Sends a pageview hit.</script><!-- End Google Analytics -->

Fragment asynchrone alternatif

Bien que le fragment analytique canonique.js décrit ci-dessus garantit que le script sera chargé et exécuté de manière asynchrone dans tous les navigateurs, a l’inconvénient de ne pas permettre aux navigateurs modernes de faire une charge préalable du script. .

Le fragment alternatif suivant ajoute une compatibilité de la charge précédente, qui fournit une petite impulsion de performance dans les navigateurs modernes, mais Il peut être détérioré dans la charge et l’exécution synchrones dans IE9 et dans les navigateurs pour les périphériques mobiles précédents, qui ne reconnaissent pas l’attribut async. Nous vous suggérons d’utiliser ce fragment si vos visiteurs utilisent principalement des navigateurs modernes pour accéder à votre site.

<!-- Google Analytics --><script async src='//www.google-analytics.com/analytics.js'></script><script>window.ga=window.ga||function(){(ga.q=ga.q||).push(arguments)};ga.l=+new Date;ga('create', 'UA-XXXX-Y', 'auto');ga('send', 'pageview');</script><!-- End Google Analytics -->

Créez des objets de suivi

pour envoyer des données Pour Google Analytics, vous devez créer un objet de suivi. Chacun de ces objets peut envoyer des données à une seule propriété Web Google Analytics. Pour créer un objet de suivi, le fragment par défaut utilise le code suivant:

ga('create', 'UA-XXXX-Y', 'auto');

où le premier paramètre de la fonction ga est la commande create et la seconde est l’ID de propriété Web sur lequel les données seront envoyées.

personnaliser les objets de suivi

La personnalisation de l’objet de suivi doit être effectuée lorsqu’elle est créée initialement, passant à la fonction ga un objet de configuration en tant que dernier paramètre. Par exemple, pour annuler certaines des options de configuration de la cookie, elle est utilisée:

ga('create', 'UA-12345-6', { 'cookieDomain': 'foo.example.com', 'cookieName': 'myNewName', 'cookieExpires': 20000});

Dans l’exemple précédent, domaine, expiration du nom et de la cookie de l’heure ont été modifiés Utilisation de l’objet de configuration en option.

Vérifiez la section uniquement de la référence Créer un champ de commande Document pour obtenir des informations complètes sur tous les champs pouvant être configurés dans la commande Créer.

Test à Localhost

Dans certains cas, vous pouvez essayer Analtics.js à partir d’un serveur Web qui fonctionne sur localhost. Configurer les cookies analytiques.JS, vous devez désactiver le domaine de cookie par défaut par:

ga('create', 'UA-XXXX-Y', { 'cookieDomain': 'none'});

Envoyer des données

Une fois qu’un objet de suivi a été créé et associé Avec une propriété Web, vous pouvez utiliser la commande send pour envoyer des données à cette propriété Web. Les données envoyées à Google Analytics seront appelées hit et la bibliothèque analytique.js vous permettent d’envoyer différents types de données en spécifiant un type de hit (hitType). Lorsque vous utilisez la commande send, vous devez également spécifier la valeur de des données que vous souhaitez envoyer.

Par exemple, pour envoyer une vidéo Hit Vista, il est utilisé:

ga('send', 'pageview');

de cette manière, les données sont envoyées pour l’URL par défaut à Google Analytics.

Objet de nom de champ

Dans certains cas, vous pouvez annuler plusieurs valeurs envoyées en tant que vue de page. La bibliothèque Analytics.js vous permet d’envoyer un objet Nom de champ comme dernier paramètre de la commande send. Ceci est utile car il vous permet de définir de nombreuses propriétés supplémentaires de la page, par exemple, son titre:

ga('send', 'pageview', { 'page': '/my-new-page', 'title': 'My New Page Title'});

Vérifiez la référence de champ des champs à obtenir Informations complètes sur toutes les manières dans lesquelles un objet de suivi peut être configuré.

Configurez le rappel du coup

dans certains cas, par exemple, lors du suivi des liaisons de sortie, vous pouvez savoir lorsque l’objet de suivi de l’envoi des données est terminé. De cette manière, vous pouvez envoyer un utilisateur à votre destination uniquement après que votre clic a été communiquée à Google Analytics. Pour résoudre cette situation, la commande send vous permet de spécifier une fonction hitCallback dans l’objet Nom du champ qui sera exécuté en tant qu’analytique. JS a fini d’envoyer les données. Ensuite, nous vous montrons comment configurer la fonction hitCallback:

ga('send', 'pageview', { 'page': '/my-new-page', 'hitCallback': function() { alert('analytics.js done sending data'); }});

Dans cet exemple, l’objet de champ Nom Définissez le paramètre page et fonction hitCallback. Une fois que l’objet de suivi a terminé d’envoyer les données, une zone d’alerte s’affichera sur l’utilisateur.

Configurez les paramètres dans plusieurs commandes Envoyer

Dans certains cas, il est recommandé de définir un paramètre et que la valeur est maintenue dans plusieurs commandes send. Par exemple, si vous avez une page Web, vous souhaitez suivre une vue de page et deux événements. Si vous souhaitez annuler le chemin de chaque touché pour un, vous pouvez définir le nouvel itinéraire dans chaque commande send ou utiliser la méthode Comme suit:

ga('set', 'page', '/my-custom-page');ga('send', 'pageview');ga('send', 'event', 'image1', 'clicked');ga('send', 'event', 'image2', 'clicked');

Lorsque ce code est exécuté, la page substituée /my-custom-page sera envoyée aux trois Commandes d’envoi.

Envoyer des hits useraCon

Pour envoyer des hits avec navigator.sendBeacon, configure le paramètre useBeacon comme true. La méthode navigator.sendBeacon garantit que les données sont transmises même si l’utilisateur quitte votre page ou ferme le navigateur avant la fin de la demande. Ceci est très utile dans les cas où vous souhaitez suivre un événement avant qu’un utilisateur ne sort de votre site, sans retarder la navigation.

ga('send', 'event', 'click', 'download-me', {useBeacon: true});

Fonctions de transmission

Parfois, le code n’est exécuté qu’après la charge de la bibliothèque Analytics.js. Pour ce faire, vous pouvez envoyer une fonction sous forme de paramètre sur la fonction ga.

ga(function() { alert('library done loading');});

Lorsque vous finissez de charger La bibliothèque, l’utilisateur verra une boîte d’alerte.

Obtenir des paramètres

avec analytics.js, vous pouvez récupérer l’une des valeurs configurées dans l’objet de suivi par Moyens de la commande get. Étant donné que l’objet de suivi n’est créé que lorsque la bibliothèque a été chargée, vous devez obtenir des paramètres d’une fonction envoyée.

ga(function(tracker) { var defaultPage = tracker.get('page');});

dans cet exemple, la fonction USA A paramètre nommé tracker. Lorsque la charge de la bibliothèque se termine, la fonction est exécutée et la valeur de tracker sera l’objet de suivi par défaut créé à la suite de la première commande create. Ensuite, l’objet tracker est utilisé pour obtenir la valeur de la page par défaut.

Appliquer SSL (https)

« Par défaut, Google Analytics sera ajusté au protocole de la page d’hôte lors de l’envoi des demandes de sortie.Pour forcer Google Analytics, envoyez toujours des données via SSL, même à partir de pages non sécurisées (http), configurez le champ FUNDSL, configurez le champ FUNDENSL comme true

Travaillez avec plusieurs objets de suivi

Dans certains cas, il est conseillé d’envoyer les données à plusieurs propriétés Web d’une seule page. Ceci est utile pour les sites qui ont plusieurs propriétaires qui supervisent certaines sections d’un site; Chaque propriétaire pouvait voir sa propriété Web.

Pour résoudre ce problème, vous devez créer un objet de suivi pour chaque propriété Web que vous souhaitez envoyer des données:

ga('create', 'UA-XXXX-Y', 'auto');ga('create', 'UA-12345-6', 'auto', {'name': 'newTracker'}); // New tracker.

Lors de l’exécution, deux objets de suivi seront créés. Le premier sera la valeur par défaut et n’aura pas de nom. La seconde sera appelée .

Pour envoyer une vue de page avec les deux objets de suivi, vous devez définir le nom de l’objet de suivi à la commande, suivi de la commande. un point. Par exemple:

ga('send', 'pageview');ga('newTracker.send', 'pageview'); // Send page view for new tracker.

Une page de vue sera envoyée à la fois l’objet de suivi par défaut et le nouveau.

pour accéder au suivi objet par nom à partir d’une fonction, utilisez la méthode :

ga(function() { var newTracker = ga.getByName('newTracker');});

pour obtenir une matrice de tous les objets de Suivi qui ont été configurés, utilisez la méthode getAll:

ga(function() { var allTrackers = ga.getAll();});

Allocation de liaison améliorée

Avec l’attribution de liaison améliorée, la précision du rapport analytique est augmentée par la différenciation automatique de plusieurs liens vers la même URL à une seule page avec l’ID d’élément de liaison.

Pour activer l’attribution de liaison améliorée:

  1. active l’attribution de liaison améliorée dans l’interface utilisateur de Google Analytics Compte Administration.
  2. Mettez à niveau le code de chaque page pour charger le plug-in amélioré d’attribution de liaison, Comme indiqué dans cet exemple:
ga('create', 'UA-XXXX-Y', 'auto');ga('require', 'linkid'); // Load the plug-in. Note: this call will block until the plug-in is loaded.ga('send', 'pageview');

personnaliser l’attribution de liaison améliorée

Le plug-in Attribution de lien amélioré distingue les liens vers la même URL utilisant l’élément ID d’un lien ou un élément principal, ainsi qu’un cookie. Vous pouvez personnaliser à quelle distance vous rechercherez le plugin dans l’identifiant de l’élément DOM, ainsi que le comportement de ce cookie, fournissant les options de configuration lors du chargement du plug-in:

ga('create', 'UA-XXXX-Y', 'auto');ga('require', 'linkid', { 'cookieName': '_ela', // Cookie name. _gali by default. 'duration': 45, // Cookie duration. 30 seconds by default. 'levels': 5}); // Max DOM levels from link to look for element ID. 3 by default.ga('send', 'pageview');

Convertissez des IPS en Anonymous

Dans certains cas, vous devrez peut-être devenir une adresse IP anonyme de la requête HTTP (demande HTTP) envoyée à Google Analytics. Vous pouvez convertir en adresses IP anonymes de tous les hits envoyés à partir d’une page (la durée de l’objet de suivi) à l’aide de la commande set et les paramètres de champ comme true:

ga('set', 'anonymizeIp', true);

Pour convertir l’adresse IP d’un hit individuel anonyme, vous pouvez configurer Le champ anonymizeIp dans l’objet de configuration optionnel dudit hit hit:

ga('send', 'pageview', { 'anonymizeIp': true});

Pour plus d’informations sur le fonctionnement de la Conversion IP Dans Anonyme, voir l’article Convertissez des IPS en Anonymous dans Google Analytics au centre d’assistance.

Disqualification de l’utilisateur

Dans certains cas, vous pouvez désactiver la désactivation de Google Analytics. Suivi du code sur une page sans avoir à supprimer le fragment JavaScript. Par exemple, vous pouvez le faire si la politique de confidentialité de votre site inclut la possibilité qu’un utilisateur désactive le suivi de Google Analytics.

La bibliothèque Analytics.js inclut une propriété de fenêtre qui, lorsqu’elle est configurée sous true, désactive l’envoi de données analytiques.js à Google Analytics. Lorsque Google Analytics tente de configurer un cookie ou de renvoyer des données à Google Analytics Servers, vérifiez si cette propriété a été configurée sous la forme true. Si tel est le cas, il aura le même effet que si l’utilisateur a installé le plugin désactivé pour Google Analytics Browersers.

Pour désactiver le suivi, configurez la propriété de la fenêtre suivante comme true:

window = true;

où la valeur UA-XXXX-Y correspond à l’ID de propriété Web dans lequel vous voulez désactiver le suivi. .

Cette propriété de fenêtre doit être configurée avant d’appeler le code de suivi. Cette propriété doit être configurée sur chaque page où vous souhaitez désactiver le suivi de Google Analytics. Si la propriété n’est pas configurée ou a été configurée comme fausse, le suivi fonctionnera de manière habituelle.

Exemple

Suivant, un exemple simple du code que vous pouvez utiliser est affiché pour offrir aux utilisateurs la fonctionnalité désactivée.

premier, il ajoute un nouveau lien HTML au site pour exécuter la logique désactivée:

<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>

Ajoutez le fragment de code suivant avant le fragment de code analytique.js. N’oubliez pas de remplacer la valeur UA-XXXX-Y de gaProperty par la propriété utilisée sur le site. C’est la même valeur qui est transmise à la commande create.

<script>// Set to the same value as the web property used on the sitevar gaProperty = 'UA-XXXX-Y';// Disable tracking if the opt-out cookie exists.var disableStr = 'ga-disable-' + gaProperty;if (document.cookie.indexOf(disableStr + '=true') > -1) { window = true;}// Opt-out functionfunction gaOptout() { document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'; window = true;}</script>

Quand un utilisateur clique sur le lien Désactivation HTML, la fonction . Un cookie sera configuré avec une longue durée et la collection de données Analytics.js sera désactivée. Lorsqu’un utilisateur retourne sur ce site, le script précédent, il sera vérifié si le cookie de disqualification a été configuré. Si oui, la collection de données Analytics.js sera également désactivée.

Débogage

Vous pouvez activer la version de débogage de analytics.js via :

ne doit être utilisé que temporairement ou pendant le développement, puisque est plus grand et retarde les hits à google-analytics.com.

Le débogage de suivi

avec le débogage, des informations plus détaillées seront envoyées à la console. Pour activer ce type de débogage, utilisez https://www.google-analytics.com/analytics_debug.js et cette ligne de code avant le fragment:

window.ga_debug = {trace: true};

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *