Извлечение значений из полей формы с помощью Яндекс Тег Менеджера

19 января, 2026

В этом руководстве разберем, как отслеживать значения полей формы, заполненных пользователем, с помощью Яндекс Тег Менеджера, и отправим эти данные в Яндекс Метрику как параметры событий и для Advanced Matching.

Продолжаю радовать вас самым актуальным и эксклюзивным контентом, на базе которого учатся лучшие специалисты в интернет-маркетинге по всему миру!

Содержание

Начало

Еще осенью 2022 года Яндекс добавил возможность использовать first-party данные (1st-party - информацию, собранную вами о своих клиентах через сайт, приложение, офлайн-точки и т.д. с согласия пользователя) для повышения точности рекламы, назвав свою новую технологию Advanced Matching (AM). Она помогает идентифицировать пользователей на сайте, даже если они используют браузеры с ограничением межсайтовых файлов cookies (third-party cookies) - например, Safari, Brave или Mozilla Firefox.

Advanced Matching

Дело в том, что интернет-маркетологи все чаще стали сталкиваться с проблемой отслеживания данных в разных браузерах и версиях, что, в свою очередь, негативно сказывалось на результатах рекламных кампаний. Из-за отказа большинства браузеров от сторонних файлов cookie (third-party cookies), их блокировки, ограничения срока жизни основных файлов cookie (first-party cookies), а также из-за использования пользователями блокировщиков рекламы, режима «Инкогнито», необходимости соответствия GDPR и возможности отказа посетителей от сбора данных (что делает невозможным отслеживание их действий) все сложнее удается сохранять полный путь пользователя, его первый источник перехода, учитывать все его действия, конверсии и т.д.

Из-за этого приходилось искать иные пути решения:

расширенное отслеживание конверсий (для Google Рекламы);
отслеживание идентификатора пользователя (User ID);
серверное отслеживание (Server-Side Tracking);
другие идентификаторы (например, Fingerprint и другие цифровые отпечатки);
CRM-маркетинг (создание сегментов и аудиторий на основе пользовательской базы с последующей загрузкой их в рекламу).

Внедренная в Яндексе технология Advanced Matching помогает рекламодателям дополнять портрет своего потенциального пользователя новыми данными и таким образом увеличивать охват целевой аудитории и точность таргетинга, а владельцам площадок - точнее подбирать офферы на основе интересов пользователя и, соответственно, увеличить доход от использования Рекламной сети.

AM использует информацию из форм на вашем сайте, которую пользователи предоставляют самостоятельно. Например, при оформлении заказа, регистрации или подписке на рассылку. Данные хешируются c учетом стандартов ISO-27001 и в обезличенном виде передаются в Яндекс Метрику.

В официальной документации приводится подробная информация по настройке Advanced Matching. Всего существует два способа:

автоматический способ;
ручной способ.

Для автоматического способа необходимо в настройках счетчика Метрики активировать опцию Дополнительные настройки отслеживания:

Дополнительные настройки отслеживания

Примечание: при включенной опции в Метрике может появиться цель Автоцель: заполнил контактные данные, если в настройках счетчика также включено создание автоматических целей. Цель создается при первом вводе контактной информации на сайте и данные передаются в Метрику в хешированом виде. При выключенной опции Метрика только фиксирует ввод данных, но не обрабатывает их.

Активировав опцию Запоминать маскированные данные, вы разрешаете Метрике сохранять обезличенные (маскированные) контактные данные, указанные посетителями на сайте. Это позволяет точнее отслеживать действия пользователей и повышать качество анализа и рекламных алгоритмов, соблюдая при этом требования конфиденциальности данных.

Подробнее о том, как проверить автоматическую отправку данных в Метрику, читайте в официальной справке.

Другой способ (ручной сбор данных) основан на одном из методов JavaScript API:

firstPartyParams - хешировать данные перед загрузкой будет Метрика;
firstPartyParamsHashed - с возможностью самостоятельного хеширования данных.

По оценкам Яндекса, ручной сбор данных может обеспечить увеличение объема собираемой информации в 2-3 раза по сравнению с автоматическим сбором. Сам Яндекс рекомендует использовать ручной и автоматический методы одновременно для повышения точности. Стало быть, умение извлекать значения из полей формы и передавать их со специальными методами firstPartyParams и firstPartyParamsHashed - ценный навык! И мы сегодня с вами будем учиться выполнять такое с использованием Яндекс Тег Менеджера - передавать first-party данные в Яндекс Метрику в качестве параметров событий с методом reachGoal и с помощью методов firstPartyParams и firstPartyParamsHashed для Advanced Matching.

Отслеживание полей формы

В моем блоге написано достаточно количество материалов на эту тему для Google Tag Manager. Обязательно прочитайте их все, поскольку сценарий выполнения практически одинаковый для обеих систем:

Отличие состоит лишь в заключительном шаге, поскольку на момент публикации этого руководства в Яндекс Тег Менеджере еще нет пользовательской переменной Собственный код JavaScript, а в диспетчере тегов Google она есть. И это значительно упрощает настройку и передачу данных в аналитику.

Я же покажу альтернативный способ, которым сейчас можно отслеживать информацию из полей любой формы, и передавать эти данные в Яндекс Метрику разными методами - reachGoal (JS-событие) и firstPartyParams (для Advanced Matching).

Давайте начнем с общих настроек. В качестве примера разберем форму подарочного сертификата на одном из моих тестовых сайтов. Выглядит она так:

Пример формы с полями

В ней присутствуют как стандартные поля для ввода информации, так и более сложные HTML-элементы для отслеживания. Например, переключатель (радиокнопка). Его настройка чуть сложнее, чем просто извлечь данные из классических полей (имя, телефон, e-mail и т.д.), но тоже выполнима. В зависимости от того, какое количество полей в форме на вашем сайте и какие типы они имеют, вы должны использовать определенные типы отслеживания.

Если вам интересно, вы можете посмотреть мою подробную лекцию по работе с HTML-элементами с помощью Google Tag Manager. На YouTube:

И Rutube:

Так или иначе, отслеживание различных полей формы на любом сайте с помощью Яндекс Тег Менеджера сводится к двум простым действиям:

определение типа поля в структуре HTML-элементов;
использование переменной уровня данных (dataLayer) - на данный момент пока доступен только этот способ;

Конечно же, необходимо еще совершить все оставшиеся настройки в Яндекс Тег Менеджере - создать триггер активации и аналитический тег. Но ключевое - это понять, каким способом можно извлечь нужную информацию из того или иного поля/элемента формы, сохранить это значение в переменной, чтобы впоследствии вместе с активацией тега отправить данные в Яндекс Метрику в качестве параметров события или для Advanced Matching.

Но перед тем, как мы начнем выполнять все эти настройки, я напоминаю: загрузка данных, которая может идентифицировать личность пользователя, запрещена политикой Яндекса. Но вы можете использовать данный способ для передачи, например, ID заявки, региона, комментария из формы и т.д. В случае с Advanced Matching - вы можете извлекать персональные данные пользователя (телефон, email) и передавать их с помощью методов firstPartyParams и firstPartyParamsHashed без каких-либо запретов и ограничений.

Определение типов полей в структуре HTML-элементов

Для сбора пользовательских данных, как правило, используются формы. В HTML формы размечаются тегом <form>:

<form>
// элементы внутри формы
</form>

<form>

// элементы внутри формы

</form>

Такая форма внутри себя содержит элементы формы. Элементы формы - это различные типы элементов ввода, такие как текстовые поля, флажки, переключатели, кнопки отправки и многое другое. Самыми распространенными элементами формы являются элементы <input>.

Элемент <input> отображается несколькими способами, в зависимости от атрибута type:

<input type="text"> - однострочное поле ввода текста;
<input type="password"> - поле с паролем (Вебвизор в Яндекс Метрике не записывает данные полей с таким типом);
<input type="radio"> - переключатель (для выбора одного из многих вариантов);
<input type="range"> - ползунок;
<input type="checkbox"> - флажок;
<input type="file"> - поле для отправки файла (file);
<input type="reset"> - кнопка для очистки формы;
<input type="submit"> - кнопка для отправки формы;
и другие.

Также существуют элемент <textarea>, который представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Таким образом, 99% всех форм в Интернете для ввода какой-либо информации используют элементы двух типов - <input> и <textarea>. Именно их вам и нужно научиться отслеживать.

Для того, чтобы узнать тип конкретного поля формы, вам нужно сделать следующее - поставить курсор мыши внутрь самого поля, нажать правой кнопкой мыши и выбрать пункт Просмотреть код:

Просмотреть код

Вам откроется консоль разработчика в браузере (клавиша F12 для Google Chrome) с уже выделенным/проинспектированным полем:

Инспектирование конкретного поля

Как видите, у поля Имя получателя тип text - это текстовое поле для ввода информации согласно HTML-разметке. Поочередно выделяя каждое поле формы, выпишите всех их типы из атрибута type. В моем примере это будет так:

Имя получателя - text (текстовое поле);
Email получателя - text (текстовое поле);
Ваше имя - text (текстовое поле);
Ваш Email - text (текстовое поле);
Сумма - text (текстовое поле);

А вот поле Сообщение имеет другой тег - textarea:

Элемент textarea

Еще и поле Тема подарочного сертификата имеет тип radio - переключатель:

Элемент input с типом radio

Получается, что в моей тестовой форме 7 полей для отслеживания:

5 полей с тегом input и типом type;
1 поле с тегом input и типом radio;
1 поле с тегом textarea.

Теперь необходимо понять, каким способом можно извлечь нужную информацию из того или иного поля/элемента формы, чтобы сохранить введенное/выбранное значение и вместе с событием отправки формы передать в Яндекс Метрику.

Извлечение данных из полей формы

Вот мы и подошли к самому ответственному и сложному этапу настройки - извлечению данных. И он отличается от того, что предложено мной в другом материале для Google Tag Manager.

Поскольку в Яндекс Тег Менеджере на момент написания этого руководства нет пользовательской переменной Собственный код JavaScript, то и извлечь значения из полей формы таким способом мы не можем. В шаблонах переменных тоже пока нет соответствующего метода API. Но есть иное решение.

Оно основано на том, что мы используем специальный JavaScript-код в теге типа Пользовательский HTML, который отслеживает заполнение значения в поле формы (по CSS-селектору) и отправляет событие в dataLayer.

Пример скрипта для отслеживания одного поля формы:

<script>
(function() {
    // Находим поле формы по CSS-селектору
    var field = document.querySelector('CSS-селектор');
    
    // Проверяем наличие поля и его значения
    if (field && field.value) {
        // Инициализируем dataLayer если не существует
        window.dataLayer = window.dataLayer || [];
        
        // Отправляем событие
        dataLayer.push({
            'event': 'send_form',
            'field_phone': field.value
        });
    }
})();
</script>

(function() {

// Находим поле формы по CSS-селектору

var field = document.querySelector('CSS-селектор');

// Проверяем наличие поля и его значения

if (field && field.value) {

// Инициализируем dataLayer если не существует

window.dataLayer = window.dataLayer || [];

// Отправляем событие

dataLayer.push({

'event': 'send_form',

'field_phone': field.value

});

}

})();

</script>

После размещения такого скрипта вы можете настроить триггер специального события с названием send_form, переменную уровня данных для field_phone и тег для отправки в Яндекс Метрику.

Таким образом, последовательность действий по отслеживанию значений полей формы на сайте следующая:

в Тег Менеджере активируем Пользовательский HTML в настройках счетчика Яндекс Метрики;
создаем триггер, который будет отслеживать отправку формы;
создаем тег типа Пользовательский HTML;
создаем триггер специального события;
создаем переменную уровня данных;
создаем итоговый тег события Яндекс Метрики (метод reachGoal) или тег Advanced Matching (метод firstPartyParams).

Давайте рассмотрим каждый шаг подробнее.

Активация функции “Пользовательский HTML”

Первым делом вам необходимо активировать опцию Пользовательский HTML в настройках счетчика Яндекс Метрики.

Для этого перейдите в раздел Настройки - Счетчик:

Настройки - Счетчик

И включите функцию Пользовательский HTML:

Активация пользовательского HTML

Пользовательский HTML в Yandex Tag Manager (YTM) - это тип тега, который позволяет добавлять на сайт произвольный HTML-код, JavaScript или другие скрипты, которые не поддерживаются стандартными тегами и которых нет в каталоге шаблонов. Код будет выполняться при срабатывании триггера, в нем также можно использовать переменные для динамической подстановки нужных значений.

Сохраните изменения.

Создание триггера для отправки формы

В этом руководстве я не буду подробно описывать процесс отслеживания отправки самой формы, то есть создание триггера, поскольку эта тема в избытке разобрана в моих других публикациях:

Вам лишь нужно создать триггер, который будет срабатывать именно на вашу форму. А далее вы уже будете отслеживать сами данные из полей формы и передавать их вместе с тегом в Яндекс Метрику.

Убедитесь, что созданный триггер после отправки формы действительно срабатывает так, как нужно. В примере для моей формы подарочного сертификата подходит стандартный триггер Отправка формы.

Создание тега “Пользовательский HTML” (одно поле формы)

После того, как вы создали триггер на отправку формы, добавьте тег типа Пользовательский HTML. Вставьте в него нижеприведенный код:

<script>
(function() {
    // Находим поле формы по CSS-селектору
    var field = document.querySelector('CSS-селектор');
    
    // Проверяем наличие поля и его значения
    if (field && field.value) {
        // Инициализируем dataLayer если не существует
        window.dataLayer = window.dataLayer || [];
        
        // Отправляем событие
        dataLayer.push({
            'event': 'send_form',
            'field_email': field.value
        });
    }
})();
</script>

(function() {

// Находим поле формы по CSS-селектору

var field = document.querySelector('CSS-селектор');

// Проверяем наличие поля и его значения

if (field && field.value) {

// Инициализируем dataLayer если не существует

window.dataLayer = window.dataLayer || [];

// Отправляем событие

dataLayer.push({

'event': 'send_form',

'field_email': field.value

});

}

})();

</script>

, где вместо CSS-селектор вы задаете CSS-селектор вашего HTML-поля формы.

Чтобы лучше разобраться в CSS-селекторах, посмотрите мою лекцию на YouTube:

Или Rutube:

А также прочитайте несколько материалов, связанных с селекторами, поскольку без фундаментальных основ работы вам будет сложно выполнять все последующие сценарии для своего проекта:

Примечание: материалы и видеоурок посвящены, преимущественно, диспетчеру тегов Google, но информация также актуальна и для Яндекс Тег Менеджера.

В качестве демонстрации я буду выполнять отслеживание для поля Ваш Email, а не всех полей формы (так как принцип тот же):

Поле "Ваш Email"

Для копирования селектора поля нашей формы необходимо проинспектировать этот элемент (как мы это делали на предыдущем шаге) с использованием консоли разработчика. Только теперь, выделив нужное поле формы, в инспекторе элементов нажмите на него правой кнопкой мыши и выберите Copy - Copy selector:

Copy - Copy selector (копирование селектора поля формы)

Благодаря этому вы скопировали селектор конкретного поля формы. Вы можете перейти на вкладку Console и вставить эту строчку кода, нажав Enter:

document.querySelector('selector').value;

1	document.querySelector('selector').value;

, где вместо selector вы вставляете ваше значение скопированного селектора.

Если на вашем сайте установлена библиотека jQuery, то вы можете использовать другую конструкцию:

$('selector').val();

1	$('selector').val();

или:

jQuery('selector').val();

1	jQuery('selector').val();

, где вместо selector вы также вставляете значение вашего скопированного селектора.

Проверка конструкции извлечения (три способа)

Все три вышеприведенных способа выполняют одну и ту же функцию - они извлекают значение из поля формы с заданным селектором. Только в первом случае используется классический JavaScript-код и конструкция document.querySelector, а в двух других - команда для jQuery с функцией val.

Если в консоли разработчика после выполнения кода вы видите нужный результат, то этот селектор вы можете вставить в свой кода тега HTML:

Вставка селектора поля формы

Вы также можете изменить:

название события send_form на свое собственное или оставить его без изменений. В дальнейшем вы будете использовать именно это название в триггере специального события;
название переменной field_email на свое собственное (например, если отслеживаете не электронную почту, а телефон пользователя) или оставить его без изменений. В дальнейшем вы будете использовать именно это название при создании переменной уровня данных.

В качестве триггера активации обязательно используйте триггер, который вы создали для отслеживания отправки формы на предыдущем шаге! (см. выше).

Итоговый тег будет выглядеть так:

Итоговый HTML-тег для отслеживания значения поля формы

Сохраните тег.

Если кратко, то этот скрипт представляет собой самовызывающуюся функцию JavaScript, которая сразу после выполнения страницы ищет элемент формы по заданному CSS-селектору, проверяет, существует ли он и заполнено ли у него значение, после чего инициализирует массив dataLayer (если он еще не создан) и отправляет в него объект с событием send_form и значением поля (например, электронной почты или номером телефона). Таким образом данные передаются в Яндекс Тег Менеджер, где по этому событию можно запускать теги аналитики или рекламы, не засоряя глобальную область видимости и избегая ошибок при отсутствии элемента или значения.

Создание триггера специального события

Следующий шаг - это создание триггера специального события с названием send_form (если вы его не поменяли в коде выше).

Триггер специального события send_form

Сохраните триггер. Именно его вы будете использовать с тегом Яндекс Метрики, а не тот, который создавали изначально для отслеживания отправки формы.

Создание переменной уровня данных

Чтобы отследить введенное пользователем значение в поле формы и передать его в Яндекс Метрику, нам необходимо создать пользовательскую переменную типа Переменная уровня данных с именем, которое вы задали в скрипте. В моем примере - это field_email:

Переменная уровня данных

Задайте название переменной и сохраните ее.

Проверка настроек

Перед тем, как создать финальный тег Яндекс Метрики, можно проверить выполненные настройки с помощью режима отладки Яндекс Тег Менеджера.

Если вы все сделали правильно, то после отправки формы на шкале событий появится два триггера - один стандартный, благодаря которому вы раньше отслеживали событие отправки формы, а другой - новый, который активируется благодаря коду в HTML-теге и dataLayer:

Срабатываемые триггеры после отправки формы

Нас интересует именно send_form. Нажмите на него и перейдите на вкладку DataLayer. Там вы должны увидеть уровень данных конкретного события, включая название самого события (event) и дополнительный параметр с извлеченным значением из поля формы:

Вкладка DataLayer и переменная уровня данных с электронной почтой

А поскольку мы еще и создали переменную уровня данных, то перейдя на вкладку Переменные, должны увидеть возвращенное значение электронной почты именно в ней:

Переменная уровня данных со значением email пользователя

Вот эту отдельную переменную дальше вы будете использовать в тегах для отправки данных в Яндекс Метрику и в Advanced Matching.

Создание тега “Пользовательский HTML” (все поля формы)

Скрипт, который мы использовали выше, возвращал значение только одного поля формы. Но как быть, если в форме множество полей и хочется отслеживать их все?

Тогда вы можете использовать альтернативный JS-код для всей формы:

<script>
(function() {
    // Находим форму по селектору (замените на ваш)
    var form = document.querySelector('СSS-селектор');
    
    // Если форма не найдена — выходим
    if (!form) return;
    
    // Объект для хранения данных формы
    var formData = {};
    
    // Находим все поля с атрибутом name
    var inputs = form.querySelectorAll('input[name], textarea[name], select[name]');
    
    // Собираем заполненные поля
    inputs.forEach(function(field) {
        if (field.value && field.value.trim()) {
            formData[field.name] = field.value.trim();
        }
    });
    
    // Отправляем в dataLayer только если есть данные
    if (Object.keys(formData).length > 0) {
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
            'event': 'formSubmissionData',
            'formData': formData
        });
    }
})();
</script>

(function() {

// Находим форму по селектору (замените на ваш)

var form = document.querySelector('СSS-селектор');

// Если форма не найдена — выходим

if (!form) return;

// Объект для хранения данных формы

var formData = {};

// Находим все поля с атрибутом name

var inputs = form.querySelectorAll('input[name], textarea[name], select[name]');

// Собираем заполненные поля

inputs.forEach(function(field) {

if (field.value && field.value.trim()) {

formData[field.name] = field.value.trim();

}

});

// Отправляем в dataLayer только если есть данные

if (Object.keys(formData).length > 0) {

window.dataLayer = window.dataLayer || [];

dataLayer.push({

'event': 'formSubmissionData',

'formData': formData

});

}

})();

</script>

, где вместо СSS-селектор вам необходимо вставить CSS-селектор не конкретного поля формы, а самой формы.

Для этого проинспектируйте ее уже известным вам способом и скопируйте селектор самой формы (вы уже знаете, что В HTML формы размечаются тегом <form>):

Копирование селектора формы

Вставьте это значение в JS-код. Все остальное можно оставить без изменений. В качестве триггера активации используйте тот же триггер, который вы использовали для отслеживания отправки формы и для другого HTML-тега.

Итоговый HTML-тег для отслеживания значений всех полей формы

Этот код автоматически ищет на странице HTML-форму по заданному CSS-селектору, и если форма существует, собирает все поля с атрибутом name, у которых есть непустые значения. Затем формирует объект formData, где ключами выступают имена полей, а значениями - введенные пользователем данные. Если хотя бы одно поле заполнено, код отправляет объект с событием formSubmissionData и собранными данными в dataLayer.

Атрибут name используется потому, что именно он определяет имя каждого поля формы и служит ключом, под которым браузер (и сервер) идентифицирует передаваемые данные. Когда пользователь отправляет форму, данные отправляются в виде пар «ключ–значение», где ключ - это значение name, а значение - содержимое поля.

Например, для моего примера у поля Ваш Email есть атрибут name со значением from_email:

Пример поля с атрибутом name

И чтобы извлечь введенное пользователем значение из этого элемента по атрибуту name, используется тот же метод querySelector с селектором [name="from_email"]:

document.querySelector('input[name="from_email"]').value;

1	document.querySelector('input[name="from_email"]').value;

В консоли разработчика это будет выглядеть так:

Проверка конструкции извлечения из атрибута name

Именно поэтому мы используем в вышеприведенном коде атрибут name для извлечения значений из всех полей формы.

После этого обязательно создайте триггер специального события formSubmissionData:

Триггер специального события formSubmissionData

Сохраните триггер.

После этого вы можете повторно активировать режим отладки и проверить, что событие formSubmissionData срабатывает после успешной отправки формы:

Событие formSubmissionData

Если это так, откройте вкладку DataLayer и посмотрите какие значения были возвращены в объекте formData:

Возвращенные значения в объекте formData

Здесь ключами выступают имена полей, а значениями - введенные пользователем данные.

Поскольку все ключи расположены внутри объекта formData, то для извлечения конкретного значения поля формы в Яндекс Тег Менеджере необходимо использовать переменную уровня данных и точечную нотацию. Например, для поля формы Ваш Email имя переменной будет formData.from_email:

Переменная уровня данных с точечной нотацией

Другие поля формы:

Имя получателя - formData.to_name
Email получателя - formData.to_email
Ваше имя - formData.from_name
Ваш Email - formData.from_email
Тема - formData.voucher_theme_id
Сообщение - formData.message
Сумма - formData.amount

Таким образом, после сбора данных из формы в объект formData значения полей становятся доступны через точечную нотацию - стандартный способ обращения к свойствам объекта в JavaScript. Например, если пользователь заполнил поля с атрибутами name="from_email" и name="message", то email отправителя извлекается как formData.from_email, а текст сообщения - как formData.message. Такой синтаксис интуитивно понятен и лаконичен: имя свойства пишется после точки без кавычек, возвращается строка с введенными данными. Это позволяет легко передавать конкретные значения дальше - в аналитику через dataLayer, на сервер или для валидации, сохраняя читаемость кода.

Создание тега Яндекс Метрики

Пришло время завершить отслеживание и передать значение заполненного поля формы в Яндекс Метрику в качестве параметра события.

Но перед тем, как это сделать, перейдите в раздел Цели и создайте цель с условием JavaScript-событие. Укажите произвольный идентификатор цели (например - otpravka_formi) и название цели:

Цель "JavaScript-событие"

Примечательно: я рекомендую использовать условие Идентификатор цели совпадает.

Обязательно запомните идентификатор, он вам понадобится в окончательной настройке тега Яндекс Метрики. В завершение сохраните цель.

Тег JavaScript-события

Вернитесь в Яндекс Тег Менеджер, перейдите на вкладку Теги и создайте тег типа Яндекс Метрика:

Шаблон тега - Яндекс Метрика

В открывшемся окне задайте следующую конфигурацию тега:

ID счетчика - вставьте идентификатор вашего счетчика Яндекс Метрики. Он отображается вверху страницы;
Идентификатор цели - задается на странице редактирования счетчика при создании или изменении цели типа JavaScript-событие. В моем примере - otpravka_formi);

Поставьте галочку рядом с Добавить поле params и введите в него следующую конструкцию:

{"E-mail пользователя":"{{DLV - Email пользователя}}"}

1	{"E-mail пользователя":"{{DLV - Email пользователя}}"}

, где вместо E-mail пользователя вы можете задать любое название параметра события, а вместо {{DLV - Email пользователя}} указать переменную уровня данных, которую вы создали на предыдущем шаге.

Пример в Яндекс Тег Менеджере:

Добавление параметра события

Не забывайте, что с помощью фигурных скобок {{ }} мы ссылаемся на другую переменную, которая будет автоматически передавать значение поля формы в Метрику в качестве параметра события.

В качестве триггера активации выберите триггер специального события, который вы создали ранее. Итоговый тег Яндекс Метрики будет выглядеть так:

Отправка формы с отслеживанием значения поля формы

Если бы вы использовали тег с отслеживанием нескольких полей формы, то конструкция для параметров событий могла быть такой:

{"Отправка формы": {"Имя получателя": "{{DLV - Имя получателя}}", "Email получателя": "{{DLV - Email получателя}}", "Ваше имя": "{{DLV - Ваше имя}}", "Ваш Email": "{{DLV - Email пользователя}}", "Тема подарочного сертификата": "{{DLV - Тема сертификата}}", "Сообщение": "{{DLV - Сообщение}}", "Сумма": "{{DLV - Сумма}}"}};

{"Отправка формы": {"Имя получателя": "{{DLV - Имя получателя}}", "Email получателя": "{{DLV - Email получателя}}", "Ваше имя": "{{DLV - Ваше имя}}", "Ваш Email": "{{DLV - Email пользователя}}", "Тема подарочного сертификата": "{{DLV - Тема сертификата}}", "Сообщение": "{{DLV - Сообщение}}", "Сумма": "{{DLV - Сумма}}"}};

Проверить передачу данных в Яндекс Метрику можно с помощью режима предварительного просмотра. Просто заполните форму тестовыми данными и отправьте ее. В результате на шкале событий вы должны увидеть активное событие, а вместе с ним - активированный тег Яндекс Метрики:

Активированный тег с нашим событием

Если это так, тогда вы можете раскрыть активированный тег и посмотреть его детальные сведения. Вы также можете переключить опцию Отображать переменные как на Значения, чтобы проверить, действительно ли то самое значение, которое вы хотели извлечь, отправляется вместе с тегом в аналитику. Или переменная принимает какое-то другое значение, или вовсе undefined.

Детальные сведения о теге

Проверка тега с несколькими полями происходит точно так же:

Отладка отправки формы с несколькими полями

И еще можно посмотреть значения переменных на вкладке Переменные:

Проверка значений на вкладке "Переменные"

В завершение не забудьте опубликовать контейнер Яндекс Тег Менеджера, чтобы настройки применились ко всем пользователям вашего сайта. После публикации данные по событиям JavaScript будут передаваться в Яндекс Метрику. Посмотреть их можно будет в стандартных отчетах:

Конверсии;
Параметры событий и Параметры целей;
выбрав любой стандартный отчет и созданную цель.

Пример переданных параметров событий в Яндекс Метрику:

Отчет "Параметры событий" с данными полей формы

Если по какой-то причине у вас вложенность с несколькими полями в теге Яндекс Метрика не работает, попробуйте использовать тег типа Пользовательский HTML:

<script>
var formFields = {
  "Отправка формы": {
    "Имя получателя": "{{ DLV - Имя получателя }}",
    "Email получателя": "{{ DLV - Email получателя }}",
    "Ваше имя": "{{ DLV - Ваше имя }}",
    "Ваш Email": "{{ DLV - Электронная почта }}",
    "Тема подарочного сертификата": "{{ DLV - Тема сертификата }}",
    "Сообщение": "{{ DLV - Сообщение }}",
    "Сумма": "{{ DLV - Сумма }}"
  }
};

ym(XXXXXX,'reachGoal','otpravka_formi', formFields);
</script>

var formFields = {

"Отправка формы": {

"Имя получателя": "{{ DLV - Имя получателя }}",

"Email получателя": "{{ DLV - Email получателя }}",

"Ваше имя": "{{ DLV - Ваше имя }}",

"Ваш Email": "{{ DLV - Электронная почта }}",

"Тема подарочного сертификата": "{{ DLV - Тема сертификата }}",

"Сообщение": "{{ DLV - Сообщение }}",

"Сумма": "{{ DLV - Сумма }}"

}

};

ym(XXXXXX,'reachGoal','otpravka_formi', formFields);

</script>

, где вместо XXXXXX добавьте идентификатор вашего счетчика, а в объекте formFields перечислите в виде пары ключ:значение свои собственные названия полей и их значения, которые извлекаются с помощью созданных на предыдущем шаге переменных уровня данных.

В Яндекс Тег Менеджере:

Тег Яндекс Метрики

Тег Advanced Matching

Как вы уже знаете, для передачи данных используется один из методов JavaScript API:

firstPartyParams - хешировать данные перед загрузкой будет Метрика;
firstPartyParamsHashed - с возможностью самостоятельного хеширования данных.

В качестве примера воспользуемся методом firstPartyParams, где Яндекс Метрика сама хеширует данные перед отправкой.

На текущий момент в теге Яндекс Метрика нет метода firstPartyParams, поэтому для использования технологии Advanced Matching требуется создать тег типа Пользовательский HTML.

