2/7/2018 в 10:48 AM
Настройка цели на кнопку в Яндекс.Метрике и Google Analytics
64979
7 Клики по кнопке call-to-action – полезные действия, которые можно отслеживать и анализировать. Достаточно настроить цели в Яндекс.Метрике или Google Analytics.
В этой статье – руководство для тех, кто собирается это сделать самостоятельно, без привлечения программистов. Кстати, это достаточно легко. Смотрите сами!
Настройка цели на кнопку в Яндекс.Метрике
1) В верхнем меню нажмите «Счетчики»:
2) Выберите, для какого счетчика настраивать цель. Кликните по значку настроек рядом с ним:
Выйдет страница настройки.
3) Перейдите по вкладке «Цели» и добавьте новую:
В Метрике 4 вида целей. Обо всех написано здесь.
В этой статье мы рассмотрим подробно настройку цели на кнопку. Для этого создаем JavaScript-Событие.
4) Выберите условие «JavaScript-событие».
Придумайте название, по которому легко понять, что за цель, и уникальный идентификатор.
Требования к значению идентификатора
- Не повторяется на сайте более одного раза (для каждой кнопки – своя цель);
- Соответствует тому, которое вы вставите в код сайта.
Когда всё готово, нажмите «Добавить цель».
Так как мы настраиваем цель на кнопку, нужно, чтобы при нажатии на сайте работала функция вызова цели. Для этого корректируем html-код сайта.
5) Найдите фрагмент кода, который отвечает за кнопку. Добавьте в него тег onclick:
<input type="button" onclick="ym(ID_СЧЕТЧИКА, 'reachGoal', 'ИДЕНТИФИКАТОР_ЦЕЛИ'); return true;" value="ТЕКСТ_КНОПКИ" />
Пример
Пользователи нажимают на сайте кнопку, чтобы подписаться. Мы отслеживаем это событие. Имя идентификатора – push_button, текст кнопки – «Подписаться».
- Заменяем в теге номер счетчика и уникальный идентификатор. В итоге тег выглядит так:
onclick="ym(ID_СЧЕТЧИКА, 'reachGoal', 'push_button'); return true;" value="Подписаться" />
- Копируем его без закрывающего символа >;
- Открываем код и находим строку с настройкой кнопки;
- Вставляем в нее тег;
- Проверяем, на месте ли закрывающий элемент />;
- Сохраняем и закрываем.
Проверка
Чтобы убедиться, что информация о нажатии на кнопку отправляется, добавьте в адрес страницы такой параметр:
http:///?_ym_debug=1
После этого проверяйте сообщения о достижении целей в консоли браузера (Ctrl + Shift + J).
Настройка цели на кнопку в Google Analytics
На некоторых сайтах после нажатия на кнопку URL не изменяется. Отследить цель в Google Аналитике можно, если добавить в код событие или виртуальную страницу.
Алгоритм следующий:
1) Узнайте код кнопки.
Для этого кликните по ней правой кнопкой мыши – и выйдет такое меню:
В нем нажмите «Просмотреть код». Появится консоль справа на странице, на которой код кнопки выделится серым цветом:
2) Скопируйте код кнопки для удобства в текстовый файл.
Получите доступ к сайту по FTP и скачайте страницу, на которой находится кнопка. Откройте исходный код документа и найдите код элемента (тот самый, который вы скопировали).
3) Добавьте в этот код тег события onclick по такому шаблону:
onClick="ga('send', 'event', 'КАТЕГОРИЯ', 'ДЕЙСТВИЕ');"
Вместо слов «Категория» и «Действие» введите любые понятные вам слова на латинице. В дальнейшем они понадобятся при настройке цели в Google Аналитике.
Если мы берем виртуальную страницу, шаблон будет выглядеть так:
onClick=“ga (‘send’, ‘pageview’, ‘URL_СТРАНИЦЫ’);”
Возьмем пример, когда посетитель интернет-магазина нажимает кнопку «Купить». Назовем категорию submit и действие (то есть название события) buy_button.
В итоге тег события выглядит так:
onClick=“ga (‘send’, ‘event’, ‘submint’, ‘buy_button’);”>
Затем создаем цель в Google Аналитике.
3) В панели «Администратор» выберите следующие параметры:
И перейдите в раздел «Цели».
4) Создайте цель:
5) Настройте её, как показано на скриншотах.
Тип «Событие»
Шаг 1:
Шаг 2: Впишите те же категорию и действие, которые задавали в коде (submit, buy_button):
Сохраните.
Тип «Целевая страница»
Принцип тот же, что для цели «Просмотр страницы» (смотрите полное руководство по целям в GA), но вы подставляете значение не реальной, а виртуальной страницы.
Шаг 1:
Шаг 2:
В этом поле – адрес виртуальной страницы, на которую попадает посетитель после того, как нажимает на кнопку.
По желанию включите опцию «Последовательность» и задайте следующие шаги. В нашем примере – это добавление в корзину и оформление заказа:
Сохраните.
Проверка
- Перейдите в раздел Отчеты / Отчет в реальном времени / Конверсии;
- В другой вкладке браузера откройте сайт и совершите целевое действие;
- Снова переключитесь на GA. Проверьте вкладку «Конверсии»:
Как вставить теги Google Analytics и Яндекс.Метрики в один html-код
Впишите все параметры в шаблон:
onclick=“ga (‘send’, ‘event’, ‘КАТЕГОРИЯ’, ‘СОБЫТИЕ’); ym(ID_СЧЕТЧИКА, 'reachGoal', 'ИДЕНТИФИКАТОР_ЦЕЛИ'); return true;"
Добавьте этот тег в строку, которая отвечает за кнопку. Получается примерно так:
<div class= “button red3 cart”id= “413”>Купить</div> onClick= “ga (‘send’, ‘event’, ‘submit’, ‘buy_button’); ym(XXXXXXXX, 'reachGoal', 'push_button'); return true;">
Синий текст – это тег GA, оранжевый – Метрики.
Как видите, настроить цели на кнопку совсем не сложно.
Высоких вам конверсий!
64979
7 Читайте ещё статьи по этой теме
Всё о чат-ботах для бизнеса Лонгрид
Чат-бот – виртуальный собеседник, который помогает работать с большим потоком клиентов. Он умеет отвечать на популярные вопросы и решать шаблонные задачи.3
Как предпринимателю работать с маркетологами Лонгрид
Владельцы бизнеса вкладывают в маркетинг собственные деньги. Естественно, они хотят определенности и заинтересованы в том, чтобы вложения принесли максимальную отдачу, а не ушли на ветер.
Контекстная реклама для малого бизнеса: практическое руководство Лонгрид
Малый бизнес – это когда ограничен бюджет, и нужно получить отдачу как можно скорее. Как в этом случае запускать контекстную рекламу и что учитывать? В этой статье – полное практическое руководство, от расчета прогнозных показателей до настройки маркетинговых связок.
Обсуждаемое
YouTube хочет отменить дизлайки из-за атак хейтеров
YouTube в ближайшие недели протестирует новые варианты дизайна интерфейса. В обновленной версии не будут представляться данные о количестве антипатий (дизлайков) к тому или иному видео.19
Samsung сделал приложения Яндекса неудаляемыми в новых телефонах
В компании Samsung решили проявить небывалое рвение в области исполнения поправок о предустановке отечественного ПО, внесённых в «Закон о защите прав потребителей». .8
Продажи через мессенджеры в России выросли в два раза
Оборот платежей по счетам, выставленным с помощью ЮKassa через мессенджеры, электронную почту или SMS в 2020 году, вырос в 1,8 раза относительно 2019. .8
Примеры роста конверсий, заказов и прибыли
Свежее
Рекламный бюджет ВКонтакте теперь можно пополнить автоматически
ВКонтакте выкатил новую функцию – автопополнение рекламного бюджета. Это позволяет автоматически пополнять бюджет с банковской карты, когда в рекламном кабинете заканчиваются деньги.
Как решить проблему дорогих заявок в B2B: кейс по продаже поломоечных машин Лонгрид
Какие шаги позволяют снизить стоимость обращения с контекстной рекламы в B2B– рассказывает эксперт по комплексному маркетингу Александр Гринёв. .1
Продажи через мессенджеры в России выросли в два раза
Оборот платежей по счетам, выставленным с помощью ЮKassa через мессенджеры, электронную почту или SMS в 2020 году, вырос в 1,8 раза относительно 2019. .8
2019-11-26 16:27:18
Здравствуйте. Подскажите пожалуйста, так правильно? <button type="submit" class="button alt buyButtonOkForm ld-ext-left" name="btnsend" onclick= “yaCounter54095737.reachGoal(‘odinklik‘); return true;” <span> <?php echo $options['buyoptions']['butform_descript']; ?></span> <div style="font-size:14px" class="ld ld-ring ld-cycle"></div> </button>
2019-07-18 20:00:31
Добрый день! На нашем сайте https://myrodoslovie.ru/наши-основные-услуги есть форма обратной связи. Код кнопки выглядит вот так: <input onsubmit="ga(‘send’, ‘event’, ‘Led’, ‘Submit’); yaCounter54451792.reachGoal(‘Led’); return true;" type="submit" class="button" value="Отправить сообщение" style="background: #8c6125; font-style:normal; font-family: Verdana; font-size: 15px; color: #ffffff; text-transform: none; width:260px; height: 50px; border-radius: 0px; border: 1px solid white; position: relative; display:block; margin:0 auto; " > Но почему-то в Яндекс-Метрике цели не учитываются. Пожалуйста, помогите найти причину. Спасибо.
2019-04-04 16:19:51
Добрый день! А если не напрямую на кнопку устанавливать, а с помощью скрипта. Как в скрипте прописать цели? Например есть яндекс, как добавить гугл сюда function trackUserAction(data){ if(data.action == "click" && data.target == "payment-pay-button"){ window.yaCounter000000.reachGoal('Form_Submit_BookingSK'); } }
2019-02-06 13:49:19
<div class=“button red3 cart”id= “413”>Купить</div> onClick=“ga (‘send’, ‘event’, ‘submint’, ‘buy_button’);”> Атрибут onClick в диве должен же быть
2018-11-22 13:08:09
А почему событие вне тега, к которому оно применяется? Получается что div закрылся, а потом ещё раз закрылся? Почему не: <div class= “button red3 cart” id=“413” onClick= “ga (‘send’, ‘event’, ‘submit’, ‘buy_button’); yaCounterXXXXXXXX.reachGoal(‘buy_button‘); return true;”> Купить </div> ?
2018-07-19 09:04:41
А подскажите как вписать код цели от Яндекс Метрики и Гугл Адвордс в код ссылки. А также два кода цели "Событие" от Яндекс Метрики в код ссылки?
2018-07-25 11:08:11
Владислав, можете подробнее объяснить – что значит вписать код Метрики в код ссылки? Какой ссылки? Вы хотите отслеживать клики по определенной ссылке на сайте или что?