Объяснение кода Google Analytics

Ответ 1

Прежде всего, я передам это через декоратор, например. 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');

После этого давайте оценить замыкание

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

заменив каждый из названных параметров: i, s, o, g, r соответствующими значениями window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'

Обратите внимание, что параметры a и m не имеют входных значений и больше похожи на переменные результата.

Это будет примерно (не беспокоиться об области видимости переменной и т.д.), эквивалентной

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

Короче говоря, этот код по существу состоит в том, что он создает новый тег script с линией:

a = document.createElement('script'),

Затем находит первый тег script

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

Затем он устанавливает новый тэг script для асинхронного выполнения (более подробная информация о выполнении async может быть получена в Понимание асинхронного кода в терминах Layman, если вам это нужно )

a.async = 1;

1 в строке выше эквивалентна true, она используется 1 только потому, что она короче.

После этого src этого тега script устанавливается

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

Обратите внимание, что выше в протоколе не указан протокол (http или https). Это позволит загружать script в текущий протокол браузера.

И, наконец, он вставлен перед первым тегом script, поэтому браузер может начать его загрузку.

 m.parentNode.insertBefore(a, m)

Итак, чтобы суммировать:

• Мы создаем тег script
• Мы устанавливаем его для асинхронного загрузки async=true
• Мы вставляем этот тег script перед первым тегом script в документе

Особенности, связанные с аналитикой google.

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

определяет глобальную функцию с именем ga, которая толкает свои аргументы в очередь Array (с именем q)

Тогда с линиями

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

он выталкивает эти "события" в массиве очереди.

Когда загружается script, он проверяет значение GoogleAnalyticsObject, которое ранее было установлено для указания имени ga с линией

 window['GoogleAnalyticsObject'] = 'ga';

Надеюсь, что это поможет

Ответ 2

Google опубликовала недопустимую версию этого кода:

<!-- 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

Пояснение строки по Zlatin все еще действует.

Ответ 3

Код минимизирован. Используя http://jsbeautifier.org/, вы можете вернуть это (сортировать) и сделать его более читаемым. В основном это небольшая функция, которая добавляет другой javascript (www.google-analytics.com/analytics.js) к dom с использованием того же протокола, http или 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');

Ответ 4

i['GoogleAnalyticsObject']=r; Это присваивает 'ga' свойству 'GoogleAnalyticsObject' окна '

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

Эта часть назначает свойство "ga" окна как функцию (или сама, если она уже существует). Затем функция присваивает свойство q как пустой массив и добавляет к нему все аргументы функций. Затем он присваивает свойству l текущую временную метку (она умножается на 1, чтобы заставить ее как целое число).

Следующие строки просто создают тег script и присваивают ему некоторые атрибуты, такие как source и async = true, а затем добавляют этот тег script в документ.

Ответ 5

Код запускается через minifier и выглядит так, когда он довольно напечатан:

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

Чтобы узнать, что именно это делает, вам, вероятно, придется взглянуть на свой файл analytics.js, но, как это очень вероятно, также будет уменьшено, вы не получите многого.

Если вы хотите сделать то же самое, вы можете использовать код minifier, например JSMin. Он заменяет любые незаметные пробелы и символы новой строки, среди прочего, для уменьшения полосы пропускания.