Веб-аналитика

Перенос целей из Google Tag Manager в Яндекс Тег Менеджер. Часть 6

19.08.2025

Содержание

Нестандартные настройки с помощью тега «Пользовательский HTML»

Введение

Здравствуйте! Меня зовут Артём, и в этой статье мы завершим заниматься настройкой аналитики в GTM и YTM.

В предыдущих статьях:

Если не читали – рекомендую ознакомиться. А сейчас мы разберём некоторые дополнительные отслеживания событий, которые вам тоже могут пригодиться.

В этой статье я опишу настройку и перенос в YTM таких целей:

  1. Отслеживание Ошибки 404»;
  2. Отслеживание поиска по сайту;
  3. Отслеживание вертикального скролла по сайту.

Отслеживание ошибки 404

На аудитах Яндекс Метрики я часто вижу, что эта цель не отслеживается. Поэтому для начала предлагаю вспомнить, зачем нам вообще отслеживать, когда пользователь попадает на страницу с ошибкой 404?

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

  • внутренние или внешние битые ссылки;
  • опечатки в каких-то URL;
  • неправильные редиректы после смены дизайна или переезда сайта.

К тому же, после настроенной рекламы мы сможем посмотреть, по каким кампаниям, группам и объявлениям у нас посетители попадают на несуществующую страницу чаще. Это поможет вовремя принять меры, исправить положение и не сливать деньги впустую. У меня на примере как минимум 4 проектов цель: страница 404 помогла выявить скрытые битые ссылки на сайтах.

Более того, идентификация таких ошибок и их устранение помогает ещё и при SEO-оптимизации. Поэтому для более точной аналитики и повышение эффективности присутствия проекта в сети интернет, отслеживать ошибку 404 очень важно.

Сама настройка отслеживание этой цели, как в GTM, так и в YTM – очень проста в исполнении. Мы перенесём её довольно быстро, используя 1-й способ. Но есть и 2-й способ. В GTM его реализация тоже довольно несложная, чего не скажешь о его переносе в YTM. Но обо всём по порядку.

1 способ: глобальная переменная

Для начала немного теории.

Для каждой страницы сайта разработчики обычно прописывают:

  • Заголовок (Title) — отображается во вкладке браузера и часто используется в поисковой выдаче;
  • Описание (Meta Description) — краткое описание содержимого страницы, видимое в результатах поиска.

Сейчас мы научимся находить Title с помощью инструментов разработчика в браузере. Откройте консоль разработчика любого сайта при помощи уже известной вам комбинации клавиш Contr+Shift+J на Windows или Cmd + Opt + J на macOS. Я открою сайт своего клиента.

В языке JavaScript всё содержимое страницы находится в виде DOM (Объектной модели документа). Через DOM мы можем получить доступ к любому элементу на странице. К примеру, чтобы найти Заголовок title нам нужно обратиться к глобальной переменной document. Она содержит всю информацию о текущей странице. Более детально об объектной модели документа рекомендую почитать на этом сайте.

Давайте напишем в консоли разработчика: document.title и нажмём Enter. Перед нами появится заголовок страницы Title.

Находим заголовок страницы сайта

Когда вы попадёте на страницу с ошибкой 404 – увидите, что title, у такой страницы обычно соответствующий. При условии, если разработчик на сайте об этом позаботился – создал страницу с одноименным названием. Посмотрите на своём сайте, есть ли у вас такая страница. Для этого специально инициируйте переход на неверный адрес сайта – допустите ошибку в URL.

Я попадаю на такую страницу:

Страница с ошибкой 404

Теперь если ввести в консоль ту же команду: document.title – вы увидите заголовок этой страницы.

document.title соответствует названию заголовка страницы

Если этот title уникален и есть только на этой странице – по нему мы и сможем настроить отслеживание ошибки 404 в менеджере тегов. У меня в GTM уже всё настроено. Сейчас мы просто перенесём всю настройку в YTM.

ШАГ 1. Переносим переменную

Открываем в GTM вкладку переменные, находим пользовательскую переменную «Переменная JavaScript» и копируем имя переменной. Мы уже хорошо с ним знакомы: document.title

Создаём переменную JavaScript document.title

Теперь открываем YTM и создаём точно такую же переменную.

Cоздаём переменную JavaScript document.title в YTM

ШАГ 2. Переносим триггер

Теперь открываем в GTM вкладку триггеры. Тип триггера «Просмотр страницы». В качестве условий активации ранее созданная переменная, оператор равно, а в значениях стоит тот самый заголовок страницы, отслеживать который нам нужно – Ошибка 404. У вас может быть свой.

Настраиваем триггер «Просмотр страницы» с ошибкой 404 в GTM

Переносим этот триггер в YTM. Создаём точно такой же триггер, как и в GTM.

Настраиваем триггер «Просмотр страницы» с ошибкой 404 в YTM

ШАГ 3. Переносим тег

Теперь нам остаётся только перенести тег для передачи события в Яндекс Метрику. В GTM я прописывал всё через Пользовательский HTML-тег. Но вместе с событием reachGoal я передаю в Метрику ещё и параметры события: страницу, на которой произошла ошибка и страницу, с которой перешли на страницу 404. Эти параметры очень важны для быстрого понимания, где именно у нас находится битая ссылка.

Чтобы настроить передачу этих параметров, я обращаюсь к встроенным переменным Referrer и Page URL. Для этого я просто прописываю в Пользовательском HTML-теге именно такую конструкцию:

<script>
ym(XXXXXX, 'reachGoal', '404', {
page_url: '{{Page URL}}', referrer: '{{Referrer}}'
});
</script>

Помните, что, вводя на клавиатуре дважды фигурные скобки «{{», мы обращаемся к переменным. В этом Пользовательском HTML-теге такая же логика. Вместе с целью мы передаём ещё и 2 параметра.

Передаём в Яндекс Метрику событие «Ошибка 404» и параметры события

В качестве триггера используем триггер с шага 2.

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

Идентификатор цели у меня уже был создан в Метрике. Я включил в теге поле params и написал правильную комбинацию:

{"Откуда пришли":"{{ Referrer }}","Куда попали":"{{ Page URL }}"}

Триггер – наша ошибка 404 с предыдущего шага.

Настраиваем тег Яндекс Метрики + дополнительные параметры события

Теперь остаётся лишь проверить в режиме отладки, правильно ли мы всё перенесли. Я специально перехожу по битой ссылке. И вижу в консоли разработчика следующее:

Событие и параметры события передаются в Я.Метрику корректно

Всё отлично: мы передали в Метрику и событие и его параметры!

2 способ: видимость элемента/Специально событие

Второй способ может понадобится, если разработчик у вас на сайте не дал название странице 404. И в консоли разработчика вы вдруг видите вот это:

На странице отсутствует document.title

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

Вот текст:

Текст «Страница не найдена»

Селектор элемента:

Селектор класса элемента «текст»

Вот изображение:

Изображение на странице с ошибкой 404

И селектор изображения:

Селектор класса для изображения

Я выбрал картинку. Теперь просто проинспектируем её или при помощи правой кнопкой мыши – Просмотреть код элемента, или при помощи комбинации Contr+Shift+C на Windows или Cmd + Opt + C на macOS. Находим селектор класса t478__top t-col t-col_6

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

.t478__top.t-col.t-col_6

Теперь создаём в GTM триггер «Видимость элемента».

  • Метод выбора: Селектор CSS.
  • Селектор элемента: .t478__top.t–col.t–col_6

Запускаем 1 раз на страницу.

Больше ничего не меняем – никаких дополнительных условий активации! И можем даже не ставить галочку «Регистрация изменений DOM», так как картинка загружается вместе с содержимым всей страницы. Если бы элемент появлялся на странице БЕЗ её перезагрузки – тогда эта галочка обязательна!

Настройка триггера «Видимость элемента» в GTM

Теперь остаётся только создать в GTM тег с передачей этого события в Яндекс Метрику, и задать ему в качестве триггера «Видимость элемента». И у нас также всё будет фиксироваться и отслеживаться корректно.

Но как я писал уже несколько раз ранее: в YTM нет триггера «Видимость элемента». И обычным копированием перенести такую настройку невозможно. И тем нем менее – решение есть. И сейчас мы тоже разберём его пошагово.

ШАГ 1. Создаём тег “Пользовательский HTML”

Для того, чтобы реализовать такую же логику отслеживания, придётся использовать собственный код JavaScript.

Ниже я приведу скрипт, который каждую секунду по CSS-селектору проверяет, появился ли на странице определённый элемент. Если элемент найден — то в слой данных dataLayer он отправляет специальное событие ‘error_404’ и перестаёт выполнять проверки:

<script>
// Селектор, по которому мы ищем появление элемента
var selector = ".t478__blockimg.t-bgimg.loaded";
var interval = setInterval(() => {
var visibleElement = document.querySelector(selector);

if (visibleElement) {
dataLayer.push( {
event: 'error_404' // Специальное событие
});
clearInterval(interval);
}
}, 1000)
</script>

Вы можете взять этот скрипт и использовать для настройки своих целей. Создаём Пользовательский HTML-тег. Вставляем наш скрипт, а в качестве триггера выбираем или «Просмотр страницы» или «Модель DOM готова».

Пользовательский HTML-тег в YTM

ШАГ 2. Создаём триггер «Специальное событие»

Так как триггера «Видимость элемента» в YTM нет. Мы обходим это через триггер «Специального события», который мы передаём в слой данных, когда на странице появляется нужный нам элемент.

Я назвал событие error_404, но вы можете придумать любое другое название:

Даём название событию

Создаём в YTM триггер «Специальное событие» с этим названием.

Создаём триггер «Специальное событие» в YTM

ШАГ 3. Создаём тег Яндекс Метрики

Этот шаг мы с вами уже проделывали в первом способе настройки. Но в этот раз в качестве триггера мы выбираем созданный на предыдущем шаге – триггер специального события error_404.

Создаём тег Яндекс Метрики со «Специальным событием» error_404

Далее мы как обычно заходим в режим отладки и проверяем работоспособность цели. Я проверил всё через панель отладки Яндекс Метрики _ym_debug=2

Проверяем работу цели в панели отладки Яндекс Метрики

Как видите, и цель и её параметры также передаются в систему аналитики корректно.

Я постарался показать вам, что в зависимости от ситуации, мы всё равно можем перенести из GTM в YTM отслеживание ошибки 404 или первым или вторым способом. Надеюсь, это инструкция вам поможет, а мы идём дальше.

Отслеживание поиска по сайту

Хотите знать, что именно ищут посетители на сайте? Тогда этот блок точно будет вам полезен. Особенно это актуально для интернет-магазинов — ведь поиск по товарам часто показывает, что именно интересует покупателей. У меня в качестве примера как раз интернет-магазин на Тильде. Отслеживание я уже настроил в GTM, поэтому сначала мы шаг за шагом разберём, как это работает там, а затем перенесём все настройки в YTM.

На сайте моего клиента поиск реализован дважды и по-разному:

  • как поиск по каталогу;

Поиск по каталогу

  • как поиск по сайту;

Поиск по сайту

Предлагаю начать с поиска по каталогу – его отследить проще.

Поиск по каталогу на сайте

Настройка поиска по каталогу GTM – основа

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

  1. Мы должны определить, что именно человек ищет на сайте и передать этот текст в систему аналитики вместе с JavaScript-событием.
  2. Нам нужно создать триггер, по которому мы будем передавать цель и параметры цели в Яндекс Метрику.

 Готово. Теперь давайте пойдём всё это реализовывать.

1 ШАГ. Определяем, что ищут на сайте

В GTM я начинал настройку через переменную «Собственный код JavaScript». Но для начала нам нужно сделать то, что мы уже умеем: проинспектировать поле поиска: или при помощи правой кнопкой мыши – Просмотреть код элемента, или при помощи комбинации Contr+Shift+C на Windows или Cmd + Opt + C на macOS. Находим нужный селектор поле поиска:

.t-store__filter__input.js-store-filter-search

Инспектируем поле поиска на сайте

Инспектирование элемента:

Находим нужный элемент в коде сайта, и копируем его

Переключаемся на консоль разработчика.

Давайте извлечём в консоль что-нибудь из поля поиска. Для этого нам нужно обратиться к найденному селектору через специальную команду.

Запоминайте:

document.querySelector('Ваш селектор').value

document.querySelector – это команда, которая ищет на странице сайта нужный нам селектор.

(‘.t-store__filter__input.js-store-filter-search’) – в круглых скобках мы обязательно указываем селектор, который нашли у элемента ранее, обязательно обрамляя его в одинарные кавычки «‘».

Теперь нам необходимо вывести в консоль то, что написано в строке поиска. Я написал фразу:

Фраза, которую я ввёл в поле поиска

Для этого к нашей комбинации через точку добавляем .value

Итоговая команда будет такой:

document.querySelector('.t-store__filter__input.js-store-filter-search').value

Если мы напишем всё верно, то в консоли должен появится следующий текст:

Таким образом команда document.querySelector(‘Ваш селектор’).value – универсальная. Но подойдёт только, если селектор на странице сайта единственный. Если это не так, то текст из поля поиска в консоли не появится.

Теперь нам нужно создать в GTM переменную «Собственный код JavaScript».

Создаём переменную «Собственный код JavaScript»

Сделать это нетрудно – сам GTM подсказываем нам, какой код мы должны добавить. Просто при создании переменной наведите курсор на вопрос и скопируйте пример:

Пример правильного написания кода есть в подсказках в самой переменной

function() {
    var now = new Date();
    return now.getTime();
  }

Теперь нам нужно просто адаптировать его под наш код из консоли, который вы уже знаете: document.querySelector(‘Ваш селектор’).value

У меня это:

function() {
var search_Catalog = document.querySelector('.t-store__filter__input.js-store-filter-search').value
return search_Catalog;
  }

var – это название переменной. Вы можете задать любое. Главное, чтобы во второй строке return оно было таким же.

После var search_Catalog ставите «=» и ту команду, которую скопировали из консоли браузера.

У меня получилось вот так:

Пример кода в переменной собственный код JavaScript

Благодаря этой переменной, мы сможем извлекать из строки поиска любой текст, который туда вводят посетители.

2 ШАГ. Создаём триггер

В качестве триггера мы можем взять Клик по элементу лупа.

Инспектируем элемент «лупа»

Это нетрудно, и создавать такие триггеры мы уже научились ещё во второй статье. Мы просто инспектируем этот элемент, находим селектор и указываем его в условиях активации триггера Клик – Все элементы через Click Element – соответствует селектору CSS

Создаём триггер, чтобы отслеживать клики по элементу «лупа»

3 ШАГ. Создаём тег Яндекс Метрики

Теперь нам остаётся только создать «Пользовательский HTML-тег» и передать вместе с параметрами в Яндекс Метрику событие «Поиск по каталогу». Уже привычная для вас конструкция, которую мы детально рассматривали во время настройки отслеживания страницы 404.

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

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

Триггер

Идём в режим отладки GTM и убеждаемся, что у нас всё работает корректно.

Проверка события в режиме отладки

Настройка поиска по каталогу GTM – отслеживаем Enter

Но мы предусмотрели не всё. Что если человек зайдёт с компьютера, введёт текст в поле и кликнет не по лупе, а, скажем, нажмёт на клавишу Enter? Я, например, делаю так очень часто, когда ищу что-то в интернете. Поэтому клик по клавише Enter может стать дополнительным триггером для нашего тега. Но нам нужно сразу учесть, чтобы цель срабатывала не всегда, при нажатии Enter, а только тогда, если заполнено поле, в котором посетитель что-то ищет.

Задача решается при помощи этого кода:

<script>
document.addEventListener('keydown', function(event) {
// Проверяем, что нажата клавиша Enter
if (event.key === 'Enter' || event.keyCode === 13) {
var searchField = document.querySelector('.t-store__filter__input.js-store-filter-search'); // замените селектор на свой!
if (searchField && searchField.value.trim() !== '') {
dataLayer.push({
event: 'Enter'
});
}
}
});
</script>

После var searchField = просто укажите ваш селектор, который мы искали для создания переменной «Собственный код JavaScript». Его нужно добавить на сайт при помощи Пользовательского HTML-тега с триггером «Просмотр страницы» или «Модель DOM готова» – то есть на все страницы сайта.

Тег

Пояснение: скрипт определяет, когда пользователь нажимает клавишу Enter, проверяет, заполнено ли поле с поиском, и создаёт в слое данных (dataLayer) специальное событие Enter.

Нам остаётся только создать триггер типа «Специальное событие» с названием Enter. И добавить его в тег Яндекс Метрики, который уже создали для отслеживания поиска на сайте. Оба триггера будут работать по условию ИЛИ.

Объединяем два триггера под одним тегом

Теперь идём в режим отладки, инициируем поиск по каталогу и жмём Enter. Клик по лупе отрабатывает корректно. Клик по клавише Enter работает только, когда в поле поиска есть какой-то текст.

Событие с параметром

Мы справились! Теперь можно переносить это решение в YTM!

Настройка поиска по каталогу YTM

Как вы уже догадались, перенести все настройки подчистую из GTM в YTM невозможно. Опять же из-за отсутствия переменной «Собственный код JavaScript». Тем не менее, потратив несколько часов на общение с нейросетями, ваш покорный слуга нашёл ответ, и теперь постарается сэкономить вам время на настройку. 😊

1 ШАГ. Создаём «Пользовательский HTML-тег»

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

<script>
function pushSearchEvent() {
  // Селектор поля поиска на сайте. Укажите свой.
    var searchField = document.querySelector('.t-store__filter__input.js-store-filter-search');
    if (searchField && searchField.value.trim() !== '') {
        dataLayer.push({
            event: 'Search',
            searchQuery: searchField.value.trim()
        });
    }
}
 
// Переключатель: true — отслеживать Enter, false — не отслеживать
var trackEnter = true;
 
if (trackEnter) {
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Enter' || event.keyCode === 13) {
            pushSearchEvent();
        }
    });
}
// Селектор клика по элементу Лупа. Укажите свой.
var searchButton = document.querySelector('.t-store__search-icon.js-store-filter-search-btn');
if (searchButton) {
    searchButton.addEventListener('click', function() {
        pushSearchEvent();
    });
} </script>

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

Так выглядит код в Пользовательском HTML-теге

Этот код прекрасен тем, что вы можете его индивидуально кастомизировать под свои нужды. Если для вас также важно отслеживать нажатие по клавише Enter, то ничего не меняйте, кроме селекторов элементов. Вам понадобится селектор для поля, в котором производится поиск на сайте и селектор элемента, по которому нужно кликнуть, чтобы инициировать сам поиск. У меня это элемент лупа.

Если же для вас не важно отслеживать клик по клавише Enter – то в строке var trackEnter = true;  true поменяйте на false.

Кроме того, когда посетитель на сайте начинает поиск, мы всё так же в слое данных запускаем «Специальное событие». Только теперь это событие Search с переменной searchQuery. Благодаря последней мы обходим отсутствие в YTM «Переменной собственный код JavaScript».

2 ШАГ. Создаём переменную уровня данных

На этом шаге мы просто создаём переменную уровня данных с именем searchQuery.

Создаём переменную уровня данных searchQuery

3 ШАГ. Создаём триггер

Теперь создаём триггер со специальным событием Search.

Да, всего 1 триггер – нам не нужны 2 триггера, как мы это делали в GTM. Клик по элементу лупа мы уже отслеживаем в Пользовательском HTML-теге из первого шага.

Создаём триггер «Специальное событие» Search

4 ШАГ. Создаём тег Яндекс Метрики

Ну и в завершении нам остаётся только передать в Яндекс Метрику нашу цель вместе с параметрами в виде текста, который люди вводили на сайте.

Создаём «Тег Яндекс Метрика», как мы делали уже множество раз. Указываем идентификатор цели, предварительно создав цель в Метрике. Добавляем поле params, и в нём, посредством обращения к переменной searchQuery передаём то, что посетители ищут на сайте.

Детальная настройка тега Яндекс Метрика

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

JS-событие с параметром событие

Также всё отлично срабатывает и в консоли разработчика в браузере: и при кликах по элементу лупа и при нажатии клавиши Enter.

Проверка событий через консоль разработчика

Поиск по сайту

На сайте моего клиента есть ещё и поиск по всему сайту. И на вашем сайте может быть такой же.

Поиск по сайту

И в случае с этим поиском, он – «живой». Он находит товары сразу, как только их вводят в поисковой строке. Клик по лупе или нажатие на Enter тут не актуальны. Чтобы настроить отслеживание и передавать параметры, нам понадобится совсем другой триггер.

Как только посетитель вводит текст – сразу появляются найденные товары

Сейчас я вам покажу, что можно сделать. И начнём мы снова с настройки в GTM.

Настройка поиска по сайту в GTM

Снова сначала думаем, как будем всё настраивать. Порядок настройки тут такой же, как и с поиском по каталогу.

1 ШАГ. Определяем, что ищут на сайте

На этом шаге мы можем с вами смело повторить всё то, что уже делали ранее:

  • инспектируем поле поиска;

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

  • находим нужный селектор;

Селектор элемента

  • пишем команду, чтобы извлечь значение через .value ;

Проверка в консоли разработчика

Убеждаемся, что текст извлекается корректно и идём на следующий шаг.

2 ШАГ. Создаём переменную «Собственный код JavaScript»

По аналогии с тем, как делали ранее, создаём в GTM пользовательскую переменную «Собственный код JavaScript».

function() {
var search = пишем команду из предыдущего шага
return search
}

В Google Tag Manager:

Создаём переменную Собственный код JavaScript

А теперь самое сложное и интересное.

3 ШАГ. Создаём триггер

Что выбрать в качестве триггера, если поиск «живой», и ответы не вызываются при клике по какому-либо элементу? После раздумий и рекомендаций более опытных коллег, я пришёл к выводу, что в данном случае лучше всего будет отслеживать переходы по ответам в поисковой выдаче.

Нужно только как-то учесть клики по нескольким элементам:

  • клик по цене, заголовку, описанию или изображению;

Клик по цене, заголовку, описанию или изображению

  • клик по кнопке «Показать ещё»;

Клик по кнопке “Показать еще”

  • клики по категориям, если ищут не один товар;

Клики по категориям, если ищут не один товар

Как же всё это учесть?

И тут нам очень поможет навык – находить на сайте селекторы класса.

Сначала я нашёл каждый блок элементов по отдельности, а затем объединил их в одно целое.

Можно выделить такие шаги:

1. Находим верхний заголовок в категории товаров

Находим верхний заголовок в категории товаров

2. Находим нижний заголовок в категории товаров

Находим нижний заголовок в категории товаров

3. Объединяем оба селектора в один

Для этого нужно просто поставить запятую и пробел между селекторами:

.t-search-widget__result__body.t-descr.t-descr_xs, .t-search-widget__result__title.t-name.t-name_xs

Затем проверяем, все ли элементы мы учли при помощи расширения CSS and XPath checker из Интернет-магазина Chrome. Расширение можно установить и на любой другой браузер. Настоятельно рекомендую!

Вписываете свой селектор

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

Подсвеченные элементы с помощью расширения

Это значит, что комбинированный селектор я сформировал верно.

4. Находим селектор кнопки «Показать ещё»

Проверяем его через расширение – селектор правильный.

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

5. Находим селектор всего блока с найденными товарами

Находим селектор всего блока с найденными товарами

Но по такому селектору мы не сможем настроить активацию триггера, так как не получится фиксировать клики по вложенным элементам. Для того, чтобы учесть и все вложенные элементы, необходимо через запятую добавить к селектору копию этого же селектора, а в конце добавить универсальный селектор «*».

Мой пример с селектором .t-search-widget__result_product-link будет таким:

.t-search-widget__result_product-link, .t-search-widget__result_product-link *

Теперь мы учтём и все вложенные элементы в каждом из блоков.

Учли каждый вложенный элемент

Если хотите более детально разобраться в отслеживании вложенных элементов в GTM/YTM с помощью универсального селектора «*», рекомендую ознакомиться с этим материалом на сайте Якова Осипенкова. Там всё изложено максимально подробно.

6. Финал: объединяем все селекторы в один

Дальнейшее объединение производим через запятую:

.t-search-widget__loadmore-btn.t-btn.t-btn_sm, .t-search-widget__result__body.t-descr.t-descr_xs, .t-search-widget__result__title.t-name.t-name_xs, .t-search-widget__result_product-link, .t-search-widget__result_product-link *

Найдя все необходимые селекторы и объединив их в один, мы можем, наконец-то, создать в GTM триггер, по которому будем передавать в Яндекс Метрику как цель, так и параметры события.

Используем триггер Клик – Все элементы. Условие активации – некоторые события – Click URL – соответствует селектору CSS – селектор.

Добавляем наш комбинированный селектор

4 ШАГ. Создаём тег Яндекс Метрики

Создаём Пользовательский HTML-тег и настраиваем всё так же, как делали уже неоднократно. В качестве триггера используем тот, что только что настроили на предыдущем шаге. Вместе с целью передаём в Метрику ещё и параметры события через созданную ранее переменную «Собственный код JavaScript».

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

В предварительном просмотре в GTM проверяем работу цели и триггера. Ищем товар в строке поиска, а затем проверяем клики по всем элементам. Радуемся своей работе – все цели работают корректно!

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

Как мы изначально и планировали, на сайте с «живым» поиском мы отслеживаем передачу события «Поиск по сайту» только после переходов на страницы с найденными товарами или категориями товаров.

Настройка поиска по сайту в YTM

И вот у нас остаётся завершающее действие – перенос только что проделанной настройки из GTM в YTM. И в отличие от поиска по каталогу, в случае с отслеживанием поиска по сайту мы с вами можем ограничиться встроенными инструментами Яндекс Тег Менеджера. В этот раз нам не придётся ничего выдумывать или писать какой-то специальный код при помощи нейросетей.

Нам просто понадобится другая переменная, чтобы заменить переменную «Собственный код JavaScript». Цель у нас с вами та же – извлечение того, что посетители сайта ищут в строке поиска. И вот какие настройки нам в этом помогут.

1 ШАГ. Создаём переменную «Адрес страницы»

Возможно, как специалисты по рекламе или аналитике, вы обращали внимание, что когда что-то ищете на сайтах – то что вы ищете отображается и в адресной строке браузера. Этот принцип работает и на очень многих сайтах. Например, я ищу на сайте «Турники». Смотрю в адресную строку и вижу:

Параметр search

В адресной строке отображается всё, что мы ищем:

Чтобы вы не ввели в строке поиска – это появится в адресной строке браузера

И этой механикой мы и воспользуемся, чтобы извлекать текст из поисковой строки на сайте. Для этого идём в переменные в YTM.

Жмём «Добавить переменную»

Выбираем переменную «Адрес страницы».

  • Тип компонента: «Запрос».
  • А в качестве «Ключа запроса», выбираем search.

Почему именно search?

Тут разработчики YTM приготовили для нас подсказку. Жмём на вопрос и читаем:

Справка по ключу запроса

У нас search – это ключ запроса. (У вас может быть свой).

search – ключ запроса

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

Создаём переменную в YTM и жмём «Сохранить».

Создаём переменную «Адрес страницы» в YTM

2 ШАГ. Создаём триггер (отслеживаем переход по всем элементам)

Триггер из GTM в YTM мы можем перенести 1 в 1, как он уже у нас настроен ранее.

  • Тип триггера: «Клики – все элементы».
  • Условия активации: «Click Element – соответствует селектору CSS» и наш комбинированный селектор из GTM.

Триггер поиска по сайту

3 ШАГ. Создаём тег Яндекс Метрики

Ну и в завершении по уже привычному для нас сценарию, мы создаём тег «Яндекс Метрика», чтобы передать цель вместе с параметрами в систему аналитики. Вся настройка остаётся стандартной.

ID счётчика подтягиваем из переменной Константа.

Указываем идентификатор цели из Яндекс Метрики. Добавляем поле params, в котором через специальное правило написание прописываем ключ и значение для параметров цели – это наша переменная «Адрес страницы»:

{"Искали в строке поиска":"{{search}}"}

Ну и в качестве триггера, по которому цель вместе с параметрами будет «улетать» в Яндекс Метрику, указываем наш триггер из шага 2.

Финальная настройка будет выглядеть так:

Настройка тега Яндекс Метрика

Не забываем проверить всё в «режиме отладки». Проверяем клики по всем элементам, которые должны активировать триггер. У меня всё работает прекрасно. Надеюсь, и у вас всё обязательно получится!

В режиме отладки всё работает корректно

Отслеживание вертикального скролла по сайту

Понимание того, насколько детально посетитель взаимодействует с сайтом, — важный поведенческий показатель. Он помогает нам оценить:

  • Насколько целевую аудиторию приводит на сайт реклама;
  • Удобство и юзабилити сайта;
  • Интересен ли сам контент на страницах сайта.

В Яндекс Метрике мы для этого обычно используем показатели отказов, глубину просмотра и время на сайте. Но дополнительно можно отслеживать и ещё один параметр — глубину скроллинга страницы. В самой Яндекс Метрике создать цель по скроллу напрямую нельзя, зато это легко реализовать через Google тег Менеджер. А теперь и в Яндекс тег менеджере. Пусть и не без определённой хитрости.

Но давайте по порядку.

Настраиваем отслеживание скролла в GTM

Итак, у нас уже привычная задача – нужно настроить передачу цели Scroll вместе с параметрами (процентом скролла) в Яндекс Метрику.

И в GTM всё решается довольно просто. Нужно настроить всего 1 триггер и 1 Тег.

ШАГ 1. Настраиваем триггер

В Google тег менеджере есть особый триггер «Глубина прокрутки», которого пока ещё нет в YTM. Чтобы его выбрать, заходим во укладку Триггеры.

Вкладка Триггеры в GTM

Жмём «Создать».

Создать

Жмём «Выбрать триггер».

Выбор триггера

И выбираем триггер из группы «Взаимодействия пользователей» – «Глубина прокрутки».

Триггер глубины прокрутки

В настройках триггера выбираем чек-бокс «Глубина вертикальной прокрутки». Горизонтальная нас не интересует. А во вкладке проценты прописываем или какой-то конкретный процент глубины прокрутки, или несколько через запятую. Если нажать на подсказку, можно прочитать важные особенности настройки:

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

Для нас это значит, что если мы хотим отслеживать уровни процента прокрутки, то лучше начинать не с 0% или 10%, а с 20–25%, чтобы триггер срабатывал не при загрузки главного экрана страницы, а только при скролле. Я решил начать с 25%.

Буду отслеживать такие проценты скролла: 25,50,75,100

Далее мы должны определить условия активации триггера.

Всего у нас есть 3 варианта:

  • Container Load (gtm.js)
  • DOM Ready (gtm.dom)
  • Window Load (gtm.load)

Опять же обратимся к справке GTM:

Событие “Container Load (gtm.js)” происходит как можно раньше после загрузки страницы. Событие “DOM Ready (gtm.dom)” происходит, когда модель DOM готова к обработке. ” Window Load (gtm.load) “ срабатывает, когда загрузится весь первоначальный контент страницы.

Я предлагаю оставить Window Load, чтобы начинать отслеживание уже после полной загрузки содержимого на посадочной странице.

Я сохраняю триггер вот в таком виде:

Создаём и кастомизируем триггер «Глубина прокрутки»

ШАГ 2. Настраиваем тег

Создание тега и его настройка не носит никакого необычного характера. Мы идём по уже хорошо протоптанной тропинке.

Создаём Пользовательский HTML-тег и в него добавляем скрипт с отслеживанием цели в Яндекс Метрике, и параметрами, извлекаемыми из встроенной переменной GTM Scroll Depth Threshold.

Используем такой код:

<script>
ym(XXXXXX, 'reachGoal', 'scroll', {
scroll_depth: '{{Scroll Depth Threshold}}'
});
</script>

Первую строчку мы, как вы уже знаете, берём со страницы настройки целей в Яндекс Метрике.

Копируем код цели для сайта из Яндекс Метрики

А вторую дописываем, чтобы передавать в Метрику вместе с целью ещё и параметры события:

Дополняем код, чтобы передавать в Яндекс Метрику и параметры события

Помним, что в GTM в Пользовательском HTML-теге мы можем через открытые фигурные скобочки {{ обращаться к любой встроенной или пользовательской переменной, которую создали. В данном случае, нам нужна встроенная переменная Scroll Depth Threshold.

Именно в неё будет подставляться процент глубины скроллинга на сайте. Наш финальный тег Яндекс Метрики вместе с триггером «Глубина прокрутки» будет выглядеть так:

Финальная настройка тега Яндекс Метрика

Но, если вы дошли так далеко и дочитали до этого момента – в благодарность я покажу, что в GTM, как и в YTM, есть более простой способ создания цели – официальный шаблон тега Яндекс Метрики. По умолчанию у вас в GTM его не будет, но вы можете его добавить, как мы добавляли в предыдущей статье Вариокуб – через Галерею шаблонов.

В окне поиска можно написать Yandex и искомый шаблон сразу же обнаружится:

Находим в галерее шаблон тега Яндекс Метрики

Добавьте шаблон тега в рабочую область.

Добавление в рабочую область

И теперь вы сможете использовать его при настройки любых целей в Яндекс Метрике и не только! Просто выбирайте этот тег вместо тега «Пользовательский HTML».

Вместо тега Пользовательский HTML теперь можем выбирать Official Yandex Metrica

Теперь создание тега упрощается.

Сначала указывайте номер счётчика.

Я обратился к переменной типа Константа (ID Яндекс Метрики у меня там).

Counter ID

Укажите метод, который вам нужен. Если у вас настройка цели – выбирайте Reach goal.

Action to perform – Reach goal

На следующем шаге указываем идентификатор цели. У меня это Scroll.

Goal ID

Остаётся настроить передачу параметров. Для этого раскрываем профессиональные настройки Метрики: Advanced Metrica Settings и добавляем название параметра и его значение.

Я передаю параметр scroll_depth, а значение выбираем из переменных, нажав на «плюс» или нажав две фигурные скобки на клавиатуре {{. Выбираем из выпадающего списка встроенную переменную Scroll Depth Threshold.

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

Всё. Теперь в качестве триггера также будет «Глубина прокрутки».

Итоговый тег получился вот такой:

Полностью настроенный тег Яндекс Метрика через официальный плагин

Выбирайте какая настройка отслеживания цели в Яндеккс Метрике для вас удобнее, той и пользуйтесь. Я же больше люблю 1-й вариант с «Пользовательским HTML-тегом».

В завершение в режиме отладки GTM проверяем, всё ли настроено корректно. Видим, что цель срабатывает не сразу, а, как и задумывалось, после начала скролла на сайте. Мы с вами решили начать отсчёт с 25%.

Цель Scroll с параметром 25% сработала

Скролим дальше.

Всё отлично: в панели отладки Яндекс Метрики поочерёдно срабатывает цель Scroll с параметрами 50%, 75% и 100%.

Цель Scroll и все параметры отрабатывают корректно

Теперь наша с вами задача перенести отслеживание глубины скроллинга в Яндекс Тег Менеджер. Сложность заключается в том, что в YTM нет ни триггера «Глубина прокрутки», ни встроенной переменной Scroll Depth Threshold

Тем не менее, решение тоже есть. Давайте его рассмотрим.

Настраиваем отслеживание скролла в YTM

Возможно, что вы читаете это руководство, когда в YTM уже появились все те инструменты, которых пока недостаточно для максимально простого переноса отслеживания глубины скролла из GTM в YTM. Поэтому я счёт важным позаботиться о том, чтобы эта настройка никогда не потеряла свою актуальность.

Вместе с нейросетью мы разработали такой код, который упраздняет как создание триггера, так и создание переменной. Нам даже для передачи цели и её параметров не понадобится создавать тег Яндекс Метрики. Вся настройка ограничивается всего одним тегом и триггером «Инициализация» (или любым другим по вашему желанию).

ШАГ 1. Он же последний

Создаём в YTM «Пользовательский HTML-тег» и добавляем в него такой код:

<script>
// Версия 1.1.2 — отслеживание глубины скролла с отправкой цели в Метрику
(function(){

// --- Настройки ---
var yaCounterId = XXXXXX; // ID счётчика Метрики
var goalName = 'ID_Goal'; // Название цели в Метрике
var paramName = 'params'; // Название параметра цели
var thresholdDelay = 2000; // задержка перед отправкой события (мс)
var milestones = [25, 50, 75, 100]; // точки скролла в %
var trackZero = false; // отслеживать ли 0%
// --- Конец настроек ---

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

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

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

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

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

function currentPercentageViewed(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 - (100 * (pixels_below / document_height));
}

function pushCleanupMilestones(index) {
milestonesFired.push(milestones[index]);
for (var j = 0; j < index; j++) {
if (!milestonesFired.includes(milestones[j])) {
milestonesFired.push(milestones[j]);
sendToMetrica(j);
}
}
}

function sendToMetrica(i) {
var label = formatLabel(i);
if (typeof ym === "function") {
ym(yaCounterId, 'reachGoal', goalName, {[paramName]: label});
}
}

function pushMilestone(index) {
pushCleanupMilestones(index);
sendToMetrica(index);
}

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]) {
var currentMilestone = deepestScroll = milestones[count];
if(currentMilestone != pastMilestone) {
pastMilestone = currentMilestone;
var index = count;
window.clearTimeout(timeoutID);
timeoutID = window.setTimeout(function(){
pushMilestone(index);
}, thresholdDelay);
}
count = 0;
}
}
}

})();
</script>

Небольшие пояснения к коду, которые важно знать.

  1. В строке var yaCounterId = XXXXXX; заменяете XXXXXX на номер вашего счётчика Яндекс Метрики.
  2. При необходимости меняете массив milestones (по умолчанию [25, 50, 75, 100]). Но вы можете добавить через запятую и другие значения.
  3. Идентификатор/название цели (ID_Goal) и параметра (params) можете легко кастомизировать под себя.

Вот и вся настройка! В качестве триггера выбираем «Инициализация». Идентификатор моей цели Scroll, а имя параметра – scroll_depth.

Финальная настройка тега Яндекс Метрика

Сохраняем тег и идём в режим отладки.

Как видите, и сама цель и процент глубины прокрутки в параметрах цели передаются в систему аналитики правильно. Надеюсь, этот код вам понравится, и вы захотите использовать его и на своих проектах, чему я буду очень рад!

Послесловие

На этом наше путешествие по настройке целей в Google Тег Менеджере и Яндекс Тег Менеджере подошло к концу. Я постарался как можно подробнее обо всём рассказать. Но самой главной моей задачей было показать, что даже сейчас, когда Яндекс Тег Менеджер находится в бете, в нём уже можно реализовать практически любые цели, которые мы так привыкли настраивать в GTM. Помимо этого, в качестве бонуса я показал множество базовых настроек, как в GTM, так и в YTM. Надеюсь, этот материал окажется для вас полезным в повседневной работе.

Итого, в 6 статьях мы разобрали такие настройки:

  • Отслеживание кликов по номерам телефонов;
  • Отслеживание кликов по email;
  • Отслеживание кликов по кнопкам на сайте;
  • Отслеживание отправки форм;
  • Отслеживание копирования телефонов, почт и любого текста;
  • Интеграцию любых сервисов;
  • Настройку целей в JivoSite;
  • Установку инструмента Вариокуб;
  • Отслеживание страницы 404;
  • Отслеживание поиска по сайту;
  • Отслеживание скроллинга по сайту.

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

Ещё раз благодарю, что дочитали до конца!

Желаю вам успехов в аналитике и пусть консоль разработчика в режиме отладки всегда показывает корректно срабатывающие цели.

Теги:
· ·
Категории:
Веб-аналитика
Артем Буц
Артем Буц

Специалист по контекстной рекламе в Я.Директ, Google Ads и таргетированной рекламы в ВКонтакте. Опыт 100+ проектов за 7 лет. С 2025 года начал свой путь в аналитике данных.

Добавить комментарий