8 (495) 215-53-73

В Москве

(048) 737-5-736

В Одессе

Заказать SEO-услуги
Согласен с правилами обработки персональных данных

Главная страница Блог SEO-инструменты Отслеживание отправки форм на сайте с помощью GTM


Блог SiteClinic

Отслеживание отправки форм на сайте с помощью GTM

Для кого: SEO-специалистам

Уровень подготовки: начальный

Ранее мы уже писали о том, как установить и настроить Google Tag Manager на сайт, а также как с его помощью настроить отслеживание кликов. В этой статье мы расскажем о том, как с помощью GTM настроить отслеживание успешной отправки формы.

В зависимости от настроек CMS отслеживание отправки форм на сайте можно настроить разными способами. Например, если после отправки формы происходит перенаправление на страницу благодарности, настроить отслеживание будет очень просто, так как в таком случае конверсией можно считать посещение страницы благодарности. Соответственно, можно настроить цель без помощи GTM и вмешательства в исходный код сайта.

Достаточно настроить в Google Analytics цель «Переход на страницу благодарности».

Рисунок 1
otslezhivanie-form-v-gtm-01

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

 

Настройка отслеживания успешной отправки форм на сайте при передаче данных с помощью submit

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

Рисунок 2
otslezhivanie-form-v-gtm-02

 

Далее проверяем, активированы ли переменные в разделе «Формы».

Рисунок 3
otslezhivanie-form-v-gtm-03

 

На следующем этапе создаём триггер с такими параметрами:
Тип: «Отправка формы»
Условия активации: «Некоторые формы»
Условие, при наступлении которого должен активироваться триггер: в нашем случае это Form ID = cfprm1 на главной странице сайта

Рисунок 4
otslezhivanie-form-v-gtm-04v2

 

Затем создаём тег с такими параметрами:
Тип тега: «Universal Analytics»
Тип отслеживания: Событие
Категория: мы назвали «Form»
Действие: мы назвали «Otpravka»
Триггер активации: триггер, созданный на предыдущем шаге

Рисунок 5
otslezhivanie-form-v-gtm-05

Рисунок 6
otslezhivanie-form-v-gtm-06

После того как мы убедились в правильной настройке тега (для этого используем режим предварительного просмотра), настраиваем отслеживание цели в Google Analytics.

Таким образом, мы настроили отслеживание события с помощью GTM без вмешательства в исходный код сайта.

Настройка отслеживания успешной отправки форм на сайте при передаче данных с помощью AJAX

Настроить отслеживание успешной отправки форм без вмешательства в исходный код сайта можно не во всех случаях. Например, при передаче данных с помощью AJAX необходимо выполнить следующие действия:

А. Найти Javascript код, в котором расположена функция, отправляющая данные через AJAX;
Б. Найти в этой функции параметр «Success», отвечающий за действия, которые будут выполняться после успешной отправки данных на сервер;
В. Прописать внутри function() { … } команду
dataLayer.push({'event': 'event_name'}) заменив «name» придуманным названием.
Мы написали так:
dataLayer.push({'event': 'otpravka_form'}) 

В коде это выглядит следующим образом:

Рисунок 7
otslezhivanie-form-v-gtm-07

 

Г. Настроить отслеживание успешной отправки формы с помощью GTM. Для этого нужно создать триггер со следующими параметрами:
Тип триггера: «Пользовательское событие»
Имя события: нужно указать event, который был прописан в функции; в нашем случае это ‘otpravka_form’

Рисунок 8
otslezhivanie-form-v-gtm-08

 

Затем нужно создать тег с такими параметрами:
Тип тега: «Universal Analytics»
Тип отслеживания: Событие
Категория: мы назвали «form ajax»
Действие: мы назвали «otpravka»
Триггер активации: триггер, созданный на предыдущем шаге

Рисунок 9
otslezhivanie-form-v-gtm-09

После того как вы убедитесь в правильной настройке тега (для проверки нужно использовать режим предварительного просмотра), можете настроить отслеживание цели в Google Analytics.

По примерам, приведённым выше, вы сможете сами настроить отслеживание отправки форм на сайте. Если возникнут вопросы, пишите в комментариях, с радостью вам ответим!

Еще статьи по теме:
Настройка отслеживания 404 ошибок с помощью Google Tag Manager
Настройка отслеживания e-commerce с помощью Google Tag Manager

Оцените статью: 
1 Star2 Stars3 Stars4 Stars5 Stars (16 оценок, среднее: 5,00 из 5)

