Зачем передавать Client ID Яндекс Метрики в WhatsApp
В Яндекс Метрике у каждого посетителя сайта есть свой уникальный номер — Client ID. Это как личный номер клиента. По нему Метрика понимает, что это один и тот же человек: он уже заходил на сайт, приходил по рекламе, что-то смотрел, оставлял заявки и так далее.
Если этот номер автоматически подставлять в сообщение, которое приходит менеджеру в WhatsApp, мы можем связать переписку в мессенджере с поведением человека на сайте. Тогда маркетолог видит не просто «есть заявка из WhatsApp», а понимает, с какой рекламы пришёл человек, какие страницы он смотрел и что подтолкнуло его написать.
То есть передача Client ID — это простой способ сделать аналитику более «умной» и ближе к сквозной: видеть путь клиента от рекламного объявления до переписки с менеджером, без сложных интеграций и дорогой разработки.
Что понадобится для реализации на Tilda
Если ваш сайт сделан на Tilda, чтобы настроить передачу Client ID в WhatsApp, нужны всего три вещи:
- Рабочий счётчик Яндекс Метрики, уже установленный на сайт.
- Номер WhatsApp в международном формате (например, 70000000000), на который будут приходить обращения.
- Нужен доступ к настройкам проекта на Tilda: задать кнопке HTML-класс (например, js-wa-link) и вставить готовый код в «Дополнительный HTML в HEAD». Ниже пример кода, который можно скопировать и изменить под свой сайт, элементы кода, которые надо заменить, отмечены как "ЗАМЕНИТЕ на свой".
<script>
document.addEventListener('DOMContentLoaded', function () {
// 1. ID счётчика Яндекс Метрики
const METRIKA_ID = 12345678; // <-- ЗАМЕНИТЕ на свой ID
// 2. Номер WhatsApp (только цифры, без +, пробелов и скобок)
const WA_PHONE = '70000000000'; // <-- ЗАМЕНИТЕ на свой номер
// 3. Текст сообщения, который увидит менеджер
const BASE_TEXT = 'Здравствуйте! Хочу оставить заявку с сайта example.ru';
function updateWhatsAppLinks(clientId) {
const fullText = BASE_TEXT + '\nClient ID: ' + (clientId || 'не получен');
const encodedText = encodeURIComponent(fullText);
const waUrl = 'https://wa.me/' + WA_PHONE + '?text=' + encodedText;
const buttons = document.querySelectorAll('.js-wa-link, .uc-js-wa-link');
buttons.forEach(function (btn) {
if (btn.tagName.toLowerCase() === 'a') {
btn.setAttribute('href', waUrl);
return;
}
const link = btn.querySelector('a');
if (link) {
link.setAttribute('href', waUrl);
}
});
}
function tryGetClientId(attemptsLeft) {
if (typeof ym === 'function') {
try {
ym(METRIKA_ID, 'getClientID', function (clientId) {
updateWhatsAppLinks(clientId);
});
return;
} catch (e) {}
}
if (attemptsLeft <= 0) {
updateWhatsAppLinks(null);
return;
}
setTimeout(function () {
tryGetClientId(attemptsLeft - 1);
}, 500);
}
tryGetClientId(20);
});
</script>В коде замените: METRIKA_ID — на ID счётчика Метрики, WA_PHONE — на свой номер WhatsApp, BASE_TEXT — на нужный текст сообщения. У кнопки в Tilda укажите HTML-класс js-wa-link и опубликуйте сайт.
Шаг 1. Проверяем подключение Яндекс Метрики на Tilda
Сначала нужно убедиться, что счётчик Яндекс Метрики действительно установлен на сайте. В Tilda это можно сделать через стандартный интерфейс аналитики.
Откройте настройки сайта в Tilda и перейдите в раздел аналитики. В поле для Яндекс Метрики должен быть указан ID вашего счётчика. Именно этот ID мы будем использовать в JavaScript коде для получения Client ID.
Дальше — необязательный, но полезный шаг: можно дополнительно проверить, что Яндекс Метрика на сайте работает и действительно выдаёт Client ID.
1. Откройте уже опубликованную страницу сайта в браузере.
2. Нажмите на клавиатуре клавишу F12 (или правой кнопкой мыши по странице → «Просмотреть код» / «Инструменты разработчика»).
3. В открывшемся окне найдите вкладку «Console» или «Консоль» и нажмите на неё.
4. В нижнюю строку консоли вставьте команду:
ym(ВАШ_ID_СЧЁТЧИКА, 'getClientID', function(id){console.log(id);});где вместо ВАШ_ID_СЧЁТЧИКА нужно подставить номер вашего счётчика из Яндекс Метрики (например, 12345678), и нажмите Enter.
Если Метрика подключена правильно, в консоли появится длинная строка из цифр и букв — это и есть Client ID. Значит, скрипт на странице тоже сможет получить этот идентификатор и подставить его в сообщение WhatsApp.
Шаг 2. Создаём кнопку WhatsApp на странице Tilda
Дальше создаём саму кнопку, по которой пользователь будет писать в WhatsApp. В Tilda это можно сделать стандартным блоком с кнопкой.
На Tilda это делается просто: добавьте блок с кнопкой на нужную страницу (например, «Написать в WhatsApp» или «Задать вопрос»). На этапе настройки можно временно поставить в ссылке символ «#» — это заглушка, настоящую ссылку позже подставит скрипт.
Дальше важно сделать одну техническую вещь — задать этой кнопке HTML-класс.
Что такое HTML-класс и зачем он нужен
HTML-класс — это техническое имя элемента на странице. Проще говоря, это ярлык, который мы вешаем на кнопку, чтобы код понял: работать нужно именно с ней.
В настройках кнопки на Tilda есть поле «HTML-класс». В него можно вписать любое понятное имя, например js-wa-link. Для посетителя сайта ничего не изменится: внешний вид кнопки останется прежним.
Зато скрипт по этому имени найдёт нужную кнопку и подставит в неё правильную ссылку на WhatsApp с готовым текстом сообщения и Client ID. Если HTML-класс указать не на самой кнопке, а на обёртке блока, это тоже допустимо — тогда скрипт сначала найдёт блок с этим классом, а внутри него уже кнопку.
Шаг 3. Настраиваем передачу Client ID в ссылку WhatsApp
На этом шаге мы просто используем готовый код, который приведён выше в разделе «Что понадобится для реализации на Tilda». Ничего писать с нуля не нужно.
Действия такие:
1. Скопируйте код из примера выше целиком.
2. В Tilda откройте «Настройки сайта» → блок «Дополнительный HTML в HEAD» и вставьте туда этот код.
3. Внутри кода замените три вещи под свой проект: METRIKA_ID — на ID счётчика Метрики, WA_PHONE — на ваш номер WhatsApp, BASE_TEXT — на текст сообщения, который должен подставляться автоматически.
После этого код сам сделает всё остальное: дождётся загрузки Яндекс Метрики, получит Client ID, соберёт ссылку на WhatsApp с готовым текстом и подставит эту ссылку в кнопку с HTML-классом js-wa-link.
Логика работы скрипта простая. После загрузки DOM он начинает регулярно проверять, появилась ли глобальная функция для работы со счётчиком. Дело в том, что код Метрики в Tilda часто инициализируется с небольшой задержкой, поэтому сразу после загрузки страницы функция ещё не доступна.
Как работает этот код на практике.
Сначала он ждёт, пока на странице загрузится Яндекс Метрика. Когда Метрика готова, код запрашивает у неё Client ID — уникальный номер посетителя сайта. Затем на основе номера телефона и текста сообщения он собирает ссылку для WhatsApp в формате https://wa.me/НОМЕР?text=ТЕКСТ_СООБЩЕНИЯ, в конец текста добавляется Client ID.
После этого скрипт находит на странице кнопку с HTML-классом js-wa-link (или uc-js-wa-link, который Tilda может добавить автоматически) и подменяет у неё ссылку на эту WhatsApp-ссылку. В результате, когда пользователь нажимает на кнопку, у него открывается WhatsApp с уже готовым текстом сообщения, внутри которого есть Client ID.
Шаг 4. Проверяем работу решения
Самый простой способ проверки — повести себя как обычный клиент.
1. Откройте сайт в режиме инкогнито (например, в отдельном окне браузера).
2. Найдите на странице кнопку, по которой должен открываться WhatsApp (ту, которой вы задали HTML-класс js-wa-link).
3. Нажмите на эту кнопку.
4. Если всё настроено правильно, у вас откроется WhatsApp или WhatsApp Web с уже заполненным текстом сообщения. В этом тексте должна быть фраза, которую вы указали в переменной BASE_TEXT, и строка вида Client ID: ....
Если WhatsApp не открывается или текст не подставился, проверьте ещё раз три вещи: правильно ли указан ID счётчика Метрики (METRIKA_ID), номер телефона WhatsApp (WA_PHONE) и HTML-класс кнопки (js-wa-link), а затем заново опубликуйте сайт.
Если Client ID по каким-то причинам не удалось получить, скрипт подставит текст без идентификатора. Это защитный механизм на случай, если счётчик не загрузился или заблокирован браузером пользователя. В нормальной ситуации, когда Метрика отрабатывает корректно, Client ID будет добавлен в сообщение.
Типичные ошибки и как их избежать
На практике чаще всего возникают несколько типичных ошибок, из-за которых решение не работает или работает частично.
Первая ошибка — неверный HTML класс. Если класс задать не на том элементе или опечататься в имени, скрипт просто не найдёт кнопку и не сможет подставить ссылку. Поэтому важно проверить итоговый HTML в инструментах разработчика и убедиться, что класс действительно присутствует на нужном элементе.
Вторая ошибка — отсутствие опубликованных изменений. В Tilda редактирование и публикация разделены, поэтому после внесения кода и настройки кнопки обязательно нужно заново опубликовать страницу. Иначе на боевом домене останется старая версия без скрипта.
Третья ошибка — неправильный формат номера телефона. Если в номер добавить плюс, пробелы или другие символы, ссылка WhatsApp может не открыться или работать некорректно. Безопасный вариант — только цифры в международном формате.
Четвёртая ошибка — проблемы с загрузкой Яндекс Метрики. Если пользователь использует блокировщик рекламы или отключил аналитические скрипты в браузере, метод getClientID может быть недоступен. В этом случае текст сообщения будет отправлен без идентификатора, и это нормальное поведение.
Как использовать Client ID в аналитике и бизнесе
Передача Client ID в сообщение WhatsApp решает важную задачу связки каналов. Менеджер видит текст обращения и идентификатор пользователя, а маркетолог может найти этого пользователя в отчётах Яндекс Метрики и увидеть всю цепочку его действий на сайте.
Дальше можно пойти ещё дальше и построить полноценную сквозную аналитику. Например, при создании карточки лида в CRM добавлять поле с Client ID и под этим же идентификатором анализировать источники и кампании в Метрике. Так можно считать не только заявки с сайта, но и реальные обращения в мессенджерах, привязанные к конкретной рекламе.
Особенно полезно такое решение для проектов, где значительная часть коммуникации с клиентами переехала в мессенджеры. Автосервисы, ремонт, строительство, сложные B2B услуги — в этих нишах пользователь часто предпочитает дописать в WhatsApp, а не заполнять форму. Передача Client ID помогает не потерять такие обращения с точки зрения аналитики.
Выводы и как мы можем помочь
Передача Client ID Яндекс Метрики в WhatsApp на сайте Tilda не требует сложной разработки. Достаточно настроить счётчик, добавить HTML класс к кнопке и подключить небольшой JavaScript код. В результате каждое сообщение, которое приходит менеджеру, можно связать с конкретным пользователем в аналитике.
Если вам нужно не просто внедрить этот скрипт, а выстроить полноценную систему сквозной аналитики и работать с окупаемостью рекламы, команда агентства «Лидоед» может помочь с настройкой Яндекс Директа, Яндекс Метрики и аналитики под ваши задачи. Подробности о наших услугах по ведению контекстной рекламы вы можете посмотреть на странице ведения контекстной рекламы.