Подмена картинок на странице с использованием метки utm_content с помощью GTM

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

Данный инструмент будет удобно применить на одностраничных сайтах (лендингах) с посещением до 200 уникальных посетителей в день.

В данной статье рассмотрим реализацию такого случая при помощи Google Tag Manager.

В первую очередь необходимо внедрить GTM в исходный код сайта, если его там ещё нет. Если есть, переходим к настройке.

Начнём с исследования элемента, который будет изменяться. В нашем случае – это изображение флага России.

Она имеет идентификатор picture

Переходим в GTM в Переменные – блок Пользовательские переменные

Нажимаем Создать

Зададим название, например URL Key

Задаём настройки переменной

  • Тип переменной: URL (пункт Навигация)
  • Тип компонента: Запрос
  • Ключ запроса: utm_content

Создадим ещё одну переменную UTM Content

Задаём ей настройки

  • Тип переменной: Таблица поиска
  • Входная переменная: {{URL Key}}
UTM Content – Таблица поиска

Не забываем ставить галочку: Установить значение по умолчанию и вписать туда тег img с изображением по умолчанию.

Переходим в Триггеры – Создать

Называем его Picture Substitution

Настраиваем

Тип триггера: Просмотр страницы

Условия активации: Некоторые просмотры страниц

Активировать при выполнении условия:

Page URLсодержитexamples/contact_form

Теперь переходим в Теги – Создать

Зададим название Picture Substitution Tag и настроим его

Тип тега: Пользовательский HTML

Код:

<script>
   jQuery("#picture").replaceWith('{{UTM Content}}');
</script>

Привязываем к нему триггер Picture Substitution

Обязательно должна быть подключена библиотека jQuery!

Сохраняем и опубликовываем.

Проверка

Страница по умолчанию – флаг России

Страница с меткой utm_content=uk – флаг Великобритании

Страница с меткой utm_content=czech – флаг Чехии

Страница с меткой utm_content=croatia – флаг Хорватии

Как видим, при изменении ключа utm_content подмена работает и картинки изменяются.

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