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

Библиотека Analytics.js (также известная как «тег Google Analytics») — это библиотека JavaScript для измерения того, как пользователи взаимодействуют с вашим веб-сайтом. В этом документе объясняется, как добавить тег Google Analytics на ваш сайт.

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

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

<!-- 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> , который начинает асинхронную загрузку библиотеки JavaScript Analytics.js с https://www.google-analytics.com/analytics.js
  2. Инициализирует глобальную функцию ga (называемую очередью команд ga() ), которая позволяет планировать выполнение команд после загрузки библиотеки Analytics.js и ее готовности к работе.
  3. Добавляет команду в очередь команд ga() для создания нового объекта отслеживания для свойства, указанного в параметре 'GA_MEASUREMENT_ID' .
  4. Добавляет еще одну команду в очередь команд ga() для отправки просмотра текущей страницы в Google Analytics .

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

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

Хотя описанный выше тег Google Analytics гарантирует, что скрипт будет загружаться и выполняться асинхронно во всех браузерах, у него есть недостаток: он не позволяет современным браузерам предварительно загружать скрипт.

Альтернативный тег async ниже добавляет поддержку предварительной загрузки, которая обеспечит небольшой прирост производительности в современных браузерах, но может привести к синхронной загрузке и выполнению в IE 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 Analytics?

Когда вы добавляете любой из этих тегов на свой веб-сайт, вы отправляете просмотр каждой страницы, которую посещают ваши пользователи. Google Analytics обрабатывает эти данные и может получить большой объем информации, в том числе:

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

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

  • Географическое местоположение пользователя.
  • Какой браузер и операционная система используются.
  • Размер экрана и установлен ли Flash или Java.
  • Ссылающийся сайт.

Следующие шаги

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

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

В следующем руководстве этой серии объясняется , как работает Analytics.js .