User-Agent — «Hello, world!» для веб-аналитиков

«Hello, world!» — все мы знаем этот классический пример из книжек по программированию, который впервые был опубликован в 1978 году в книге «Язык программирования Си» Брайана Кернигана и Денниса Ритчи. «Привет, мир!» — первый запуск, первый опыт, первая программа многих людей при освоении нового языка.

При изучении темы пользовательских определений (параметров и показателей) веб-аналитики сталкиваются с проблемой понимания данного функционала в Google Analytics. Рад представить вам наш собственный Hello, world!User-Agent. Это очень просто пример, с которого вы можете начать изучение пользовательских параметров и показателей (custom dimensions и custom metrics) без каких-либо знаний в программной части, но который позволяет вам понять принцип работы и передачи данных в инструмент Analytics.

Все, что необходимо при этом сделать – это повторить все шаги в том порядке, в котором я опишу их ниже. Удачи!

Итак, User-Agent (юзерагент, UA, не путать с Universal Analytics сокращением) – это строка, которая передается браузером вместе с запросом любой страницы в интернете. Это ваш своеобразный «отпечаток», в котором содержится:

  • название и версия вашего браузера;
  • название операционной системы (Mac, Windows, Linux и т.д.) и ее версия;
  • информация о некоторых установленных плагинах в системе;
  • прочая информация, идентифицирующая и раскрывающая вас.
User-Agent Google Analytics
User-Agent в консоли разработчика, скрипт analytics.js

Также можно определить и само устройство, на котором установлен браузер, это может быть компьютер, планшет, iPhone, iPad или другое мобильное устройство. Еще по User-Agent можно определить функции, которые поддерживает веб-браузер, например, JavaScript, Java Applet, cookie, VBScript и Microsoft ActiveX.

Проверить текущее значение User-Agent в браузере Chrome можно, введя в адресной строке about:

User-Agent Google Analytics
Проверка User-Agent в Google Chrome

Для скрытия вашего реального значения User-Agent существует расширение Random User-Agent для Chrome, которое автоматически заменяет User-Agent через заданный промежуток времени на случайный. Так же строка User-Agent может быть указана вручную. Скачать его можно по ссылке.

В Google Analytics в стандартных отчетах «Технологии – Браузер и ОС» передается информация по браузеру, его версии, операционной системе, разрешении экрана, цветам экрана и т.д.

User-Agent Google Analytics
Браузер и ОС в Google Analytics

Однако наша задача познакомиться с пользовательскими параметрами и показателями, научиться определять данные на серверной стороне и передавать их в интерфейс GA. Поэтому в качестве самого простого примера (по аналогии с Hello, world!) я выбрал именно User-Agent.

Последовательность действий по передаче User-Agent в качестве custom dimension такая:

1. создаем пользовательский параметр через «Администратор – Ресурс – Пользовательские определения – Специальные параметры — +СПЕЦИАЛЬНЫЙ ПАРАМЕТР»;

2. Название — User-Agent, Область действия — Сеанс, Активная. Нажимаем «Сохранить»;

3. Запоминаем индекс параметра. Он нам понадобится чуть позже. В нашем примере «1».

User-Agent Google Analytics
Запоминаем индекс специального параметра

4. Определяем, какой код отслеживания Google Analytics у вас установлен на сайте (библиотека analytics.js или gtag.js). От этого будет зависеть способ реализации и добавление дополнительных строчек кода в GA. В моем примере – это Global Site Tag.

5. Реализовывать будем с помощью PHP кода. Добавляем эту часть кода после тега <head> на всех страницах сайта, на которых хотим отслеживать действия пользователей:

Элемент $_SERVER[‘HTTP_USER_AGENT’] содержит информацию о типе, версии браузера и операционной системы посетителя. $_SERVER является предопределенной переменной, которая содержит информацию о сервере и среде исполнения.

Чтобы передать значения переменной из PHP в JavaScript, необходимо сделать так:

Расшифровка: у нас есть PHP-переменная с именем $userAgent и значением $_SERVER[‘HTTP_USER_AGENT’], которая в отчетах будет отображаться как User-Agent сеанса пользователя. Наша задача состоит в том, чтобы это значение вывести на экран, но не средствами PHP, а с помощью JavaScript. Для этого открываем теги JavaScript и объявляем переменную userAg.

На месте присвоения JavaScript переменной userAg мы пишем PHP код, который выводит нашу переменную $userAgent.

Примечание: конструкция написана на PHP. Если ваш сайт имеет расширение страницы .html, то скорее всего это работать не будет. Чтобы это исправить, измените .html на .php.

Также можно использовать конструкцию такого типа:

Варианты есть различные. Используя первый, получим такой вид:

User-Agent Google Analytics
Код PHP и JS

Сохраняем и отправляем обновленные настройки на сервер. Теперь в переменную userAg должно передаваться значение User-Agent посетителя. Проверить это можно в консоли разработчика браузера. На вкладке Console в Google Chrome вводим userAg и нажимаем Enter.

User-Agent Google Analytics
Консоль разработчика, проверка userAg

С программной частью разобрались. Теперь осталось научиться передавать значения переменной userAg в Google Analytics. Для этого используем специальные конструкции в зависимости от библиотеки GA.

Для gtag.js код будет выглядеть так:

User-Agent Google Analytics
Код для библиотеки gtag.js
где UA-123435899-1 – ваш идентификатор Google Analytics, а dimension1 – индекс вашего пользовательского параметра, который вы запомнили на 3 шаге.

Подробнее о специальных параметрах и показателях для gtag.js по ссылке.

Передать специальный параметр для обращения типа pageview для библиотеки analytics.js можно следующим образом:

User-Agent Google Analytics
Код для библиотеки analytics.js
где dimension1 – индекс вашего пользовательского параметра, который вы запомнили на 3 шаге.

Подробнее о специальных параметрах и показателях для analytics.js по ссылке.

Если все сделали так, как описано, то данные по User-Agent будут передаваться в пользовательский параметр dimension. Проверить корректность передачи можно с помощью инструмента отладки GA Debugger:

User-Agent Google Analytics
Режим отладки в GA Debugger

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

User-Agent Google Analytics
User-Agent в Google Analytics

Вот мы с вами и научились создавать свой первый пользовательский параметр в Google Analytics. Практической пользы от него не много, поскольку эта информация и так есть в стандартных отчетах. Но то, что вы уже самостоятельно смогли добавить custom dimension в систему и разобраться в том, как это устроено, говорит о вашем трудолюбии и упорстве.

Да, без знаний программной части здесь не обойтись, поэтому для того, чтобы в полной мере использовать весь функционал средств веб-аналитики и пользовательских определений, передавать данные по IP-адресу посетителя, функцию User ID, данные о погоде или какие-то другие кастомные метрики, будучи веб-аналитиком, всегда работайте в паре с разработчиком.

Понравилась статья? Подписывайтесь на социальные сети:

Остались вопросы? Задайте их на Кубик.Ком

Yakov Osipenkov | 01.11.2018
User-Agent — «Hello, world!» для веб-аналитиков
5 Всего оценок: 1

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Бесплатные уроки по контекстной

рекламе и веб-аналитике!

Решаем задачи

Общаемся

Делимся

Спасибо за подписку!