Кнопка в формах имеет очень важное значение для восприятия сайта посетителем и является одним из важнейших элементов на сайте и очень мощным инструментом для маркетинговой стратегии в рекламных кампаниях.
Например, у компании возник интерес, по какому из вариантов кнопок пользователь кликает чаще всего и совершает конверсию. При помощи 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
Как видим, всё работает.
Поделиться ссылкой: