Отслеживание глубины прокрутки с использованием Яндекс Тег Менеджера

28 июня, 2025

В предыдущем материале мы с вами настраивали глубину прокрутки для Яндекс Метрики, используя стандартный триггер и переменные от Google Tag Manager. В этом руководстве я покажу вам пример отслеживания скроллинга, но с использованием возможностей Яндекс Тег Менеджера.

Читать еще:

Отслеживание глубины прокрутки (Google Tag Manager и Universal Analytics, устар.);
Отслеживание глубины прокрутки (Google Tag Manager и Google Analytics 4);
Отслеживание глубины прокрутки (готовый плагин на jQuery).

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

К ним относятся:

Время на сайте - средняя продолжительность визита в минутах и секундах. Предполагается, что чем дольше пользователь остается на сайте, тем выше вероятность, что он заинтересован в вашем контенте (он читает, смотрит, взаимодействует). Но это работает и в обратную сторону - высокая продолжительность визита может свидетельствовать не об вовлеченности, а о том, что пользователи не могут найти нужную информацию, блуждают по сайту, либо сайт медленно загружается, и люди ждут, вместо того чтобы действовать;
Отказы - доля визитов, в рамках которых состоялся лишь один просмотр страницы, продолжавшийся менее 15 секунд. Высокий показатель отказов говорит о том, что пользователи не взаимодействуют с сайтом и сразу уходят. Это может происходить по разным причинам - несоответствие контента ожиданиям (например, клик по рекламе ведет на нерелевантную страницу), плохой UX (медленная загрузка, агрессивные баннеры, всплывающие окна), страницы с ошибками;
Глубина просмотра - количество страниц, просмотренных посетителем во время визита. Считается, что чем выше показатель, тем больше пользователь вовлечен в ваш контент.

Все эти показатели доступны в стандартных отчетах Яндекс Метрики на уровне визита:

Отказы, Глубина просмотра и Время на сайте

Примечание: в мае 2025 года Яндекс Метрика изменила подход в расчете времени на сайте, отказов и глубины просмотра.

Для оценки вовлеченности пользователей в ваш контент можно использовать еще один критерий – глубина просмотра (глубина прокрутки, глубина пролистывания, % скроллинга). Будь то это новостной сайт, блог, или страница приземления (landing page) со множеством экранов – глубина просмотра поможет вам оценить эффективность посадочной страницы. Вы всегда будете знать какой % скроллинга совершил пользователь, дошел ли он до того экрана/информации, которую вы хотели ему показать. И если нет, то произвести изменения в структуре контента.

На момент написания этого руководства в Яндекс Тег Менеджере нет триггера Глубина прокрутки (в Google Tag Manager такой триггер есть), поэтому стандартным способом настроить такое отслеживание не получится. Но мы можем использовать специальный скрипт на языке программирования JavaScript, который будет отслеживать скроллинг пользователя на странице с заданными пороговыми значениями.

Для этого нужно выполнить следующие настройки:

поставить галочку рядом с Пользовательский HTML;
создать триггер Инициализация для тега;
создать тег типа Пользовательский HTML и вставить в него специальный фрагмент кода;
создать триггер специального события;
создать пользовательскую переменную;
создать тег отладки;
создать JS-событие для отслеживания глубины прокрутки в Яндекс Метрике;
создать тег события Яндекс Метрики.

Разберем каждый этап настройки подробнее.

Содержание

Активация Тег Менеджер и пользовательского HTML

После того, как вы активировали Тег Менеджер в настройках счетчика Яндекс Метрика, перейдите на страницу Настройки - Счетчик:

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

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

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

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

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

Создание триггера

Перейдите в Яндекс Тег Менеджер и откройте раздел Триггеры. Нажмите на кнопку Добавить триггер:

Создание триггера

В открывшемся окне выберите тип триггера Инициализация:

Триггер "Инициализация"

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

Дополнительное условие активации триггера

Если вы планируете отслеживать глубину прокрутки на всех страницах сайтах, оставьте условия активации триггера Все события. Задайте название триггеру (например, Инициализация) и сохраните его.

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

Перейдите в раздел Теги и нажмите на кнопку Добавить тег:

Создание тега

В открывшемся окне выберите шаблон тега - Пользовательский HTML:

Шаблон тега "Пользовательский HTML"

В поле HTML вставьте нижеприведенный фрагмент кода:

<script>
  //Version 1.1.2 Scroll Tracking - 4/15/21
  //RP Added support for mobile fast touch scroll
  //YC Added global var setup so options are at top of code
(function(){

  // Checks to see if dataLayer has been initialized outside of library, if not
  // then initializes dataLayer
  dataLayer = window.dataLayer || [];

  //MODIFY
  //threshold = refresh time
  //milestones = milestones wished to be tracked

  //**OPTION 1**
  //Passes window threshold value to variable threshold
  scroll_as_threshold = 2000;

  //**OPTION 2**
  //Passes milestones array to variable milestones
  // expecting i.e. [[25, "low engagement"], [50, "medium engagement"], [75, "high engagement"])
  // Add in numbers (in order) of wanted %s
  scroll_as_milestones = [0, 25, 50, 75, 90, 100];

  //**OPTION 3**
  //Track 0% true or false
  // if true, scroll_as_milestones array must start with 0
  // tracking 0% event can be useful for easier calculated metrics
  var trackZero = false;

  //END OPTIONS SECTION

  //
  //DO NOT MODIFY BELOW THIS LINE
  //

  var threshold = scroll_as_threshold;
  var milestones = scroll_as_milestones


  // Determine whether user wants to track 0% depth.
  var lowerBound;
  if (trackZero === true) {
    lowerBound = -1;
  }
  else {
    lowerBound = 0;
  }

  // Setup record of which milestones have fired.
  var milestonesFired = [];

  // The previous lower bound is set to 0 so data is not sent with no activity
  var pastMilestone = lowerBound;

  // Initialize our timeoutID
  var timeoutID;

  // Function called to concatinize milestone value with milestone label to push
  // to dataLayer
  function formatLabel(i) {
      return milestones[i].toString() + "%";
  }

  // setup the math functions
  var deepestScroll = lowerBound, max = Math.max, _round = Math.round;

  // Get the window height
  function getwinheight(W, D){
    return W.innerHeight || (D.documentElement ? D.documentElement.clientHeight : D.body.clientHeight) || D.body.clientHeight;
  }

  // Get the scroll height from the top of the window
  function getscroll(W, D){
    return W.pageYOffset || (D.documentElement ? D.documentElement.scrollTop : D.body.scrollTop) || D.body.scrollTop;
  }

  // Get the document height
  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)
    );
  }

  // Calculate the percentage below the fold
  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));
    var percent_scrolled = 100 * (pixels_below / document_height);
    return (percent_scrolled);
  }

  // Calculate the percentage above the fold
  function currentPercentageViewed(window, document){
    return 100 - currentPercentageBelowFold(window, document);
  }

  function pushCleanupMilestones(index) {
    // Make sure you don't push the current depth as part of the cleanup.
    milestonesFired.push(milestones[index]);
    for (j = 0; j < index; j++) {
      if (!milestonesFired.includes(milestones[j])) {
        // Make sure the cleanup milestones only fire once.
        milestonesFired.push(milestones[j]);
        var label = formatLabel(j);
        dataLayer.push({
          "event": "scroll-milestone",
          "milestone": label
        });
      }
    }
  }

  // Called if user passes into new milestone and is there beyond the threshold time limit
  function pushMilestone(index) {
      // Calls formatLabel function to create label to push to dataLayer
      var label = formatLabel(index);
      pushCleanupMilestones(index);
      // Push data to dataLayer
      dataLayer.push({
        "event": "scroll-milestone",
        "milestone": label
      });
  }

  // Whenever user scrolls, we fire this lengthly function to see if user past a milestone and
  // if yes then push that data to dataLayer
  window.addEventListener("scroll", trackScroll);
  // mobile users don't scroll, they "touchmove", so track that as well.
  window.addEventListener("touchmove", trackScroll);

  function trackScroll() {
    // Make scrollDepth equal to percentage scrolled down web page
    var scrollDepth = currentPercentageViewed(window, document);
    // Counter for while loop
    var count = milestones.length;
    // Loops through each milestone to find if user has passed new milestone
    while(count) {
      // Decrease counter by 1
      count--;
      // Checks to see if current scrollDepth is over Milestone
      if(_round(scrollDepth) >= milestones[count] && deepestScroll < milestones[count]) {
        currentMilestone = deepestScroll = milestones[count];
        // Checks to see if currentMilestone is different than pastMilestone
        if(currentMilestone != pastMilestone) {
          // Makes pastMilestone equal to currentMilestone
          pastMilestone = currentMilestone;
          // Make index value equal to count
          var index = count;
          //Clears threshold timer if still in progress
          window.clearTimeout(timeoutID);
          // Start threshold timer to push to dataLayer in user stays in milestone
          timeoutID = window.setTimeout(pushMilestone(index), threshold);
        }
        // Terminate while loop
        count = 0;
      }

    }
  };

})();

</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

//Version 1.1.2 Scroll Tracking - 4/15/21

//RP Added support for mobile fast touch scroll

//YC Added global var setup so options are at top of code

(function(){

// Checks to see if dataLayer has been initialized outside of library, if not

// then initializes dataLayer

dataLayer = window.dataLayer || [];

//MODIFY

//threshold = refresh time

//milestones = milestones wished to be tracked

//**OPTION 1**

//Passes window threshold value to variable threshold

scroll_as_threshold = 2000;

//**OPTION 2**

//Passes milestones array to variable milestones

// expecting i.e. [[25, "low engagement"], [50, "medium engagement"], [75, "high engagement"])

// Add in numbers (in order) of wanted %s

scroll_as_milestones = [0, 25, 50, 75, 90, 100];

//**OPTION 3**

//Track 0% true or false

// if true, scroll_as_milestones array must start with 0

// tracking 0% event can be useful for easier calculated metrics

var trackZero = false;

//END OPTIONS SECTION

//DO NOT MODIFY BELOW THIS LINE

var threshold = scroll_as_threshold;

var milestones = scroll_as_milestones

// Determine whether user wants to track 0% depth.

var lowerBound;

if (trackZero === true) {

lowerBound = -1;

}

else {

lowerBound = 0;

}

// Setup record of which milestones have fired.

var milestonesFired = [];

// The previous lower bound is set to 0 so data is not sent with no activity

var pastMilestone = lowerBound;

// Initialize our timeoutID

var timeoutID;

// Function called to concatinize milestone value with milestone label to push

// to dataLayer

function formatLabel(i) {

return milestones[i].toString() + "%";

}

// setup the math functions

var deepestScroll = lowerBound, max = Math.max, _round = Math.round;

// Get the window height

function getwinheight(W, D){

return W.innerHeight || (D.documentElement ? D.documentElement.clientHeight : D.body.clientHeight) || D.body.clientHeight;

}

// Get the scroll height from the top of the window

function getscroll(W, D){

return W.pageYOffset || (D.documentElement ? D.documentElement.scrollTop : D.body.scrollTop) || D.body.scrollTop;

}

// Get the document height

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)

);

}

// Calculate the percentage below the fold

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));

var percent_scrolled = 100 * (pixels_below / document_height);

return (percent_scrolled);

}

// Calculate the percentage above the fold

function currentPercentageViewed(window, document){

return 100 - currentPercentageBelowFold(window, document);

}

function pushCleanupMilestones(index) {

// Make sure you don't push the current depth as part of the cleanup.

milestonesFired.push(milestones[index]);

for (j = 0; j < index; j++) {

if (!milestonesFired.includes(milestones[j])) {

// Make sure the cleanup milestones only fire once.

milestonesFired.push(milestones[j]);

var label = formatLabel(j);

dataLayer.push({

"event": "scroll-milestone",

"milestone": label

});

}

// Called if user passes into new milestone and is there beyond the threshold time limit

function pushMilestone(index) {

// Calls formatLabel function to create label to push to dataLayer

var label = formatLabel(index);

pushCleanupMilestones(index);

// Push data to dataLayer

dataLayer.push({

"event": "scroll-milestone",

"milestone": label

});

}

// Whenever user scrolls, we fire this lengthly function to see if user past a milestone and

// if yes then push that data to dataLayer

window.addEventListener("scroll", trackScroll);

// mobile users don't scroll, they "touchmove", so track that as well.

window.addEventListener("touchmove", trackScroll);

function trackScroll() {

// Make scrollDepth equal to percentage scrolled down web page

var scrollDepth = currentPercentageViewed(window, document);

// Counter for while loop

var count = milestones.length;

// Loops through each milestone to find if user has passed new milestone

while(count) {

// Decrease counter by 1

count--;

// Checks to see if current scrollDepth is over Milestone

if(_round(scrollDepth) >= milestones[count] && deepestScroll < milestones[count]) {

currentMilestone = deepestScroll = milestones[count];

// Checks to see if currentMilestone is different than pastMilestone

if(currentMilestone != pastMilestone) {

// Makes pastMilestone equal to currentMilestone

pastMilestone = currentMilestone;

// Make index value equal to count

var index = count;

//Clears threshold timer if still in progress

window.clearTimeout(timeoutID);

// Start threshold timer to push to dataLayer in user stays in milestone

timeoutID = window.setTimeout(pushMilestone(index), threshold);

}

// Terminate while loop

count = 0;

}

};

})();

</script>

Этот JavaScript-код - универсальное решение от компании Adswerve, размещенное на их официальном сайте. Он предназначен для отслеживания глубины прокрутки на веб-странице и отправки данных с использованием уровня данных (dataLayer). Скрипт подойдет как для Google Tag Manager, так и для Яндекс Тег Менеджера.

Скрипт:

позволяет задать собственные пороговые значения скроллинга (в %), при достижении которых срабатывает специальное событие;
учитывает не только обычную прокрутку с помощью колесика мыши на компьютере (событие scroll), но и мобильную прокрутку (так называемые тач-события touchmove), что обеспечивает точный трекинг независимо от типа устройства.

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

Настраиваемые переменные в коде

scroll_as_threshold = 2000 - порог времени (в миллисекундах, 2000 = 2 секунды) - пользователь должен находиться на уровне прокрутки 2 секунды, чтобы сработало событие. Позволяет убедиться, что запросы не приходят слишком быстро. Более низкая скорость запускает отслеживание чаще;
scroll_as_milestones = [0, 25, 50, 75, 90, 100] - массив пороговых значений вертикальной прокрутки в %, при достижении которых регистрируются события. По аналогии с настройками стандартного триггера Глубина прокрутки в Google Tag Manager вы можете задать через запятую свои собственные значения. Каждое значение отправляется только один раз. При достижении порогового значения 75%, в случае, если пользователь пропустил 25% и 50% (двигался быстро), то отправятся также 25% и 50%;

Пример настроек триггера глубины прокрутки в Google Tag Manager

var trackZero = false - отслеживать ли событие на 0% скроллинга (по умолчанию — нет/false). Если вы хотите отслеживать прокрутку 0% (срабатывает при первой прокрутке), измените значение на true.

Примечание: страницы с бесконечным контентом и одностраничными приложениями (SPA) не очень подходят для отслеживания на основе пороговых значений, поэтому не рекомендуется использовать этот JavaScript-код для таких типов сайтов.

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

Итоговый тег в Яндекс Тег Менеджере будет выглядеть так:

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

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

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

Снова перейдите на вкладку Триггеры и создайте новый триггер. В открывшемся окне выберите тип триггера Специальное событие:

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

В поле Название события укажите scroll-milestone:

Название события scroll-milestone

Именно такое название событие прописано в коде Adswerve, который вы добавили в Пользовательский HTML:

Название события, передаваемого на уровень данных - scroll-milestone

Задайте название триггеру специального события (например - Custom Event scroll-milestone) и сохраните его.

Создание пользовательской переменной

Триггер для срабатывания событий глубины прокрутки мы создали. Теперь необходимо добавить переменную, которая бы извлекала пороговое значение прокрутки (25, 50, 75, 90, 100 и т.д.) и передавала бы эти данные в Яндекс Метрику.

Для этого перейдите в раздел Переменные и добавьте новую переменную:

Создание переменной

В шаблоне переменной выберите Переменная уровня данных:

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

В поле Имя переменной уровня данных укажите milestone:

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

Именно такое значение прописано в коде Adswerve, который мы используем для отслеживания глубины прокрутки. Код помещает переменную в dataLayer с именем milestone, которая отслеживает пороговые значения %:

Переменная milestone в коде HTML

Задайте название пользовательской переменной уровня данных (например - DLV milestone) и сохраните ее.

Создание тега отладки

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

добавить еще один тег Мини дебагер триггеров и переменных;
использовать в режиме предварительного просмотра _ym_debug=2;

Создайте еще один тег в своем контейнере Яндекс Тег Менеджера. Задайте ему название (например: Отладка отправка формы). Выберите тип тега Мини дебагер триггеров и переменных. Если его нет в списке, также добавьте его через Шаблоны из каталога.

Шаблон тега - Мини дебагер триггеров и переменных

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

Примечание: подробнее о режиме предварительного просмотра в Яндекс Тег Менеджере читайте в этом руководстве.

У мини дебагера всего две настройки:

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

установка триггера;
поле для ввода какого-то значения вручную (например, текста об успешно отправленном событии) или указания переменной, чтобы в консоли выводилось ее значение, если оно изменяется во времени динамически.

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

Тег отладки события глубины прокрутки

Триггер - специальное событие, которое вы создали на предыдущем шаге (scroll-milestone);
Переменная - с помощью фигурных скобок {{ вы можете выбрать переменную уровня данных, созданную на предыдущем шаге (milestone), для отображения пороговых значений, которые преодолевает пользователь.

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

Режим отладки

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

В правом верхнем углу Тег Менеджера нажмите на кнопку Предварительный просмотр и дождитесь компиляции ссылки.

Предварительный просмотр

Как только это произойдет, нажмите на кнопку Открыть предварительный просмотр:

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

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

В отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview. Поскольку мы с вами создали тег мини дебагера триггеров и переменных, который выводит результат в консоли, нам необходимо открыть ее. Для этого перейдите на вкладку Console:

Вкладка "Console" в браузере

Теперь начните совершать вертикальную прокрутку на странице. Если вы все настроили правильно, тогда в консоли разработчика появятся уведомления о преодолении вами порогового значения, которые вы установили в переменной scroll_as_milestones. Помните про 0, 25, 50, 75, 90, 100?

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

Прокрутите страницу вниз до самого конца. Тогда вы должны увидеть все ваши значения:

Все пороговые значения глубины прокрутки

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

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

отслеживать каждое событие отдельно -> у каждого события будет собственный скроллинг (10, 25, 50, 75, 90% и т.д.);
создать одно событие, но внутри него передавать параметр события.

Тег Яндекс Метрики для разных событий

Когда пользователь на странице будет достигать определенного порогового значения, которое вы указали в настройках пользовательского HTML-тега (10, 25, 50, 75, 100%), будет срабатывать триггер, а он, в свою очередь, активировать тег Яндекс Метрики. В этом теге будет передаваться специальная конструкция события.

Перейдите в интерфейс Яндекс Метрики и в разделе Цели создайте цель с условием JavaScript-событие. В поле Идентификатор цели добавьте значение, соответствующее одному пороговому значению триггера Глубина прокрутки. Например, scroll_10:

Глубина прокрутки на 10%

Аналогичным образом создайте все оставшиеся цели на другие пороговые значения - 25, 50, 75 и 100 соответственно.

Созданные JS-события на каждый порог прокрутки

Вернитесь в Яндекс Тег Менеджер и измените код пользовательского HTML-тега от Adswerve. Найдите строчки с этим кодом:

Корректировка кода

Просто удалите в конце + "%", чтобы получилось так:

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

function formatLabel(i) {

return milestones[i].toString();

}

Сохраните изменения в теге. Это нужно сделать для того, чтобы наше JS-событие в Яндекс Метрике корректно отслеживало все пороговые значения прокрутки, без лишних символов %.

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

Название - произвольное название тега, характеризующее его действие (например: Яндекс Метрика - Глубина прокрутки);
Шаблон тега - Яндекс Метрика;

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

Шаблоны из каталога

И в открывшемся окне добавить тег Яндекс Метрика (Передача информации о достижении цели):

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

После этого вас вернет обратно в настройки тега, только в шаблонах уже будет значиться Яндекс Метрика.

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

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

Идентификатор цели Метрики

Первая часть scroll_ статическая, неизменная, а вот далее мы ссылаемся на переменную уровня данных {{ DLV milestone }} , которая извлекает пороговые значения вертикальной прокрутки, но уже без %. Таким образом, благодаря одному тегу мы сможем отследить разные события прокрутки и передать их в Яндекс Метрику отдельными событиями.

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

Глубина прокрутки для Яндекс Метрики

Сохраните тег. Проверить корректность передачи данных и срабатывания целей Яндекс Метрики с помощью режима предварительного просмотра и конструкции _ym_debug=2. Добавьте ее после параметра _ytm_preview через &, чтобы получилось так:

https://site.ru/?_ytm_preview=XXXXXXXXXXXXXXXX&_ym_debug=2

1	https://site.ru/?_ytm_preview=XXXXXXXXXXXXXXXX&_ym_debug=2

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

Вы можете сделать это даже в режиме Инкогнито, после компиляции ссылки для режима предварительного просмотра ЯТМ. Внизу страницы появится значок . Нажмите на него, чтобы открыть панель отладки. Перейдите на вкладку Events и выполните скроллинг на странице. Если вы все настроили корректно, то на шкале событий вы увидите достижения JS-целей:

События скроллинга

Через некоторое время данные по достигнутым целям отобразятся в Яндекс Метрике в отчете Конверсии:

Отслеживаемые конверсии в Яндекс Метрике

Тег Яндекс Метрики для одного события

Отслеживать глубину скроллинга в Яндекс Метрике можно и по-другому. Для этого не нужно создавать на каждое пороговое значение свое собственное событие, а можно воспользоваться только одним. Например, scroll:

Цель на одно событие

Вернитесь в Яндекс Тег Менеджер и создайте еще один тег. В открывшемся окне задайте следующие настройки:

Название - произвольное название тега, характеризующее его действие (например: Яндекс Метрика - Глубина прокрутки);
Шаблон тега - Яндекс Метрика;

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

{"Глубина скроллинга":"{{DLV milestone}}"}

1	{"Глубина скроллинга":"{{DLV milestone}}"}

, где вместо Глубина скроллинга вы можете задать свое собственное значение, характеризующее название параметра события, а в DLV milestone - название вашей переменной уровня данных, которую вы создали ранее (если у вас название другое - поменяйте на свое).

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

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

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

Итоговый тег Яндекс Метрики для отслеживания одного события scroll, но с параметром события, будет выглядеть так:

Глубина прокрутки для Яндекс Метрики

Сохраните тег. Проверить корректность передачи данных и срабатывания целей Яндекс Метрики можно точно так же - с помощью режима отладки и _ym_debug=2. Только теперь, когда вы будете выполнять скроллинг, вы не будете видеть разные события scroll_10, scroll_25 и т.д., а будете видеть событие с одним заданными названием (например - scroll):

Событие scroll

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

Переданный параметр события с пороговыми значениями прокрутки

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

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

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

Значения глубины скроллинга как параметр события

Метки: Adswerve, dataLayer, глубина прокрутки, параметры событий, Яндекс Метрика, Яндекс Тег Менеджер

Login

Регистрация

Отслеживание глубины прокрутки с использованием Яндекс Тег Менеджера

Активация Тег Менеджер и пользовательского HTML

Создание триггера

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

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

Создание пользовательской переменной

Создание тега отладки

Режим отладки

Тег Яндекс Метрики для разных событий

Тег Яндекс Метрики для одного события

Получайте бесплатные уроки и фишки

Еще статьи