Как установить чат на сайт через Google Tag Manager

Частая ситуация: маркетолог отвечает за сайт, у него есть доступ к Google Tag Manager, а доступа к коду нет — разработчик занят, подрядчик отвечает раз в неделю, а правки шаблона идут через отдельную заявку. В этом случае установить чат через Google Tag Manager — самый быстрый путь: виджет ставится тегом за десять минут, без релиза и без участия программиста. Разберём по шагам, как это сделать, как показать чат только на части страниц и какие ошибки встречаются чаще всего.

Когда удобно ставить чат через GTM

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

Ставить чат через GTM удобно, когда:

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

Когда GTM не нужен: если вы и так можете вставить одну строку в шаблон сайта, прямая установка надёжнее — у неё на одно звено меньше. Общий порядок прямой установки описан в статье как установить онлайн-чат на сайт.

Что подготовить заранее

Перед началом проверьте три вещи:

• контейнер GTM действительно установлен на всех нужных страницах (обычно его код стоит в шаблоне сайта);
• у вас есть права на публикацию в контейнере, а не только на редактирование;
• под рукой код виджета. В ChatDeck он выглядит так — ключ pk_… у каждого рабочего пространства свой, его можно скопировать в настройках:

<script src="https://chatdeck.ru/widget.js" data-chatdeck-key="pk_…" async></script>

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

Сам тег создаётся за несколько кликов:

1. Откройте нужный контейнер и перейдите в раздел «Теги».
2. Нажмите «Создать», затем «Конфигурация тега» и выберите тип «Пользовательский HTML».
3. Вставьте код виджета целиком, вместе с тегом <script>.
4. Опцию «Поддержка document.write» не включайте — скрипту чата она не нужна.
5. Дайте тегу понятное название, например «Чат — виджет», чтобы через полгода было ясно, что это такое.

Атрибут async оставьте: он говорит браузеру загружать скрипт параллельно с остальной страницей, и чат не замедляет её отображение.

Триггер: все страницы или выбранные

Тег без триггера никогда не сработает. Ниже в карточке тега откройте блок «Триггеры».

• Все страницы. Выберите встроенный триггер «All Pages» — чат появится на каждой странице, где загружается контейнер. Это вариант по умолчанию, его же рекомендует инструкция для Google Tag Manager.
• Выбранные страницы. Создайте новый триггер типа «Просмотр страницы», выберите «Некоторые просмотры страниц» и задайте условие, например «Page Path содержит /catalog».

Сохраните тег. Пока контейнер не опубликован, на живом сайте ничего не изменится — это нормально.

Предпросмотр и публикация контейнера

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

1. Нажмите «Предварительный просмотр» и введите адрес сайта.
2. Сайт откроется в отдельной вкладке с подключённым отладчиком. Проверьте, что тег чата в списке сработавших.
3. Убедитесь, что кнопка чата появилась в углу страницы, и отправьте тестовое сообщение.
4. Посмотрите, что сообщение пришло во входящие операторов, и ответьте на него.
5. Вернитесь в GTM, нажмите «Отправить», впишите название версии (например, «Добавлен онлайн-чат») и нажмите «Опубликовать».

После публикации откройте сайт в обычном окне браузера — чат должен появиться там, где сработал триггер. Проверьте и мобильную версию: кнопка чата не должна перекрывать важные элементы, например кнопку заказа или баннер cookies. Если перекрывает, положение и размер кнопки меняются в настройках внешнего вида виджета, а не в GTM.

Если что-то пошло не так, GTM позволяет вернуться к предыдущей версии контейнера в разделе «Версии» — это удобнее, чем срочно просить разработчика откатить шаблон.

Показ чата только на части сайта

Иногда чат нужен не везде. Типичные сценарии:

• только в каталоге и корзине интернет-магазина, где у покупателей есть вопросы перед заказом;
• только на лендинге рекламной кампании;
• везде, кроме личного кабинета, если там своя система обращений.

Для этого используйте условия триггера. Можно сочетать несколько: «Page Path содержит /catalog» или «Page Path содержит /cart» — это два отдельных триггера, привязанных к одному тегу. Для исключений в GTM есть «Исключения» в блоке триггеров: тег сработает на всех страницах, кроме подходящих под условие.

Если сайт — одностраничное приложение, где адрес меняется без перезагрузки, триггер «Просмотр страницы» сработает только при первом входе. Для чата это обычно не проблема: виджет, загрузившись один раз, остаётся на странице, а оператор всё равно видит текущий адрес посетителя.

Типичные ошибки

Двойная установка

Самая частая проблема: код уже вставлен в шаблон сайта или поставлен модулем CMS, а потом его добавляют ещё и через GTM. В результате на странице две копии виджета. Перед установкой проверьте исходный код страницы на наличие widget.js и выберите один способ.

Блокировщики рекламы

Многие блокировщики режут сам Google Tag Manager. Если GTM не загрузился, не загрузится и всё, что в нём лежит, включая чат. Для большинства посетителей это не критично, но если чат — главный канал продаж, надёжнее поставить код напрямую в шаблон.

Согласие на cookies

Если на сайте настроен баннер согласия и теги запускаются только после него, чат может не появиться до клика «Принять». Решите заранее, в какую категорию вы относите чат и должен ли он ждать согласия. Требования к обработке данных зависят от вашей ситуации, поэтому точную схему лучше согласовать с юристом — общие моменты разобраны в статье онлайн-чат и 152-ФЗ.

Неопубликованная версия

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

Частые вопросы

Не будет ли чат грузиться дважды?

Будет, если код стоит и в шаблоне, и в GTM, или если один тег привязан к двум триггерам, которые срабатывают на одной странице. Держите код в одном месте и используйте один триггер «Просмотр страницы».

Можно ли передать данные пользователя через GTM?

Да. Если сайт кладёт в dataLayer данные вошедшего пользователя, их можно передать в чат вызовом chatdeck('identify', {...}) во втором теге «Пользовательский HTML», который срабатывает после тега виджета. Оператор увидит имя, email и другие атрибуты прямо в карточке диалога. Подробнее — в статье про идентификацию посетителей.

Почему тег сработал, а чат не появился?

Откройте консоль браузера. Сообщение о неверном ключе означает, что в коде ошибка в data-chatdeck-key — скопируйте код заново. Если ошибок нет, проверьте, не скрывают ли кнопку стили сайта или баннер cookies, и не заблокирован ли скрипт расширением.

Влияют ли блокировщики рекламы?

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

Итог

Установка через GTM — это тег «Пользовательский HTML», триггер, предпросмотр и публикация. Чат в ChatDeck бесплатный и без ограничений по числу операторов: зарегистрируйтесь, скопируйте код из настроек и вставьте его в тег по инструкции для Google Tag Manager. Как убедиться, что чат заработал, — в уроке «Установка чата на сайт».