Настройка JavaScript–события в Метрике: пошаговая инструкция

JS–события, настроить которые можно в системе аналитики от Яндекс, помогают комплексно исследовать поведение посетителей на портале и улучшить свою площадку. Их настройка позволяет узнать все о том, что делают посетители портала на конкретной странице: заполняют формы, нажимают кнопки, открывают модальные окна и используют другие интерактивные элементы. В статье обсудим, как бизнес может использовать такие данные, и каким образом настроить цели в Метрике от Яндекса.

Зачем нужны Javascript–события?

Как и большинство данных от систем веб–аналитики, в первую очередь JS–события помогают оптимизировать веб–ресурс и решить целый ряд бизнес–задач:

• Улучшение пользовательского опыта. Анализируя, какие действия совершает или, наоборот, не совершает на портале юзер, можно понять, насколько прост и понятен путь к конверсионному действию – заполнению формы, подписке, оформлению заказа. Вы наглядно видите, какие элементы интерфейса нравятся пользователям, с какими блоками активней взаимодействуют, а что – обходят своим вниманием. На основании этих данных можно улучшить дизайн сайта, сделав его более удобным.
• Оптимизация воронки продаж. Настроить JS–событие можно и для того, чтобы понять, на каком этапе взаимодействия с площадкой происходит отказ.  Пользователям может быть банально не понятно, как заполнять нужную форму или куда следует нажать, чтобы завершить регистрацию. Работа над этими недочетами поможет повысить конверсию и улучшить воронку.
• Анализ эффективности рекламной стратегии. Настраивать Javascript событие в Метрике стоит параллельно с запуском рекламных кампаний на разные источники трафика. Так можно вычислить, откуда сайт получил основное количество лидов и были ли они целевыми. А на основании этого – перераспределить маркетинговый бюджет.

Шаг 1: настройка события в Метрике

Проконтролировать можно практически все, что делает на портале юзер: главное, определиться с целью сбора таких данных. Так, нажатие кнопок и заполнение форм покажет, доходят ли лиды до выполнения конверсионных действий, скролл позволит оценить, насколько вовлечены посетители в изучение контента, а загрузка файлов – поможет понять, скачивают ли ваш лид–магнит. Для владельцев интернет–магазинов эта функция и вовсе незаменима: можно отследить процесс контакта клиентов с карточками товара и подсчитать, какое количество посетителей добавляет товары в корзину или знакомиться с подробным описанием.

Для получения этих данных и нужны JS–события и цели. Их настройка осуществляется в два этапа: внутри сервиса и непосредственно на вашем сайте. Начать следует с Метрики:

• Авторизуйтесь в своем аккаунте на Яндекс и перейдите в личный кабинет Метрики
• Перейдите в пункт меню «Цели»
• Кликните на кнопку «Добавить цель», и выберите «JavaScript-событие»
• Для удобства придумайте название новой цели и выберите Javascript–событие в Яндекс Метрике, которое хотите отслеживать из предложенных системой
• Система должна понимать, при каких условиях цель считается достигнутой. Для этого необходимо выбрать один из трех вариантов условий отслеживания:

1. Совпадает. Такой вариант стоит выбирать, когда сервис должен контролировать выполнение единственной цели на странице (например, заполнение формы). Она отобразится в отчете и будет считаться выполненной, если система обнаружит в коде сайта полный идентификатор цели.

2. Содержит. Этот вариант следует предпочесть, если на портале нужно проконтролировать выполнение нескольких целей. Тогда система будет считать действие выполненным при обнаружении части идентификатора в коде.

3. Регулярное выражение. Оно используется при сегментировании по условиям достижения цели: например, при отслеживании выполнений действий лидами из конкретного источника, когда вам известен точный URL канала трафика. Работать с ними сложнее, а функционал Метрики позволяет выполнить более тонкую настройку такого условия.

Если хотите получить детальную статистику, укажите сумму, которую приносит вам выполнение цели пользователем. Это позволит системе подсчитать и отобразить в отчете метрики ROMI и ROI, а вам – сделать выводы о стоимости лида из конкретного канала.

Шаг 2. Настройка Javascript–события на сайте

Информацию о том, что JS–цель достигнута, а определенное действие выполнено пользователем с соблюдением всех установленных при настройке условий, система веб–аналитики получает непосредственно от вашей площадки. Настроить событие внутри веб–ресурса можно несколькими способами.

Интеграция в HTML–код площадки

Передача данных для отслеживания в Метрику делается при помощи методов. Доступ к ним в личном кабинете сервиса открывается после настройки счетчика на портале. За выполнение JS–события отвечает метод reachGoal. Для каждого из них генерируется уникальный код. Например, клик по кнопке может обозначаться так:

gtag('event', 'button_click', {

   'event_category': 'Button',

   'event_label': 'Buy'

});

Яндекс Метрика сама генерирует html, а скопировать его можно в личном кабинете при настройке цели. Если ваш сайт создан при помощи Taptop, интеграция не вызовет сложностей: в конструкторе легко можно подключить кастомный код, добавив любые команды, выполняющие разные функции.

Когда код добавлен, следует убедиться, что событие работает, а Метрика получает нужные данные. Для этого загрузите свой портал с нескольких разных браузеров и самостоятельно выполните на странице нужное действие, а затем проверьте информацию в личном кабинете сервиса. Обычно система обновляет информацию в течение 15–20 минут.

Использование Google Tag Manager

Не все конструкторы позволяют работать с исходным кодом, но это не значит, что администраторы таких порталов не могут использовать JS–цели. Настройку можно произвести и через систему аналитики от Гугл. Для этого необходимо:

• Залогиниться в Google, перейти в личный кабинет GTM и установить счетчик Метрики с использованием этого сервиса.
• Выбрать в личном кабинете раздел «Рабочая область» и перейти в пункт «Переменные».
• Выбрать вариант «Встроенные переменные», а когда откроется соответствующий объект – нажать кнопку «Настроить».
• Команда откроет меню под названием «Конфигурация встроенных переменных». Если целью является заполнение формы, выбираем все, что связано с этим параметром, и выставляем соответствующие чекпоинты.
• После этого в левом меню необходимо выбрать раздел «Теги». Если контейнер пуст (о чем сервис оповестит соответствующим сообщением), нажмите кнопку «Создать».
• Перед вами появится всплывающее окно с надписью «Конфигурация тега». Из предложенных вариантов нужно выбрать «Пользовательский html». Появится окно, в которое и нужно вставить код, скопированный ранее из Метрики.
• Вернитесь к всплывающим окнам и под разделом «Теги» выберите раздел «Триггеры». Система откроет еще один блок, где, чтобы создать новый триггер, нужно нажать на + в правом верхнем углу.
• Сервис откроет вкладку «Триггер без имени». Кликните по его настройкам: перед вами появится меню с несколькими разделами. Необходимо скролить вниз, чтобы дойти до «Взаимодействия пользователей». Здесь нужно выбрать вариант «Отправка формы».
• Система снова откроет вкладку «Настройки триггера». Здесь выбираем «Некоторые формы». В поле Form ID выбираем «равно», а далее – указанный в коде вашего сайта идентификатор нужной формы.
• После этого настройки триггера необходимо сохранить, а самому триггеру – придумать название. В списке тегов вы увидите тот, который добавили для отслеживания.

Как узнать, что все работает?

Откройте режим «Консоль» во вкладке своего браузера при помощи горячих клавиш Ctrl+Shift+J. В другой вкладке откройте свой портал и выполните целевое действие. Если все сделано правильно, то в консоли вы увидите Reach goal – цель сработана, событие зафиксировано.

Отчет о выполненных событиях в Яндекс.Метрике стоит проверять не раньше, чем через 20 минут.  Искать его нужно в разделе «Конверсии»: именно там отобразится информация о выполненных действиях. Если ее нет – вы ошиблись при настройке и нужно перепроверить все снова.

Многие администраторы игнорируют использование JS–событий в Яндекс.Метрике, не понимая, чем они отличаются от других типов целей, доступных в сервисе. Однако преимущества их использования очевидны:

• JS–цель – это возможности более гибкой и тонкой настройки событий с заданными параметрами. Можно управлять не только типом цели (нажатие кнопки, заполнение формы), но и экспериментировать с критериями срабатывания.
• Настройка JavaScript-событий позволяет получить больше данных для дальнейшей оптимизации своего портала. Вы точно знаете, что делают пользователи, и можете разобраться, почему лиды не выполняют конверсионных действий.
• Графики, которые выстраивает Метрика на основании срабатываний JS–целей, позволяют быстро принимать решения и оценивать результаты. Можно наглядно убедиться в том, насколько эффективна выстроенная вами воронка продаж, удобен ли интерфейс для пользователей, а главное – правильно ли вы настроили рекламу.

Таким образом, JS–цели – это одна из возможностей сделать свой сайт еще удобней для пользователей, скорректировать собственные усилия по продвижению, и, конечно, сэкономить бюджет. Если портал создан при помощи конструктора Taptop, вы не только с легкостью интегрируете различные счетчики веб–аналитики, но и без труда сможете изменить дизайн площадки на основании полученных данных.