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

Подробное руководство по настройке отправки заявок с сайта в 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 (с галочкой):

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

• читать блоги в интернете других авторов или мой блог;
• приобрести электронное руководство Google Tag Manager (2020)
• пройти мой видеокурс по Google Tag Manager (2020), в котором разбирается 9 различных способов отслеживания отправки форм.

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

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

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

• Отслеживание значений полей в GTM (+видео)
• CSS-селекторы в GTM. Часть I
• Селекторы в jQuery. Часть II

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• https://developers.google.com/apps-script/guides/web
• http://googleappscripting.com/doget-dopost-tutorial-examples/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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