Извлечение данных из форм, страниц и УРЛов с помощью GTM

admin Аналитика Версия для печати

Получение дополнительных пользовательских данных очень часто необходимо для построения собственных отчётов о целевой аудитории сайта. Цель этих данных – не только в конкретике показателей и цифр, но и в сегментации и таргетировании определённых рекламных кампаний на этих пользователей.

В этой статье будет описано 3 вида извлечения данных: из форм, со страниц и из параметров URL.

Перед началом настроек необходимо убедиться, что GTM подключён к сайту. Если его нет – надо подключить.

Внимание! В данной статье рассматриваются методы извлечения данных, которые могут быть применены к личным (персональным) данным пользователя. В соответствии с правилами использования загружаемых данных Google запрещает передавать в Google Аналитику данные, позволяющие идентифицировать личность пользователя. Подробней об этом можно почитать здесь https://support.google.com/analytics/answer/2838984?hl=ru&ref_topic=6065475. Поэтому извлекайте только те данные, которые не позволят идентифицировать личность посетителя сайта!

Извлечение данных из форм

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

Переходим в ГТМ в Переменные. Создадим переменную типа Собственный код JavaScript. Назовём её Name – Form Field

и вставляем такой скрипт

function(){
  var fieldName = $('вставьте сюда CSS-селектор').val();
  return fieldName;
}

Во второй строке необходимо вставить CSS-селектор с извлекаемым полем. Для этого возвращаемся к нашей форме, на этом поле нажимаем правой кнопкой мыши и из контекстного меню выбираем Просмотреть код

На выделенной строке снова нажимаем правой кнопкой мыши и из выпадающего меню выбираем выбираем Copy – Copy Selector. В буфер обмена скопируется CSS-селектор, который необходимо будет вставить в скрипт в GTM.

Скрипт будет выглядеть примерно следующим образом:

function(){
  var fieldName = $('#small-modal > div.modal-content-box > form > div:nth-child(2) > input').val();
  return fieldName;
}

Сохраняем

Теперь аналогичным образом добавим скрипт, который извлекает номер телефона из соответствующего поля. Назовём его Phone – Form Field

Скрипт будет выглядеть примерно следующим образом:

function(){
  var fieldPhone = $('#small-modal > div.modal-content-box > form > div:nth-child(3) > input').val();
  return fieldPhone;
}

Проверяем.

В ГТМ включаем режим Предварительный просмотр.

Далее переходим на сайт и заполняем форму

и в окно отладчика ГТМ переходим на вкладку Variables

На данном скриншоте видим введённые имя (первая строчка) – переменная Name – Form Field и телефон (последняя строчка) – переменная Phone – Form Field.

Передача данных в Яндекс Метрику

Для передачи цели в Яндекс Метрику с параметрами визитов необходимо в ГТМ:

в коде счётчика включить сбор данных по параметрам визитов – после webvizor:true поставить запятую и на следующей строчке дописать params: window.yaParams

и создать тег типа Пользовательский HTML и прописать в нём код примерно следующего вида:

<script>
  yaCounterXXXXXXXX.reachGoal('callback', {"Callbacks": "{{Name - Form Field}} - {{Phone - Form Field}}"});
</script>

и привязать к нему соответствующий триггер. Почитать как настроить триггер на такую форму можно здесь.

XXXXXXXX – это id счётчика Метрики

Также создаём цель типа JavaScript-событие

Передача данных в Google Аналитику

Для отправки событий в Google Analytics необходимо в ГТМ создать тег типа Google Аналитика – Universal Analytics и заполнить примерно следующим образом:

  • Тип отслеживания: Событие
  • Категория: Feedback
  • Действие: Callback
  • Ярлык: {{Name – Form Field}} – {{Phone – Form Field}}
  • Настройки Google Analytics: {{Google Analytics}}

и привязать к нему соответствующий триггер. Почитать как настроить триггер на такую форму можно здесь.

Извлечение данных со страниц

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

Переходим в ГТМ в Переменные. Создадим переменную типа Элемент DOM. Назовём её Extract Email

Метод выбора установим Селектор CSS и вернёмся на страницу, где вытащим CSS-селектор. Для этого на номере телефона нажимаем правой кнопкой мыши и из контекстного меню выбираем Просмотреть код

На выделенной строке снова нажимаем правой кнопкой мыши и из выпадающего меню выбираем выбираем Copy – Copy Selector. В буфер обмена скопируется CSS-селектор, который необходимо будет вставить в поле Селектор элементов в GTM.

Сохраняем

Теперь аналогичным создадим переменную типа Элемент DOM, которая извлекает номер телефона из данной страницы. Назовём его Extract Phone.

Выглядеть она будет примерно так:

Проверяем.

В ГТМ включаем режим Предварительный просмотр.

Далее переходим на страницу с этим данными и в окно отладчика ГТМ переходим на вкладку Variables

На данном скриншоте видим введённые email (первая строчка) – переменная Extract Email и телефон (вторая строчка) – переменная Extract Phone.

Передача данных в Яндекс Метрику

Для передачи цели в Яндекс Метрику с параметрами визитов необходимо в ГТМ:

в коде счётчика включить сбор данных по параметрам визитов – после webvizor:true поставить запятую и на следующей строчке дописать params: window.yaParams

и создать тег типа Пользовательский HTML и прописать в нём код примерно следующего вида:

<script>
  yaCounterXXXXXXXX.reachGoal('pageinfo', {"Details": "{{Extract Email}} - {{Extract Phone}}"});
</script>

и привязать к нему соответствующий триггер, например – просмотр этой страницы.

XXXXXXXX – это id счётчика Метрики

Также создаём цель типа JavaScript-событие

Передача данных в Google Аналитику

Для отправки событий в Google Analytics необходимо в ГТМ создать тег типа Google Аналитика – Universal Analytics и заполнить примерно следующим образом:

  • Тип отслеживания: Событие
  • Категория: Details
  • Действие: Get
  • Ярлык: {{Extract Email}} – {{Extract Phone}}
  • Настройки Google Analytics: {{Google Analytics}}

и привязать к нему соответствующий триггер, например – просмотр этой страницы.

Извлечение значений из параметров URL

В данном примере будем извлекать запрос из поисковой формы, размещённой на страницах этого сайта.

Переходим в ГТМ в Переменные. Создадим переменную типа URL. Назовём её Search

Выбираем Тип компонента – Запрос, а Ключ запроса – s

так как после знака вопроса в УРЛе следует параметр s

Проверяем.

В ГТМ включаем режим Предварительный просмотр.

Далее в форму на сайте введём поисковой запрос и в окно отладчика ГТМ переходим на вкладку Variables

На данном скриншоте видно, что был запрос параметры – это прописано в переменной Search

Что касается передачи в Google Аналитику и Яндекс Метрику – при создании тегов необходимо прописать переменную {{Search}} в том месте, где это необходимо.

P.S.: скрипты и некоторые настройки были взяты отсюда:

https://osipenkov.ru/track-field-gtm/

https://osipenkov.ru/scraping-data-gtm/

Поделиться ссылкой:

Записи по теме: