+7 (495) 532-45-69

Перезвоните мне
Получите доступ к пошаговым видео-инструкциям Получить Восстановить
Отслеживание формы по клику через Google Tag Manager

Голосов: 1, Рейтинг: 5

09.11.2017

Отслеживание формы по клику через Google Tag Manager

Приветствую!

В этой статье речь пойдет о простой настройке отслеживания отправки формы, с помощью отслеживания клика при не возможности отслеживания самой формы. И настройка цели в Analytics. Всё это с помощью отличного инструмента для контекстологов - Google Tag Manager.

Начнем по порядку

Почему для отслеживания целей в Analytics мы используем Google Tag Manager?

На это есть 2 основные причины:

1. Отслеживание целей на сайте с ajax стандартным кодом

ga('send', 'event', 'order1', 'order1');

Не работает.

2. С помощью GTM мы минимизируем работу с директориями/админками сайтов или же снижаем количество работы для программистов до одной задачи – установки кода Google Tag Manager.

О ценности отслеживания отправки форм скажу кратко, без нее мы не сможем отследить одну из важнейших целей на сайте, где-то даже единственную.

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

Для установки кода этого нам потребуется:

1. Зайти в Google Tag Manager tagmanager.google.com

Интерфейс в Google Tag Manager довольно простой на свой вид, но сложный по строению при первом знакомстве с ним.

2. Нажимаем на «Создать аккаунт»

Создание аккаунта

Создание аккаунта

3. Далее открывается окно, в котором вводим название кампании, названия контейнера и, где будет использоваться контейнер в нашем случае выбираем Веб-сайт.

Все данные потом можно будет изменить.

Название аккаунта

Название аккаунта

Настройка контейнера

Настройка контейнера

4.Подверждаем условия использования.

Подтверждение условия пользования

Подтверждение условия пользования

5. После создания нам сразу будет сформирован код Google Tag Manager’а, который и требуется установить на сайт. Это, пожалуй, единственный момент, который стоит оставить программисту, если у вас нет должного опыта или достаточного количества знаний по его установке.

Код Google Tag Manager

Код Google Tag Manager

6. Проверить установлен ли код можно открыв сайт и нажав комбинацию Ctrl+U, далее ищем наш отрезок кода.

Перейдем к меню Tag Manager’а

Суть меню следует из особенностей tag manager

1.       Первым идет контейнер – это фрагмент js-кода. Следуя из названия он явлется контейнером для тегов.

2.       Тег – это скрипты, которые мы устанавливаем для google analytics или, к примеру, для отслеживания отправки форм или код яндекс метрики. Все они теперь располагаются в одном контейнере.

3.       Триггер – простым языком, это условие, при которым активируется тег, к примеру, отслеживание отправки формы.

4.       Переменные – это параметры, состоящие из 2 частей. Названия переменной и ее значения к примеру, URL - example.com/index.html. Переменные нужны для того, чтобы задать условия в триггере.

Меню Google Tag Manager

Меню Google Tag Manager

1. Сначала нам потребуется включить отслеживание всех кликов, для дальнейшего нахождения нужного нам клика на который мы и привяжем цель.

Для этого заходим в Переменные. И нажимаем на кнопку «Настроить» в подменю «Встроенные переменные».

Переменные кнопка "Настроить"

Переменные кнопка "Настроить"

В открывшемся меню опускаемся до Кликов и Форм и включаем переменные Click Classes и Click Element в кликах и все пункты в формах. С помощью этих переменных можно будет определить клик по тому или иному объекту на сайте.

Переменные Форм и Кликов

Переменные Форм и Кликов

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

Создаем Тег

Создание Тега в GTM
Создание Тега в GTM

  • Для этого нажимаем на «Новый Тег» в конфигурации тега и выбираем Universal Analytics.

Тип отслеживания остается неизменным

Создание тега Universal Analytics

Создание тега Universal Analytics

Настройка Тега Universal Analytics

Настройка Тега Universal Analytics


  • В пункте «Настройки google analytics» нажимаем на «Новая переменная…» и здесь указываем Идентификатор отслеживания нашего Analytics (его можно посмотреть в Администратор-> настройках ресурса)

Идентификатор отслеживания.png

Идентификатор отслеживания

  • Называем переменную и нажимаем сохранить.

Создание переменной Google Analytics.png

Создание переменной Google Analytics.png

  • Здесь же нажимаем на Триггеры и выбираем All Pages

Переменная все страницы

Переменная все страницы

Этот Тег создается для отслеживания заходов/переходов посетителей по страницам сайта.

