Цель
26Фев

Настройка целей JavaScript-событие в Яндекс Метрике

Немного теории для начинающих
В данной статье речь пойдет о настройке целей типа JavaScript-событие, которые помогают отслеживать различные действия посетителей на сайте (клик по кнопке или ссылке, заполнение формы и пр).
Например, для отслеживания действия «клик по кнопке Заказать» при заполнении формы на нашем сайте создаем в метрике соответствующую цель и придумываем для нее идентификатор.
Создание javascript цели в Яндекс Метрике
Теперь в код данной кнопки нужно метод reachGoal, для того чтобы сведения о клике отправлялись в Метрику.
метод reachGoal в Яндекс Метрике

В параметре yaCounterXXXXXX вместо символов XXXXXX нужно указать номер своего счетчика.

Основная проблема в том, что не на всех сайтах легко добраться до основного кода. Поэтому одним из альтернативных решений будет использование программы Google Tag Manager (gtm).

Реализация целей Яндекс Метрики в gtm

Google Tag Manager (gtm) – программа заметно упрощает работу с программами веб-аналитики. Для настройки целей типа JavaScript-событие в данной программе вам не придется редактировать код на сайте.

1. Добавляем в Яндекс Метрике цель –событие и придумываем ей идентификатор. Теперь вместо добавления метода reachGoal в код сайта нужно проделать следующие шаги.

2. Настраиваем триггер, который будет срабатывать при клике на нужную нам кнопку.

Проверьте в разделе «Переменные», включены ли у вас встроенные переменные, для определения событий-кликов на сайте.

Встроенные переменные в gtm

Далее создаем триггер.

Триггер gtm Клик - все элементы
Выбираем тип триггера «Клик – Все элементы», условие активации «Некоторые клики» — а именно клики по элементам, которые содержат определенный CSS класс. Кроме переменной Click Classes можно было выбрать и другие переменные, например, Click Text (текст кнопки) или Click Element (например, клик по элементу, содержащему определенный CSS класс).

Если вам тяжело определиться с условием или найти советующее условие для переменной (например, нужный CSS класс кнопки) вы можете настроить данный триггер с условием активации «все клики». В режиме предварительного просмотра после клика на нужную кнопку посмотреть какие переменные были распознаны в опции gtm.click.

Переменные в gtm.click

3. Создаем тег для отправки данный в Яндекс Метрику.

Выбираем тип тега «Пользовательский HTML», где вставляем следующий скрипт, содержащий yaCounterXXXXXX.reachGoal(‘zakaz’);
Создание целей Метрики в gtm

В качестве условия активации – ранее созданный триггер.

4. Проверяем в режиме предварительного просмотра, срабатывает ли только что созданный тег и публикуем изменения.

gtm Режим предварительного просмотра

Как видим, данный метод настройки целей в Яндекс Метрике значительно упрощает работу.
Помимо клика по кнопке, таким же образом можно настроить отслеживание кликов по ссылкам на сайте.