Как добавить тег analytics.js на свой сайт

Библиотека analytics.js, также называемая тегом Google Аналитики, – это библиотека JavaScript для отслеживания взаимодействий пользователей с сайтом. В этой статье рассказывается, как добавить тег Google Аналитики на сайт.

Тег Google Аналитики

Тег Google Аналитики необходимо добавить в начале раздела <head> (перед другими скриптами и тегами CSS), указав идентификатор ресурса, который вы хотите отслеживать.

<!-- Google Analytics -->
<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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Приведенный выше код выполняет 4 основные задачи:

  1. Создает элемент <script>, который инициирует асинхронную загрузку библиотеки analytics.js со страницы https://www.google-analytics.com/analytics.js.
  2. Инициализирует глобальную функцию ga, называемую очередью команд ga(). Эта функция позволяет запланировать выполнение команд после полной загрузки библиотеки analytics.js.
  3. Добавляет в очередь команд ga() операцию, создающую объект отслеживания для ресурса, указанного с помощью параметра 'GA_MEASUREMENT_ID'.
  4. Добавляет в очередь команд ga() указание отправлять в Google Аналитику информацию о просмотре текущей страницы.

При реализации нестандартного решения можно изменить последние две строки тега Google Аналитики (команды create и send) или добавить команды для сбора дополнительной информации о взаимодействиях. Однако нельзя изменять код, загружающий библиотеку analytics.js и инициализирующий функцию очереди команд ga().

Альтернативный тег асинхронной загрузки

Описанный выше стандартный тег Google Аналитики загружается и выполняется асинхронно во всех браузерах. Тем не менее современные браузеры не поддерживают предварительную загрузку такого скрипта.

Приведенный ниже тег не имеет этого недостатка, что позволяет немного повысить производительность в современных браузерах. Однако в Internet Explorer 9 и старых мобильных браузерах, которые не поддерживают атрибут async, этот скрипт не будет загружаться асинхронно. Этот тег имеет смысл использовать только в том случае, если многие посетители просматривают ваш сайт в современных браузерах.

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

Какие данные собирает тег Google Аналитики?

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

  • общее время нахождения пользователя на вашем сайте;
  • время пребывания пользователя на каждой из страниц и порядок их посещения;
  • сведения о внутренних ссылках, на которые нажимал пользователь (определяются по URL следующего обращения pageview).

Кроме того, по IP-адресу, строке агента пользователя и данным первоначального анализа страницы, выполняемого скриптом analytics.js при создании нового объекта отслеживания, определяются в том числе следующие параметры:

  • географическое местоположение пользователя;
  • используемый им браузер и операционная система;
  • размер экрана и наличие Flash или Java;
  • сайт-источник перехода.

Дальнейшие действия

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

Руководства, размещенные на этом сайте, помогут вам отслеживать нужные взаимодействия с помощью analytics.js. Прежде чем реализовать те или иные функции, ознакомьтесь со статьями, приведенными в разделе Основы на навигационной панели слева. Наши руководства позволяют получить общее представление о библиотеке analytics.js и ознакомиться с различными примерами кода.

Следующее руководство посвящено принципам работы analytics.js.