Передача UTM-параметров РК через форму обратной связи с помощью GTM

 

Очень интересная задача: посетитель заходит на сайт с рекламного объявления, в котором прописаны необходимые 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

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

 

Читайте также