Заявки с сайта в Telegram с помощью Google Tag Manager

Ноябрь 02, 2020

Подробное руководство по настройке отправки заявок с сайта в Telegram с помощью Google Tag Manager своими руками.

Возможности диспетчера тегов Google безграничны.  С его помощью можно решать большое количество различных задач специалистов разного профиля - маркетологов, аналитиков, разработчиков. Чем больше я работаю с этим инструментом и чем больше знаю, тем больше понимаю, что ничего не знаю (с).  Одной из таких нетривиальных задач, которую можно решить с помощью GTM, является отправка заявок с сайта в мессенджер Telegram.

Чтобы проще было понять, о чем идет речь, я записал короткое видео демонстрации того, что мы будем учиться отслеживать:

Пользователь заходит к вам на сайт, оставляет заявку, и вы сразу получаете ее в Telegram. Реализовать это можно самостоятельно, без каких-либо финансовых затрат, используя только возможности Telegram, Google Spreadsheet и Google Tag Manager.

Какой практический смысл этой настройки?

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

Перед проведением 2 ноября 2020 года бесплатного вебинара на своем канале YouTube, на котором в режиме реального времени показывал данную настройку, я определил для себя несколько целей:

  • продемонстрировать нестандартные возможности работы с Google Tag Manager;
  • иметь запасной вариант приема обращений (дополнение к CRM-системе, e-mail и т.д.);
  • потому что это бесплатно и просто, а значит каждый может попробовать настроить;
  • забавы ради;

Полное видео трансляции можно посмотреть ниже:

Как это сделать?

Последовательность настройки отправки заявок с сайта в Telegram с помощью GTM сводится к нескольким простым шагам:

  • создание Telegram-бота;
  • получение token;
  • активация бота;
  • получение chat id;
  • настройка извлечения данных из полей формы в Google Tag Manager + специальный тег;
  • добавление кода в редактор скриптов с указанием всех настроек;
  • отправка заявки с сайта и проверка, дошла ли она в Telegram;

Давайте рассмотрим каждый шаг подробнее.

Создание Telegram-бота

Рекомендация: для удобства работы и тестирования установите десктопную версию Telegram.

Чтобы создать телеграм-бота, вам необходимо найти самого главного - @botfather (с галочкой):

Заявки с сайта в Telegram с помощью Google Tag Manager

Главный бот BotFather

Нажмите на кнопку Start или введите /start:

Заявки с сайта в Telegram с помощью Google Tag Manager

Команда Start

Вы увидите список команд для создания бота или управлениями текущими (уже созданными):

Заявки с сайта в Telegram с помощью Google Tag Manager

Команды для бота

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

Заявки с сайта в Telegram с помощью Google Tag Manager

Команда /newbot

Придумайте имя для бота и нажмите Enter (в моем примере -  myfirstbot):

Заявки с сайта в Telegram с помощью Google Tag Manager

Название Telegram-бота

На следующем шаге выберете логин (username) для вашего бота. Он должен заканчиваться на bot. Например: TetrisBot или tetris_bot (в моем примере - moyLeadBot):

Заявки с сайта в Telegram с помощью Google Tag Manager

Логин (username) Telegram-бота

Если логин занят, вам придет уведомление: Sorry, this username is already taken. Please try something different. Вам нужно будет придумать другой username для своего бота

 

Заявки с сайта в Telegram с помощью Google Tag Manager

Username занят

Сохраните токен, который бот вам пришлет в ответном сообщении (в моем примере - 1373742947:AAEULIWMmPCEAqSoduIYlIj-PezQrIjDmmE) . Он понадобится вам в дальнейшем.

Заявки с сайта в Telegram с помощью Google Tag Manager

Токен

Затем следует активировать бота. Чтобы это сделать, вам нужно найти его в поиске Telegram и нажать на Start:

Заявки с сайта в Telegram с помощью Google Tag Manager

Активация Telegram-бота

Теперь необходимо получить chat id. Вставьте в браузер ссылку:

, где XXXXXXXXXXXXXXXXXX – ваш токен.

Результат в браузере должен быть примерно такой:

Заявки с сайта в Telegram с помощью Google Tag Manager

Получение chat id

Сохраните chat id (в моем примере - 1217901862). Он понадобится вам в дальнейшем. На этом настройка Telegram-бота завершена.

Настройка извлечения данных из полей формы в Google Tag Manager + специальный тег

В GTM настраивается:

  • отслеживание отправки формы;
  • отслеживание заполненных полей формы;
  • специальный тег типа Пользовательское изображение.

Отслеживание отправки формы

В качестве примера я буду использовать свой сайт webinar.osipenkov.ru и форму с одним полем e-mail адреса для записи на вебинар.

Заявки с сайта в Telegram с помощью Google Tag Manager

Пример отслеживания формы с одним полем

Для моего примера и формы было достаточно стандартного триггера Отправка формы.

Заявки с сайта в Telegram с помощью Google Tag Manager

Триггер "Отправка формы"

Если вы не знаете как настроить собственные формы, то есть несколько вариантов:

Отслеживание заполненных полей формы

Для того, чтобы передавать значения полей в Telegram, сначала необходимо эту информацию извлечь из этого поля(ей) с помощью GTM, сохранить в переменной(ых), а затем с отправкой формы передать.

Статьи для ознакомления:

Селектор для моего поля e-mail: [placeholder="Ваш E-mail"]

Заявки с сайта в Telegram с помощью Google Tag Manager

CSS-селектор поля

Код для извлечения данных с jQuery и без:

Важно: для вашей формы эти конструкции будут другими. И на каждое поле формы она будет своя.

Заявки с сайта в Telegram с помощью Google Tag Manager

Извлечение информации из поля

На следующем шаге создайте переменную типа Собственный код JavaScript и вставьте туда следующий код:

где $('[placeholder="Ваш E-mail"]').val(); - ваша конструкция для поля.

Заявки с сайта в Telegram с помощью Google Tag Manager

Код для извлечения данных из поля формы

Такие переменные вы создаете для всех полей формы (если их несколько).

Специальный тег типа Пользовательское изображение

Для передачи информации по заявке нам необходимо создать тег типа Пользовательское изображение.

Заявки с сайта в Telegram с помощью Google Tag Manager

Тег "Пользовательское изображение"

Но перед тем, как мы добавил URL изображение, нам необходимо сделать кое-что еще.

Добавление кода в редактор скриптов

Перейдите в Google Таблицы по https://docs.google.com/spreadsheets/u/0/ и создайте новую таблицу. Откройте меню Инструменты – Редактор скриптов.

Заявки с сайта в Telegram с помощью Google Tag Manager

Инструменты – Редактор скриптов

Добавьте этот код в редактор:

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

Заявки с сайта в Telegram с помощью Google Tag Manager

Код в редакторе скриптов

Важное в этом коде - это конструкция e.parameter.email, которая внутри функции doGet(e) .

Если у вас больше полей в форме, то вы добавляете через + еще параметры, которые надо передать в запросе. Например, e.parameter.phone (если есть в форме поле с телефоном), e.parameter.name (если есть поле с именем и т.д.).

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

После этого нажмите Опубликовать – Развернуть как веб-приложение.

Заявки с сайта в Telegram с помощью Google Tag Manager

Опубликовать - Развернуть как веб-приложение

В настройках укажите:

  • Execute the app as: Запускать приложение от моего имени (Me)
  • Who has access to the app: Доступ к приложению есть у всех, включая анонимных пользователей (Anyone, even anonymous)
Заявки с сайта в Telegram с помощью Google Tag Manager

Deploy as web app (Развернуть как веб-приложение)

Вас попросят предоставить разрешение для доступа к данным Google. Поскольку приложение будет еще не проверено, то вы увидите предупреждение о небезопасности его использования. Игнорируйте его и просто перейдите на страницу проекта:

Заявки с сайта в Telegram с помощью Google Tag Manager

Перейти на страницу проекта

Далее разрешаете доступ к аккаунту Google. На заключительном шаге вы получите ссылку, которую нужно скопировать для тега Пользовательское изображение.

Заявки с сайта в Telegram с помощью Google Tag Manager

Скопируйте ссылку для Google Tag Manager

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

Заявки с сайта в Telegram с помощью Google Tag Manager

Тег "Пользовательское изображение"

В моем примере – это только email = {{e-mail}}, где

  • email - это название параметра, которое должно быть таким же, как и в коде редактора скриптов (там e.parameter.email);
  • {{e-mail}} – переменная типа Собственный код JavaScript, в которую вы извлекаете значение поля.

Например, если передавать два поля, то ссылка в теге будет выглядеть вот так:

Заявки с сайта в Telegram с помощью Google Tag Manager

Передача данных двух полей из формы

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

Заявки с сайта в Telegram с помощью Google Tag Manager

Режим отладки GTM

Если вы все настроили верно, то после отправки тестовой заявки ее данные должны прийти в Telegram.

Заявки с сайта в Telegram с помощью Google Tag Manager

Заявки с сайта в Telegram

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

Заявки с сайта в Telegram с помощью Google Tag Manager

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

Если у вас в команде несколько человек, и вы хотите, чтобы информация по лидам приходила всем в Telegram, то настройка чуть отличается, а именно:

  • после активации бота необходимо создать группу в Telegram;
  • вы должны пригласить Telegram-бота в эту группу;
  • напишите в группе какое-нибудь сообщение.

Далее настройка аналогична -> переходите к шагу получения chat id (будет другим) через https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates и продолжаете по этому руководству.

Существует решение, которое позволяет обходиться без редактора скриптов в Google Таблицах. В этом случае вы пишите весь код в поле URL изображения тега. Выглядеть это может вот так (скриншот подписчика):

Заявки с сайта в Telegram с помощью Google Tag Manager

Код напрямую написан в теге типа Пользовательское изображение

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике