Как настроить цель на форму в Яндекс Метрике? 🔥

Добрый день, друзья. На связи Евгений Тридчиков. И в этом видео я расскажу, как отслеживать успешные отправки форм в Метрике. Лень читать? Смотрите видео в конце статьи!

Пошаговый план

Пошаговый план выглядит следующим образом:

  1. для начала мы будем передавать в Метрику сигнал о том, что форма отправлена, то есть будем производить отправку события;
  2. на втором шаге мы настроим цель в соответствии с этим событием;
  3. и, наконец, проверим все это дело прямо в браузере, в консоли.

Пушим событие в Яндекс Метрику

Перед вами конструкция, которая отправляет в Метрику событие – сигнал. Наша задача отслеживать отправку формы. Поскольку форма отправляется без перезагрузки страницы, нам нужно давать сигнал в Метрику. Этим сигналом является событие. И вот эта конструкция, которая у вас на экране, она, как раз-таки, и отправляет в Метрику событие.

Как настроить цель на форму в Яндекс Метрике? 🔥
Синтаксис отправки события в Метрику

Здесь всего два важных момента. Во-первых, это набор иксов из восьми штук – это просто, условно, заглушка, здесь должен быть установлен номер счетчика Метрики. Номер счетчика, который у вас на сайте. Далее, вот здесь у нас «form», это название события. Это идентификатор. Именно это событие с этим именем и улетает в Метрику.

onsubmit=»yaCounterХХХХХХХХ.reachGoal(‘form’); return true;»

Кавычки-елочки замените на простые двойные кавычки (так просто стиль блока внимания отрабатывает).

У меня написано «form». Просто я так привык. А вы можете написать все, что угодно. Главное, чтобы вы имели это в виду, и настраивали цель в соответствии с именем этого события. Чтобы у нас событие улетало при УСПЕШНОЙ отправке формы, нам нужно повесить вот эту конструкцию на onsubmit. То есть сама по себе форма не отправит событие, но через onsubmit отправит.

Как настроить цель на форму в Яндекс Метрике? 🔥
Немного детальнее

Таким образом, вы видите на скриншоте – onsubmit равно, далее у нас идет конструкция для analytics, об этом я рассказывал в прошлом видео, а далее yaCounter, номер счетчика, reachGoal, название события, return true. То есть onsubmit означает следующее: при успешной отправке формы, отправить в Метрику следующее событие.

Настройка цели на событие

Далее. Настройка цели в Метрике элементарная. Нам нужно создать цель типа javaScript-событие и указать в поле «идентификатор цели» название события. Проверка цели в Метрике осуществляется с помощью ym_debug. Ну об этом позже, это все делается буквально за пару секунд.

Как настроить цель на форму в Яндекс Метрике? 🔥
Настраиваем цель на данное событие

Итак, прямо сейчас я на конкретном сайте покажу как это все работает, как это сделать. Давайте, друзья, посмотрим.

Проверяем работу

Работу с формой я буду делать на этом сайте, поскольку, недавно с ним работал и точно знаю, что здесь все отрабатывает. Итак, поехали. Разберем вот эту вот форму. Нажимаю «исследовать элемент». Посмотрим, что в форме внутри. Я вижу, что на теге «form» у нас висит onsubmit, далее это событие улетает в google analytics, я об этом рассказывал ранее, в другом видео. А вот и та конструкция, о которой я говорил.

Как настроить цель на форму в Яндекс Метрике? 🔥
Проверяем работу

Как видите, здесь указан номер счетчика и событие с именем «form». Супер. Давайте проверять, как это все дело работает. Для этого, мы к этой страничке приписываем следующую конструкцию – вопросительный знак и далее /?_ym_debug=1. Ок. Эта штука позволяет нам перейти в режим отладчика и посмотреть, как у нас улетают в Метрику события.

Жмем примерно то же самое – «исследовать элемент» и здесь, внимание, жму «консоль». Как видите, тут у нас уже сработал PageView счетчика. Он его увидел. Отлично. И теперь мы просто делаем тестовую конверсию – номер телефона все единички, как вы любите, какой-то е-mail, поле «комментарий» не обязателен для заполнения. Отправляю форму. Супер.

Как настроить цель на форму в Яндекс Метрике? 🔥
Пример реализации на сайте

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

Смотрите пошаговое видео

А как же цель на кнопку?

Что ж, как видите, отслеживать отправки формы, с помощью Метрики совсем не сложно.

Напоследок небольшой сюрприз – если вы хотите отслеживать клики по ссылкам, либо клики по кнопкам – используйте точно такую же конструкцию, но вместо onsubmit используйте onclik.

onclick=»yaCounterХХХХХХХХ.reachGoal(‘click’); return true;»

Кавычки елочки заменяем на двойные кавычки, помните, да?

Заключение

Итак, друзья. На этом у меня все. И если я помог вам разобраться, как работать с Метрикой, как отслеживать отправки формы в Метрику, работать с событиями – поставьте пальцы вверх. Мне будет приятно и вам хорошо.

comments powered by HyperComments
(3 оценок, среднее: 4,67 из 5)
Загрузка ...
CONTEXT-KILL.BY