Получение дополнительных пользовательских данных очень часто необходимо для построения собственных отчётов о целевой аудитории сайта. Цель этих данных – не только в конкретике показателей и цифр, но и в сегментации и таргетировании определённых рекламных кампаний на этих пользователей.
В этой статье будет описано 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/
Поделиться ссылкой:
