Инструкция по настройке Telegram-бота

Что нужно сделать чтобы вы получили:

1. Уникальную ссылку на бота, для размещения на вашем сайте.
2. Сообщение от посетителя вашего сайта перешедшего по уникальной ссылке на бота.
3. Событие в Яндекс Метрике о начале разговора.

1. Запустите бота

В Telegram аккаунте, в котором планируете получать сообщения от посетителей вашего сайта, найдите бота в поиске: @chattrek_bot и запустите.

2.Введите адрес сайта

Укажите url сайта, с которого хотите отслеживать переходы и начало разговора в Telegram.

3.Введите ID счётчика Яндекс Метрики

Укажите номер счетчика Яндекс Метрики, который установлен на указанном вами сайте из п.2.

4. Введите Goal ID

Укажите идентификатор созданной вами цели в Яндекс Метрике с типом условия JavaScript-событие:

5. Введите Measurement Token

Яндекс Метрика-Настройки-Счетчик-Дополнительные настройки-Безопасность и использование данных-Measurement Protocol:

6. Введите Telegram ID получателей сообщений

Укажите Telegram ID получателей сообщений от бота (максимум 3-х).

Тот кому бот передаст сообщение от посетителя вашего сайта.

Важно! Если Telegram ID получателя сообщений отличается от того на котором вы настраиваете бота, то этот получатель должен один раз запустить бота, чтобы смог получать сообщения.

7. Получение уникальной ссылки и инструкции по ее установке

Бот выдает вам уникальную ссылку и инструкцию для ее установке на сайте:

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

В полученый от бота код:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    try {
      ym(ВАШ_НОМЕР_СЧЁТЧИКА, 'getClientID', function(clientID) {
        updateTelegramLinks(clientID);
      });
    } catch (e) {
      console.error('Ошибка получения ClientID:', e);
      updateTelegramLinks(null);
    }

    function updateTelegramLinks(clientID) {
      var links = document.querySelectorAll('a[href*="t.me/chattrek_bot"]');
      links.forEach(function(link) {
        var baseHref = 'ВАША ССЫЛКА ОТ БОТА';
        if (clientID) {
          link.href = baseHref + clientID;
        } else {
          link.href = baseHref;
        }
      });
    }
  });
</script>

вы вносите свои данные: Номер счетчика Яндекс Метрики, и вашу уникальную ссылку на чат бота.

В итоге получится такой код:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    try {
      ym(100713153, 'getClientID', function(clientID) {
        updateTelegramLinks(clientID);
      });
    } catch (e) {
      console.error('Ошибка получения ClientID:', e);
      updateTelegramLinks(null);
    }

    function updateTelegramLinks(clientID) {
      var links = document.querySelectorAll('a[href*="t.me/chattrek_bot"]');
      links.forEach(function(link) {
        var baseHref = 'https://t.me/chattrek_bot?start=PjWR_';
        if (clientID) {
          link.href = baseHref + clientID;
        } else {
          link.href = baseHref;
        }
      });
    }
  });
</script>

Этот код нужно установить перед тегом </head> на вашем сайте, после кода Яндекс Метрики!

Данный код подменяет ссылку на чат бота: t.me/chattrek_bot, размещенную на вашем сайте, вашей уникальной ссылкой на чат бота и добавляет к ней Client ID посетителя Яндекс Метрики.

Далее как я указал выше, разместите обычную ссылку на бота: t.me/chattrek_bot в любом месте вашего сайта.

Как проверить что все настроено верно?

Если навести мышку на ссылку (кнопку) на сайте, то в нижней строке браузера отобразится полная ссылка с ClientID Яндекс Метрики в конце:

Если вы увидели ссылку с ClientID значит все настроено верно.