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

 

Кнопка в формах имеет очень важное значение для восприятия сайта посетителем и является одним из важнейших элементов на сайте и очень мощным инструментом для маркетинговой стратегии в рекламных кампаниях.

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

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

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

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

Начнём с исследования элемента, который будет меняться.

Как видим из скриншота, изменять будем текст заголовка кнопки и её стиль, который имеет идентификатор button1. Ещё один важный момент – нам понадобится тег div, который имеет идентификатор content-cut и оборачивает кнопку.

Кнопка также может иметь класс – например, class = “button1” и с его помощью также можно изменять заголовок и стиль кнопки.

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

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

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

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

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

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

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

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

Таблица поиска

Входные данныеРезультат
button-buy<button id=”button1″ class=”button-buy” style=”color: yellow; background-color: red; border-color: yellowgreen;” onclick=”document.location=’page2.html'”>Купить</button>
button-order<button id=”button1″ class=”button-order” style=”color: white; background-color: green; border-color: yellowgreen;” onclick=”document.location=’contact.html'”>Заказать</button>
button-get<button id=”button1″ class=”button-get” style=”color: yellow; background-color: brown; border-color: yellowgreen;” onclick=”document.location=’page2.html'”>Получить</button>

Таким образом мы получили 3 кнопки:

  • Купить – красного цвета с жёлтым заголовком и жёлто-зелёной границей
  • Заказать – зелёного цвета с белым заголовком и жёлто-зелёной границей
  • Получить – коричневого цвета с жёлтым заголовком и жёлто-зелёной границей

Переходим в Триггеры и создадим триггер. Назовём его Button Substitution – DOM Ready

Настраиваем

 

Тип триггера: Модель DOM готова

Условия активации: Некоторые события “Модель DOM готова”

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

UTM Content – Button Search Tableне равноundefined

Теперь переходим в Теги и создадим тег с названием Button Substitution

настроим его

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

Код (id тега div):

<script type="text/javascript">
  document.getElementById("content-cut").innerHTML=("{{UTM Content - Button Search Table}}");
</script>

Привязываем к нему триггер Button Substitution – DOM Ready

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

Проверяем

Страница по умолчанию

На этом скриншоте кнопка Отправить серого цвета с чёрным заголовком

Страница /?utm_content=button-buy

На этом скриншоте кнопка Купить красного цвета с жёлтым заголовком и жёлто-зелёной границей. Кнопка ссылается на страницу page2.html

Страница /?utm_content=button-order

На этом скриншоте кнопка Заказать зелёного цвета с белым заголовком и жёлто-зелёной границей. Кнопка ссылается на страницу page2.html

Страница /?utm_content=button-get

На этом скриншоте кнопка Получить коричневого цвета с жёлтым заголовком и жёлто-зелёной границей. Кнопка ссылается на страницу contact.html

Как видим, всё работает.

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

 

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