Яндекс Тег Менеджер: как настроить цели — детальная инструкция с примерами кода — Сайты для малого бизнеса, которые приводят заявки

Яндекс Тег Менеджер: как настроить цели — детальная инструкция с примерами кода

Владелец студии ремонта запустил лендинг, настроил Директ, подключил Метрику. Клики шли, деньги тратились — а заявок было 3 за неделю. Он думал, что проблема в дизайне. Оказалось, нужно было настроить 5 целей через Яндекс Тег Менеджер — и воронка стала видна как на ладони.

Зачем нужен Яндекс Тег Менеджер для отслеживания целей

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

Через ЯТМ события настраиваются централизованно: создаётся триггер (условие срабатывания), тег (что передать в Метрику) и переменная (какие данные собрать). Маркетолог делает всё сам через интерфейс — не нужно каждый раз просить программиста вставить код в HTML.

Подготовка: включение Яндекс Тег Менеджера

Войдите в Яндекс.Метрику, перейдите Настройки → Счётчик и активируйте Тег Менеджер. После этого включите функцию Пользовательский HTML.

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

Сохраните изменения. Теперь в ЯТМ доступен шаблон Пользовательский HTML для создания тегов.

Цель 1: Скролл до блока с ценами (50% страницы)

Шаг 1: Создание триггера инициализации

Откройте Яндекс Тег Менеджер, перейдите Триггеры → Добавить триггер. Выберите тип Инициализация.

Если нужно отслеживать скролл только на лендингах, добавьте условие Некоторые события → Page URL содержит /landing/. Для всех страниц оставьте Все события.

Назовите триггер Инициализация — Скролл и сохраните.

Шаг 2: Создание тега с кодом отслеживания скролла

Перейдите Теги → Добавить тег. Выберите шаблон Пользовательский HTML.

Вставьте в поле HTML следующий код:

<script>
(function(){
dataLayer = window.dataLayer || [];

// НАСТРОЙКИ
var scroll_as_threshold = 2000; // Время в миллисекундах (2 сек)
var scroll_as_milestones = [0, 25, 50, 75, 90, 100]; // Пороги в %
var trackZero = false; // Отслеживать 0% (false = нет)

var threshold = scroll_as_threshold;
var milestones = scroll_as_milestones;
var lowerBound = trackZero === true ? -1 : 0;
var milestonesFired = [];
var pastMilestone = lowerBound;
var timeoutID;
var deepestScroll = lowerBound, max = Math.max, _round = Math.round;

function getwinheight(W, D){
return W.innerHeight || (D.documentElement ? D.documentElement.clientHeight : D.body.clientHeight) || D.body.clientHeight;
}

function getscroll(W, D){
return W.pageYOffset || (D.documentElement ? D.documentElement.scrollTop : D.body.scrollTop) || D.body.scrollTop;
}

function getdocheight(D) {
var b = D.body, e = D.documentElement;
return D.height || max(max(b.scrollHeight, e.scrollHeight), max(b.offsetHeight, e.offsetHeight), max(b.clientHeight, e.clientHeight));
}

function currentPercentageBelowFold(window, document){
var window_height = getwinheight(window, document);
var document_height = getdocheight(document);
var scroll_overhead = getscroll(window, document);
var pixels_below = (document_height - (window_height + scroll_overhead));
return 100 * (pixels_below / document_height);
}

function currentPercentageViewed(window, document){
return 100 - currentPercentageBelowFold(window, document);
}

function formatLabel(i) {
return milestones[i].toString();
}

function pushCleanupMilestones(index) {
milestonesFired.push(milestones[index]);
for (j = 0; j < index; j++) {
if (!milestonesFired.includes(milestones[j])) {
milestonesFired.push(milestones[j]);
var label = formatLabel(j);
dataLayer.push({"event": "scroll-milestone", "milestone": label});
}
}
}

function pushMilestone(index) {
var label = formatLabel(index);
pushCleanupMilestones(index);
dataLayer.push({"event": "scroll-milestone", "milestone": label});
}

window.addEventListener("scroll", trackScroll);
window.addEventListener("touchmove", trackScroll);

function trackScroll() {
var scrollDepth = currentPercentageViewed(window, document);
var count = milestones.length;

while(count) {
count--;
if(_round(scrollDepth) >= milestones[count] && deepestScroll < milestones[count]) {
currentMilestone = deepestScroll = milestones[count];
if(currentMilestone != pastMilestone) {
pastMilestone = currentMilestone;
var index = count;
window.clearTimeout(timeoutID);
timeoutID = window.setTimeout(pushMilestone(index), threshold);
}
count = 0;
}
}
};
})();
</script>

Что настроить в коде:

scroll_as_threshold = 2000 — пользователь должен находиться на уровне прокрутки 2 секунды, чтобы событие сработало
scroll_as_milestones = [0, 25, 50, 75, 90, 100] — пороги прокрутки в процентах
trackZero = false — отслеживать ли 0% (первый заход на страницу)

В качестве триггера активации выберите Инициализация — Скролл. Сохраните тег.

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

Перейдите Триггеры → Добавить триггер. Выберите тип Специальное событие.

В поле Название события укажите scroll-milestone. Это имя события прописано в коде выше.

Назовите триггер Custom Event — scroll-milestone и сохраните.

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

Перейдите Переменные → Добавить переменную. Выберите тип Переменная уровня данных.

В поле Имя переменной уровня данных укажите milestone. Это имя прописано в коде — оно передаёт пороговые значения (25, 50, 75 и т.д.).

Назовите переменную DLV milestone и сохраните.

Шаг 5: Создание целей в Яндекс.Метрике

Откройте Яндекс.Метрику, перейдите Цели → Добавить цель. Выберите тип JavaScript-событие.

Создайте 2 цели для скролла:

Цель 1: Скролл до цен (50%)

Название: Скролл до блока с ценами
Идентификатор: scroll_50
Условие: Совпадает

Цель 2: Скролл до формы (75%)

Название: Скролл до формы заявки
Идентификатор: scroll_75
Условие: Совпадает

Сохраните цели.

Шаг 6: Создание тега Яндекс Метрики в ЯТМ

Вернитесь в ЯТМ, перейдите Теги → Добавить тег. Выберите шаблон Яндекс Метрика.

Если шаблона нет, добавьте его через Шаблоны из каталога.

Заполните поля:

Название: Яндекс Метрика — Глубина прокрутки
ID счётчика: ваш номер счётчика (например, 98765432)
Идентификатор цели: scroll_{{DLV milestone}}

Эта конструкция автоматически подставит значение из переменной (25, 50, 75), и событие передастся в Метрику как scroll_25, scroll_50, scroll_75.

В качестве триггера выберите Custom Event — scroll-milestone. Сохраните тег.

Цель 3: Клик по полю формы (например, по полю «Телефон»)

Шаг 1: Найти идентификатор поля

Откройте лендинг, нажмите правую кнопку мыши на поле телефона → Просмотр кода. В открывшемся окне найдите атрибут id или class поля.

Пример: <input id="phone-input" type="tel">.

Если id нет, используйте CSS-селектор или class.

Шаг 2: Создание триггера клика

Перейдите Триггеры → Добавить триггер. Выберите тип Клики — все элементы.

В условиях активации укажите Некоторые события:

Click Element ID → равно → phone-input

Если используете CSS-селектор: Click Element → соответствует CSS-селектору → input[type="tel"].

Назовите триггер Клик по полю телефона и сохраните.

Шаг 3: Создание цели в Метрике

В Яндекс.Метрике создайте цель JavaScript-событие с идентификатором form_field_click.

Шаг 4: Создание тега в ЯТМ

Создайте тег Пользовательский HTML с кодом:

<script>
ym(98765432, 'reachGoal', 'form_field_click');
</script>

Замените 98765432 на ваш номер счётчика.

В качестве триггера выберите Клик по полю телефона. Сохраните и опубликуйте.

Цель 4: Начало заполнения формы (2+ поля заполнено)

Код для отслеживания заполнения полей

Создайте тег Пользовательский HTML с кодом:

<script>
(function() {
  var form = document.querySelector('form');
  var fieldsCount = 0;
  var trackedFields = form.querySelectorAll('input[type="text"], input[type="tel"], input[type="email"]');
  
  trackedFields.forEach(function(field) {
    field.addEventListener('blur', function() {
      if (field.value !== '') {
        fieldsCount++;
        if (fieldsCount >= 2) {
          ym(98765432, 'reachGoal', 'form_interaction');
          fieldsCount = 0; // Сбрасываем, чтобы событие сработало один раз
        }
      }
    });
  });
})();
</script>

Замените 98765432 на номер счётчика. В Метрике создайте цель form_interaction.

Триггер активации: Инициализация (код выполнится при загрузке страницы).

Цель 5: Отправка формы

Вариант 1: Через атрибут формы (для простых форм)

Если у вас HTML-форма, добавьте в тег <form> атрибут onsubmit:

<form action="#" method="post" onsubmit="ym(98765432, 'reachGoal', 'form_submit'); return true;">
  <input name="phone" type="tel" placeholder="Телефон">
  <input type="submit" value="Отправить">
</form>

Замените 98765432 на номер счётчика.

Вариант 2: Через Яндекс Тег Менеджер (для Tilda, WordPress)

Создайте триггер Клики — все элементы с условием:

Click Element → соответствует CSS-селектору → button[type="submit"]

Создайте тег Пользовательский HTML:

<script>
ym(98765432, 'reachGoal', 'form_submit');
</script>

Триггер: Клик по кнопке отправки.

В Метрике создайте цель form_submit.

Проверка через режим отладки

Нажмите Предварительный просмотр → Открыть предварительный просмотр. Откроется лендинг с параметром _ytm_preview в URL.

Внизу страницы появится панель отладки ЯТМ. Перейдите на вкладку Events и выполните прокрутку, клик по полю, отправку формы. Если всё настроено правильно, на шкале событий появятся достижения целей: scroll_50, scroll_75, form_field_click, form_interaction, form_submit.

Опубликуйте контейнер ЯТМ, чтобы настройки применились ко всем пользователям.