- Регистрация
- 21 Окт 2020
- Сообщения
- 347
Подробное руководство по настройке отправки заявок с сайта в Telegram с помощью Google Tag Manager своими руками.
Возможности диспетчера тегов Google безграничны. С его помощью можно решать большое количество различных задач специалистов разного профиля - маркетологов, аналитиков, разработчиков. Чем больше я работаю с этим инструментом и чем больше знаю, тем больше понимаю, что ничего не знаю (с). Одной из таких нетривиальных задач, которую можно решить с помощью GTM, является отправка заявок с сайта в мессенджер Telegram.
Чтобы проще было понять, о чем идет речь, я записал короткое видео демонстрации того, что мы будем учиться отслеживать:
Пользователь заходит к вам на сайт, оставляет заявку, и вы сразу получаете ее в Telegram. Реализовать это можно самостоятельно, без каких-либо финансовых затрат, используя только возможности Telegram, Google Spreadsheet и Google Tag Manager.
Какой практический смысл этой настройки?
Вопрос хороший, особенно в текущих условиях рынка, когда владельцы бизнесов стараются настраивать проекты таким образом, чтобы получать лиды в CRM-системе, имея единую централизованную систему сбора данных о входящих обращениях с последующей возможностью построения сквозной аналитики.
Перед проведением 2 ноября 2020 года бесплатного вебинара на своем канале YouTube, на котором в режиме реального времени показывал данную настройку, я определил для себя несколько целей:
Как это сделать?
Последовательность настройки отправки заявок с сайта в Telegram с помощью GTM сводится к нескольким простым шагам:
Создание Telegram-бота
Рекомендация: для удобства работы и тестирования установите десктопную версию Telegram.
Чтобы создать телеграм-бота, вам необходимо найти самого главного - @botfather (с галочкой):
Главный бот BotFather
Нажмите на кнопку Start или введите /start:
Команда Start
Вы увидите список команд для создания бота или управлениями текущими (уже созданными):
Команды для бота
В списке есть команда /newbot. Данная функция позволяет создать нового бота. Вы можете прописать эту команду вручную в поле отправки сообщения или просто нажать на эту команду в списке:
Команда /newbot
Придумайте имя для бота и нажмите Enter (в моем примере - myfirstbot):
Название Telegram-бота
На следующем шаге выберете логин (username) для вашего бота. Он должен заканчиваться на bot. Например: TetrisBot или tetris_bot (в моем примере - moyLeadBot):
Логин (username) Telegram-бота
Если логин занят, вам придет уведомление: Sorry, this username is already taken. Please try something different. Вам нужно будет придумать другой username для своего бота
Username занят
Сохраните токен, который бот вам пришлет в ответном сообщении (в моем примере - 1373742947:AAEULIWMmPCEAqSoduIYlIj-PezQrIjDmmE) . Он понадобится вам в дальнейшем.
Токен
Затем следует активировать бота. Чтобы это сделать, вам нужно найти его в поиске Telegram и нажать на Start:
Активация Telegram-бота
Теперь необходимо получить chat id. Вставьте в браузер ссылку:
, где XXXXXXXXXXXXXXXXXX – ваш токен.
Результат в браузере должен быть примерно такой:
Получение chat id
Сохраните chat id (в моем примере - 1217901862). Он понадобится вам в дальнейшем. На этом настройка Telegram-бота завершена.
Настройка извлечения данных из полей формы в Google Tag Manager + специальный тег
В GTM настраивается:
В качестве примера я буду использовать свой сайт webinar.osipenkov.ru и форму с одним полем e-mail адреса для записи на вебинар.
Пример отслеживания формы с одним полем
Для моего примера и формы было достаточно стандартного триггера Отправка формы.
Триггер "Отправка формы"
Отслеживание заполненных полей формы
Для того, чтобы передавать значения полей в Telegram, сначала необходимо эту информацию извлечь из этого поля(ей) с помощью GTM, сохранить в переменной(ых), а затем с отправкой формы передать.
Селектор для моего поля e-mail: [placeholder="Ваш E-mail"]
CSS-селектор поля
Код для извлечения данных с jQuery и без:
Важно: для вашей формы эти конструкции будут другими. И на каждое поле формы она будет своя.
Извлечение информации из поля
На следующем шаге создайте переменную типа Собственный код JavaScript и вставьте туда следующий код:
где $('[placeholder="Ваш E-mail"]').val(); - ваша конструкция для поля.
Код для извлечения данных из поля формы
Такие переменные вы создаете для всех полей формы (если их несколько).
Специальный тег типа Пользовательское изображение
Для передачи информации по заявке нам необходимо создать тег типа Пользовательское изображение.
Тег "Пользовательское изображение"
Но перед тем, как мы добавил URL изображение, нам необходимо сделать кое-что еще.
Добавление кода в редактор скриптов
Перейдите в Google Таблицы по https://docs.google.com/ и создайте новую таблицу. Откройте меню Инструменты – Редактор скриптов.
Инструменты – Редактор скриптов
Добавьте этот код в редактор:
В переменную botId добавьте свой токен, который вы получили при создании бота. В переменную chatId вставьте chat id, который вы получили когда вставляли в браузер ссылку. Одинарные кавычки с двух сторон должны быть.
Код в редакторе скриптов
Важное в этом коде - это конструкция e.parameter.email, которая внутри функции doGet(e) .
Если у вас больше полей в форме, то вы добавляете через + еще параметры, которые надо передать в запросе. Например, e.parameter.phone (если есть в форме поле с телефоном), e.parameter.name (если есть поле с именем и т.д.).
После этого нажмите Опубликовать – Развернуть как веб-приложение.
Опубликовать - Развернуть как веб-приложение
В настройках укажите:
Deploy as web app (Развернуть как веб-приложение)
Вас попросят предоставить разрешение для доступа к данным Google. Поскольку приложение будет еще не проверено, то вы увидите предупреждение о небезопасности его использования. Игнорируйте его и просто перейдите на страницу проекта:
Перейти на страницу проекта
Далее разрешаете доступ к аккаунту Google. На заключительном шаге вы получите ссылку, которую нужно скопировать для тега Пользовательское изображение.
Скопируйте ссылку для Google Tag Manager
Вернитесь в диспетчер тегов Google и вставьте данную ссылку в поле URL изображения. В конце ссылки допишите параметры, которые нужно передать. Триггер – ваш для отправки формы.
Тег "Пользовательское изображение"
В моем примере – это только email = {{e-mail}}, где
Передача данных двух полей из формы
Сохраните изменения. Опубликуйте контейнер или проверьте корректность передачи данных с помощью режима предварительного просмотра.
Режим отладки GTM
Если вы все настроили верно, то после отправки тестовой заявки ее данные должны прийти в Telegram.
Заявки с сайта в Telegram
Вот и все. Мы с вами настроили Telegram-бота, который отправляет данные по заявкам только вам. В Telegram вместе с заявкой можно передавать не только сами поля, но еще и дополнительную информацию, включая город пользователя, источник, канал, Client ID, точную дату обращения и многое другое.
Заявка с дополнительными параметрами
Если у вас в команде несколько человек, и вы хотите, чтобы информация по лидам приходила всем в Telegram, то настройка чуть отличается, а именно:
Существует решение, которое позволяет обходиться без редактора скриптов в Google Таблицах. В этом случае вы пишите весь код в поле URL изображения тега. Выглядеть это может вот так (скриншот подписчика):
Код напрямую написан в теге типа Пользовательское изображение
Источник
Возможности диспетчера тегов 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 (с галочкой):
Главный бот BotFather
Нажмите на кнопку Start или введите /start:
Команда Start
Вы увидите список команд для создания бота или управлениями текущими (уже созданными):
Команды для бота
В списке есть команда /newbot. Данная функция позволяет создать нового бота. Вы можете прописать эту команду вручную в поле отправки сообщения или просто нажать на эту команду в списке:
Команда /newbot
Придумайте имя для бота и нажмите Enter (в моем примере - myfirstbot):
Название Telegram-бота
На следующем шаге выберете логин (username) для вашего бота. Он должен заканчиваться на bot. Например: TetrisBot или tetris_bot (в моем примере - moyLeadBot):
Логин (username) Telegram-бота
Если логин занят, вам придет уведомление: Sorry, this username is already taken. Please try something different. Вам нужно будет придумать другой username для своего бота
Username занят
Сохраните токен, который бот вам пришлет в ответном сообщении (в моем примере - 1373742947:AAEULIWMmPCEAqSoduIYlIj-PezQrIjDmmE) . Он понадобится вам в дальнейшем.
Токен
Затем следует активировать бота. Чтобы это сделать, вам нужно найти его в поиске Telegram и нажать на Start:
Активация Telegram-бота
Теперь необходимо получить chat id. Вставьте в браузер ссылку:
, где XXXXXXXXXXXXXXXXXX – ваш токен.
Результат в браузере должен быть примерно такой:
Получение chat id
Сохраните chat id (в моем примере - 1217901862). Он понадобится вам в дальнейшем. На этом настройка Telegram-бота завершена.
Настройка извлечения данных из полей формы в Google Tag Manager + специальный тег
В GTM настраивается:
- отслеживание отправки формы;
- отслеживание заполненных полей формы;
- специальный тег типа Пользовательское изображение.
В качестве примера я буду использовать свой сайт webinar.osipenkov.ru и форму с одним полем e-mail адреса для записи на вебинар.
Пример отслеживания формы с одним полем
Для моего примера и формы было достаточно стандартного триггера Отправка формы.
Триггер "Отправка формы"
Отслеживание заполненных полей формы
Для того, чтобы передавать значения полей в Telegram, сначала необходимо эту информацию извлечь из этого поля(ей) с помощью GTM, сохранить в переменной(ых), а затем с отправкой формы передать.
Селектор для моего поля e-mail: [placeholder="Ваш E-mail"]
CSS-селектор поля
Код для извлечения данных с jQuery и без:
| 1 2 3 4 | $('[placeholder="Ваш E-mail"]').val(); jQuery('[placeholder="Ваш E-mail"]').val(); document.querySelectorAll('[placeholder="Ваш E-mail"]')[0].value; document.querySelector('input[placeholder="Ваш E-mail"]').value; |
Важно: для вашей формы эти конструкции будут другими. И на каждое поле формы она будет своя.
Извлечение информации из поля
На следующем шаге создайте переменную типа Собственный код JavaScript и вставьте туда следующий код:
| 1 2 3 4 | function () { var email = $('[placeholder="Ваш E-mail"]').val(); return email; } |
где $('[placeholder="Ваш E-mail"]').val(); - ваша конструкция для поля.
Код для извлечения данных из поля формы
Такие переменные вы создаете для всех полей формы (если их несколько).
Специальный тег типа Пользовательское изображение
Для передачи информации по заявке нам необходимо создать тег типа Пользовательское изображение.
Тег "Пользовательское изображение"
Но перед тем, как мы добавил URL изображение, нам необходимо сделать кое-что еще.
Добавление кода в редактор скриптов
Перейдите в Google Таблицы по https://docs.google.com/ и создайте новую таблицу. Откройте меню Инструменты – Редактор скриптов.
Инструменты – Редактор скриптов
Добавьте этот код в редактор:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // токен бота var botId = '1269436630:AAHdNVZ1a0F6wb0Tz95pcIPsEtjDJqWbsUw' // chat Id var chatId = '1217901862' function doGet(e) { var response = 'Заявка с сайта' + '\n' + '----------------' + '\n' + '<b>E-mail: </b>' + e.parameter.email; UrlFetchApp.fetch('https://api.telegram.org/bot' + botId + '/sendMessage', { method: 'post', payload: { chat_id: chatId, parse_mode: 'HTML', text: response, }, }) } |
В переменную botId добавьте свой токен, который вы получили при создании бота. В переменную chatId вставьте chat id, который вы получили когда вставляли в браузер ссылку. Одинарные кавычки с двух сторон должны быть.
Код в редакторе скриптов
Важное в этом коде - это конструкция e.parameter.email, которая внутри функции doGet(e) .
Если у вас больше полей в форме, то вы добавляете через + еще параметры, которые надо передать в запросе. Например, e.parameter.phone (если есть в форме поле с телефоном), e.parameter.name (если есть поле с именем и т.д.).
После этого нажмите Опубликовать – Развернуть как веб-приложение.
Опубликовать - Развернуть как веб-приложение
В настройках укажите:
- Execute the app as: Запускать приложение от моего имени (Me)
- Who has access to the app: Доступ к приложению есть у всех, включая анонимных пользователей (Anyone, even anonymous)
Deploy as web app (Развернуть как веб-приложение)
Вас попросят предоставить разрешение для доступа к данным Google. Поскольку приложение будет еще не проверено, то вы увидите предупреждение о небезопасности его использования. Игнорируйте его и просто перейдите на страницу проекта:
Перейти на страницу проекта
Далее разрешаете доступ к аккаунту Google. На заключительном шаге вы получите ссылку, которую нужно скопировать для тега Пользовательское изображение.
Скопируйте ссылку для Google Tag Manager
Вернитесь в диспетчер тегов Google и вставьте данную ссылку в поле URL изображения. В конце ссылки допишите параметры, которые нужно передать. Триггер – ваш для отправки формы.
Тег "Пользовательское изображение"
В моем примере – это только email = {{e-mail}}, где
- email - это название параметра, которое должно быть таким же, как и в коде редактора скриптов (там e.parameter.email);
- {{e-mail}} – переменная типа Собственный код JavaScript, в которую вы извлекаете значение поля.
Передача данных двух полей из формы
Сохраните изменения. Опубликуйте контейнер или проверьте корректность передачи данных с помощью режима предварительного просмотра.
Режим отладки GTM
Если вы все настроили верно, то после отправки тестовой заявки ее данные должны прийти в Telegram.
Заявки с сайта в Telegram
Вот и все. Мы с вами настроили Telegram-бота, который отправляет данные по заявкам только вам. В Telegram вместе с заявкой можно передавать не только сами поля, но еще и дополнительную информацию, включая город пользователя, источник, канал, Client ID, точную дату обращения и многое другое.
Заявка с дополнительными параметрами
Если у вас в команде несколько человек, и вы хотите, чтобы информация по лидам приходила всем в Telegram, то настройка чуть отличается, а именно:
- после активации бота необходимо создать группу в Telegram;
- вы должны пригласить Telegram-бота в эту группу;
- напишите в группе какое-нибудь сообщение.
Существует решение, которое позволяет обходиться без редактора скриптов в Google Таблицах. В этом случае вы пишите весь код в поле URL изображения тега. Выглядеть это может вот так (скриншот подписчика):
Код напрямую написан в теге типа Пользовательское изображение
Источник
Последнее редактирование: