ГНУСНЫЙ
МАРКЕТИНГ

Как передавать Яндекс ClientID в заявку на Тильде

Материал: Гнусный Маркетинг · Опубликован

На Тильде можно передавать ClientID сразу вместе с заявкой, отдельным полем ymclientid. Один раз добавили скрипт — дальше идентификатор приезжает рядом с именем и телефоном. Его можно сохранять в таблице или CRM, а потом использовать для передачи оплат и качественных обращений в Метрику.

Если вы руками передаёте офлайн-конверсии через гугл-таблицы или эксельку, искать ClientID в Метрике по каждой заявке — удовольствие сомнительное. Особенно когда заявок больше трёх, а заниматься хочется рекламой.

Уведомление TildaForms в Telegram: поле ymclientid с идентификатором посетителя выделено красной рамкой
Вот так это выглядит в заявке. Нужная строка выделена красным.

Что за ClientID и зачем он нужен

ClientID — идентификатор посетителя, который выдаёт Яндекс.Метрика. По нему можно связать заявку с посещением сайта, а позже передать результат: например, что человек оплатил заказ. Имя «Александр» для такой связки подходит сильно хуже.

Это не номер счётчика, не номер заявки и не yclid из рекламной ссылки. На другом устройстве или в другом браузере у того же человека может быть другой ClientID. После очистки cookies он тоже может измениться.

И важное: сохранить ClientID в заявке — ещё не значит передать офлайн-конверсию. Скрипт ниже собирает идентификатор. Отправку статуса сделки или оплаты в Метрику настраиваем отдельно.

Что сделать в Тильде

  1. Проверьте, что на сайте уже подключена Яндекс.Метрика. Узнайте номер нужного счётчика.
  2. Скопируйте код ниже. В строке var COUNTER_ID = 12345678; замените 12345678 на свой номер. Это пример, оставлять его не надо.
  3. Откройте поле для кода: «Настройки сайта → Ещё → HTML-код для вставки внутрь head» и вставьте скрипт целиком, вместе с тегами <script>.
  4. Сохраните настройки и опубликуйте все страницы, на которых нужны заявки с ClientID.

Если код нужен только на одной странице, используйте «Настройки страницы → Вставка кода → HTML-код для вставки внутрь head». Другой вариант — блок T123 «HTML-код». Выберите одно место установки.

Через GTM или другой тег-менеджер тоже можно: нужен тег с пользовательским HTML на нужных страницах. Для первой настройки проще вставить прямо в Тильду — меньше мест, в которых можно забыть что-нибудь опубликовать.

Код для передачи ClientID в заявку

Скрипт получает идентификатор через актуальный API Метрики, добавляет скрытое поле в формы Тильды и заполняет формы, которые появились позже, в том числе в Zero Block и попапах. jQuery ему не нужен. Это свой код для обычных форм Тильды в текущем документе; сторонние виджеты и формы внутри iframe требуют отдельной настройки.

HTML + JavaScript
<script>
(function () {
  'use strict';
  var COUNTER_ID = 12345678; // Замените на номер своего счётчика
  var FIELD_NAME = 'ymclientid';
  var FORM_SELECTOR = 'form.t-form, .t396 form';
  var clientId = '';
  var attempts = 0;
  var requested = false;
  var timer = null;

  function fillForms() {
    if (!clientId) return;
    document.querySelectorAll(FORM_SELECTOR).forEach(function (form) {
      var fields = form.querySelectorAll('input[name="' + FIELD_NAME + '"]');
      if (!fields.length) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = FIELD_NAME;
        form.appendChild(input);
        fields = [input];
      }
      fields.forEach(function (field) {
        if (field.value !== clientId) field.value = clientId;
        field.defaultValue = clientId;
      });
    });
  }

  function getClientId() {
    timer = null;
    if (clientId || requested) return;
    if (typeof window.ym === 'function') {
      requested = true;
      window.ym(COUNTER_ID, 'getClientID', function (id) {
        if (typeof id !== 'string' || !id) return;
        clientId = id;
        fillForms();
      });
    } else if (++attempts < 120) {
      timer = window.setTimeout(getClientId, 500);
    }
  }

  function resume() {
    if (!clientId && !requested && timer === null) {
      attempts = 0;
      getClientId();
    }
  }

  function init() {
    var guard = '__gmClientId_' + COUNTER_ID;
    if (window[guard]) return;
    window[guard] = true;
    new MutationObserver(function (mutations) {
      if (mutations.some(function (m) { return m.addedNodes.length; })) {
        fillForms();
        resume();
      }
    }).observe(document.body, { childList: true, subtree: true });
    document.addEventListener('submit', fillForms, true);
    document.addEventListener('focusin', resume, true);
    document.addEventListener('pointerdown', resume, true);
    document.addEventListener('visibilitychange', function () {
      if (!document.hidden) resume();
    });
    document.addEventListener('reset', function () {
      window.setTimeout(fillForms, 0);
    }, true);
    getClientId();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init, { once: true });
  } else {
    init();
  }
})();
</script>

Вручную создавать поле в каждой форме не нужно. Если скрытое поле ymclientid уже есть, скрипт заполнит его. Имя поля оставьте таким же, а старый скрипт для этой задачи удалите, чтобы два решения не работали одновременно.

Как проверить, что всё приехало

  1. Откройте опубликованный сайт. В редакторе и предпросмотре Тильды проверять бесполезно.
  2. Если аналитика запускается после согласия на cookies, дайте согласие. Дождитесь загрузки Метрики и отправьте тестовую заявку.
  3. Откройте заявку в Тильде и в подключённом приёмнике: почте, Telegram, таблице или CRM. Найдите поле ymclientid с непустым значением.
  4. Проверьте остальные формы: внизу страницы, во всплывающем окне, в Zero Block. Одной удачной заявки недостаточно, если на сайте пять разных форм.

Для точной сверки вызовите в консоли браузера ym(ВАШ_НОМЕР_СЧЁТЧИКА, 'getClientID', console.log), подставив номер цифрами. Значение должно совпасть с полем в заявке из этого же браузера.

В Тильде поле есть, а в CRM нет? Проверьте сопоставление полей в интеграции. CRM может требовать отдельное пользовательское поле и явную настройку передачи. Название ymclientid само по себе не настраивает все сервисы мира.

Почему ClientID может не прийти

Чаще всего ошиблись номером счётчика, забыли опубликовать страницу или Метрика не загрузилась: блокировщик, сетевой сбой, ожидание согласия на аналитику. Скрипт ждёт появления функции ym примерно минуту. Затем прекращает постоянный опрос, но возобновляет попытку при взаимодействии со страницей, возвращении во вкладку или добавлении элементов. Это пригодится, если согласие на аналитику дали сильно позже загрузки сайта.

Если функция уже есть, запрос ждёт ответа Метрики. Но при отправке формы раньше получения ClientID идентификатора в этой заявке не будет. Скрипт не задерживает отправку формы ради аналитики. Отсутствующий идентификатор лучше потерянной заявки.

Не дайте эксельке испортить идентификатор

Храните ClientID как текст. В Excel точность чисел ограничена 15 значащими цифрами. У длинного идентификатора последние цифры могут превратиться в нули. На вид всё красиво, только посетитель уже другой.

До вставки или импорта задайте столбцу текстовый формат. В Google Таблицах тоже используйте обычный текст. Если Excel уже изменил цифры, переключение формата обратно их не восстановит — заберите исходные значения из заявок заново.

При подготовке CSV для Метрики поле из заявки нужно перенести в колонку ClientID. Для загрузки понадобятся также идентификатор цели в Target и время конверсии в DateTime в формате Unix timestamp. Произвольная таблица с телефоном и ClientID ещё не готовый файл офлайн-конверсий.

Пользуйтесь. А за другими способами меньше ковыряться руками и больше заниматься рекламой заходите в «Гнусный Маркетинг». Там ещё больше годноты.