Google Analytics: код отслеживания

Posted on by

В последних версиях Google Analytics код отслеживания предлагается устанавливать в асинхронном режиме, что дает некоторые преимущества. Это позволяет оптимизировать загрузку сайта и воспользоваться асинхронной загрузкой скриптов отслеживания. Такой метод отслеживания позволяет размещать код отслеживания выше на без замедления отображения последующего содержимого страницы.

Ниже приведен типовой код счетчика Google Analytics, который нужно вставить на страницу.

1
2
3
4
5
6
7
8
9
10
11
12
  // Объявление массива и его инициализация стандартными значениями
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  // Организация асинхронной загрузки скрипта отслеживания.
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Асинхронный синтаксис предполагает использование объекта _gaq. Он действует как очередь FIFO и собирает вызовы Google Analytics API до тех пор пока ga.js загружается. Добавление в очередь выполняется при помощи метода _gaq.push.
Добавление вызова API в очередь выполняется аналогично стандартному синтаксису JavaScript. Массив команд — это обычный массив JavaScript, заполенный в определенном формате. Первый элемент массива команд — это имя трекера, оно должно быть строкой. Остальные элементы — это параметры, которые передаются трекеру, они могут быть любыми JavaScript значениями.
Приведенный ниже код вызывает функцию _trackPageview() используя стандартный синтаксис:

1
2
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();

Ниже приведен асинхронный синтаксис кода отслеживания, используя _gaq.push.

1
2
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

В асинхронном синтаксисе, трекер создается неявно, поэтому для передачи идентификатора трекера добавлен метод _setAccount. Все остальные методы идентичны при традиционном и асинхронном отслеживании.

Асинхронный механизм отслеживания может быть вызван из любых DOM обработчиков событий. Например, приведенный ниже код позволяет отследить событие — нажатие на кнопку.

1
onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"

Даже если кнопка будет нажата до того как браузер закончит загрузку ga.js, событие будет записано (добавлено в массив) и обработано после загрузки. При использовании традиционного кода отслеживания браузер мог бы выкинуть исключение в данной ситуации.

Также полезным может быть механизм множественного наполнения массива. Вместо написания _gaq.push(…) для каждого вызова можно добавить все команды за один раз. Приведенный далее код демонстрирует такую возможность:

1
2
3
4
5
6
_gaq.push(
  ['_setAccount', 'UA-XXXXX-X'],
  ['_setDomainName', 'example.com'],
  ['_setCustomVar', 1, 'Section', 'Life & Style', 3],
  ['_trackPageview']
);