Как добавить подсказку на сайт через Google Tag Manager без программиста
Контекстная подсказка через Google Tag Manager: одно предложение рядом с элементом, на котором посетители сомневаются, — ставится кликом в визуальном редакторе и показывается ровно тогда, когда помогает.
- Время
- ● 10 минут
- Цена
- Тариф Free
- Кто делает
- Любой, кто может публиковать в GTM
Пример: подсказка через Google Tag Manager
На странице настроек SaaS вкладка API-ключей вызывает вопросы в поддержку. Подсказка «Ключ показывается один раз — сохраните его в менеджере паролей» появляется каждый раз, когда кликают по вкладке с атрибутом data-tour="api-keys".
Бесплатно на тарифе Free — без карты и без срока: один сайт и до 3 опубликованных туров или подсказок. Правила аудитории и A/B-тесты — в тарифе Pro.
Как добавить подсказку через Google Tag Manager: пошагово
- Шаг 01
Скопируйте код Clew
Зарегистрируйтесь бесплатно или войдите, добавьте сайт и откройте Админка → Обзор. Нажмите на строку в карточке «Виджет пока не подаёт сигналов.» — она скопируется уже с ключом вашего сайта вместо заглушки.
<!-- Clew: замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ сайта из админки > Обзор --> <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>
Шаг 1 · схема интерфейса - Шаг 02
Создайте тег «Пользовательский HTML»
В tagmanager.google.com откройте контейнер, Теги → Создать → Конфигурация тега → Пользовательский HTML и вставьте строку Clew. Назовите тег
Clew widget.
Шаг 2 · схема интерфейса - Шаг 03
Запускайте на всех страницах
В разделе Триггеры выберите All Pages и сохраните. Грузите везде: на какой странице показывать подсказка, решается в Clew, а не в GTM.
Шаг 3 · схема интерфейса - Шаг 04
Проверьте и опубликуйте
В режиме предварительного просмотра убедитесь, что
Clew widgetв списке сработавших тегов, затем Отправить → Опубликовать. До публикации на сайте ничего не меняется.
Шаг 4 · схема интерфейса - Шаг 05
Привяжите подсказку к элементу
В Clew откройте Сценарии → + Новый сценарий, оставьте Тултипы по шагам и нажмите Редактировать на сайте. На странице нажмите Выбрать элемент, кликните по полю или кнопке, напишите короткий заголовок и одно предложение. Если автоматическое положение что-то закрывает, задайте Уголок / позиция.
Шаг 5 · схема интерфейса - Шаг 06
Укажите, где, когда и кому показывать
В том же редакторе заполните Где показывать (URL страницы), Когда показывать, Таргетинг аудитории и Частота. Настройки примера выше:
Настройка Значение Формат Тултипы по шагам Где показывать (URL страницы) Раздел по префиксу /settingsКогда показывать По клику на элемент: [data-tour="api-keys"]Таргетинг аудитории Без правил — все, кто открыл страницу Частота Каждый визит 
Шаг 6 · схема интерфейса - Шаг 07
Опубликуйте и проверьте на сайте
Поставьте Статус — Опубликован и сохраните. Откройте страницу в режиме инкогнито: Clew помнит, кто уже видел показ «один раз», поэтому в обычном окне его может не быть. Показы, прохождения и отвалы появятся в статистике тура.
Шаг 7 · схема интерфейса
Подводные камни: подсказка через Google Tag Manager
Не добавляйте триггер «История»
Виджет сам отслеживает переходы в одностраничных приложениях. Второй триггер на изменение истории только зря загрузит скрипт ещё раз.
Режим согласия может задержать показ
Если в контейнере включён режим согласия и тег ждёт его, подсказка появится только после согласия посетителя. Решите это по своей политике обработки данных.
Выбирайте id и data-атрибуты
Если Выбрать элемент предлагает длинную цепочку классов, выберите ближайший родительский элемент с id или попросите добавить атрибут data-tour — стабильный селектор переживёт обновления шаблона.
Вопросы и ответы
Почему каждый раз?
Потому что это справка, а не анонс: с По клику на элемент и Каждый визит она появляется только когда пользователь открывает вкладку.
GTM замедляет показ?
Виджет загружается на мгновение позже контейнера. Разница заметна разве что у элемента с Сразу при загрузке на самом первом просмотре.
Подсказка бесплатная?
Да, на тарифе Free — до 3 опубликованных туров и подсказок на одном сайте.
Можно открывать подсказку только по клику?
Да. Выберите По клику на элемент, укажите селектор иконки или ссылки, по которой она открывается, и поставьте Каждый визит.
Что ещё можно добавить через Google Tag Manager
- Как добавить поп-ап на сайт через Google Tag Manager без программиста
- Как сделать продуктовый тур через Google Tag Manager без программиста
- Как добавить чеклист онбординга через Google Tag Manager без программиста
- Как настроить онбординг пользователей через Google Tag Manager без программиста
- Как сделать интерактивную инструкцию через Google Tag Manager без программиста
- Как сделать пейвол-окно апгрейда через Google Tag Manager без программиста
- Как добавить форму оценки на сайт через Google Tag Manager без программиста