Автор: Наталия Бондаренко, SEO-оптимизатор

n.bondarenko@siteclinic.ru

Подписаться
Наверх
  • Сергей

    Пробежав статью, я так понял, без вебмастера, мне, дурному сеошнику, эту статью читать не имеет смысла? Самостоятельно, не зная кода, отслеживание не настроишь?

    • Наталия Бондаренко

      Сергей!
      Настроить отслеживание отправки форм с помощью GTM можно без привлечения вебмастера. С помощью данной статьи вы легко настроите отслеживание. Если возникнут вопросы — пишите, с радостью Вам ответим!

  • Сергей

    А можно подробней о настройке в Google Analytics цели «Переход на страницу благодарности»? Как вы поставили Тип цели — Переход, и почему у вас не указана вторая страница, на которую должны были перейти? Или это не важно, так как ваша задача была, чтобы пришли на страницу указанную на картинке?

    • Наталия Бондаренко

      Добрый день!

      Мы указали тип цели: «Целевая страница» — https://clip2net.com/s/3ILsan5
      Не указана вторая страница, так как в нашем случает целью является переход на страницу https://siteclinic.ua/done/

  • Алексей

    По поводу настройки события по id формы, получается что событие будет срабатывать при любом нажатии на кнопку отправить форму — т.е. если юзер неверно заполнил данные либо вобще не заполнил — событие всё равно сработает?

    • Наталия Бондаренко

      Добрый день!

      Событие будет срабатывать только при успешной отправки форм

    • Наталия Бондаренко

      Добрый день!

      Событие будет срабатывать только при успешной отправки форм

  • Наталия Бондаренко

    Спасибо за комментарий! Поправили скрин.

  • George Shilov

    Может подскажите как настроить цель в метрике по настройке самбиста формы через GTM — второй способ у вас?

    • На самом деле тут ничего сложного нет.
      Триггер оставляем тот же (пользовательское событие -otpravka_form
      А тег — индивидуальный код, куда ставим код метрики по отправке цели (не сам код метрики,а который ReachGoal
      Только не забывайте, что его надо обернуть в

  • Георгий

    Стоит отметить, что если оплата с формы происходит на стороннем сайте (банк), а потом идёт возвращение на thank you page, то тут ещё сложнее отслеживать. Просто посещение th p нельзя, т к после оплаты юзер может на неё и не переходить (если автоматом не перекидывается). Успешную отправку формы (до перехода на страницу оплаты) тоже нельзя, т к юзер может не произвести оплату. Здесь надо как то ловить отправку данных об оплате в CMS. Как решить эту проблему ( у меня все очень плохо с битриксом) я пока не понял

    • Сергей

      Мне кажется тут с другого конца идти нужно. Размещенный заказ это точно лид и точно конверсия. Оплаченный заказ это уже следующий этап воронки и в него тоже не 100% конверсия будет. На сколько я знаю CMS тоже может интегрироваться с Гугл и передавать корректировки заказов. Такие как отмена или изменение стоимости. Соответственно если разместили заказ но не оплатили, это будет проходить как отмена заказа. Но самому такую цепочку уже трудно сделать будет, это очень хорошо все интеграции настроены должны быть, работа программиста.

      • Совершенно верно. Тут одним JS не обойтись, надо подтягивать данные из базы, была ли оплата или нет.
        Но вообще, это довольно непростая задача.

  • Ася

    А подскажите, пожалуйста, вот это что за кусочек кода https://gyazo.com/b22000710a01b026053785f7c84173af

    • Это просто комментарий для себя (для гугла), все что после // это комментарии которые на код не влияют.

  • Не совсем так. Точнее, не полный ответ.
    Немножечко теории. Валидация формы может происходить двумя способами:
    1. На уровне клиента (браузера). В этом случае проверка формы идет явоскриптом (ну или это рекваед, если хтмл5).
    2. На уровне сервера.
    В первом случае форма не отправится, или кнопка отправить будет неактивна или при ее нажатии поля будут выделены красным, но форма не отправится. В этом случае галочка не нужна.
    Во втором же форма действительно отправляется, но на сервере заворачивается обратно. Тогда нужна.
    По хорошему, должен быть первый способ (для юзабилити).
    Для аналитике можно второй, но при этом отдельно отслеживать отправленные и неправильно отправленные формы (в идеале по каждому полю отдельно), и тогда будет полная картина, какие поля чаще всего мешают пользователям отправить форму.