Поп-апы, туры и чеклисты через Google Tag Manager
Если на сайте уже есть Google Tag Manager, маркетолог добавит поп-ап, продуктовый тур или чеклист онбординга без единого релиза: Clew ставится один раз тегом, а всё остальное собирается в редакторе Clew.
- Время
- ● 10 минут
- Кто делает
- Сотрудник с правом публикации в контейнере GTM
- Шагов
- 8
Пошагово
- Шаг 01
Скопируйте код из Clew
Зарегистрируйтесь или войдите в Clew и откройте Админка → Обзор. В карточке «Виджет пока не подаёт сигналов.» — ваша строка с настоящим ключом сайта; нажмите на неё, чтобы скопировать.
<!-- Clew: замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ сайта из админки > Обзор --> <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>
Шаг 1 · схема интерфейса - Шаг 02
Откройте контейнер и создайте тег
Зайдите на tagmanager.google.com, откройте контейнер, установленный на сайте, и нажмите Теги → Создать. Проверьте название контейнера: у многих команд есть отдельные контейнеры для тестового и боевого сайта.
Шаг 2 · схема интерфейса - Шаг 03
Выберите тип «Пользовательский HTML»
Назовите тег вверху, например
Clew widget. Нажмите Конфигурация тега и выберите Пользовательский HTML в группе пользовательских типов.
Шаг 3 · схема интерфейса - Шаг 04
Вставьте строку
Вставьте строку из шага 1 в поле HTML. Флажок Поддержка document.write оставьте выключенным — Clew он не нужен.
Шаг 4 · схема интерфейса - Шаг 05
Запускайте на всех страницах
Нажмите Триггеры, выберите встроенный All Pages (тип «Просмотр страницы») и нажмите Сохранить. Тег должен загружаться везде: на каких страницах и кому показывать тур, решает сам Clew.
Шаг 5 · схема интерфейса - Шаг 06
Проверьте в предварительном просмотре
Нажмите Предварительный просмотр, введите адрес сайта и подключитесь. В Tag Assistant тег
Clew widgetдолжен быть в списке сработавших (Tags Fired). Если он среди несработавших, проверьте триггер.
Шаг 6 · схема интерфейса - Шаг 07
Отправьте и опубликуйте
В рабочей области нажмите Отправить, назовите версию, например «Добавлен виджет Clew», и нажмите Опубликовать. До публикации на сайте ничего не меняется.
Шаг 7 · схема интерфейса - Шаг 08
Убедитесь, что всё работает
Откройте любую страницу сайта в обычном окне браузера и вернитесь в Clew, в раздел Обзор. В течение минуты карточка станет зелёной: «Виджет активен.»
Шаг 8 · схема интерфейса
Что важно знать про GTM
Режим согласия
Если в контейнере настроен режим согласия (Consent Mode), откройте у тега Расширенные настройки и задайте проверки согласия так, как требует ваша политика обработки данных.
Несколько сайтов в одном контейнере
У каждого сайта в Clew свой ключ. Если один контейнер обслуживает несколько доменов, создайте по тегу на сайт и вместо All Pages используйте триггер просмотра страницы с условием на Page Hostname.
GTM на сайте ещё нет
Установка самого GTM — это вставка его кода на все страницы, то есть та же работа, что и прямая установка Clew. Воспользуйтесь инструкцией для конструкторов и CMS, а если на сайте есть Метрика — Яндекс Тег Менеджером.
Что можно добавить через Google Tag Manager без программиста
После установки строки каждый формат ниже собирается в редакторе Clew. В этих инструкциях установка разобрана вместе с конкретным примером.
- Google Tag ManagerКак добавить поп-ап на сайт через Google Tag Manager без программиста
- Google Tag ManagerКак сделать продуктовый тур через Google Tag Manager без программиста
Если что-то не работает
Пользовательский HTML или шаблон из галереи?
Пользовательский HTML. Он выполняет официальную строку Clew как есть, и обновлять его потом не придётся.
Работает ли Clew через GTM так же, как при прямой установке?
Да. Виджет загружается чуть позже самого контейнера, дальше таргетинг, аналитика и визуальный редактор работают без отличий.
В админке всё ещё «Виджет пока не подаёт сигналов»
Откройте страницу сайта в обычном окне браузера и через минуту обновите админку. Если не помогло: проверьте, что изменения опубликованы, а не только сохранены; что вместо заглушки стоит ваш ключ; в инструментах разработчика браузера на вкладке Network найдите widget/…js — ответ должен быть 200. Ответ 404 означает ошибку в ключе.
На сайте настроен Content Security Policy
Нужны две директивы и больше ничего: script-src https://tryclew.ru и connect-src https://tryclew.ru. Виджет не использует eval, blob: и воркеры, а свои стили подключает через CSSOM, а не разметкой, — поэтому style-src 'unsafe-inline' не нужен в Chrome, Edge, Firefox 101+ и Safari 16.4+. Более старые браузеры получают запасной элемент <style>: если они вам важны, а в style-src нет 'unsafe-inline', там подсказки покажутся без оформления. Готовая строка: Content-Security-Policy: script-src 'self' https://tryclew.ru; connect-src 'self' https://tryclew.ru;
Можно ли зафиксировать версию виджета и указать <code>integrity=</code>?
Да. Строка из инструкций — /widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js — «скользящая»: она всегда отдаёт текущий виджет, поэтому хэш Subresource Integrity к ней не приложить (байты меняются). Рядом каждая версия отдаётся ещё и по неизменяемому адресу с хэшем содержимого. Запросите https://tryclew.ru/api/v1/widget-version?site=ВАШ_КЛЮЧ — в ответе будут version, path и integrity; подставьте их в тег: <script src="https://tryclew.ru/widget/v/<версия>/ВАШ_КЛЮЧ.js" integrity="sha384-…" crossorigin="anonymous" async></script>. Закреплённый адрес не меняется, поэтому браузер откажется выполнить файл, если отличается хотя бы один байт. Версию вы обновляете тогда, когда сами решите, — тот же запрос можно делать из скрипта деплоя. Больше ничего не меняется: туры по-прежнему публикуются в редакторе Clew без правок сайта.
Не съест ли виджет блокировщик рекламы?
Нет. Нашего домена нет ни в одном из больших списков — EasyList, EasyPrivacy, AdGuard, uBlock Origin, — поэтому туры, подсказки и чеклисты видят и те посетители, у кого блокировщик включён. Тоньше со статистикой: EasyPrivacy блокирует любые сторонние запросы типа ping, поэтому виджет отправляет события обычным запросом — его эти списки пропускают. Чтобы выйти из-под любых пользовательских списков совсем, отдавайте виджет со своего домена: направьте https://ваш-сайт/clew/* на https://tryclew.ru/* в CDN или nginx и замените строку на <script src="/clew/widget/ВАШ_КЛЮЧ.js" async></script>. Виджет сам будет обращаться к API по тому же префиксу — всё станет first-party.
Работает ли в SPA (React, Vue, Next.js)?
Да. Подключите строку один раз — в корневом HTML или корневом шаблоне. Смену страниц без перезагрузки виджет отслеживает сам (History API и изменения hash), поэтому не добавляйте его на каждый маршрут. Повторная загрузка игнорируется, но это лишняя работа для браузера.
А что с баннером согласия на cookie?
Clew хранит собственную cookie и записи в localStorage, чтобы помнить, какие туры посетитель уже прошёл, и считать прохождения. В рекламные системы данные не передаются. Можно ли запускать виджет до согласия, решает ваша политика обработки данных; если баннер блокирует его до согласия, туры просто начнутся после него.
Стоит плагин кеширования или оптимизации
После установки очистите кеш, иначе посетители будут получать старые страницы без строки. Если плагин откладывает, объединяет или минифицирует JavaScript (WP Rocket, LiteSpeed Cache, композитный режим Битрикса), исключите tryclew.ru/widget из этих оптимизаций.
Сайт станет медленнее?
Нет. У строки есть атрибут async: браузер загружает виджет параллельно и не блокирует страницу. Зависимостей у виджета нет.
Может ли приложение само сообщить Clew, что шаг онбординга пройден?
Да, это одна строка. У пункта чеклиста может быть правило, которое отмечает его без клика посетителя: страница, на которую он зашёл, клик по элементу с указанным CSS-селектором или событие из вашего кода — Clew.complete('invited'), где invited — ключ, который вы вписали рядом с пунктом в редакторе. Вызывайте в момент, когда дело действительно сделано, например после ответа вашего API. Вызывать безопасно в любой момент: если чеклиста с таким ключом на странице нет, вернётся false. Старое имя TutorKit по-прежнему работает.
Другие способы установки
Яндекс Тег Менеджер
Тег «Пользовательский HTML» с триггером на просмотр страницы — прямо в Метрике, без кода Google Tag Manager на сайте.
Открыть инструкцию →ВайбкодингИИ-ассистенты
Один промпт для Cursor, Claude Code, Lovable, Bolt.new, v0 и Replit, который ставит строку в правильный корневой файл.
Открыть инструкцию →Без кодаТильда, Битрикс, WordPress
Где в Тильде, 1С-Битрикс, WordPress, Webflow и на обычном HTML-сайте поле для кода в head и что нажать.
Открыть инструкцию →