Извлечение данных из URL и страницы с помощью GTM

22 сентября, 2019

Google Tag Manager – очень мощный и гибкий инструмент, который позволяет делать сложные вещи без привлечения разработчиков. В рамках этой статьи я покажу, как можно извлекать данные из URL и страницы с помощью GTM и сохранять их в переменные, чтобы потом использовать в тегах, триггерах и других переменных.

Рассмотрим пример. У одного из моих клиентов есть сайт, на котором пользователи оставляют заявки на расчет стоимости услуги. Данные передаются методом GET в адресной строке браузера. На странице «Спасибо» мы можем видеть такой URL:

Извлечение данных из URL и страницы с помощью GTM

Пример GET-запроса (1,2,3) и объекта на странице (4)

Примечание: GET-запросы представляют собой передачу данных непосредственно в адресной строке браузера. Здесь набор передаваемых данных на сервер начинаются с символа ? и разделяются символом &. Сами данные представляют собой пары параметр=значение.

  1. name – имя;
  2. tell – телефон;
  3. info – тип формы;

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

Вот так выглядит эта форма визуально:

Извлечение данных из URL и страницы с помощью GTM

Пример данной формы

С помощью пользовательских переменных двух типов мы можем извлечь данные как из URL, так и из самой страницы сайта. Как? Давайте разбираться.

Извлечение данных из URL

Для этого в Google Tag Manager перейдем в Переменные – Пользовательские переменные и создадим переменную типа URL.

Извлечение данных из URL и страницы с помощью GTM

Пользовательская переменная типа "URL"

Выбираем Тип компонента – Запрос (1) и указываем наш Ключ запроса (2). Сохраняем переменную. И проделываем это столько раз, сколько переменных и данных вы хотите извлекать.

В моем примере их три – name (имя), tell (телефон) и info (тип формы).

Извлечение данных из URL и страницы с помощью GTM

Наши три переменных

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

Для извлечения кода заказа со страницы также создадим пользовательскую переменную, только с типом Элемент DOM.

Если у отслеживаемого объекта на странице есть идентификатор (ID селектора), то в поле Метод выбора выбираете Идентификатор. В противном случае используйте второй вариант Селектор CSS.

Чтобы узнать селектор элемента, необходимо с помощью консоли разработчика (для Google Chrome - клавиша F12) исследовать элемент, выбрать тот, который вы хотите отслеживать, на вкладке Elements кликнуть правой кнопкой мыши по нему и выбрать Copy – Copy selector.

Извлечение данных из URL и страницы с помощью GTM

Копирование селектора CSS отслеживаемого элемента

В моем примере Селектор CSS - body > div > div > p.order_number > span. Я добавляю его в соответствующее поле:

Извлечение данных из URL и страницы с помощью GTM

Пользовательская переменная типа "Элемент DOM"

Сохраняем переменную. В результаты мы получили 3 переменных типа URL и 1 переменную типа Элемент DOM. Теперь мы можем включить в GTM режим предварительного просмотра и посмотреть, корректно ли передаются данные в наши переменные.

Извлечение данных из URL и страницы с помощью GTM

Режим отладки в GTM

Как видим, все данные корректно передались в созданные переменные. Далее вы с ними можете делать что угодно. Запускать определенные условия активации, передавать в сторонние трекеры (тот же код заказа в Google Analytics), использовать в других переменных и т.д. Все зависит от конкретных задач.

С помощью переменных типа URL можно извлекать данные из utm_меток, а из Элемент DOM – названия товаров, ID продуктов, цены на странице и многое другое. Элемент DOM – переменная GTM, без которой не обойтись при настройке динамического ремаркетинга. Также с помощью переменной типа URL можно получить не только запрос, но и фрагмент URL, имя хоста, порт, протокол и другие части. Подробнее об этом читайте в статье «Пользовательские переменные в GTM».

Примечание: в статье разбирается пример извлечения данных имени и телефона пользователя (личных данных). А это запрещено политикой Google. Однако с помощью данного способа вы можете извлекать любые другие данные, которые не позволяют идентифицировать ваших клиентов.

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике