Также, как и текстовый контент, изображения тоже могут содержать в себе значимый коммерческий смысл. Поэтому, они тоже являются одним из способов адаптации контента сайта и маркетинговой стратегией в рекламных кампаниях.
Данный инструмент будет удобно применить на одностраничных сайтах (лендингах) с посещением до 200 уникальных посетителей в день.
В данной статье рассмотрим реализацию такого случая при помощи Google Tag Manager.
В первую очередь необходимо внедрить GTM в исходный код сайта, если его там ещё нет. Если есть, переходим к настройке.
Начнём с исследования элемента, который будет изменяться. В нашем случае – это изображение флага России.
Она имеет идентификатор picture
Переходим в GTM в Переменные – блок Пользовательские переменные
Нажимаем Создать
Зададим название, например URL Key
Задаём настройки переменной
- Тип переменной: URL (пункт Навигация)
- Тип компонента: Запрос
- Ключ запроса: utm_content
Создадим ещё одну переменную UTM Content
Задаём ей настройки
- Тип переменной: Таблица поиска
- Входная переменная: {{URL Key}}
Не забываем ставить галочку: Установить значение по умолчанию и вписать туда тег 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 подмена работает и картинки изменяются.
Поделиться ссылкой: