Очень интересная задача: посетитель заходит на сайт с рекламного объявления, в котором прописаны необходимые UTM-метки, переходит по нескольким страницам, читает контент… и после этого отправляет сообщение через форму обратной связи. В форме имеется скрытое поле, в которое записываются UTM-параметры рекламной кампании. Тем самым, вместе с сообщением должны прийти и UTM-параметры. Это позволит выяснить, какие запросы посетитель использовал для показа рекламного объявления при переходе на сайт.
В данной статье разберёмся, как решить эту задачу с помощью Google Tag Manager.
В первую очередь необходимо, чтобы в исходном коде сайта присутствовал GTM. Если там его ещё нет – читаем сначала здесь, как его подключить.
В форме обратной связи необходимо добавить поле, в которое будет записываться URL со всеми UTM-параметрами, которые были включены в объявление при переходе с рекламного объявления на сайт. Это должно быть примерно так:
<div class="input-prepend"> <input class="input-medium focused" name="pcd" type="hidden" placeholder="Persist Campaign URL"> </div>
Здесь два основных параметра, которые должны присутствовать обязательно:
- type=”hidden” – скрывает поле, чтобы посетитель его не увидел
- name=”pcd” – это понадобится немного позже для скрипта, который будет прописывать необходимые данные с помощью CSS-селектора
В итоге код формы должен выглядеть примерно так:
Переходим в ГТМ в Теги и создаём тег. Назовём его Persist Campaign Data.
В типе выбираем Галерея шаблонов – выбираем Persist Campaign Data
Добавляем его в рабочую область
Ставим галочку на Store campaign data in a browser cookie и в URL parameters that trigger the storage убираем параметр gclid. Должно получиться так:
utm_source,utm_medium,utm_campaign,utm_term,utm_content,utm_id
Привязываем к нему триггер All Pages
Теперь переходим в Переменные и создаём там переменную, назовём её Cookie – __gtm_campaign_url. Выбираем тип Основной файл Cookie
В Названии cookie указываем __gtm_campaign_url и ставим галочку URI-декодирование файла cookie
После этого переходим в Триггеры и создадим триггер, назовём его DOM – Contact Page и выберем тип Просмотр страницы – Модель DOM готова
В Условиях активации триггера выбираем Некоторые просмотры страницы, и активируем триггер при выполнения условия
| Page Path | содержит | contact.html |
contact.html – это страница с формой обратной связи
Далее переходим в Теги и создадим тег, назовём его Form Fill и выберем тип Пользовательский HTML.
В код впишем такой скрипт:
<script>
(function () {
var value = "{{Cookie - __gtm_campaign_url}}"
var selector ="input[name='pcd']"
var field = document.querySelector(selector)
if(field){ field.value = value; }
})();
</script>
и привязываем к нему триггер DOM – Contact Page
здесь input[name=’pcd’] – это CSS-селектор того самого поля, куда будет записан URL с UTM-параметрами, с которыми посетитель пришёл на сайт
Сохраняем и публикуем контейнер.
Готово! Теперь при отправке сообщения через форму обратной связи (если посетитель пришёл с рекламного объявления) на электронную почту также придёт URL с UTM-параметрами
P.S.: при создании статьи был использован видеоурок Джулиена Джунеманна из MeasureSchool.com на YouTube
Поделиться ссылкой:
