Контекст
17 сентября 2021
8 мин
705
Как поставить цель на кнопку
Полина Смирнова
Главный редактор, копирайтер, контент-менеджер
Что вы узнаете
- JavaScript-событие – что это?
- Как установить цель на кнопку сайта
- Как узнать код кнопки
- Как создать цель JavaScript в Яндекс Метрике
- Как создать цель Событие на кнопку в Google Analytics
- Как добавить цель на сайт
- Настройка цели для Яндекс Метрики
- Настраиваем цель для Google Analytics
- Цель на кнопку для Яндекс и Google
- Как проверить работу цели
Содержание статьи
Помимо данных о посещениях и длительности просмотров, сервисы аналитики Google Analytics и Яндекс Метрика предоставляют сведения о том, какой процент ваших посетителей заполняет формы обратной связи, нажимает кнопки «купить», «оформить», «подписаться» и совершает иные взаимодействия с сайтом. Для получения таких данных вам необходимо настроить цель JavaScript-событие и установить ее на соответствующую кнопку вашего сайта.
В этой статье мы поговорим о том, что собой представляет событие JavaScript, как его настроить и как отслеживать целевые действия пользователей через работу JS-кода.
JavaScript-событие – что это?
Данный тип взаимодействия посетителя с сайтом означает, что пользователь совершил целевое действие, в результате которого URL страницы не изменился.
В этом случае вы не можете проследить действия потенциального клиента посредством целей «Количество просмотров» или «Посещение страниц», поскольку в них фиксируется смена адресов при переходе пользователя по страницам. При нажатии кнопки «купить», «подписаться», при заполнении формы заявки пользователь остается на той же странице – то есть адрес не меняется, однако целевое действие совершено. Как же тогда контролировать выполнение медиаплана? Для отслеживания таких действий и используется цель «JavaScript-событие».
Цель JavaScript считается достигнутой в том случае, если в результате действия пользователя на странице срабатывает специальный код. С помощью JS информация о совершенном действии передается на сервис веб-аналитики и фиксируется.
Как установить цель на кнопку сайта
Чтобы настроить цель типа «JavaScript-событие» на кнопку вашего сайта и отслеживать ее выполнение в системах аналитики, нужно сделать следующее:
-
Настроить цель JS-событие в Яндекс Метрике или Событие в Google Analytics;
-
Вставить уникальные данные вашей новой цели в html-код кнопки сайта и сохранить измененный код.
А теперь разберемся подробнее, как это сделать.
Как узнать код кнопки
Прежде всего нам нужно узнать код кнопки, с которым мы будем работать. Для этого:
-
Кликаем правой кнопкой мыши по нужной кнопке на сайте и нажимаем «Просмотреть код».
-
В открывшейся консоли находим код, выделенный цветом.
-
Копируем код и сохраняем.
В зависимости от используемого типа html-элемента код кнопки будет иметь разный вид: <a href= … >, <input_type= … >, <button_type= … > и т.д. В дальнейшем именно в этот код мы будем вносить изменения.
Как создать цель JavaScript в Яндекс Метрике
Далее нам нужно настроить цель в Яндекс Метрике и получить идентификатор, который мы вставим в код кнопки на сайте.
Для этого выполняем следующие действия:
-
Открываем настройки счетчика, вкладку «Цели».
-
Нажимаем «Добавить цель», в открывшейся форме выбираем тип «JavaScript-событие».
-
Заполняем поля «Название» (любое удобное для вас), «Идентификатор цели».
-
Нажимаем «Добавить».
-
Записываем номер счетчика и идентификатор цели.
Название идентификатора набирается только латиницей, и обязательно должно удовлетворять следующим требованиям:
- Быть уникальным для каждого события (каждой кнопки, формы связи т.д.).
- Не повторять URL какой-либо страницы сайта.
- Не содержать символы # & = + ? / \
Если имя идентификатора для конкретной кнопки будет совпадать с идентификатором для другой кнопки или адресом страницы сайта, то полученные данные будут некорректными.
Как создать цель Событие на кнопку в Google Analytics
Если вы хотите настроить цель для отслеживания в Гугл Аналитикс, то необходимо сделать следующее:
-
Зайти в раздел «Администратор», далее – в «Цели», затем нажать «+ цель».
-
На шаге «Установка цели» выбрать тип (можно оставить «Шаблон» по умолчанию). Далее – «Продолжить».
-
На следующем шаге «Описание цели» заполнить поле «Название» (понятное для вас) и в поле «Тип» поставить галку в пункте «Событие».
-
На шаге «Подробные сведения о цели» заполняем первые два поля «Категория» и «Действие» – это могут быть любые понятные вам названия, введенные латиницей.
-
Включить кнопку «Использовать ценность события в качестве ценности цели конверсии».
-
Нажать «Сохранить».
Как добавить цель на сайт
Берем сохраненный код кнопки сайта, вставляем в него данные созданной цели и сохраняем на сайте новый измененный код.
Например, мы хотим узнать, сколько потенциальных клиентов позвонило через нажатие кнопки телефона на нашем сайте. Для этого используем код кнопки с телефонным номером <a href="tel:+78125619075" style=""><span class="phone_alloka" data-phone="+7%20%28812%29%20244-7138">+7 812 561-9075</span></a>.
Далее делаем следующее.
Настройка цели для Яндекс Метрики
Для Яндекс Метрики используем комбинацию onClick=«yaCounter12345678.reachGoal('identifikator');», в которой 12345678 – это номер счетчика, identifikator – придуманный нами уникальный идентификатор.
Вставляем данный код в код кнопки и получаем:
<a href="tel:+78125619075" style="" onClick=«yaCounter12345678.reachGoal('identification');»><span class="phone_alloka" data-phone="+7%20%28812%29%20244-7138">+7 812 561-9075</span></a>
Настраиваем цель для Google Analytics
Для Гугл Аналитикс пользуемся комбинацией onClick=«ga('send', 'event', 'email-num', 'email-click', 'click_email', '15');», где email-num соответствует полю «Категория», email-click – полю «Событие», click-email – полю «Ярлык», а цифра 15 – значению поля «Конверсия». Все перечисленные поля вы заполняете самостоятельно на стадии создания цели в Google Analytics. Соответственно, при вставке кода на сайт вы заменяете указанные поля на выбранные вами значения.
Поля send и event не заменяете и оставляете в исходном виде.
В итоге у вас получается:
<a href="tel:+78125619075" style="" onClick=«ga('send', 'event', 'email-num', 'email-click', 'click_email', '15');»><span class="phone_alloka" data-phone="+7%20%28812%29%20244-7138">+7 812 561-9075</span></a>
Цель на кнопку для Яндекс и Google
В случае, если мы хотим установить коды Яндекс Метрики и Гугл Аналитикс на одну кнопку, то вставляем их просто рядом:
<a href="tel:+78125619075" style="" onClick=«yaCounter12345678.reachGoal('identification');onClick=«ga('send', 'event', 'email-num', 'email-click', 'click_email', '15');»><span class="phone_alloka" data-phone="+7%20%28812%29%20244-7138">+7 812 561-9075</span></a>
Как проверить работу цели
После установки цели на кнопку сайта рекомендуется проверить корректность ее работы.
Для этого к адресу страницы в строке браузера добавляем команду ?_ym_debug=1 и загружаем страницу.
Далее вызываем консоль через команду Ctrl+Shift+J и совершаем на сайте целевое действие. В консоли отобразится вызов метода reachGoal, который мы использовали в коде.
Чтобы удостовериться, что отчеты о действиях пользователей отправляются на сервис аналитики, заходим в отчеты и проверяем:
-
В Яндекс Метрике заходим в раздел «Отчеты», далее – «Стандартные отчеты», затем – «Конверсии».
-
В Google Analytics открываем «Отчет в реальном времени» и далее – «Конверсии».
Телеграм-канал об интернет-маркетинге и бизнесе с перцем из первых уст Владимира Пивульского
