web-dev-qa-db-fra.com

Explication du code Google Analytics

Quelqu'un peut-il expliquer ce code "étape par étape", "ligne par ligne"? Je voudrais en savoir plus sur le code Asynch et comment Google charge son script, comment "cacher" javascrippt aux utilisateurs (je sais que je ne peux pas le cacher mais au moins en faire quelque chose comme Google le fait, pour ne pas afficher tout le code dans un fichier)

<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', 'UA-xxxxxxxx-x', 'xxxxxx.com');
  ga('send', 'pageview');
</script>
javascriptgoogle-analytics
33
Milos Miskone Sretin

Tout d'abord, je passerais cela à travers un embellisseur, par exemple http://jsbeautifier.org/

 (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', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

Après cela permet d'évaluer la fermeture

(function (i, s, o, g, r, a, m) {
...
 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

en remplaçant chacun des paramètres nommés: i, s, o, g, r avec leurs valeurs correspondantes window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'

Notez que les paramètres a et m n'ont pas de valeurs d'entrée et sont plutôt des variables de résultat.

Ce serait à peu près (sans se soucier de la portée variable, etc.) équivalent à

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

 ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

En bref, ce que fait essentiellement ce code, c'est qu'il crée une nouvelle balise de script avec la ligne:

a = document.createElement('script'),

Trouve ensuite la première balise de script

m = document.getElementsByTagName('script')[0];

Ensuite, il définit la balise de script nouvellement créée sur l'exécution asynchrone (Plus d'informations sur l'exécution asynchrone peuvent être obtenues sur Comprendre le code asynchrone en termes de Layman si vous en avez besoin)

a.async = 1;

1 dans la ligne ci-dessus est équivalent à true, il est utilisé 1 juste parce qu'il est plus court.

Après cela, le src de cette balise de script est défini

 a.src = '//www.google-analytics.com/analytics.js';

Notez qu'au-dessus aucun protocole (http ou https) n'est spécifié dans l'URL. Cela permettrait au script d'être chargé dans le protocole de navigateur actuel.

Et enfin, il est inséré avant la première balise de script, afin que le navigateur puisse commencer à le charger.

 m.parentNode.insertBefore(a, m)

Donc pour résumer :

  1. Nous créons un script tag
  2. Nous l'avons configuré pour charger de manière asynchrone async=true
  3. Nous insérons cette balise de script, avant la première balise de script dans le document

Spécificités liées à Google Analytics.

 window['ga'] = window['ga'] || function () {
     (window['ga'].q = window['ga'].q || []).Push(arguments)
 }, window['ga'].l = 1 * new Date();

définit la fonction globale nommée ga qui pousse ses arguments dans un tableau de files d'attente (nommé q)

Puis avec les lignes

 ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

il pousse ces "événements" dans la file d'attente Array.

Lorsque le script est chargé, il vérifie la valeur de GoogleAnalyticsObject, qui était précédemment définie pour pointer vers le nom de ga avec la ligne

 window['GoogleAnalyticsObject'] = 'ga';

J'espère que cela t'aides

80
Zlatin Zlatev

Google a publié la version non réduite de ce code:

<!-- Google Analytics -->
<script>
/**
 * Creates a temporary global ga object and loads analytics.js.
 * Parameters 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 {HTMLDocument}  s The DOM document object.
 * @param {string}        o Must be 'script'.
 * @param {string}        g Protocol relative URL of the analytics.js script.
 * @param {string}        r Global name of analytics object. Defaults to 'ga'.
 * @param {HTMLElement}   a Async script tag.
 * @param {HTMLElement}   m First script tag in document.
 */
(function(i, s, o, g, r, a, m){
  i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming.

  // Creates an initial ga() function.
  // The queued commands will be executed once analytics.js loads.
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).Push(arguments)
  },

  // Sets the time (as an integer) this tag was executed.
  // Used for timing hits.
  i[r].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)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

// Creates a default tracker with automatic cookie domain configuration.
ga('create', 'UA-XXXXX-Y', 'auto');

// Sends a pageview hit from the tracker just created.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference

L'explication ligne par ligne de Zlatin est toujours valable.

27
broc.seib

i['GoogleAnalyticsObject']=r; Ceci assigne 'ga' à la propriété 'GoogleAnalyticsObject' de 'window'

window['ga'] = window['ga'] || function(){
        (window['ga'].q = window['ga'].q || []).Push(arguments)
    }, window['ga'].l = 1 * new Date();

Cette partie affecte la propriété 'ga' de la fenêtre en tant que fonction (ou elle-même si elle existe déjà). La fonction attribue ensuite la propriété q en tant que tableau vide et y ajoute tous les arguments des fonctions. Il affecte ensuite la propriété l l'horodatage actuel (il est multiplié par 1 pour le forcer comme un entier).

Les lignes suivantes créent simplement une balise de script et lui attribuent des attributs tels que source et async = true, puis il ajoute cette balise de script au document.

3
Carl Markham

Le code est minifié. En utilisant http://jsbeautifier.org/ vous pouvez annuler cela (trier) et le rendre un peu plus lisible. Fondamentalement, c'est une petite fonction qui ajoute un autre javascript (www.google-analytics.com/analytics.js) au dom en utilisant le même protocole, http ou https.

(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');
2
Phobos

Le code a été exécuté à travers un minifieur et ressemble à ceci lorsqu'il est assez imprimé:

(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', 'UA-xxxxxxxx-x', 'xxxxxx.com');
ga('send', 'pageview');

Pour savoir ce qu'il fait exactement, vous devrez probablement jeter un œil à leur fichier analytics.js, mais comme il est très probable qu'il soit également réduit, vous n'allez pas en tirer grand-chose.

Si vous voulez faire la même chose, vous pouvez utiliser un minifieur de code comme JSMin. Il remplace les espaces blancs et les caractères de nouvelle ligne, entre autres, pour réduire la bande passante.

1
fnostro