Называем Тег и нажимаем сохранить.

Сохранение Тега Universal Analytics.png

Сохранение Тега Universal Analytics.png

Для отслеживание всех кликов и форм создаем специальные Триггеры:

1. Триггер для всех кликов

Переходим в меню триггеры нажимаем создать выбираем в меню «Клик» - «Все элементы» даем название и жмем сохранить.

Создание триггера

Создание триггера

Задание переменной триггера

Задание переменной триггера

Сохранение тригера.png

Сохранение тригера.png

2. Триггер для отправки форм

Жмем Создать -> В меню «Взаимодействия пользователей»-> «Отправка формы»-> Сохранить

Создание триггера

Создание триггера

Создание триггера формы

Создание триггера формы


Далее нажимаем на отправить, указываем название и жмем опубликовать.

Отправка изменений GTM.png

Отправка изменений GTM

Переходим обратно на рабочую область и нажимаем предварительный просмотр.

Заходим на сайт.

Если все пункты сделаны правильно, то при открытие сайта нам отобразится окно с отслеживанием всех действий которые мы задали.

Первым делом заходим в форму, которая нам требуется для отслеживания заполняем ее и отправляем, а в окне GTM отобразятся наши клики.

  • Выбираем тот клик, который вызывает отправку формы.

Отслеживание клика через Google Tag Manager

Отслеживание клика через Google Tag Manager

  • Переходим на вкладку Variables и копируем значение Click Classes

Variables в GTM и Click Classes

Variables в GTM и Click Classes

  • Идем обратно в наш GTM и создаем тег «Событие»

Создние тега Событие

Создание тега Событие

В конфигурации выбираем Universal Analytics.

Тип отслеживания "Событие" и задаем категорию и действие, которые в последствии пропишем в analytics.

Выбираем уже созданные настройки Google Analytics.

Создание тега событие

Создание тега событие

Далее создаем Новый триггер

Создание нового триггера.png

Создание нового триггера.png

Клик -> Все элементы

Создание триггера по заданному клику

Создание триггера по заданному клику

И выбираем «Некоторые клики»

Задаем в настройках Click Classes «Содержит» и те параметры, которые мы скопировали с сайта.

Триггер по клику отправки формы

Триггер по клику отправки формы

Все это сохраняем и отправляем изменения.

Отправка изменений GTM.png

Отправка изменений GTM

И далее заходим в Google Analytics

  • Переходим в настройки Целей
  • Добавляем новую цель

Настройка цели в Analytics

Настройка цели в Analytics

  • Выбираем Собственная и Жмем далее

Создание собственной цели в GA

Создание собственной цели в GA

Даем название цели и выбираем тип "Событие", жмем Далее.

Выбор типа цели в Google Analytics

Выбор типа цели в Google Analytics

В открывшемся меню вводим те данные событиякоторые ранее задавали в Google Tag Manager.

Создание события в GA на клик из GTM

Создание события в GA на клик из GTM


Всё! Цели созданы!

Теперь требуется проверить их работоспособность.

В Google Analytics перейдем в Отчеты реального времени далее в отчет «Конверсии» и перейдя на сайт заново заполняем форму и отправляем ее. В Analytics должна при этом отработать цель.

Отслеживание конверсий в реальном времени

Отслеживание конверсий в реальном времени

Сработанные события

Сработанные события

Таким образом, без каких-либо знаний программирования можно задать цели для любых сайтов, главный минус такого метода, что клик может сработать и в другом месте сайта, или другой форме, и чтобы такого не происходило надо тщательно смотреть параметры при кликах по формам, также можно задать дополнительные условия при определении клика.

Удачи!



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить Яндекс Директ в 2018 году?

Получите бесплатные фишки по Google Tag Manager

Комментарии



Оставьте email и мы пришлем вам статью

Видеоролики

Хотите узнать, как продвинуть свой бизнес в 2018 году?

Ответьте всего на 6 вопросов и получите пошаговый план по интернет продвижению Вашего бизнеса

Пройти опрос

Видеоролики



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить Яндекс Директ в 2018 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить Google Adwords в 2018 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить рекламу в Instagram в 2018 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как продвинуть сайт в 2018 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить таргет в 2018 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как раскрутить соц. сети в 2018 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить контекстную рекламу в 2018 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить рекламу в Одноклассниках в 2018 году?



Пора что-то менять!

Хотите, мы расскажем Вам, как настроить рекламу в Facebook в 2018 году?



Пора что-то менять!

Хотите, мы расскажем Вам про комплексное продвижение сайта в 2018 году?