Как сделать пейвол-окно апгрейда через Google Tag Manager без программиста

Автор: Андрей Давыдов · обновлено 18 сентября 2026

Мягкий пейвол через Google Tag Manager: когда пользователь бесплатного тарифа доходит до платной функции, окно объясняет апгрейд и ведёт на вашу страницу тарифов — с таргетингом по тарифу, статистикой и правками без релиза.

Время: ● 20 минут
Цена: 14 дней бесплатно, без карты
Кто делает: Любой, кто может публиковать в GTM

Пример: окно апгрейда через Google Tag Manager

SaaS с отчётами передаёт plan в dataLayer. Когда пользователь бесплатного тарифа нажимает «Выгрузить» (data-tour="export") на /app/reports, окно сообщает «Выгрузка в Excel и PDF — на тарифе Pro» со ссылкой на /pricing. Будет ли выгрузка, решает само приложение.

Что Clew делает и чего не делает. Clew показывает подсказку об апгрейде — модальное окно с вашим текстом и ссылкой на вашу страницу тарифов или оплаты — тем пользователям, кого выбрали правила. Clew не принимает оплату, не ведёт подписки и не скрывает контент: доступ определяет ваше приложение, деньги списывает ваш платёжный сервис.

Формат входит в тариф Pro. Каждый новый аккаунт начинается с 14 дней бесплатного пробного периода со всеми форматами и правилами аудитории, карта не нужна. После пробного периода ничего не удаляется и опубликованное продолжает показываться, а туры и подсказки остаются бесплатными на тарифе Free.

Как добавить пейвол-окно через Google Tag Manager: пошагово

Шаг 01
Скопируйте код 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 откройте Сценарии → + Новый сценарий и выберите Модальное окно. Один шаг: заголовок с выгодой («Выгрузка в Excel — на тарифе Pro»), одно предложение о ценности и в Текст ссылки / Адрес ссылки — кнопка и адрес вашей страницы тарифов или оплаты.
Шаг 5 · схема интерфейса

Шаг 06

Укажите, где, когда и кому показывать

В том же редакторе заполните Где показывать (URL страницы), Когда показывать, Таргетинг аудитории и Частота. Настройки примера выше:

Настройка	Значение
Формат	Модальное окно
Где показывать (URL страницы)	Раздел по префиксу `/app/reports`
Когда показывать	По клику на элемент: `[data-tour="export"]`
Таргетинг аудитории	Свойство `plan` равно `free`
Частота	Каждый визит

Редактор тура в Clew: формат, правило URL, триггер и правило аудитории (пейвол через Google Tag Manager) — Шаг 6 · схема интерфейса

Шаг 07
Опубликуйте и проверьте на сайте
Поставьте Статус — Опубликован и сохраните. Откройте страницу в режиме инкогнито: Clew помнит, кто уже видел показ «один раз», поэтому в обычном окне его может не быть. Показы, прохождения и отвалы появятся в статистике тура.
Шаг 7 · схема интерфейса

Подводные камни: пейвол через Google Tag Manager

Не добавляйте триггер «История»

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

Свойства пользователя — вторым тегом

Если в dataLayer есть значения вроде plan, создайте переменную уровня данных и второй тег «Пользовательский HTML», который вызывает Clew.identify() с ней (см. пример). Запускайте его на событии, в котором есть значение, после тега Clew.

Обновляйте свойство после оплаты

Свойства хранятся в браузере, пока приложение не пришлёт новое значение. Вызывайте Clew.identify({ plan: "pro" }) после успешного перехода на тариф, иначе новый клиент продолжит видеть окно.

Тариф должен быть в dataLayer

Менеджер тегов может передать только то, что страница уже отдаёт. Если в dataLayer нет тарифа, попросите добавить его один раз или используйте правило по cookie, которую ставит приложение.

Вопросы и ответы

Как тариф попадает в Clew?

Второй тег «Пользовательский HTML» вызывает Clew.identify({ plan: '{{DLV - plan}}' }) с переменной уровня данных.

GTM замедляет показ?

Виджет загружается на мгновение позже контейнера. Разница заметна разве что у элемента с Сразу при загрузке на самом первом просмотре.

GTM может прочитать тариф пользователя?

Только если сайт кладёт его в dataLayer. Тогда переменная уровня данных передаёт значение в Clew.identify() в теге «Пользовательский HTML».

Оплату принимает Clew?

Нет. Кнопка ведёт на вашу страницу тарифов или оплаты; с картами, подписками и доступом Clew не работает.

Пейвол-окно бесплатное?

Нужны формат модального окна и правило аудитории — оба в Pro. В 14 днях пробного периода они есть, без карты.

Как сделать пейвол-окно апгрейда через Google Tag Manager без программиста

Пример: окно апгрейда через Google Tag Manager

Как добавить пейвол-окно через Google Tag Manager: пошагово

Скопируйте код Clew

Создайте тег «Пользовательский HTML»

Запускайте на всех страницах

Проверьте и опубликуйте

Напишите окно апгрейда

Укажите, где, когда и кому показывать

Опубликуйте и проверьте на сайте