Как передать название кнопки в заголовок всплывающей формы с помощью Google Tag Manager

Константин Булгаков
Константин Булгаков
02 Дек.2019
GTM помогает решать не только задачи собора данных, но и улучшать отображение контента сайта. В этом материале мы настроим подмену заголовка всплывающей формы учитывая текст кнопки. Статья будет полезна маркетологам, которые спят и видят как повысить релевантность посадочных страниц и улучшить конверсионные показали своих проектов.

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

Для начала коротко изложу задачу.

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

Пример заголовка всплывающего окна

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

Решение приведенное в статье поможет без труда адаптировать контент страницы под ваши текущие бизнес-задачи и требования.

Ну что, хватит воды, предлагаю приступать к делу.

Шаг №1. Создаем пользовательскую переменную уровня данных

  1. Открываем Google Tag Manager и выбираем нужный контейнер;
  2. В левой части рабочей области находим Переменные и создаем новую пользовательскую переменную;
  3. В раскрывшемся меню выбираем Переменная уровня данных;
  4. В поле Имя переменной уровня данных добавляем {{Click Text}};
  5. Версию уровня данных оставляем по умолчанию;
  6. Активируем галочку Установить значение по умолчанию. В этом поле укажем название заголовка окна по умолчанию;
  7. Задаем понятное название для переменной и сохраняем.

Создание переменной уровня данных

В примере я указал название переменно change_formname. Дословно можно перевести как «изменение названия имени формы». Даже если через какое-то время вы вернетесь к настройкам и забудете какая переменная отвечает за что, то название со смыслом поможет быстро разобраться в деталях.

Шаг №2. Создаем пользовательскую переменную типа Таблица поиска

Не спешите уходить от переменных, с ними мы еще не закончили.

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

  1. Создаем еще одну пользовательскую переменную, но на этот раз переменную Таблица поиска и выбираем ее;
  2. В качестве входной переменной указываем переменную {{Click Text}};
  3. В поле Входные данные указываем текст при клике на который должна срабатывать подмена, а в поле Результат какой текст используем для подмены в форме. Например, если посетитель нажимаем по кнопке «Заказать звонок», то заголовок появившегося окна будет иметь аналогичное название «Заказать звонок».
  4. Активируем галочку и устанавливаем значение по умолчанию. В поле укажите стандартную фразу, которая будет показана пользователю если по какой-то причине подмена контента не сработает.
  5. Указываем понятное имя новой переменной и сохраняем.

Создание переменной Таблицы данных

Рекомендую прописывать входные данные строчными и заглавными буквами, чтобы со стороны GTM не возникло путаницы с написанием элементов.

Шаг №3. Создаем триггер активации события

Переходим в раздел Триггеры, где создадим условие активации будущего тега.

  1. Создаем новый триггер;
  2. Выбираем тип Все элементы;
  3. В условиях активации триггера устанавливаем Некоторые значение;
  4. Устанавливаем условие, в котором я пропишу правило срабатывания сразу для всех кнопок с использованием регулярки:
[Click Text > Соответствует регулярному выражению > Заказать звонок|Подобрать решение|Получить предложение|Задать вопрос]

Мы указываем значения и Диспетчер тегов сравнивает их со значениями переданными в переменную Click Text. Если переменная совпадает с указанным значениями, то условие срабатывания считается выполненным.

Создание триггера подмены контента

Если объяснить логику работы простыми словами, то мы даем триггеру установку — запускаем тег в том случае если пользователь кликнул на элемент (кнопку или ссылку) с содержанием одной из четырех фраз Заказать звонок | Подобрать решение | Получить предложение | Задать вопрос.

В вашем же случае конструкция может быть проще.

Если вы настраиваете подмену для элемента в котором всегда используется только одна фраза, например «Отправить заявку», то условие будет таким:

[Click Text > Ровно > Отправить заявку]

Шаг №4. Создаем пользовательский HTML тег

С работой триггера разобрались, теперь переходим к созданию тега.

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

  1. Создаем новый тег;
  2. Выбираем из списка Пользовательский HTML;
  3. Добавляем следующий фрагмент кода:
<script>
 x = document.getElementsByClassName("t702__title");
 x[0].innerHTML = "{{table_formname}}";
</script>

Здесь t702__title — CSS класс подменяемого элемента, а {{table_formname}} — название переменной, которую мы создавали на самом первом шаге.

В вашем случае имя класса подменяемого элемента будет однозначно другим. Определить его можно с помощью консоли администратора в Google Chrome. Просто перейдите в режим исследования элемента (Ctrl+Shift+I) и наведите курсор на элемент.

Вы увидите название CSS селектора — просто скопируйте его и вставьте в код из примера.

Узнаем атрибут CSS для элемента страницы

Если в HTML-коде вместо CLASS для элемента задан атрибут ID, то используем другую конструкцию:

<script type="text/javascript">
 document.getElementById("ID").innerHTML="{{table_formname}}";
</script>

где — ID — уникальный идентификатор элемента в CSS, table_formname — созданная ранее пользовательская переменная таблицы поиска.

JS-код для элемента ID

Далее выбираем в самом низу ранее созданный триггер и сохраняем элемент.

Шаг №5. Запускаем предварительный просмотр

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

Включение режима предварительного просмотра

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

Если панель отладки не загружается, попробуйте запустить принудительное обновление. Сделать можно с помощью быстрых клавиш: в Windows и Linux: Shift + F5 или Ctrl + Shift + R, а в Mac: ⌘ + Shift + R.

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

Как поделиться ссылкой для предварительного просмотра

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

Как предоставить доступ к конфигурации рабочей области:

  1. Нажмите Поделиться ссылкой для просмотра в баннере с оповещением;
  2. В открывшемся диалоговом окне укажите домен сайта (например, https://example.com/);
  3. Скопируйте URL предварительного просмотра;
  4. Вставьте URL в сообщение в чате или электронной почте и отправьте его коллеге. Ссылка ведет на целевую страницу с уведомлением о включении режима предварительного просмотра в браузере.

Шаг №6. Публикуем изменения

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

Чтобы применить настройки для боевого домена просто нажмите на кнопку Отправить и в появившемся окошке выберите Пропустить.

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

Выводы

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

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

Помогла статья?

Нашли ошибку или остались вопросы по работе с Google Tag Manager? Пишите комментарии в форме ниже или отправляйте письма на адрес info@konstantinbulgakov.com, постараюсь ответить в ближайшее время.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *