Настройка User ID для сайтов на WordPress

26 марта, 2021

Отслеживание User ID для сайтов на WordPress с помощью бесплатного плагина и Google Tag Manager.

В предыдущем материале мы с вами разобрали настройку расширенной электронной торговли с помощью плагина Google Tag Manager для WordPress. Теперь затронем тему отслеживания авторизованных пользователей на сайте с помощью того же самого решения.

Рекомендую к прочтению другие статьи на эту тему:

В Google Analytics и Яндекс.Метрике эта функция называется User ID. Она позволяет связывать разные сеансы и действия пользователей на различных устройствах и отслеживать выполнение конверсий клиентов, которые заходили на сайт с нескольких девайсов с целью оценки вклада каждого типа устройств и последующей оптимизации рекламных бюджетов. Такое отслеживание еще называют кросс-девайсным (cross device).

В результате внедрения на сайте User ID в отчетах Google Analytics вы сможете видеть такую картину:

Настройка User ID для сайтов на WordPress

Пример специального отчета в Universal Analytics

Пользователь на сайте зарегистрирован под идентификатором 137. Он выполнил 44 сеанса с десктопа и совершил 4 транзакции на общую сумму 595 940 руб. Все они привязаны к одному Client ID, в то время как другой уникальный идентификатор пользователя зафиксировал 1 сеанс с мобильного устройства. Если бы мы не имели специального параметра и настройки User ID, то связать Client ID = 1288110046.1582107977 и Client ID = 1911903864.1585317566 с одним пользователем не представлялось бы возможным. С точки зрения систем веб-аналитики это были бы два разных пользователя. Но поскольку для данного проекта настроено отслеживание User ID, то в отчетах мы можем идентифицировать пользователя с разных браузеров и устройств как одного и того же человека. Это дает возможность не только расширить отчеты Google Analytics новыми данными, но и позволяет узнать, сколько различных типов устройств применяют пользователи при взаимодействии с вашим сайтом и в каком % соотношении.

В основе реализации User ID лежит внутренняя база пользователей вашего сайта и их идентификаторов. Как вы уже знаете из предыдущих материалов, по вашему техническому заданию (ТЗ) разработчик на сайте сначала должен сформировать уровень данных (dataLayer). Затем вы настраиваете все необходимые переменные, триггеры и теги в Google Tag Manager (если выполняете настройку через него!), а на завершающем шаге проверяете корректность работы и передачу данных в инструменты веб-аналитики.

В зависимости от технологий и CMS-системы вашего сайта, настройка User ID может отличаться. В этом примере мы будем разбирать отслеживание User ID для WordPress с помощью бесплатного плагина Google Tag Manager для WordPress. Прелесть его заключается в том, что разработчик данного плагина уже за нас позаботился о формировании всех необходимых данных для dataLayer. Нам же остается только активировать нужные настройки в интерфейсе WordPress и извлечь значение User ID из переменной уровня данных. Давайте с вами проделаем это.

Первым делом необходимо установить плагин. Сделать это можно с помощью двух способов:

- добавить новый плагин через раздел Плагины;

Настройка User ID для сайтов на WordPress

Добавление плагина через интерфейс

- скачать плагин на официальной странице, распаковать его на компьютере и загрузить с помощью FTP-клиента в папку вашего сайта wp-content/plugins. Затем в интерфейсе WordPress в разделе Плагины / Установленные включить Google Tag Manager для WordPress.

Настройка User ID для сайтов на WordPress

Активация плагина

На следующем шаге перейдите в раздел Настройки - Google Tag Manager. На вкладке General добавьте идентификатор вашего контейнера GTM:

Настройка User ID для сайтов на WordPress

Добавление идентификатора контейнера Google Tag Manager

В настройке Container code placement выберите способ размещения кода и сохраните изменения. Если у вас код Google Tag Manager установлен напрямую в <head>, то вы можете выбрать Off (only add data layer to the page source) и тогда повторного срабатывания загрузки контейнера не будет. Если вы хотите разместить код GTM через плагин и делаете это впервые, то можете выбрать пункт Codeless injection.

Теперь перейдите на вкладку Basic data - Visitors:

Настройка User ID для сайтов на WordPress

Basic data - Visitors

На этой странице отображены настройки всех возможных параметров, которые вы можете передавать на уровень данных:

  • Logged in status - определяет, является ли текущий посетитель авторизованным пользователем;
  • Logged in user role - роль авторизованного пользователя (список ролей из WordPress);
  • Logged in user ID - идентификатор залогиненного пользователя;
  • Logged in user name - имя авторизованного пользователя;
  • Logged in user email - e-mail авторизованного пользователя;
  • Logged in user creation date - дата регистрации авторизованного пользователя на сайте;
  • Visitor IP - IP-адрес посетителя.
Настройка User ID для сайтов на WordPress

Настройки на вкладке Visitors

С помощью данного плагина вы можете извлекать значение IP-адрес посетителя вашего сайта. Однако согласно обработке персональных данных, установленных Генеральным регламентом ЕС о защите персональных данных (или GDPR — General Data Protection Regulation), в Google Analytics или любую другую систему веб-аналитики запрещается передавать полный IP-адрес пользователя без его согласия. Но вы можете использовать IP-адрес для фильтрации внутреннего трафика сотрудников вашей компании.

Если вы проводите настройку для своего сайта впервые, я рекомендую поставить все галочки. Тогда вы сможете максимально подробно увидеть как будет отображаться уровень данных в режиме предварительного просмотра Google Tag Manager. Сохраните настройки.

Зайдите в диспетчер тегов Google и активируйте режим отладки. Не забудьте на сайте зайти под своей учетной записью (авторизоваться). Как только вы это сделаете, на шкале событий появится новое сообщение Message, которое срабатывает после загрузки контейнера Container Loaded, но до DOM Ready и Window Loaded. Кликнув по нему, отобразится сформированный уровень данных со значениями всех активированных в настройках плагина параметров. Для моего сайта osipenkov.ru он выглядит так:

Настройка User ID для сайтов на WordPress

Сформированный dataLayer

  • visitorLoginState - переменная, которая определяет, является ли текущий посетитель авторизованным пользователем;
  • visitorType - роль авторизованного пользователя;
  • visitorEmail - e-mail авторизованного пользователя;
  • visitorRegistrationDate - дата регистрации авторизованного пользователя на сайте;
  • visitorUsername - имя авторизованного пользователя;
  • visitorId - идентификатор залогиненного пользователя (то, что нам нужно!);
  • visitorIP - IP-адрес.

Поскольку я являюсь администратором своего сайта, то мой User ID = 1 (ID - 1 в базе данных). Остается небольшой вопрос, связанный с датой регистрации авторизованного пользователя. У меня отобразилось значение 1462629275. Это временная метка в формате Unix (количество секунд, прошедших с первого января 1970-ого года). Мы можем перевести ее в удобочитаемый вид, просто перейдя на сайт конвертера Epoch Unix Time Stamp Converter и в поле Enter a Timestamp вставив дату регистрации. Нажмите Enter:

Настройка User ID для сайтов на WordPress

Моя дата регистрации на сайте - 7 мая 2016 г.

Дата регистрации на сайте стала в привычном для человека формате - 7 мая 2016 г. Именно тогда я впервые начал заниматься своим блогом. Если вы хотите передавать правильную дату в Google Analytics, создайте в GTM две пользовательских переменных:

1. переменную уровня данных с visitorRegistrationDate:

Настройка User ID для сайтов на WordPress

Переменная уровня данных visitorRegistrationDate

2. переменную типа Собственный код JavaScript со следующим кодом:

, где {{visitorRegistrationDate}} - название первой переменной уровня данных.

Настройка User ID для сайтов на WordPress

Переменная с собственным кодом JS

Из всего представленного списка нас больше всех интересует переменная уровня данных visitorId, которая хранит идентификатор авторизованного пользователя. Для извлечения значения в Google Tag Manager создайте переменную типа Переменная уровня данных с именем visitorId.

Настройка User ID для сайтов на WordPress

Переменная уровня данных User ID

Сохраните переменную.

Все последующие настройки аналогичны тем, что описаны в этом материале для любого проекта. За исключением того, что в другом примере данные формировались до загрузки контейнера GTM и в теге Universal Analytics можно было использовать триггер Проcмотр страницы (All Pages), в этом дела обстоят чуть иначе.

Поскольку плагин Google Tag Manager для WordPress передает данные после загрузки Container Loaded (в этот момент User ID еще не определен), мы можем использовать только триггеры DOM Ready и Window Loaded:

Настройка User ID для сайтов на WordPress

Уровень данных с User ID срабатывает после Container Loaded

Необходимо передать User ID при каждом обращении Google Analytics. Чтобы не обновлять каждый тег вручную, откройте переменную типа Настройки Google Analytics и в разделе Дополнительные настройки – Поля, которые необходимо задайте userId и укажите в Название поля – userId, а в Значение добавьте переменную уровню данных, которую создали на предыдущем шаге:

Настройка User ID для сайтов на WordPress

Поля, которые необходимо задать - userId

Так нужно делать для того, чтобы видеть все обращения (события, просмотры страниц и т.д.) в отдельном представлении Google Analytics (User-ID). Поэтому мы настраиваем идентификатор пользователя Google Analytics на уровне переменной Настройки Google Analytics, а не только в теге просмотра страницы Google Analytics. В этом случае было бы достаточно этого:

Настройка User ID для сайтов на WordPress

Настройка тега

Разумеется, вам необходимо для этого создать в Universal Analytics отдельное представление. Для этого перейдите в Universal Analytics и в колонке Ресурс выберите Отслеживание – User-ID:

Настройка User ID для сайтов на WordPress

Ресурс – Отслеживание – User-ID

Примите правила в отношении User-ID, переключите ползунок в позицию «Вкл.» и нажмите Далее:

Настройка User ID для сайтов на WordPress

Правила в отношении User-ID

На следующем шаге будет приведен пример классического кода для Universal Analytics (библиотеки analytics.js) и глобального тега Global Site Tag (библиотеки gtag.js):

Настройка User ID для сайтов на WordPress

Примеры кодов отслеживания

Эти конструкции нас не интересуют, поскольку мы используем настройку через Google Tag Manager, а не добавляем код напрямую. На последнем шаге создайте новое представление User ID, введя его название, указав часовой пояс и включив опцию Показать отчеты User-ID. Нажмите кнопку Создать:

Настройка User ID для сайтов на WordPress

Создание представления User-ID

В этом представлении будут отображаться данные о хитах и сеансах пользователей, которые были авторизованы на вашем сайте и имели User ID. Чтобы убедиться в том, что представление User-ID было создано правильно, вы можете перейти в его настройки и посмотреть, какой статус отчетов там стоит:

Настройка User ID для сайтов на WordPress

Отчеты User-ID = Включено

Если Включено, то это представление User-ID. Если Выключено, то это обычное представление Universal Analytics.

Чтобы закончить с настройкой Universal Analytics, перейдите на уровне ресурса в раздел Пользовательские определения - Специальные параметры и создайте новый параметр. Введите название пользовательского параметра, выберите Область действия – Пользователь, оставьте галочку Активная и нажмите Создать:

Настройка User ID для сайтов на WordPress

Настройка специального параметра User ID

Запомните индекс пользовательского параметра (в моем примере – 8):

Настройка User ID для сайтов на WordPress

Индекс специального параметра

Вернитесь в GTM, в тег Universal Analytics / переменную Настройки Google Analytics и в разделе Дополнительные настройки – Специальные параметры задайте Индекс и укажите Значение параметра:

Настройка User ID для сайтов на WordPress

Передача специального параметра в теге или переменной Настройки Google Analytics

Сохраните изменения. На этом настройка отслеживания User ID для сайтов на WordPress завершена. Проверить корректность передачи данных можно любым известным вам способом, например, с помощью режима предварительного просмотра диспетчера тегов:

Настройка User ID для сайтов на WordPress

Детали тега Universal Analytics

Как видно из деталей тега Universal Analytics, значение User ID корректно определяется передается в поля, которые необходимо задать, и в созданный специальный параметр.

Для отправки идентификатора пользователя в Яндекс.Метрику используйте метод userParams, который позволяет передавать произвольные параметры посетителей сайта, и параметр UserID. Пример конструкции выглядит так:

, где XXXXXX – номер счетчика Яндекс.Метрики, а User ID пользователями – переменная уровня данных, созданная на предыдущем шаге.

В Google Tag Manager:

Настройка User ID для сайтов на WordPress

Передача User ID в Яндекс.Метрику

Данные по User ID в Яндекс.Метрике доступны в отчете Параметры посетителей и в карточке конкретного пользователя раздела Посетители.

Настройка User ID для сайтов на WordPress

Пример отображения параметра посетителя User ID в отчете "Посетители"

Таким образом, вы можете использовать несколько представлений (одно – User-ID, а другое – обычное) для отслеживания действий пользователей с привязкой к их идентификатору. А с созданным специальным параметром появляется возможность сопоставить обращения, покупки человека с его реальными данными, которые собираются в вашей CRM-системе.

Настройка User ID для сайтов на WordPress

User ID в отчете Universal Analytics

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике