Интеграция форм Tilda и amoCRM с передачей скрытых полей Client ID
Это руководство посвящено настройке интеграции amoCRM с формами Tilda, в которых дополнительно передаются скрытые поля со значениями уникальных идентификаторов пользователей (Client ID) Яндекс Метрики и Google Analytics 4.
Начало
Сам по себе гайд и представленные в нем решения уже хорошо известны многим специалистам. Тем не менее, моя цель - обновить эти подходы и показать максимально простой способ настройки подобной интеграции для последующего внедрения сквозной аналитики в проект. При этом я добавлю важные нюансы и поделюсь тонкостями и подводными камнями процесса. Без этого шага (а он один из ключевых!) реализовать такую систему не получится.
Итак, я не буду подробно останавливаться на теории о том, что такое уникальный идентификатор пользователя (Client ID) в системах аналитики, зачем он нужен в Яндекс Метрике и Google Analytics 4, и как именно с его помощью счетчики различают посетителей сайта. В моем блоге уже опубликовано множество материалов, где эта тема подробно разобрана. Например:
- Симо Ахава: "Мы входим в эру, в которой существуют две модели аналитики"
- Cookie файлы в Google Analytics
- ClientID в Яндекс Метрике
- Самый простой способ передачи Client ID в Google Analytics
- Передача Client ID через Google Tag Manager (+видео)
- Client ID в Google Analytics 4
- 1 Client ID - 2 разных профиля посетителя в Яндекс.Метрике. Как?
- Почему дата первого визита не равна метке ClientID в Яндекс Метрике?
Я также не буду подробно описывать процесс регистрации и настройки сайта на Tilda, создание страниц и добавление формы. Аналогично и про CRM-систему - предполагается, что все базовые настройки в amoCRM вы уже выполнили до того, как приступили к этому руководству. Останется только немного доработать детали.
Читать еще:
- Интеграция с CRM и настройка передачи полей форм сайта в amoCRM
- Настройка сквозной аналитики в Яндекс Метрике для WooCommerce и amoCRM
Наша основная задача - это передать Client ID обеих систем (Яндекс Метрика и Google Analytics 4) при отправке формы с сайта Tilda в карточку пользователя в amoCRM:
Чтобы мы впоследствии смогли использовать значения из этих полей для настройки сквозной аналитики и отправки офлайн-конверсий, если такие имеются.
Примечание: в этом руководстве я подробно разбираю реальный пример отправки офлайн-конверсий при изменении статусов сделок из amoCRM в Google Analytics 4, чтобы иметь возможность анализировать отчеты по привлечению лидов.
Давайте приступим к практическим настройкам. Основные шаги выполнения:
- выполнить интеграцию Tilda с amoCRM;
- передать значения Client ID Яндекс Метрики и Google Analytics 4 в отдельные поля карточек CRM-системы (лиды/сделки).
Настройка интеграции Tilda с amoCRM
Интеграция начинается с настройки форм на сайте, созданных в Tilda. Эти формы автоматически передают данные в amoCRM, где информация обрабатывается и сохраняется. Благодаря этому можно отслеживать все заявки и обращения, а также эффективно управлять процессом продаж.
На Тильде есть два вида форм:
- обычные;
- формы в зеро-блоке - пользовательские, создаваемые с нуля интерактивные элементы (кнопки, поля ввода, чекбоксы), которые рисуются внутри редактора Zero Block в Tilda с помощью стандартных фигур и текста, а затем привязываются к функционалу форм или всплывающих окон (поп-апов) с помощью специальных ссылок и настроек
Обычные формы находятся в HTML-страницы, а формы Зеро - создаются через JS. Поэтому поля добавляемые в обычные формы можно просто добавить, а добавляемые в Зеро необходимо вешать на событие render.
После добавления форм на сайт вам необходимо настроить интеграцию этих самых форм Tilda с amoCRM. Для этого войдите в свой аккаунт amoCRM. Перейдите в Тильду и выберите нужный сайт, в котором планируется размещение формы. Зайдите в Настройки сайта - Формы:
Выберите пункт AmoCRM:
Нажмите на кнопку Подключить AmoCRM:
Предоставьте доступ к приложению Tilda Publishing: выберите аккаунт amoCRM и нажмите на кнопку Разрешить:
Приемщик добавлен. Осталось выбрать этап воронки, ответственного за заявку, указать тему заявки, которая будет показываться в amoCRM и название приемщика внутри Тильды.
Дополнительно можно настроить передачу системных полей form_id (идентификатор формы), form_name и referrer в CRM-систему.
- form_name - название формы, которое помогает понять, с какой именно формы на сайте была отправлена заявка (тип точки входа);
- form_id - уникальный идентификатор конкретной формы, по которому можно однозначно различать формы даже при одинаковых названиях;
- referrer - адрес страницы, откуда отправлена форма.
Дополнительно можно настроить отправку заявок, используя Метод добавления сделок с поиском дублей. Это функция amoCRM, которая совершает поиск дублей заявок, поступающих из подключенных источников. Опция Посылать Cookies позволяет передавать в карточку CRM данные о файлах cookie пользователя, включая уникальные идентификаторы пользователей Яндекс Метрики и Google Analytics 4.
Вот как это выглядит в CRM после ее активации и отправки формы:
По умолчанию Tilda не умеет заполнять Client ID в отдельные поля, как это требуется для дальнейшей интеграции и сквозной аналитики. Данные по файлам cookie _ym_uid (Яндекс Метрики) и _ga (Google Analytics 4) передаются только в поле COOKIES общим списком. И извлекать из него нужные значения достаточно сложно. А нам нужно, чтобы Client ID этих двух систем были в отдельных полях CRM.
В связи с этим приходится вручную добавлять скрытые поля в формы Tilda через код, чтобы _ym_uid и _ga попадали в CRM раздельно. Этим мы и будем заниматься дальше.
Чтобы изменить настройки интеграции Tilda - AmoCRM, перейдите в Настройки сайта - Формы - Подключенные сервисы и нажмите на кнопку Настройки напротив необходимого приемщика AmoCRM.
Примечание: вы можете создать несколько приемщиков amoCRM для того, чтобы назначить разным формам разные воронки и ответственных. Для этого нужно сначала создать приемщик, а потом поменять эти значения на странице настроек приемщика данных (кнопка Настройки напротив сервиса).
Связь приемщика данных с формой Tilda
Следующим шагом нужно связать приемщик данных (amoCRM) с самой формой. Для этого откройте страницу, на которой размещен блок с нужной формой. Нажмите на кнопку Контент этого блока:
Отметьте галочкой сервис приема данных (в нашем примере - amoCRM) и опубликуйте страницу:
После отправки формы на опубликованной странице подождите 5–10 минут, затем перейдите в amoCRM в раздел Сделки. Если все настроено верно, в выбранной вами колонке при настройке интеграции появится сделка:
Нажмите на ее название, и вы попадете внутрь карточки. В ней можно увидеть:
- когда добавлена сделка;
- контакт;
- системные поля (если были настроены);
- cookies;
- другие поля, которые были отправлены через форму (например, TEXTAREA).
На этом настройка стандартной интеграции Tilda и amoCRM завершена. Однако теперь нам предстоит дополнительная доработка функционала.
Передача Client ID в отдельные поля amoCRM
Как вы уже убедились сами, данные по Client ID для Яндекс Метрики и Google Analytics 4 передаются только при включенной опции Посылать Cookies и только общим списком, в одном поле:
Нам такой формат не подходит, потому что значение каждого идентификатора должно быть в отдельном поле. Как в этом примере:
Примечание: при стандартной настройке Tilda - amoCRM идентификатор Яндекс Метрики передается отдельным полем _ym_uid, как и utm_метки. Оно доступно на вкладке Статистика.
Как это сделать? Чтобы Client ID передавался в отдельное поле лида или сделки CRM, а не в общее поле Cookies, надо добавить в каждую форму обратной связи скрытое поле для каждого идентификатора (свое скрытое поле для Яндекс Метрики и свое скрытое поле для Google Analytics 4).
Для этого откройте страницу, на которой размещен блок с нужной формой. Нажмите на кнопку Контент этого блока:
Перейдите в раздел Поля для ввода и нажмите Добавить поле для ввода:
Выберите тип - Скрытое поле:
В поле Имя переменной укажите ymclientid, а поле Значение оставьте пустым:
Если в своей работе вы используете только счетчик Яндекс Метрики, то добавьте только одно скрытое поле. Если вы хотите передавать еще и значение Client ID для Google Analytics 4 (извлекая из файла cookie _ga), тогда добавьте еще одно скрытое поле, только теперь в поле Имя переменной укажите gaclientid, а поле Значение так же оставьте пустым:
В результате при использовании двух счетчиков аналитики (ЯМ и GA4) у вас будет два скрытых поля. Если используете только Яндекс Метрику - одно:
Сохраните изменения. Для форм Zero block вы делаете все точно так же: выделяете форму, открываете поля ввода и добавляете туда 1 или 2 скрытых поля, в зависимости от задач, со именами переменных ymclientid и gaclientid соответственно:
Сохраните изменения для формы Zero block.
Добавление скрытых полей нужно выполнить для каждой формы на вашем сайте. Если разных форм 1, 2, 3, 4, 5...10 штук, тогда скрытые поля вы добавляете во все. Не забудьте и про корзину, а также открытые формы и pop-up блоки с формой. Скрытые поля нужно добавить в формы всех типов.
Код для скрытого поля Яндекс Метрики
Теперь нам необходимо добавить дополнительный код, который бы извлекал значение из файла cookie _ym_uid для Яндекс Метрики и передавал бы его в amoCRM со всеми данными отправленной формы.
Для этого в Tilda перейдите в Настройки сайта - Ещё:
Найдите раздел HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD. Нажмите на кнопку Редактировать код:
В открывшемся окне вставьте нижеприведенный код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<script> $(document).ready(function() { let clientYandexId = null; let counterId = null; // Определение ID счетчика function findMetrikaCounterId() { // Способ 1: Ищем в коде ym(XXXXXX) let scripts = document.scripts; for (let i = 0; i < scripts.length; i++) { let scriptContent = scripts[i].textContent || ''; let match = scriptContent.match(/ym\((\d+),\s*'init'/); if (match) { return parseInt(match[1]); } } // Способ 2: Ищем готовые объекты yaCounterXXXXXX for (let key in window) { if (key.match(/^yaCounter\d+$/)) { return parseInt(key.replace('yaCounter', '')); } } return null; } // Функция получения Client ID function getYandexClientId() { // Пытаемся найти counterId каждый раз if (!counterId) { counterId = findMetrikaCounterId(); console.log('ID счетчика Яндекс Метрики:', counterId); } if (typeof window.ym !== 'undefined' && counterId) { try { window.ym(counterId, 'getClientID', function(id) { clientYandexId = id; console.log('✅ Client ID для Метрики получен:', id); addClientIdToForms(); }); return true; } catch(e) { console.log('Ошибка получения Client ID'); } } return false; } function addClientIdToForms() { if (clientYandexId) { $('form').each(function() { let $field = $(this).find('input[name="ymclientid"]'); if ($field.length === 0) { $(this).append('<input type="hidden" name="ymclientid" value="' + clientYandexId + '">'); } else { $field.val(clientYandexId); } }); console.log('✅ Поле для _ym_uid обновлено:', $('input[name="ymclientid"]').length); } } $('.t396').on('render', '.t396__elem', function() { if (clientYandexId) { let $form = $(this).find('form'); if ($form.length && $form.find('input[name="ymclientid"]').length === 0) { $form.append('<input type="hidden" name="ymclientid" value="' + clientYandexId + '">'); } } }); // Ищем counterId + Client ID каждые 200мс let attempts = 0; let checkInterval = setInterval(function() { attempts++; if (getYandexClientId() || attempts >= 50) { clearInterval(checkInterval); } }, 200); }); </script> |
В Tilda это будет выглядеть так:
Для корректной работы кода подключите jQuery (Настройки сайта - Ещё).
Нажмите кнопку Сохранить. Не забудьте переопубликовать все страницы после сохранения, чтобы изменения применились.
Примечание: за основу был взят код с сайта tildatricks.com и доработан под новый счетчик Яндекс Метрики.
Если кратко, то этот код:
- ищет ID счетчика Яндекс Метрики на странице (ищет вызовы ym(XXXXXX, 'init') в скриптах, либо ищет объекты вида yaCounterXXXXXX в window);
- пытается получить Client ID (уникальный идентификатор посетителя) через метод ym(counterId, 'getClientID', callback);
- после получения Client ID автоматически добавляет его во все формы на странице (как скрытое поле <input type="hidden" name="ymclientid">);
- обрабатывает динамически появляющиеся формы (Tilda блоки t396 - нулевой блок) - если появляется новая форма, в нее также добавляется скрытое поле с Client ID;
- периодически (раз в 200 мс, максимум 50 раз) пытается получить Client ID, пока он не станет доступен;
- логирует процесс (какой ID найден, получен ли Client ID, сколько форм обновлено).
Таким образом, код автоматически определяет идентификатор счетчика Яндекс Метрики, получает Client ID и подставляет его в формы (в том числе динамические) для передачи в заявки amoCRM.
Код для скрытого поля Google Analytics 4
Если вы на своем сайте используете код Google Analytics 4, тогда выполните все вышеприведенные настройки еще раз:
- перейдите в Настройки сайта - Ещё;
- найдите раздел HTML-код для вставки внутрь head и нажмите Редактировать код;
В открывшемся окне сразу же под кодом для Яндекс Метрики вставьте еще один код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<script> $(document).ready(function() { let clientGoogleId = null; // Извлечение GA4 Client ID из cookie _ga function getGoogleClientId() { function getCookie(name) { let matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : null; } let gaCookie = getCookie('_ga'); if (gaCookie) { // Формат: GA1.2.1234567890.1234567890 → берем 3-ю и 4-ю части let parts = gaCookie.split('.'); if (parts.length >= 4) { clientGoogleId = parts[2] + '.' + parts[3]; console.log('✅ Client ID для Google Analytics 4:', clientGoogleId); return true; } } return false; } // Добавление/обновление поля во всех формах function addClientIdToForms() { if (clientGoogleId) { $('form').each(function() { let $field = $(this).find('input[name="gaclientid"]'); if ($field.length === 0) { $(this).append('<input type="hidden" name="gaclientid" value="' + clientGoogleId + '">'); } else { $field.val(clientGoogleId); } }); console.log('✅ Поле для _ga обновлено:', $('input[name="gaclientid"]').length); } } // Zero Block Tilda $('.t396').on('render', '.t396__elem', function() { if (clientGoogleId) { let $form = $(this).find('form'); if ($form.length && $form.find('input[name="gaclientid"]').length === 0) { $form.append('<input type="hidden" name="gaclientid" value="' + clientGoogleId + '">'); } } }); // Проверяем cookie каждые 200мс let attempts = 0; let checkInterval = setInterval(function() { attempts++; if (getGoogleClientId() || attempts >= 50) { if (clientGoogleId) addClientIdToForms(); clearInterval(checkInterval); } }, 200); }); </script> |
В Tilda это будет выглядеть так:
Нажмите кнопку Сохранить. Не забудьте переопубликовать все страницы после сохранения, чтобы изменения применились.
Примечание: за основу был взят код с сайта tildatricks.com и доработан под новый счетчик Яндекс Метрики.
Этот код выполняет схожие операции, что и предыдущий, а именно:
- ищет Client ID Google Analytics 4 в файле cookie _ga;
- разбирает cookie формата GA1.2.XXXX.YYYY и берет части XXXX.YYYY как GA4 Client ID;
- сохраняет найденный Client ID в переменную clientGoogleId;
- автоматически добавляет скрытое поле <input type="hidden" name="gaclientid" value="..."> во все формы на странице;
- обновляет формы, которые появляются динамически в Zero-block (Tilda блоки t396 - нулевой блок);
- пытается считать cookie каждые 200 мс (до 50 попыток), пока не получит Client ID, затем подставляет его в формы.
То есть, код получает GA4 Client ID из cookie и вставляет его во все формы, чтобы передавать этот идентификатор вместе с заявками в amoCRM.
Проверка настройки
Теперь мы должны проверить наши настройки. Для этого перейдите на страницу с формой. Перед ее отправкой откройте консоль разработчика и перейдите на вкладку Console:
При успешной работе скриптов в консоли должны появиться эти сообщения (в порядке выполнения):
- ID счетчика Яндекс Метрики - должен отображаться ваш идентификатор;
- ✅ Client ID для Метрики получен: 1750686401735347939 (будет доступен ваш Client ID Яндекс Метрики);
- ✅ Поле для _ym_uid обновлено: 1 (скрытое поле заполнено значением Client ID);
- ✅ Client ID для Google Analytics 4: 1063875830.1754651438 (будет доступен ваш Client ID Google Analytics 4);
- ✅ Поле для _ga обновлено: 1 (скрытое поле заполнено значением Client ID).
Вы также можете перейти на вкладку Elements и проинспектировать поля самой формы. Поскольку мы создали скрытые поля с помощью <input type="hidden">, они будут видны в HTML-структуре и DOM-дереве, хотя пользователю они отображаются не будут.
Таким образом, в атрибуте value скрытых полей <input type="hidden"> отображаются и хранятся значения (Client ID Метрики/GA4), которые передаются в CRM при отправке формы.
После этого вы можете заполнить форму и отправить тестовую заявку. В результате в amoCRM будет создана, а внутри нее появятся два новых поля YMCLIENTID и GACLIENTID с извлеченными значениями Client ID из файлов cookie _ym_uid (для Яндекс Метрики) и _ga (для Google Analytics 4):
Как видите, извлеченные значения Client ID в отдельных полях Яндекс Метрики и Google Analytics 4 совпадают с тем, что Tilda автоматически передает в поле COOKIES после настройки интеграции. И наши значения более корректные, поскольку в дальнейшем для отправки, например, офлайн-конверсий в GA4 нам будет необходим уникальный идентификатор пользователя, но не в формате GA.1.1... с префиксом, а как раз тот, который был передан в отдельное поле.
Если вы желаете переименовать поля YMCLIENTID и GACLIENTID на какие-то свои значения, то сделайте это с помощью раздела Настроить:
Выйдя из режима редактирования, названия полей будут изменены:
Передача Client ID в пользовательское поле CRM
Перед выполнением всех шагов обязательно обновите интеграцию Tilda - amoCRM.
Предположим, в amoCRM вы создали отдельное поле для уникального идентификатора Яндекс Метрики еще до этапа настройки. И вы хотите, чтобы именно в это поле подставлялось значение из _ym_uid после отправки заявки с Tilda:
В таком случае, чтобы передать Client ID в это конкретное поле сделки, в JS-коде Tilda следует задавать его идентификатор (id). Для этого нажмите один раз левой кнопкой мыши на нужное поле. Вы должны увидеть такое окно редактирования:
Вас интересует идентификатор этого поля. Скопируйте его из ID и вернитесь в настройки формы Tilda.
Откройте страницу, на которой размещен блок с нужной формой. Нажмите на кнопку Контент этого блока:
Найдите скрытое поле, которое вы создали ранее. В поле Вместо ymclientid вставьте скопированный идентификатор вашего поля:
Проделайте то же самое для скрытого поля Google Analytics 4, если вы его создавали (вместо gaclientid - идентификатор кастомного поля). Сохраните изменения.
Этот же идентификатор поля amoCRM вам необходимо изменить в нескольких местах в коде, который вы добавили в настройках сайта. Используя сочетания клавиш Ctrl + F, вам откроется поиск в редакторе кода. Введите ymclientid. Вам должно подсветиться 5 значений:
Замените их все на идентификатор, который вы скопировали из поля amoCRM для Яндекс Метрики. У вас должно получиться примерно так:
Убедитесь, что вы везде заменили значения. После этого сохраните изменения. Аналогичным образом проделайте для поля Client ID Google Analytics 4, если оно у вас создано.
Перед отправкой тестовой заявки вы можете еще раз проинспектировать скрытые поля на вкладке Elements, чтобы убедиться, что атрибуты name изменились на ID поля, а в value отображаются и хранятся значения (Client ID Метрики/GA4), которые передаются в CRM при отправке формы.
Теперь отправьте тестовую заявку. Откройте сделку в amoCRM и проверьте, что ваши пользовательские поля заполнены данными:
На этом интеграция форм Tilda и amoCRM с передачей скрытых полей Client ID для Яндекс Метрики и Google Analytics 4 закончена!







































