О JavaScript-событиях
Многие из интернет-маркетологов и веб-аналитиков знают, что в Яндекс.Метрике есть отдельный тип цели JavaScript-событие, который позволяет отслеживать различные события на вашем сайте. Но меньшее количество из них знает, что помимо классического отслеживания события методом reachGoal можно передавать дополнительные параметры с нужным событием точно так же, как это реализовано в новом Google Analytics 4.Как правило, JavaScript-событие используется в тех случаях, когда требуется отследить произвольные взаимодействия пользователя с любыми элементами на странице, URL которой не меняется. Это:
- клик по конкретной кнопке;
- отправка формы (с элементами AJAX);
- при использовании динамических веб-приложений (SPA, Single Page Application);
- отправка данных о транзакции;
- отслеживание звонков;
- просмотр видео;
- подписка на рассылку;
- скроллинг страницы;
- пролистывание галереи с фотографиями (клики по стрелочкам влево-вправо);
- переключение чек-боксов или любых других элементов;
- клики по иконкам социальных сетей;
- открытие / закрытие всплывающих окон на сайте;
- отслеживание действий в онлайн-консультантах, чатах (JivoSite, Callbackhunter, Venyoo, Talk-Me и т.д.);
- отслеживание событий, которые активируются после определенного времени или действия (например, когда пользователь увел курсор мыши за пределы окна или кто-то пытается скопировать ваш контент на сайте);
- другое;
При создании цели JavaScript-событие указывается только ее идентификатор с одним из трех условий - совпадает, содержит или регулярное выражение:
Идентификатор цели для JavaScript-события
Примечание: идентификаторы цели для условий совпадает и содержит не должны содержать символы / \ & # ? = ". Если вы хотите добавить в идентификатор символ +, вместо него укажите %2B
После ввода идентификатора цели чуть ниже вам отобразится итоговая строка кода, которую требуется добавить на отслеживаемый элемент:
Пример кода JavaScript-события,
где:
- 54442894 - идентификатор счетчика Яндекс.Метрики;
- reachGoal - специальный метод объекта Ya.Metrika (JavaScript API);
- clickButton - идентификатор цели, который вы ввели для JavaScript-события.
Код цели JavaScript-события устанавливается на отслеживаемый элемент (пример клика по кнопке)
Если вы в своем проекте используете Google Tag Manager, тогда аналогичная конструкция кода цели копируется из интерфейса Яндекс.Метрики и вставляется в тег типа Пользовательский HTML между открывающимся и закрывающимся тегами <script></script>:
Пример отслеживания клика по кнопке через Google Tag Manager
В качестве триггера активации вы должны задать то условие, которое будет регистрировать отслеживаемое событие и передавать его в счетчик Яндекс.Метрики. Подробнее о триггерах GTM читайте в этом материале.
Именно такую конструкцию, скопированную из интерфейса Яндекс.Метрики при создании цели JavaScript-события, 99% интернет-маркетологов и используют для отслеживания кликов по кнопкам, ссылкам, отправки форм и другим событиям.
ym(XXXXXX,'reachGoal', target), где:
- XXXXXX – идентификатор счетчика Яндекс.Метрики;
- reachGoal – метод для отслеживания цели типа JavaScript-событие;
- target – идентификатор цели:
События с дополнительными параметрами
Но на самом деле общая конструкция достижения целей методом reachGoal выглядит иначе и состоит из большего количества параметров:ym(XXXXXX, 'reachGoal', target[, params[, callback[, ctx]]]);, где:
- target - идентификатор цели (задается на странице редактирования счетчика при создании или изменении цели);
- params – можно передавать собственные параметры визита;
- callback - функция, вызываемая после отправки данных о просмотре;
- ctx - контекст, доступный в callback-функции по ключевому слову this.
Параметры визитов – те данные, которые могут быть привязаны к визиту пользователя. Например, точное время совершенного события, значения выбранных полей формы или введенной в них информации, идентификатор заявки (если он генерируется на вашем сайте), URL-адрес страницы, на которой было совершено это событие, значение промокода или скидки, добавленного в отдельное поле, номер/вариант эксперимента и т.д. и т.п.
Может быть у вас на сайте есть форма, которая состоит из некоторого количества полей. Пользователь заполняет все данные и отправляем вам заявку. Вы можете не только отследить событие отправки формы, но и передать с ним все выбранные или введенные значения полей самой формы.
Пример формы с множеством полей
Примечание: в счетчики аналитики запрещено загружать данные пользователей, которые могут идентифицировать личность человека (телефон, e-mail, банковские реквизиты, номер полиса, ИНН, физический адрес и т.д.).
В Яндекс.Метрике параметры визитов можно использовать в качестве условия группировки и сегментации. Таким образом, вы сможете создать более детальные срезы, анализировать их, а также определять, какие услуги у вас самые востребованные, какого специалиста чаще всего выбирают, в какое время и т.д. и т.п. Медицина, банковские услуги, автомобильная тематика, недвижимость, интернет-магазин, производство - значения не имеет. Благодаря параметрам визитов вы можете существенно расширить данные вашего счетчика Яндекс.Метрики, передавая вместе с JavaScript-событием еще и параметры. Это очень похоже на параметры событий Google Analytics 4, которые вы можете передавать вместе с самим событием.
Отчет, в котором вы можете увидеть параметры, отправленные в Яндекс.Метрику вместе с JavaScript-событием, называется Параметры визитов.
Отчеты - Содержание - Параметры визитов
Вот так может выглядеть ваш отчет после того, как в него начнут поступать данные. Они будут сгруппированы по параметрам, которые вы передаете.
Пример отчета "Параметры визитов"
Давайте перейдем к настройке JavaScript-событий с дополнительными параметрами.
Отправка данных
Поскольку JavaScript-событие происходит в произвольный момент времени, в тот, когда его совершает сам пользователь, отправка данных в Яндекс.Метрику с параметрами визита будет производиться с помощью аргумента params метода reachGoal.Таким образом, конструкция, которую вам необходимо использовать для передачи параметров визита вместе с событием, следующая:
ym(XXXXXX, 'reachGoal', target, params);, где:
- XXXXXX – идентификатор счетчика Яндекс.Метрики;
- reachGoal – метод для отслеживания цели типа JavaScript-событие;
- target – идентификатор цели:
- params – параметры визита;
Параметры визита могут быть статическими и динамическими. Статические данные - это те, которые заданы изначально и не меняются в процессе совершения события, то есть являются константами (const). Динамические, напротив, меняются от события к событию и от выбора самого пользователя. Например, один посетитель сайта заполнил заявку в 17:00 и ввел промокод на скидку, а другой отправил форму в 17:05 и не добавил его. Для каждого из них передадутся разные значения параметров визита. На практике в большинстве случаев используются именно динамические значения, так как все пользователи по-разному взаимодействуют с вашим сайтом.
Однако, чтобы продемонстрировать вам различия и то, как можно передать самый простой параметр визита с событием в Яндекс.Метрику, я начну с такого примера. Предположим, для все того же клика по кнопке (см. выше) я хочу отслеживать JavaScript-событие, но вместе с ним передавать статический параметр события цвета кнопки.
Передача одного параметра визита (статические)
Конструкция события, которую я добавлял в исходный код страницы на отслеживаемый элемент, без параметра визита выглядела так:ym(54442894,'reachGoal','clickButton')Поскольку для передачи параметра визита требуется еще один аргумент params, мы должны добавить его в конец строки, чтобы получилось следующее:
ym(54442894,'reachGoal','clickButton', {zvet_knopki: 'green'}), где:
- zvet_knopki - параметр визита
- green - значение параметра визита.
Пример JavaScript-события с параметром визита (клик по кнопке)
После того, как это сделаете вы или ваш разработчик, проверьте корректность отправки данных. Сделать это можно несколькими способами:
- добавить к адресу параметр _ym_debug со значением 1. Например, https://graphanalytics.ru/?_ym_debug=1
Отслеживаемое событие с идентификатором цели и параметром визита
Это и есть то Java-Script событие, которое мы планировали отслеживать. Вместе с ним отображается Goal id (идентификатор цели) и Params, в котором передается параметр визита (zvet_knopki со значением green) как JavaScript-объект.
- использовать готовое расширение для браузера. Например, Yandex Metrica Debugger или Яндекс.Метрика Инспектор.
Отслеживаемое событие с идентификатором цели и параметром визита (расширение Yandex.Metrica Inspector)
Если вы все сделали правильно, то в течение нескольких минут информация о достижении цели и вашем параметре визита появится в отчетах Яндекс.Метрики. Иногда задержка может доходить до 30-40 минут.
Переданный параметр визита в отчете "Параметры визитов"
Как видите, имя параметра визита zvet_knopki в отчете имеет Параметр визита, ур. 1, а его значение green вложено в Параметр визита, ур. 2. При передаче иерархической структуры данных в отчетах Яндекс Метрики отобразится до 10 уровней вложенности. Если в рамках одного визита был отправлен один параметр с разными значениями, то в Метрике отобразятся все значения.
Передача нескольких параметров визита (статические)
С одним параметром визита понятно. А как отправить несколько параметров визита? Точно так же, только параметры визита перечисляются через запятую. Например, если добавить к цвету кнопки еще один статический параметр mesto_knopki со значением sleva, то итоговая конструкция события будет выглядеть так:ym(54442894,'reachGoal','clickButton', {zvet_knopki: 'green', mesto_knopki: 'sleva'}), где:
- zvet_knopki и mesto_knopki - параметры визита;
- green и sleva - значение параметров визита.
Пример JavaScript-события с двумя параметрами визита (клик по кнопке)
Воспользовавшись еще раз расширением Yandex.Metrica Inspector и совершив клик по кнопке, вы увидите событие этот хит на шкале событий. Только теперь обновленный и с двумя параметрами визита:
Событие с двумя параметрами визита
Через некоторое время в отчете Яндекс.Метрики отобразится новый параметр визита:
Второй параметр визита в отчете
Аналогично с событием можно отправлять и 3, и 4, и 5 параметров визита
Примечание: в одном визите в Метрику можно передать до 1000 параметров.
Передача 10 параметров визита (статические)
Давайте сформируем JavaScript-объект, который будет иметь 10 параметров визита. Например, такие:- zvet_knopki - green
- mesto_knopki - sleva
- text_knopki - КОНСУЛЬТАЦИЯ
- class_knopki - button hp-button-1 slide-button w-button green fancybox
- link_knopki - popup-audit
- font_knopki - Open Sans
- size_knopki - 280x200
- value_knopki - 500
- site_domain - graphanalytics.ru
- date - 21.10.2022
Код события с 10 параметрами визита на отслеживаемом элементе
Тогда все параметры можно вынести в отдельное место в коде вашего сайта и сформировать JavaScript-объект со своим именем, который будет выглядеть так:
var params10 = {
mesto_knopki: 'sleva',
text_knopki: 'КОНСУЛЬТАЦИЯ',
class_knopki: 'button hp-button-1 slide-button w-button green fancybox',
link_knopki: 'popup-audit',
font_knopki: 'Open Sans',
size_knopki: '280x200',
value_knopki: 500,
site_domain: 'graphanalytics.ru',
date: '21.10.2022'
};
- , где:
- var - вводное слово в JavaScript, объявление переменной;
- params10 - имя JavaScript-объекта;
Теперь конструкция JavaScript-события, которую будет необходимо добавить на всю ту же отслеживаемую кнопку в нашем примере, приобретает вид:
ym(54442894,'reachGoal','clickButton', params10), где:
- params10 - название JavaScript-объекта, в который помещены наши 10 параметров визита.
Код события с именем JavaScript-объекта
Совершив событие, проверьте, чтобы все передаваемые параметры визита отображались как нужно.
Проверка параметров события через _ym_debug
Отчет Яндекс.Метрики через некоторое время наполнится новой статистикой:
Новые параметры визита в отчете Яндекс.Метрики
Причем один из параметров визита (value_knopki) я передал как число (number) не используя кавычки, а все остальные в виде строки (string) с использованием апострофа. Именно поэтому в отчете "Параметры визитов" в столбцах Сумма параметров визитов и Среднее параметров визитов появилось значение 500. Над числом можно производить арифметические операции (сложение, вычитание, умножение, деление), а над строкой нет.
Примечание: если вам интересно, какие существуют типы данных в JavaScript, рекомендуется ознакомиться с этой статьей. Она хоть и написана с прицелом на диспетчер тегов Google, но дает практическое понимание того, чем один тип отличается от другого и как каждый из них обозначается.
Передача одного параметра визита (динамические)
Передавать статические данные в параметрах визитов - это хорошо, но с практической точки зрения нецелесообразно. Зачем вам отслеживать цвет кнопки, размер, шрифт, текст, домен сайта и т.д.? В этом нет необходимости. Как я писал выше, эти примеры я привел для того, чтобы вы визуально имели представление о способах передачи 1, 2, ..., 10, N параметров визита без отвлечения на то, что сами они могут принимать разные значения в зависимости от действий пользователя на вашем сайте.Но именно этого мы и хотим. Нам нужно передавать в Яндекс.Метрику разное время совершения события, отслеживать разные URL-адреса страниц, передавать с параметром визита уникальный идентификатор пользователя, значения выбранных полей формы или введенной в них информации, идентификатор заявки, который всегда уникален, размер скидки и т.д. и т.п. Другими словами, отслеживать различные состояния на действия своих посетителей. Как это сделать?
К сожалению, когда требуется отслеживать значения, которые меняются от события к событию и от выбора самого пользователя, без программирования не обойтись. Вам или вашему разработчику нужно будет сформировать определенные конструкции и написать функции (код) для каждого такого параметра визита, чтобы в него передавалось определенное значение на конкретное действие пользователя.
В официальной документации Яндекса есть очень простой и наглядный пример передачи параметра визита с динамическими данными. Если на всех страницах сайта размещена одна форма, можно отследить, с какой страницы ее заполняют чаще. Или если вы хотите отследить с какой страницы был совершен клик по телефону в шапке сайта, то вы также можете использовать нижеприведенное решение.
Оно заключается в использовании JavaScript-команды document.location.href, которая извлекает значение всего URL-адреса из браузера пользователя. Вы можете убедиться в этом самостоятельно - скопировать эту конструкцию, в браузере перейти на любую страницу своего сайта, открыть вкладку Console и вставить туда document.location.href, нажав в конце Enter:
document.location.href
Вам отобразится значение всего URL-адреса той страницы, которая у вас сейчас активна в браузере.
Первый пример с передачей динамического параметра визита выполним как раз с использованием команды document.location.href. На моем тестовом сайте techniqa.ru в шапке сквозным образом размещен номер телефона:
Кликабельный номер телефон, размещен в шапке сайта
На любой странице сайта пользователь со своего мобильного устройства может нажать на кликабельный телефон и позвонить. Нам требуется не просто отследить событие клика по телефону, но еще и передать URL-адрес страницы, с которой было совершено данное взаимодействие. И поможет нам в этом как раз document.location.href.
Чтобы это сделать, вам необходимо в интерфейсе Яндекс.Метрике создать JavaScript-событие и скопировать код цели:
JavaScript-событие клика по телефону
Далее к этому коду цели нужно добавить еще один аргумент с params, чтобы динамически отслеживать URL-адрес страницы, с которой было совершен клик по телефону. В результате код цели из интерфейса:
ym(54681160,'reachGoal','clickPhone')
Трансформируется в:
ym(54681160,'reachGoal','clickPhone', {URL: document.location.href})
Именно последний вариант вам необходимо добавить на отслеживаемый элемент. В моем случае - это блок с телефоном:
Код JavaScript-события с динамическим параметром визита (клик по телефону)
В зависимости от того, на какой странице будет находиться пользователь на сайте, при клике по номеру телефона в параметр визита будет передаваться текущее значение URL-адреса страницы. Проверить настройку отслеживания очень легко с помощью расширения Яндекс.Метрика Инспектор. Откройте одну страницу и нажмите на телефон. На шкале событий вы увидите надпись Цель + Параметры. Раскрыв ее, в ней отобразится JavaScript-событие с переданным динамическим параметром визита URL и значением URL-адреса, на котором был совершен клик по телефону:
Динамический параметр визита URL (главная страница)
Поскольку клик был осуществлен с главной страницы, то в параметр визита URL передалось значение https://techniqa.ru. Но если перейти на другую страницу сайта (например: http://techniqa.ru/apple-imac-21-5-6-core-i5-3-ggc-8-gb-1-tb-fd-rpro-560x) и сделать клик по телефону там, то в параметр визита URL будет передано это значение:
Динамический параметр визита URL (страница товара)
Все благодаря JavaScript-команде document.location.href. В отчете Яндекс.Метрики через некоторое время станет доступна эта информация:
Динамический параметр визита URL в отчете "Параметры визитов"
Если в рамках одного визита был отправлен один параметр с разными значениями, то в Метрике отобразятся все значения. Так и произошло. Но не всегда возможно использовать готовые JavaScript-команды, которые уже заложены в систему и которые можно применять в любом проекте. Чаще всего нам необходимо решать нетривиальные задачи - извлекать текущее время в определенном формате, идентификатор заявки, информацию из полей формы или ту, которую пользователь выбрал, заполняя ее. И вот здесь вам пригодятся навыки программирования.
Передача нескольких параметров визита (динамические)
Усложним пример и передадим два динамических параметра визита:- точное время обращения;
- значение поля из формы.
Пример формы с полями (graphanalytics.ru)
Поскольку в Яндекс.Метрику запрещено загружать данные пользователей, которые могут идентифицировать личность человека, извлечем значение только из поля Ссылка на сайт или мобильное приложение. Таким образом, в Яндекс.Метрику будет передаваться JavaScript-событие отправки формы с двумя динамическими параметрами визита - точное время, когда форма была отправлена пользователем, и что посетитель конкретно ввел в поле Ссылка на сайт или мобильное приложение.
Давайте приступим к настройке. Первым делом нам необходимо в интерфейсе создать соответствующую цель типа JavaScript-событие, задать идентификатор и скопировать код цели. Поскольку итоговая цель - это отслеживание отправки формы, а динамические параметры визита передаются с событием дополнительно, то назвать саму цель можно как Отправка формы:
JavaScript-событие отправки формы
Код цели для сайта сейчас выглядит так:
ym(54442894,'reachGoal','formSend')Теперь необходимо понять, каким образом передавать два параметра визита (точное время обращения и значение поля из формы) с этим событием. К счастью, для точного времени обращения в моем блоге уже есть статья с необходимым кодом JavaScript, которым можно воспользоваться:
function TimeStamp() {
var now = new Date();
var tzo = -now.getTimezoneOffset();
var dif = tzo >= 0 ? '+' : '-';
var pad = function(num) {
var norm = Math.abs(Math.floor(num));
return (norm < 10 ? '0' : '') + norm;
};
return 'Дата: ' + now.getDate()
+ '.' + pad(now.getMonth()+1)
+ '.' + pad(now.getFullYear()) + ' '
+ '|' + " " + 'Время: ' + pad(now.getHours())
+ ':' + pad(now.getMinutes())
+ ':' + pad(now.getSeconds()) + ' '
+'|' + ' ' + 'UTC ' +
dif + pad(tzo / 60) +
':' + pad(tzo % 60);
}
var HitTimestamp = TimeStamp();
Чуть позже я покажу куда его можно вставить. Теперь осталось извлечь значение из поля формы Ссылка на сайт или мобильное приложение и передать его вместе с событием отправки формы. Сделать это получится только в том случае, если вы знаете что такое CSS-селекторы и JavaScript-команды по извлечению данных из HTML-элементов. Если вы не обладаете такими навыками, то поручите эту задачу разработчику.
Для моего примера значение из поля формы Ссылка на сайт или мобильное приложение на классическом JavaScript можно извлечь с помощью команды:
document.querySelector('div#popup-audit input#reg_site').value;, где:
- document.querySelector - возвращает первый элемент в документе, соответствующий указанному селектору в скобках;
- ('selector') - значение селектора данного поля;
- value - позволяет вернуть значение из атрибута value текстового поля input, в которое пользователь ввел данные.
document.querySelector('div#popup-audit input#reg_site').value;
Как видите, данный код правильно извлекает значение osipenkov.ru из поля формы Ссылка на сайт или мобильное приложение. Следовательно, мы можем использовать эту конструкцию в параметрах визита вместе с отслеживаемым событием, только немного в модифицированном виде.
Теперь осталось все это объединить и написать итоговый код отслеживания события отправки формы. На самом деле это не так просто. Человек, никогда ранее не использовавший JavaScript, может не разобраться в том, в какую часть страницы нужно вставить скрипт, какой обработчик использовать, в какой момент данные должны отправляться в Яндекс.Метрику и т.д. Именно поэтому, когда дело доходит до динамических параметров визита, которые требуется отправлять в аналитику, да еще и без использования Google Tag Manager, такую задачу рекомендуется выполнять совместно с программистом.
Пример реализации на сайте graphanalytics.ru с текущими исходными данными будет выглядеть так:
Пример реализации динамических параметров визита с помощью JavaScript
Ниже я привожу итоговый код, который вставлен под самой формой в исходном коде страницы:
<script>
var form = document.getElementById('form1');
form.addEventListener('submit', (e) => {
var site = form.querySelector('form#form1 input#reg_site').value;
function TimeStamp() {
var now = new Date();
var tzo = -now.getTimezoneOffset();
var dif = tzo >= 0 ? '+' : '-';
var pad = function(num) {
var norm = Math.abs(Math.floor(num));
return (norm < 10 ? '0' : '') + norm;
};
return 'Дата: ' + now.getDate()
+ '.' + pad(now.getMonth()+1)
+ '.' + pad(now.getFullYear())
+ ' ' + '|' + " " + 'Время: '
+ pad(now.getHours()) + ':'
+ pad(now.getMinutes())
+ ':' + pad(now.getSeconds())
+ ' ' +'|' + ' ' + 'UTC '
+ dif + pad(tzo / 60) + ':'
+ pad(tzo % 60);
}
var HitTimeStamp = TimeStamp();
var myParams = {time_form:HitTimeStamp, site_field:site};
ym(54442894,'reachGoal','formSend', myParams);
});
</script>
, где:
- var form = document.getElementById('form1') - переменной form присваивается значение document.getElementById('form1'), с помощью которого можно найти форму на странице по ее идентификатору (id) если он есть;
- form.addEventListener('submit', ...) - при отправке формы срабатывает событие submit, поэтому прослушивается именно оно с помощью метода addEventListener, позволяющего добавлять обработчик событий к любому объекту HTML;
- var site = form.querySelector('form#form1 input#reg_site').value; - переменной site присваивается значение, которое пользователь введет в поле Ссылка на сайт или мобильное приложение;
- function TimeStamp() - функция точного времени обращения, которая нужна нам для отправки динамического параметра визита в Яндекс.Метрику;
- var myParams = {time_form:HitTimeStamp, site_field:site} - в JavaScript-объекте myParams перечисляются два параметра визитов в виде пары ключ:значение для последующей отправки в Яндекс.Метрику вместе с событием;
- ym(54442894,'reachGoal','formSend', myParams) - код цели JavaScript-события для Яндекс.Метрики с двумя динамическими параметрами визита.
Проверить передачу данных можно с помощью расширения Яндекс.Метрика Инспектор. Заполнив форму и отправив ее, на шкале событий я увижу надпись Цель + Параметры. Раскрыв ее, в ней отобразится JavaScript-событие с переданным динамическим параметром визита time_form и значением точного времени отправки формы, а также параметров визита site_field, в котором будет передаваться значение введенной пользователей информации в поле Ссылка на сайт или мобильное приложение:
Два динамических параметра визита (точное время обращения и значение поля формы)
Если другой пользователь отправит форму и введет значение в отслеживаемое поле, в Яндекс.Метрику будут переданы новые уникальные значения. Через некоторое время вы увидите их в отчете "Параметры визитов":
Динамические параметры визита в отчете "Параметры визитов"
Примечание: сейчас на многих сайтах используются AJAX-формы, на которых стандартный submit не срабатывает. В этом случае конструкцию JavaScript-события с параметрами визитов следует вставлять в скрипт, который проводит валидацию и/или отправляет форму. Подробнее об этом уточняйте у своего разработчика.
Вот таким образом вы можете передавать 1,2,3...N параметров визита вместе с событием.