👨‍🔬Подмена заголовка на сайте в Google Tag Manager (2018)

Приветствую, друзья! На связи Евгений Тридчиков, и в этом видео мы рассмотрим динамическую подмену заголовка на сайте в зависимости от параметра запроса.
Лень читать? Смотрите видео в конце статьи!

В основе подмены – персонализация

Этот прием обычно используется во время рекламных мероприятий с целью адаптировать контент сайта под определенную аудиторию. В рамках видео мы рассмотрим пример в связке с контекстной рекламой.

Для этого нам понадобится:

  • разбить аудиторию на сегменты,
  • установить параметр запроса для каждого сегмента,
  • создать переменную, которая подсасывает значения параметра запроса,
  • создать табличную переменную-распределитель,
  • настроить тег подмены заголовка.

В контекстной рекламе существует два популярных подхода к организации рекламных кампаний: одна группа-одна фраза и работа с группами + макросы.

Если вы работаете как Антон, по правилу 1-1, то вам придется сгруппировать фразы, согласно интентам пользователей. Таким образом, у вас получатся сегменты аудиторий по намерениям, что нам и нужно.

Готовим таблицу подмен

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

Готовим таблицу подмены заголовка на сайте
Готовим таблицу подмены заголовка на сайте

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

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

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

Здесь стоит отметить, что параметр запроса это по сути набор символов, ключ. Я решил использовать ютм-контейнер. Вы же можете взять в качестве параметра запроса, например, dimabilan. При этом dimabilan будет принимать различные значения для каждого сегмента аудитории.

Готовим переменные в GTM

Отправляемся в аккаунт Google Tag Manager и создаем пользовательскую переменную, тип “URL”, тип компонента “Запрос”, в качестве ключа указываем, как вы уже догадались, наш параметр запроса – dimabilan. Прошу прощения, utm_content. Сохраняем и даем говорящее название переменной.

Таким образом, эта переменная будет подсасывать значения, которые содержатся в параметре запроса.

Создаем пользовательскую переменную, тип “Таблица поиска”. В качестве входной переменной указываем только что созданную переменную-приемник.

Переменная типа Таблица поиска

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

Ниже вы можете указать значение, которое примет переменная, а стало быть и заголовок, если в ссылке нет параметра запроса. При этом нужно понимать, что при таком развитии событий тег подмены, который мы сейчас создадим, будет срабатывать при любом посещении сайта.

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

Я сохраняю переменную, не указывая значения по умолчанию. Даю понятное для меня название. Перехожу в раздел “Триггеры” и создаю новый триггер, тип “Просмотр страницы”, условия активации “Некоторые просмотры страниц”. В качестве фильтра указываем табличную переменную, которую мы только что создали, “не равно”, undefined.

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

Создаем теги подмены заголовка на сайте

Создаем новый тег, тип “Пользовательский HTML”, и здесь вам нужно поместить скрипт, который будет искать заголовок на сайте и менять его на значение табличной переменной. Проще всего сделать это, поставив задачу разработчику, поскольку реализация команды зависит от организации сайта, скажем так.

В качестве примера я продемонстрирую вам три варианта реализации. Просто покажите их разработчику и он поймет, что нужно сделать.

Варианты реализации, описанные в видео: https://goo.gl/Fgz1g3

Первый вариант потребует от вас добавить атрибут ID с произвольным значением для тега h1, то есть вашего заголовка на сайте. Этот скрипт ищет элемент с указанным айди и заменяет его значение табличной переменной.

Второй вариант реализован на сайте http://mosecomontag.ru/. Как видите, здесь поиск заголовка на сайте происходит с помощью jQuery. Здесь скрипт ищет элемент с классом .hero-title и заменяет его значение табличной переменной.

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

Тег поиска и подмены заголовка на сайте
Тег поиска и подмены заголовка на сайте (вариант реализации)

В качестве триггера указываем созданный ранее. Если в табличной переменной вы указали значение по умолчанию, то для активации тега используйте встроенный триггер “Все страницы”, “All Pages”.

За идею я благодарю Кирилла Никулина, а за реализацию скрипта Юрия Флягина и Кирилла Хмельницкого.

Заключение

Ну что, понравилось, друзья? Если было полезно, ставьте палец вверх и поделитесь с коллегами. Продолжаем развлекаться и в следующем уроке мы разберем не самую популярную функцию, которая останется интригой. Смотрите дальше!

comments powered by HyperComments
(3 оценок, среднее: 5,00 из 5)
Загрузка ...
Блог Евгения Тридчикова