Как добавить тег 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 -->

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

  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.