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

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

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

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

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

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

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

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

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

4. Введите Goal ID

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

5. Введите Measurement Token

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

6. Введите @username получателя сообщений

Укажите @username (Telegram ID) получателя сообщений от бота.

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

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

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 значит все настроено верно.