Образовательный центр
интернет профессий
Навигация по статье
Настройка цели на кнопку в Яндекс.МетрикеНастройка цели на кнопку в Google AnalyticsКак вставить теги Google Analytics и Яндекс.Метрики в один html-код
Аналитика

Настройка цели на кнопку в Яндекс.Метрике и Google Analytics

69411
7
Клики по кнопке call-to-action – полезные действия, которые можно отслеживать и анализировать. Достаточно настроить цели в Яндекс.Метрике или Google Analytics.
 
В этой статье – руководство для тех, кто собирается это сделать самостоятельно, без привлечения программистов. Кстати, это достаточно легко. Смотрите сами!

Настройка цели на кнопку в Яндекс.Метрике

1) В верхнем меню нажмите «Счетчики»:
 
Настройка цели на кнопку – меню «Счетчики» в Метрике
 
2) Выберите, для какого счетчика настраивать цель. Кликните по значку настроек рядом с ним:
 
Настройка цели на кнопку – выбор счетчика в Метрике
 
 
Выйдет страница настройки.
 
3) Перейдите в раздел «Цели» и добавьте новую цель:
 
 
Настройка цели на кнопку – кнопка добавления цели.png
 
Либо кликните сразу на эту кнопку со страницы со списком счетчиков:
 
Настройка цели на кнопку – кнопка добавления цели в списке счетчиков.png
 
В Метрике 11 видов целей. Обо всех написано здесь.
 
Выберете нужную:
 
Настройка цели на кнопку – клик по кнопке
Другой способ настройки цели на кнопку.
 
Выберите тип цели «JavaScript-событие».
 
Настройка цели на кнопку – цель JavaScript-событие
Придумайте название, по которому легко понять, что за цель, и уникальный идентификатор.
 
Требования к значению идентификатора
 
  • Не повторяется на сайте более одного раза (для каждой кнопки – своя цель);
  • Соответствует тому, которое вы вставите в код сайта.
 
Когда всё готово, нажмите «Добавить цель».
 
Так как мы настраиваем цель на кнопку, нужно, чтобы при нажатии на сайте работала функция вызова цели. Для этого корректируем html-код сайта.
 
Найдите фрагмент кода, который отвечает за кнопку. Добавьте в него тег 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) Узнайте код кнопки.
 
Настройка цели на кнопку – кнопка
Для этого кликните по ней правой кнопкой мыши – и выйдет такое меню:
 
Настройка цели на кнопку – кнопка «Просмотреть код»
В нем нажмите «Просмотреть код». Появится консоль справа на странице, на которой код кнопки выделится серым цветом:
 
Настройка цели на кнопку – код кнопки в Google Analytics
2) Скопируйте код кнопки для удобства в текстовый файл.
 
Получите доступ к сайту по FTP и скачайте страницу, на которой находится кнопка. Откройте исходный код документа и найдите код элемента (тот самый, который вы скопировали).
 
3) Добавьте в этот код тег события onclick по такому шаблону:
 
onClick="ga('send', 'event', 'КАТЕГОРИЯ', 'ДЕЙСТВИЕ', 'ЯРЛЫК');"
 
Вместо слов «Категория», «Действие» и «Ярлык» введите любые понятные вам слова на латинице. В дальнейшем они понадобятся при настройке цели в Google Аналитике.
 
Если мы берем виртуальную страницу, шаблон будет выглядеть так:
 
onClick=“ga (‘send’, ‘pageview’, ‘URL_СТРАНИЦЫ’);”
 
Возьмем пример, когда посетитель интернет-магазина нажимает кнопку «Купить». Назовем категорию submit и действие (то есть название события) buy_button.
 
В итоге тег события выглядит так:
 
onClick=“ga (‘send’, ‘event’, ‘submint’, ‘buy_button’);”>
 
Важно! Этот код подходит для старой версии счетчика (ga.js). Для новой версии (gtag.js) шаблон кода выглядит иначе:
 
gtag ( 'event', 'aaa', {
  'event_category' : 'bbb',
  'event_label' : 'ccc'
});
 
Здесь aaa – действие, bbb – категория, ccc – ярлык.
 
Итак, код изменен. Теперь создаем цель в Google Аналитике.
 
4) В панели «Администратор» перейдите в раздел «Цели».
 
Настройка цели на кнопку – переход к целям из администратора Google Analytics
 
Создайте цель:
 
Настройка цели на кнопку – создание цели в Google Analytics
Настройте её, как показано на скриншотах.

Тип «Событие»

Шаг 1:
 
Настройка цели на кнопку – описание цели в Google Analytics
Шаг 2: Впишите те же категорию и действие, которые задавали в коде (submit, buy_button):
 
Настройка цели на кнопку – подробные сведения о событии в Google Analytics
Сохраните.

Тип «Целевая страница»

Принцип тот же, что для цели «Просмотр страницы» (смотрите полное руководство по целям в Google Analytics), но вы подставляете значение не реальной, а виртуальной страницы.
 
Шаг 1:
 
Настройка цели на кнопку – описание цели для целевой страницы в Google Analytics
Шаг 2:
 
Настройка цели на кнопку – подробные сведения о виртуальной странице в Google Analytics
В этом поле – адрес виртуальной страницы, на которую попадает посетитель после того, как нажимает на кнопку.
 
По желанию включите опцию «Последовательность» и задайте следующие шаги. В нашем примере – это добавление в корзину и оформление заказа:
 
Настройка цели на кнопку – настройка последовательности для виртуальной страницы в Google Analytics
Сохраните.

Проверка

  • Перейдите в раздел Отчеты / Отчет в реальном времени / Конверсии;
  • В другой вкладке браузера откройте сайт и совершите целевое действие;
  • Снова переключитесь на Аналитику. Проверьте вкладку «Конверсии»:
Настройка цели на кнопку – отчеты в реальном времени в Google Analytics
 

Как вставить теги 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, оранжевый – Метрики.
 
Как видите, настроить цели на кнопку совсем не сложно.
 
Высоких вам конверсий!
Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Опубликовано редакцией Yagla
69411
7
25
  • Сергей

    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

    Владислав, можете подробнее объяснить – что значит вписать код Метрики в код ссылки? Какой ссылки? Вы хотите отслеживать клики по определенной ссылке на сайте или что?