Лонгрид
6/8/2017 в 12:00 AM
Установка кода Google Analytics
14639
2 Что такое код отслеживания
Трекинг-код Google Analytics — это фрагмент кода JavaScript, который собирает и отправляет данные об уникальных посещениях страницы в Google Analytics.
Чтобы активировать его работу, нужно вставить в шаблон страницы сайта часть кода перед закрывающим тегом </head> и заменить UA-XXXXX-X на ID.
Где размещать код отслеживания Google
Конечно, код отслеживания выполняет функцию в любой части страницы. Другой вопрос — насколько хорошо он это делает.
Асинхронные коды следует помещать в верхней части тега <head>, перед любым другим скриптом и тегами CSS. Так скрипт загружается один раз, затем сохраняется в кэше (сохраняется на компьютер, и не нужно загружать его повторно), что ускоряет процесс.
Какие коды сейчас поддерживаются Google Analytics
Код ga.js на данный момент устарел, использовать его не рекомендуется. Выбирайте analytics.js (Universal Analytics) или gtag.js.
Если используете gtag, код Universal Analytics устанавливать не нужно.
Как узнать, какая библиотека Google Analytics на вашем сайте
Посмотрите, что подгружается в коде.
Либо вызовите консоль разработчика и на вкладке «Сеть (Network)» посмотрите подгружаемые скрипты .js.
Как работает код analytics.js
Стандартный фрагмент кода выглядит так:
Его основные задачи следующие:
- Создает элемент <script>, который инициирует асинхронную загрузку библиотеки analytics.js со страницы https://www.google-analytics.com/analytics.js;
- Инициирует глобальную функцию ga (называемую очередью команд ga()), которая позволяет запланировать выполнение команд после полной загрузки и готовности библиотеки analytics.js;
- Добавляет в очередь команд ga() команду создания нового счетчика для ресурса, который указан в параметре 'UA-XXXXX-Y';
- Добавляет в очередь команд ga() команду отправить в Google Analytics обращение типа pageview для текущей страницы.
Для передачи событий нужно добавить конструкцию:
Загружается и выполняется этот код асинхронно на всех браузерах. Однако современные браузеры не поддерживают его предварительную загрузку. На этот случай есть альтернативный асинхронный код:
Обратите внимание, в Internet Explorer 9 и старых мобильных браузерах, которые не распознают атрибут async, скрипт может загружаться синхронно. Поэтому учитывайте особенности вашей аудитории.
Какой код analytics.js лучше использовать — стандартный или альтернативный
Любой. Главное, чтобы ваш браузер поддерживал предварительную загрузку первого скрипта. Второй, как правило, позволяет повысить производительность в современных браузерах.
Как отслеживать электронную торговлю
Для неё есть специальный код, который учитывает специфику e-commerce:
Причем для использования электронной торговли необходимо в коде подключить дополнительный плагин:
Какие данные получает код отслеживания
При каждом посещении страниц сайта в Google Analytics отправляется обращение категории pageview. Благодаря этому можно узнать, например:
- Как долго пользователь был на сайте;
- Сколько времени он находился на каждой странице и в каком порядке их посещал;
- Какие ссылки нажимал (в соответствии с URL следующего обращения типа pageview).
Скрипт анализирует первоначальную страницу, IP-адрес и агента, что позволяет также определять такие параметры посетителя, как:
- Географическое положение;
- Браузер и ОС;
- Размер экрана и наличие Flash или Java;
- Источник перехода.
Как получать информацию о дополнительных взаимодействиях
Может потребоваться изменить последние две строки фрагмента отслеживания JavaScript (команды create и send) или добавить код.
Не модифицируйте код, который загружает библиотеку analytics.js или инициирует функцию очереди команд ga().
Когда не нужно размещать код в «голове» страниц
Есть два исключения.
Пользовательские переменные отслеживания
Они всегда на странице в режиме ожидания очередного просмотра или другого события.
Пользовательскую переменную можно установить в «голове» документа, и она активируется до того, как Google отправит код HTML. Но если разработчики построили страницу иначе и вы не хотите ничего менять, можно создать пользовательскую переменную где угодно. Удалите эту строку из асинхронного кода:
Вставьте её на любую страницу после того, как установили переменные. Так код не прерывает загрузку, и вы можете отслеживать пользовательские переменные в любом блоке страницы.
Да, это может снизить точность данных, если посетитель уходит сразу после загрузки страницы.
Отслеживание событий
Второе исключение — функция «Отслеживание событий». Когда происходит событие, сигнал идет к переменной отслеживания. Как учесть «быстрых» посетителей:
1) Создаем переменную, устанавливаем в ключевом пространстве 1 (из 5). Называем её «Статус». Устанавливаем значение «Logged In» — оно не изменится, пока не произойдет нужное событие.
2) Создаем событие, относим его к группе «Пользовательские» и определяем действие — «Загрузка страницы».
Варианта два: событие произошло и событие не произошло.
Для первого присваиваем ярлык, например 0 (может быть любое другое значение, удобное для вас). Также устанавливаем значение для второго варианта (событие не произошло).
Как работает код gtag.js
Функция Global Site Tag доступна с октября 2017 года.
Посмотреть его можно для созданного в Google Analytics ресурса вот здесь:
Если для analytics.js нужно добавлять по отдельности фрагменты кода всех продуктов Google — для отслеживания конверсий, ремаркетинга, электронной коммерции и т.д., — здесь появляется единый тег, который отправляет данные во все маркетинговые и аналитические инструменты Google.
Так гораздо проще совмещать разные теги в коде и подключать продукты. Например, чтобы не дублировать полностью два кода GA, можно добавить одну строку:
При создании нового счетчика код gtag.js выглядит так:
config — это команда, которая подтягивает соответствующую библиотеку для выбранного продукта, например analytics.js для Google Analytics или conversion.js для Google Рекламы.
Как передавать события в gtag.js
Используйте следующую конструкцию:
- <action> — это строка, которая указывается в отчетах Google Analytics как действие по событию;
- <category> — категория события;
- <label> — ярлык события;
- <value> — ценность события, выраженная целым неотрицательным числом.
Пример для события «Покупка» (purchase) в электронной торговле:
В чем преимущества Global Site Tag
Стоит один раз его установить — и можно использовать все новые фишки GA без подключения новых скриптов. К тому же у вас всегда будут обновленные скрипты сервисов Google.
Также смотрите, чем удобен Global Site Tag при настройке целей.
При подготовке статьи использованы материалы блога Якова Осипенкова.
Метки: Google Analytics, Веб-аналитика
14639
2 Читайте ещё статьи по этой теме
Анализ трафика в Яндекс.Метрике: практическое руководство Лонгрид
Если на сайт приходит нецелевой трафик, продаж и заявок практически нет. Либо каждое целевое действие вам обходится дорого.
Техника сбора качественной базы подписчиков Лонгрид
Наличие качественной базы адресов обязательно для всех, кто хочет выстроить эффективную и грамотную рекламную кампанию. Не секрет, что емэйл-рассылка может не только значительно повысить конверсию, но и построить с пользователями доверительные отношения, запомниться им.
Бонусы до 15 000 рублей на рекламу в Яндекс.Директе
В рамках поддержки малого и среднего бизнеса Яндекс дает возможность получить до 15 000 рублей на размещение рекламы. Вот инструкция как это сделать.6
Обсуждаемое
Продажи через мессенджеры в России выросли в два раза
Оборот платежей по счетам, выставленным с помощью ЮKassa через мессенджеры, электронную почту или SMS в 2020 году, вырос в 1,8 раза относительно 2019. .12
Samsung сделал приложения Яндекса неудаляемыми в новых телефонах
В компании Samsung решили проявить небывалое рвение в области исполнения поправок о предустановке отечественного ПО, внесённых в «Закон о защите прав потребителей». .8
Яндекс вложился в «пустышки»
За первый квартал 2021 года Яндекс успел инвестировать в IPO нескольких SPAC почти $130 млн. .6
Примеры роста конверсий, заказов и прибыли
Свежее
Рекламный бюджет ВКонтакте теперь можно пополнить автоматически
ВКонтакте выкатил новую функцию – автопополнение рекламного бюджета. Это позволяет автоматически пополнять бюджет с банковской карты, когда в рекламном кабинете заканчиваются деньги.
Как решить проблему дорогих заявок в B2B: кейс по продаже поломоечных машин Лонгрид
Какие шаги позволяют снизить стоимость обращения с контекстной рекламы в B2B– рассказывает эксперт по комплексному маркетингу Александр Гринёв. .1
Продажи через мессенджеры в России выросли в два раза
Оборот платежей по счетам, выставленным с помощью ЮKassa через мессенджеры, электронную почту или SMS в 2020 году, вырос в 1,8 раза относительно 2019. .12
2017-06-20 11:08:36
Наведите пример аналитики синхронного кода и Асинхронного В 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');
2017-06-20 11:23:40
Олег, сейчас – да, GA предлагает только асинхронный код.