Новое в YAGLA
События
Кейсы
Повышение конверсии
Маркетинг
Аналитика
Продвижение
Контекстная реклама
Разбор проектов
Для агентств
Настройка цели на кнопку в Яндекс.Метрике и Google Analytics
Клики по кнопке call-to-action – полезные действия, которые можно отслеживать и анализировать. Достаточно настроить цели в Яндекс.Метрике или Google Analytics.
В этой статье – руководство для тех, кто собирается это сделать самостоятельно, без привлечения программистов. Кстати, это достаточно легко. Смотрите сами!
Настройка цели на кнопку в Яндекс.Метрике
1) В верхнем меню нажмите «Счетчики»:
2) Выберите, для какого счетчика настраивать цель. Кликните по значку настроек рядом с ним:
Выйдет страница настройки.
3) Перейдите по вкладке «Цели» и добавьте новую:
В Метрике 4 вида целей. Обо всех написано здесь.
В этой статье мы рассмотрим подробно настройку цели на кнопку. Для этого создаем JavaScript-Событие.
4) Выберите условие «JavaScript-событие».
Придумайте название, по которому легко понять, что за цель, и уникальный идентификатор.
Требования к значению идентификатора
- Не повторяется на сайте более одного раза (для каждой кнопки – своя цель);
- Соответствует тому, которое вы вставите в код сайта.
Когда всё готово, нажмите «Добавить цель».
Так как мы настраиваем цель на кнопку, нужно, чтобы при нажатии на сайте работала функция вызова цели. Для этого корректируем html-код сайта.
5) Найдите фрагмент кода, который отвечает за кнопку. Добавьте в него тег onclick:
<input type= “button” value= “ТЕКСТ_КНОПКИ” onclick= “yaCounterID_CЧЕТЧИКА.reachGoal(‘ИДЕНТИФИКАТОР‘); return true;”>
Пример
Пользователи нажимают на сайте кнопку, чтобы подписаться. Мы отслеживаем это событие. Имя идентификатора – push_button.
- Заменяем в теге номер счетчика и уникальный идентификатор. В итоге тег выглядит так:
onclick= “yaCounterXXXXXXXX.reachGoal(‘push_button‘); return true;”>
- Копируем его без закрывающего символа >;
- Открываем код и находим строку с настройкой кнопки;
- Вставляем в нее тег:
<td><input type= “submit” value= “подписаться” onclick= “yaCounterXXXXXXXX.reachGoal(‘push_button‘); return true;” /><td>
Проверяем, на месте ли закрывающий элемент />.
- Сохраняем и закрываем.
Проверка
Чтобы убедиться, что информация о нажатии на кнопку отправляется, добавьте в адрес страницы такой параметр:
http:///?_ym_debug=1
После этого проверяйте сообщения о достижении целей в консоли браузера (Ctrl + Shift + J).
Настройка цели на кнопку в Google.Analytics
На некоторых сайтах после нажатия на кнопку URL не изменяется. Отследить цель в GA можно, если добавить в код событие или виртуальную страницу.
Алгоритм следующий:
1) Узнайте код кнопки.
Для этого кликните по ней правой кнопкой мыши – и выйдет такое меню:
В нем нажмите «Просмотреть код».
Выглядит он примерно так:
<div class=“button red3 cart”id= “413”>ТЕКСТ_КНОПКИ</div>
2) Добавьте тег события:
onClick=“ga (‘send’, ‘event’, ‘submit’, ‘НАЗВАНИЕ_СОБЫТИЯ’);”
Допустим, событие – посетитель интернет-магазина нажимает «Купить». Название – buy_button. В итоге получается строка:
<div class=“button red3 cart”id= “413”>Купить</div> onClick=“ga (‘send’, ‘event’, ‘submint’, ‘buy_button’);”>
Либо по аналогии – тег виртуальной страницы:
onClick=“ga (‘send’, ‘pageview’, ‘URL_СТРАНИЦЫ’);”
Затем создаем цель в Google Analytics.
3) В панели «Администратор» выберите следующие параметры:
И перейдите в раздел «Цели».
4) Создайте цель:
5) Настройте её, как показано на скриншотах.
Тип «Событие»
Шаг 1:
Шаг 2:
Шаг 3:
Впишите ту же категорию, которую задавали в коде:
onClick=“ga (‘send’, ‘event’, ‘submit’, ‘buy_button’);”
Укажите действие. В нашем примере это buy_button.
Сохраните.
Тип «Целевая страница»
Принцип тот же, что для цели «Просмотр страницы» (смотрите полное руководство по целям в GA), но вы подставляете значение не реальной, а виртуальной страницы.
Шаг 1: тот же.
Шаг 2:
Шаг 3:
В этом поле – адрес виртуальной страницы, на которую попадает посетитель после того, как нажимает на кнопку.
6) По желанию включите опцию «Последовательность» и задайте следующие шаги. В нашем примере – это добавление в корзину и оформление заказа:
Сохраните.
Проверка
- Перейдите в раздел Отчеты / В режиме реального времени.
- В другой вкладке браузера откройте сайт и совершите целевое действие;
- Снова переключитесь на GA. Проверьте вкладку «Конверсии»:
Как вставить теги Google Analytics и Яндекс Метрики в один html-код
Впишите все параметры в шаблон:
onclick=“ga (‘send’, ‘event’, ‘КАТЕГОРИЯ’, ‘ИДЕНТИФИКАТОР’); yaCounterID_СЧЕТЧИКА.reachGoal (‘ИДЕНТИФИКАТОР’); return true;”
Добавьте этот тег в строку, которая отвечает за кнопку. Получается примерно так:
<div class= “button red3 cart”id= “413”>Купить</div> onClick= “ga (‘send’, ‘event’, ‘submit’, ‘buy_button’); yaCounterXXXXXXXX.reachGoal(‘buy_button‘); return true;”>
Синий текст – это тег GA, оранжевый – Метрики.
Как видите, настроить цели на кнопку совсем не сложно.
Высоких вам конверсий!