Синтаксис метода в самом простом виде выглядит так:

ym(XXXXXX, 'firstPartyParams', parameters);

1	ym(XXXXXX, 'firstPartyParams', parameters);

, где:

XXXXXX - идентификатор счетчика Яндекс Метрики;
firstPartyParams - метод;
parameters - информация о посетителе, которую он оставил на сайте, например через форму обратной связи.

Именно в parameters вы можете передать объект с дополнительными данными пользователя:

     "email": 'mail@example.com',
     "phone_number": '70123456789',
     "first_name": 'Иван',
     "last_name": 'Иванов',
     "yandex_cid": 1000034426
 });

"email": 'mail@example.com',

"phone_number": '70123456789',

"first_name": 'Иван',

"last_name": 'Иванов',

"yandex_cid": 1000034426

});

Поля объекта parameters:

email - электронный адрес;
phone_number - номер телефона без пробелов в формате 70123456789;
first_name - имя посетителя;
last_name - фамилия посетителя;
yandex_cid - уникальный идентификатор пользователя Яндекса (id). Передавайте, если на вашем сайте есть авторизация Яндекс ID.

Примечание: параметры указываются в нижнем регистре, без запятых и пробелов в конце.

Так как в моем примере я демонстрирую отслеживание поля электронной почты, то тег Advanced Matching с методом firstPartyParams будет выглядеть так:

<script>
  ym(93018673, 'firstPartyParams', 
     {"email": "{{DLV - Email пользователя}}"});
</script>

ym(93018673, 'firstPartyParams',

{"email": "{{DLV - Email пользователя}}"});

</script>

Здесь мы используем поле email объекта parameters и созданную на предыдущем шаге переменную уровня данных, которая извлекает значение из поля электронной почты. В качестве триггера активации добавьте тот же триггер специального события, что и для JS-события Яндекс Метрики:

Тег Advanced Matching (метод firstPartyParams)

Сохраните тег.

Чтобы проверить, отправляются ли данные в Метрику в хешированном виде:

заполните поля в форме сбора данных (в форме подписки, авторизации, заказа и т.д) на сайте и отправьте данные;
откройте консоль браузера и вкладку Network;
в поле фильтра укажите адрес mc.yandex.ru;
выберите запрос, который начинается с 1?page-url;
в появившемся окне перейдите на вкладку Payload. Если в содержимом вкладки присутствует параметр site-info: {«___ym»:{«fpp» …} - вы нашли верный запрос и передача данных настроена корректно. Если такого параметра нет, откройте другой запрос, который начинается с 1?page-url и снова перейдите во вкладку Payload. Если ни в одном из запросов 1?page-url нет параметра {«___ym»:{«fpp» …} - передача данных не осуществляется, обратитесь в службу поддержки.

Проверка передачи данных Advanced Matching (ручной способ)

Итоги:

данные с помощью автоматического способа отправляются после заполнения каждого поля формы. Например, автоматический метод сработает, если пользователь заполнил поле Телефон или Email в форме;
Яндекс рекомендует использовать ручной и автоматический методы одновременно. Так вы полностью раскроете потенциал Advanced Matching;
если у вас нет доступа к коду сайта или инструментам разработчика, используйте автоматический метод;
настройка ручным способом будет работать, даже если в настройках счетчика у вас отключена опция Дополнительные настройки отслеживания;
после первой передачи данных в Метрике появится цель Заполнение контактных данных - для этого включите опцию Автоматические цели (для ручного способа);
автоматический способ настройки будет недоступен, если в настройках счетчика включены дополнительные условия обработки данных (GDPR).
ручной способ в Яндекс Тег Менеджере - это тег Пользовательский HTML (на момент публикации этого руководства) и методы firstPartyParams и firstPartyParamsHashed.

Метки: css-селекторы, dataLayer, firstPartyParams, reachGoal, Яндекс Метрика, Яндекс Тег Менеджер

Извлечение значений из полей формы с помощью Яндекс Тег Менеджера

Начало

Отслеживание полей формы

Определение типов полей в структуре HTML-элементов

Извлечение данных из полей формы

Активация функции “Пользовательский HTML”

Создание триггера для отправки формы

Создание тега “Пользовательский HTML” (одно поле формы)

Создание триггера специального события

Создание переменной уровня данных

Проверка настроек

Создание тега “Пользовательский HTML” (все поля формы)

Создание тега Яндекс Метрики

Тег JavaScript-события

Тег Advanced Matching

Еще статьи