Формируем отчеты по любым параметрам в Яндекс Метрике с кастомной структурой

Привет! Меня зовут Владимир Демидов. Я работаю аналитиком в digital-агентстве Registratura.

Сегодня хочу рассказать о том как с помощью Google Tag Manager (или другого менеджера тегов) можно гибко настроить отправку параметров визитов, посетителей, событий или целей в Яндекс Метрику.

Содержание

Введение

Коротко о том что такое параметры (на примере посетителей) и зачем их передавать. Параметры позволяют анализировать любые дополнительные данные о пользователях. Вот пример из официальной документации Яндекс Метрики как с помощью метода userParams передать в произвольный момент времени следующую информацию о пользователе:

ym(XXXXXX, 'userParams', {
    status: "Gold", // Статус посетителя: “Золотой”
    child: 1, // Количество детей: 1
    child_age: 13, // Возраст ребенка: 13
    UserID: 12345 // Произвольный идентификатор пользователя
});

Т.е. параметры посетителя передаются в Метрику в виде JSON-объекта, который имеет характерную key: value структуру (ключ: значение).

Теперь рассмотрим реальный пример аналитической задачи. Допустим у нас есть интернет-магазин demobook.ru. На странице оформления заказа из корзины пользователь может рассчитать стоимость доставки:

Мы хотим собирать статистику по этой форме: какие регионы, города и почтовые индексы чаще всего используются для доставки. Это можно сделать с помощью параметров, которые будут отправляться в Яндекс Метрику в момент когда посетитель производит расчет стоимости доставки (заполняет форму и нажимает кнопку Обновить).

В простейшем случае тег для отправки этих данных будет выглядеть так:

Сам код:

<script>
  ym(104040475, 'userParams', {
    "delieveryRegion": "{{Delivery Region}}",
    "delieveryCity": "{{Delivery City}}",
    "Postcode": "{{Postcode}}"
  });
</script>

Через отладчик видим, что параметры передались:

Вот так это будет выглядеть в Метрике:

Все параметры находятся на одном уровне вложенности и имеют key-значения в отчетах. Но это кажется неудобным с точки зрения модели анализа. Вот так будет намного удобнее, не правда ли?

Таким образом мы получаем:

Логичную с точки зрения модели анализа структуру вложенности: в каждом регионе может быть несколько городов, в городе может быть несколько почтовых отделений каждое из которых имеет свой почтовый индекс
Value-значения параметра верхнего уровня применяются в качестве key-значений для параметра уровнем ниже. Общие key-значения вроде delieveryRegion только мешают и засоряют отчет — мы и без них понимаем что есть что.

Давайте рассмотрим как такого добиться.

Шаг 1. Создаем переменные

Для начала достанем значения из каждого поля формы и присвоим их переменным в GTM. Так это выглядит в консоли:

Сейчас поля позволяют внести любые данные, но в реальности это можно ограничить выпадающими списками, чтобы пользователи не отправляли всякую дичь 🙂

Создаем отдельные переменные типа Собственный код javaScript для региона, города и индекса.

Регион:

Код переменной:

function () {
 var deliveryRegion = document.querySelector('input#calc_shipping_state').value // Достаем значение элемента и присваиваем переменной deliveryRegion
 return deliveryRegion; // Возвращаем значение переменной
}

Аналогично для города и почтового индекса.

Город:

Код переменной:

function () {
var deliveryCity = document.querySelector('input#calc_shipping_city').value
return deliveryCity;
}

Почтовый индекс:

Код переменной:

function() {
var postcode = document.querySelector('input#calc_shipping_postcode').value
return postcode;
}

Здесь мы используем JavaScript для извлечения значений из элементов DOM. Как корректно определять селекторы элементов и извлекать их значения можно подробно почитать у Якова Осипенкова.

Шаг 2. Создаем триггер

Триггером будет служить отправка формы. Форма имеет класс woocommerce-shipping-calculator.

Поэтому типом триггера в нашем случае будет отправка формы, описываемой условием {{Form Classes}} = woocommerce-shipping-calculator:

Шаг 3. Создаем теги для отправки параметров события, визита и посетителя

Создаем 3 отдельных тега типа Пользовательский HTML для событий, визитов и посетителей.

Отправка параметров события:

<script>
var deliveryParams = {};
var deliveryRegionKey = {{Delivery Region}};
var deliveryCityKey = {{Delivery City}};
var postcodeKey = {{Postcode}};
 
// Пошагово определяем структуру JSON "сверху вниз"
deliveryParams[deliveryRegionKey] = {};                // Создаем объект региона
deliveryParams[deliveryRegionKey][deliveryCityKey] = {}; // Создаем объект города внутри региона
deliveryParams[deliveryRegionKey][deliveryCityKey][postcodeKey] = {}; // Создаем объект почтового индекса внутри города
 
var eventParams = {
  deliveryParams: deliveryParams
};
 
ym(104040475, 'reachGoal', 'shippingCalc', eventParams) // Передаем переменную с вызовом метода reachGoal
</script>

Отправка параметров визита:

<script>
var deliveryParams = {};
var deliveryRegionKey = {{Delivery Region}};
var deliveryCityKey = {{Delivery City}};
var postcodeKey = {{Postcode}};
 
// Пошагово определяем структуру JSON "сверху вниз"
deliveryParams[deliveryRegionKey] = {};                // Создаем объект региона
deliveryParams[deliveryRegionKey][deliveryCityKey] = {}; // Создаем объект города внутри региона
deliveryParams[deliveryRegionKey][deliveryCityKey][postcodeKey] = {}; // Создаем объект почтового индекса внутри города
 
var visitParams = {
  deliveryParams: deliveryParams
};
  
ym(104040475, 'params', visitParams) // Передаем переменную с вызовом метода params
</script>

Отправка параметров посетителя:

<script>
var deliveryParams = {};
var deliveryRegionKey = {{Delivery Region}};
var deliveryCityKey = {{Delivery City}};
var postcodeKey = {{Postcode}};
 
// Пошагово определяем структуру JSON "сверху вниз"
deliveryParams[deliveryRegionKey] = {};                // Создаем объект региона
deliveryParams[deliveryRegionKey][deliveryCityKey] = {}; // Создаем объект города внутри региона
deliveryParams[deliveryRegionKey][deliveryCityKey][postcodeKey] = {}; // Создаем объект почтового индекса внутри города
 
var userParams = {
  deliveryParams: deliveryParams
};
 
ym(104040475, 'userParams', userParams) // Передаем переменную с вызовом метода userParams
</script>

Так выглядит отправка параметров события, визита и посетителя в консоли и отладчике при расчете доставки:

А так это отображается в веб-интерфейсе Метрики:

Параметры события:

Параметры визита:

Параметры посетителя:

В параметры целей тоже загружается с такой же структурой:

Таким образом мы получили верхнеуровневую запись deliveryParams, в которой логично и без лишней информации описаны параметры доставки событий, визитов и посетителей.

Спасибо за внимание! Буду рад ответить на вопросы в комментариях. Так же вы можете написать мне в Telegram @in_ads_we_trust

Теги: