Главная
/
Блог
/
Как поставить цель на кнопку

Как поставить цель на кнопку

Время прочтения: 8 мин.

Содержание

JavaScript-событие – что это?
Как установить цель на кнопку сайта
Как добавить цель на сайт
Как проверить работу цели

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

Помимо данных о посещениях и длительности просмотров, сервисы аналитики Google Analytics и Яндекс Метрика предоставляют сведения о том, какой процент ваших посетителей заполняет формы обратной связи, нажимает кнопки «купить», «оформить», «подписаться» и совершает иные взаимодействия с сайтом. Для получения таких данных вам необходимо настроить цель JavaScript-событие и установить ее на соответствующую кнопку вашего сайта.

В этой статье мы поговорим о том, что собой представляет событие JavaScript, как его настроить и как отслеживать целевые действия пользователей через работу JS-кода.

JavaScript-событие – что это?

Данный тип взаимодействия посетителя с сайтом означает, что пользователь совершил целевое действие, в результате которого URL страницы не изменился.

В этом случае вы не можете проследить действия потенциального клиента посредством целей «Количество просмотров» или «Посещение страниц», поскольку в них фиксируется смена адресов при переходе пользователя по страницам. При нажатии кнопки «купить», «подписаться», при заполнении формы заявки пользователь остается на той же странице – то есть адрес не меняется, однако целевое действие совершено. Как же тогда контролировать выполнение медиаплана? Для отслеживания таких действий и используется цель «JavaScript-событие».

Цель JavaScript считается достигнутой в том случае, если в результате действия пользователя на странице срабатывает специальный код. С помощью JS информация о совершенном действии передается на сервис веб-аналитики и фиксируется.

Как установить цель на кнопку сайта

Чтобы настроить цель типа «JavaScript-событие» на кнопку вашего сайта и отслеживать ее выполнение в системах аналитики, нужно сделать следующее:

Настроить цель JS-событие в Яндекс Метрике или Событие в Google Analytics;
Вставить уникальные данные вашей новой цели в html-код кнопки сайта и сохранить измененный код.

А теперь разберемся подробнее, как это сделать.

Как узнать код кнопки

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

Кликаем правой кнопкой мыши по нужной кнопке на сайте и нажимаем «Просмотреть код».

В открывшейся консоли находим код, выделенный цветом.

Копируем код и сохраняем.

В зависимости от используемого типа html-элемента код кнопки будет иметь разный вид: <a href= … >, <input_type= … >, <button_type= … > и т.д.

В дальнейшем именно в этот код мы будем вносить изменения.

Как создать цель JavaScript в Яндекс Метрике

Далее нам нужно настроить цель в Яндекс Метрике и получить идентификатор, который мы вставим в код кнопки на сайте. Для этого выполняем следующие действия:

Открываем настройки счетчика, вкладку «Цели».

Нажимаем «Добавить цель», в открывшейся форме выбираем тип «JavaScript-событие».

Заполняем поля «Название» (любое удобное для вас), «Идентификатор цели».

Нажимаем «Добавить».

Записываем номер счетчика и идентификатор цели.

Как создать цель JavaScript на Яндекс Метрике

Название идентификатора набирается только латиницей, и обязательно должно удовлетворять следующим требованиям:

Быть уникальным для каждого события (каждой кнопки, формы связи т.д.).
Не повторять URL какой-либо страницы сайта.
Не содержать символы # & = + ? / \

Если имя идентификатора для конкретной кнопки будет совпадать с идентификатором для другой кнопки или адресом страницы сайта, то полученные данные будут некорректными.

Как создать цель Событие на кнопку в Google Analytics

Если вы хотите настроить цель для отслеживания в Гугл Аналитикс, то необходимо сделать следующее:

Зайти в раздел «Администратор», далее – в «Цели», затем нажать «+ цель».

На шаге «Установка цели» выбрать тип (можно оставить «Шаблон» по умолчанию). Далее – «Продолжить».

На следующем шаге «Описание цели» заполнить поле «Название» (понятное для вас) и в поле «Тип» поставить галку в пункте «Событие».

На шаге «Подробные сведения о цели» заполняем первые два поля «Категория» и «Действие» – это могут быть любые понятные вам названия, введенные латиницей.

Включить кнопку «Использовать ценность события в качестве ценности цели конверсии».

Нажать «Сохранить».

Как добавить цель Событие в Google Analytics

Как добавить цель на сайт

Берем сохраненный код кнопки сайта, вставляем в него данные созданной цели и сохраняем на сайте новый измененный код.

Например, мы хотим узнать, сколько потенциальных клиентов позвонило через нажатие кнопки телефона на нашем сайте. Для этого используем код кнопки с телефонным номером <a href="tel:+78125619075" style="">+7 812 561-9075</a>.

Далее делаем следующее.

Настройка цели для Яндекс Метрики

Для Яндекс Метрики используем комбинацию onClick=«yaCounter12345678.reachGoal('identifikator');», в которой 12345678 – это номер счетчика, identifikator – придуманный нами уникальный идентификатор.

Вставляем данный код в код кнопки и получаем:

<a href="tel:+78125619075" style="" onClick=«yaCounter12345678.reachGoal('identification');»>+7 812 561-9075</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');»>+7 812 561-9075</a>

Цель на кнопку для Яндекс и Google

В случае, если мы хотим установить коды Яндекс Метрики и Гугл Аналитикс на одну кнопку, то вставляем их просто рядом:

<a href="tel:+78125619075" style="" onClick=«yaCounter12345678.reachGoal('identification');onClick=«ga('send', 'event', 'email-num', 'email-click', 'click_email', '15');»>+7 812 561-9075</a>

Важно! Внесение любых изменений в html-код сайта требует предельной осторожности. Ошибка в коде может серьезно нарушить работу вашего сайта. Если у вас недостаточно навыков работы с html, то рекомендуем обратиться к специалистам профильного агентства.

Как проверить работу цели

После установки цели на кнопку сайта рекомендуется проверить корректность ее работы.

Для этого к адресу страницы в строке браузера добавляем команду ?_ym_debug=1 и загружаем страницу.

Далее вызываем консоль через команду Ctrl+Shift+J и совершаем на сайте целевое действие. В консоли отобразится вызов метода reachGoal, который мы использовали в коде.

Чтобы удостовериться, что отчеты о действиях пользователей отправляются на сервис аналитики, заходим в отчеты и проверяем:

В Яндекс Метрике заходим в раздел «Отчеты», далее – «Стандартные отчеты», затем – «Конверсии».

В Google Analytics открываем «Отчет в реальном времени» и далее – «Конверсии».