Цель глубина скроллинга страниц сайта, в Яндекс Метрике с Помощью Яндекс Тег-менеджера.

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

• Время на сайте
• Отказы
• Глубина просмотра (в страницах)

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

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

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

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

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

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

А еще на основе ==Глубины скроллинга== можно перестроить порядок блоков, чтобы доставить взору посетителя нужный контент как можно быстрее, + в рекламе для товарных блогов или сайтов магазинов прокинуть цель для умного ретаргетинга в Я.Директе.

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

Переходим к настройке. Подключаем Яндекс Тег менеджер (ЯТМ)

Если мы впервые работаем с ЯТМ, его нужно включить:

• Переходим в меню настроек счетчика Я. Метрики
• Открываем раздел ==Счетчик==
• Включаем тумблер Тег менеджер и активируем чекбокс Пользовательский HTML

NOTE

Пользовательский HTML нужен для внедрения на сайт сторонних скриптов, которых нет в стандартных тегах ЯТМ. Глубина скроллинга как раз требует внедрения стороннего скрипта от ADSWERVE

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

Создаем триггер на событие глубина просмотра

• Переходим в раздел теги ЯТМ, нажимаем Добавить новый триггер
• В новом окне выбираем Инициализация
• Выбираем страницы на которых хотим отслеживать событие
  • Нажимаем Некоторые события
  • Page URL содержит или соответствует регулярному выражению
  • Перечисляем страницы для отслеживания скроллинга с помощью “/” и ссылки на страницу или раздел

Если нужно отслеживать скроллинг на всех страницах сайта, то в условиях активации тега оставляем Все события.

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

• Открываем раздел теги ЯТМ
• В новом окне выбираем Пользовательский HTML
• Вставляем готовый скрипт от ADSWERVE
  • Он подходит и для Google Tag Manager

Скрипт для отслеживания

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

Tip

Код учитывает скроллинг на всех типах устройств, с помощью мыши, ТВ пульта, тачпада и смартфонов. Вставляем его в Пользовательский HTML и сохраняем тег.

Подключаем специальное событие

• Открываем раздел триггеры и выбираем пункт Специальное событие
• В блок Название события прописываем scroll-milestone
• Название для триггера даем любое, например scroll-milestone

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

Глубина скроллинга считается отрезками в процентах, 10, 25, 50, 75 и т.д. Необходимо подготовить эту нарезку внутри ЯТМ.

• Открываем раздел Пользовательские переменные, нажимаем ==Добавить новую==
• Выбираем переменную уровня данных
• В имени переменной данных пишем ==milestone==
• Названием переменной указываем как ранее ==scroll-milestone==

Создаем тег отладки события

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

• Создаем новый тег и называем его ==Отладка глубины скроллинга==
• Выбираем тип ==Мини дебаггер триггеров и переменных==
• В переменную записываем ранее созданную но в фигурных скобках =={{scroll-milestone}}==
• Сохраняем тег

Настройка целей на процентовку в Я.Метрике

• Заходим в раздел цели Я.Метрики и нажимаем Добавить новую
• Создаем цель со следующими параметрами
  • Название – Глубина 10
  • Выбираем условие JavaScript событие
  • ==Идентификатор цели совпадает: Scroll_10==
• ==Создаем по аналогии цели для Scroll_25, Scroll_50 и т.д.==

Правим код скрипта от ADSWERVE

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

• Идем вновь в ЯТМ и меняем код пользовательского HTML-тега от Adswerve. Найдите строчки с этим кодом и удалите концовку с + и %:

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

Теперь будет так:

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

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

Тег для запуска отслеживания

• Создаем новый тег, называем его Я.Метрика-Глубина скроллинга
• Выбираем шаблон тега Я.Метрика из списка, если его нет то переходим внизу в ветку Шаблоны из каталога и выбираем там
• В ID счетчика прописываем номер Я.Метрики
• В идентификатор цели указываем конструкцию scroll_{{scroll-milestone}}
• В триггеры ставим специальное событие Созданное ранее
• Сохраняем тег

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

Триггер для связки между всеми

Для того чтобы все настроенные теги работали, нужно создать тег Инициализации. Он делается разделе Триггеры ЯТМ

• Открываем раздел триггеры и нажимаем добавить
• Название прописываем Инициализация а в Тип триггера выбираем так же вариант Инициализация
• В условиях активации оставляем Все события (
  • Это для того чтобы скроллинг считался на всех страницах, подходит если у вас лендинг, в случае многостраничного сайта лучше выбирать Некоторые события и указывать страницы
• Далее в основном теге не скроллинг сайта выбираем триггер Инициализация
  • В Отладке тега глубины просмотра и тега на Я.Метрика - Глубина скроллинга выбираем – Триггер на скроллинг сайта.

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

---

Боярский Глеб Юрьевич @GlebBoyarskii — Telegram | VK

Обо мне:
Настройка Яндекс Директ, Таргет, Google (Yandex) Tag Manager, разработка Power BI и DataLens дашбордов, глубокая аналитика рекламных систем, комплексная веб-аналитика и performance-маркетинг.

---