Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Cервис мониторинга Google AdWords Quality Score
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
37
Битрикс24

Битрикс24

www.bitrix24.ru

28
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

9
Eczo.bike

Eczo.bike

www.eczo.bike

9
GIFTD

GIFTD

giftd.tech

7
Flowlu

Flowlu

flowlu.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Отслеживаем глубину прокрутки страницы через Google Tag Manager V2

6 893 49 В избранное Сохранено
Авторизуйтесь
Вход с паролем
​В этой статье я постараюсь описать, как легко и просто настроить отслеживание глубины скролинга вашей страницы (лендинга), всего сайта или интерес к статье в блоге. Для реализации данной возможности нам понадобится только GTM и Google analytics, даже не потребуется беспокоить программистов и менять код.

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

Мы будем использовать готовый скрипт Scroll Depth, спасибо Rob Flaherty за него.

Открыть скрипт

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

b_55686f0e7809c.jpg

Добавляем код в разделе настройка тега

b_55686f233ca52.jpg

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

У меня тег активируется на всех страницах, если вы хотите установить на какой то конкретный landing page или просто на отдельную страницу, укажите ее адрес в настройках.

b_55686f4056503.jpg

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

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

Создадим 4 Переменных уровня данных с такими настройками:

b_55686f678d65f.jpg

b_55686f71388b7.jpg

b_55686f7c6162c.jpg

b_55686f8538f36.jpg

Остался последний шаг – создать новый тег Google Analytics с отслеживанием события и настроить условия его выполнения:

b_55686f9c8ab8d.jpg

Условия активации тега:

b_55686fc887a1f.jpg

После того, как вы опубликуете свой контейнер, данные о глубине скролинга начнут сыпаться в Google Analytics.

b_55686fe0021ea.jpg

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

+10
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Администрация
Анонсировали вашу статью в основных социальных сетях ЦП:
http://vk.com/wall-33393308_345680
https://www.facebook.com/SMMrussia/posts/953410108017238

Спасибо за полезный материал!
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
И вам спасибо, жаль только, что название проекта не упомянули)
Ответить
Алексей Сергеев
Почему-то не работает. Вроде все по инструкции делал и перепроверил.
Ответить
Показать предыдущие комментарии
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
Такое выдает при загрузке страницы?
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
Вероятнее всего проблема в активации тега со скриптом, больше не знаю, что предположить. Могу помочь по скайпу, в комментариях очень сложно разобраться что к чему.
Ответить
Dmytro Lazarchuk
окей. завтра напишу. спасибо большое!
Ответить
Алексей Сергеев
Я там ниже написал, в чем проблема.
Ответить
Dmytro Lazarchuk
В шаблоне присутствуют недопустимые элементы HTML, CSS или JavaScript.
Ответить
Показать предыдущие комментарии
Dmytro Lazarchuk
копировал код прямо из статьи(
Ответить
Алексей Сергеев
Я с таким тоже столкнулся. Надо добавить <script> и </script> в начало и конец скрипта соответственно.
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
Мой код удалили, дали ссылку на min файл с гитхаба, этот скрипт действительно нужно вставить между тегами <script> </script>, как говорит Алексей.
Ответить
Dmytro Lazarchuk
ага, спасибо, уже разобрался. подсмотрел на скрине =)
Ответить
Алексей Сергеев
Разобрался, в чем была проблема. Не было строки запуска самого скрипта. Надо добавить в самый конец:
jQuery(function() {
jQuery.scrollDepth();
});

Если он был в вашем исходном коде — большое "спасибо" тем, кто правил статью, за потерянное время. Если же не было, то стоило бы добавить.
Ответить
Злой гений Евгений
Никак не получается настроить отслеживание конкретных элементов. Вроде прописываю айдишники (например, elements: ['bx_3485106786_6']), но события Elements в дебаггере GTM так и не могу добиться( У кого-нибудь получилось?
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
Вы пишете только название ID или вместе со кавычками и скобками различными?
Ответить
Злой гений Евгений
Пишу вместе с кавычками и скобками.
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
Если у вас ссылка (например) выглядит так a href="#" id="some-id"

То в GTM нужно писать только — some-id
Ответить
Fed
У меня тоже не работает.
Прописал

var defaults = {
minHeight: 0,
elements: ['article-top'],
percentage: true,
userTiming: true,
pixelDepth: true,
nonInteraction: true,
gaGlobal: false,
gtmOverride: false
};

Создал переменную

function () {
if ({{eventLabel}} === 'article-top') return 1;
return 0
}

На сайте так:
<div id="article-top"></div>

Нужно что-то еще сделать?
Ответить
George Mogilevtsev
парни, может кто-нибудь объяснить для чего именно предназначен Google Tag Manager? Не могу понять почему-то, хотя вроде не тупой :) Можно на конкретном примере, интересует в рамках мобильных приложений.
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
GTM — некий контейнер, если очень грубо нужен для того, чтобы 1 раз попросить программиста поставить его на все страницы сайта, а потом уже самому через web интерфейс добавлять любые счетчики, теги и тд. Можно создавать правила, на каких страницах какой счетчик активировать, а на каких нет. За 5 минут можно настроить отслеживание заполнения формы на сайте и передать данные в Google Analytics и многое многое другое. Для мобильных приложений (я тут не очень силен, если ошибаюсь, пусть меня поправят), принцип такой же, создаете контейнер, а в него складываете все счетчики, трекеры и тд, при этом не нужно делать каждый раз билд и обновлять приложение в сторах.
Ответить
George Mogilevtsev
Константин, я верно понял, что мы кладем в контейнер, например, все отправки событий и потом при помощи GTM можно включать, отключать события? То есть только в этом вся сила GTM или в чем то еще?

Если надо добавить отправку нового события, которое не добавлено в контейнер(не предусмотрели, например, что нам надо отправлять событие при нажатии вот этой вот кнопки), то GTM нам тут не поможет и все равно надо будет делать это в приложении и ждать аппрува?
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
Через GTM вы можете передавать в GA события, ставить другие счетчики (не залезая в код) и тд
Ответить
VladVlad
А разве Метрика этого не показывает по-умолчанию? Карта скроллинга...
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
Там функционал ограничен, в Га больше свободы.
Ответить
Игорь
Работает-не работает как и где узнать не понятно. "После того, как вы опубликуете свой контейнер, данные о глубине скролинга начнут сыпаться в Google Analytics."- куда именно ?
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
Данные о глубине - в отчетах по событиям GA, если они там есть, значит все работает)
Ответить
Игорь
Поиск по GA ничего не дал. А вот что показывает GTM
Ответить
Игорь
Мы открыли интернет-магазин cms на базе ocshop «ALLmart.biz.ua». После создания аккаунта в google webmasters наткнулись на неприятность в консоли настройки сайта нет выбора главного зеркала “Основной домен Только домены корневого уровня”, не обращая на это внимания продолжали наполнять магазин товарами. Через месяц посещаемость сайта резко упала, в некоторые дни до нуля, и это продолжается на протяжении полутора месяцев. Падение посещаемости совпало с дидос атакой на хостинг количество отказов с 40% возросло да 90% и продолжает увеличиваться. Аналогичная ситуация в Яндексе. Поиски информации по данному вопросу результатов не даёт. Помогите решить вопрос или направьте в нужную сторону.
Ответить
Sergey Mokrinskiy
Константин, добрый день! Все сделал по инструкции, но в отчете GA (Поведение-События-Страницы-Доп.параметр: Действие по событию) выдает to use this feature visit: EVENT-TRACKING.COM
Ответить
adStein
Cервис мониторинга Google AdWords Quality Score
Константин
Модераторы спарка, заменили мой код, на ссылку с кодом гитхаба, если копируете код с гитхаба, его нужно окружить тегами <script> </script>
Ответить
Sergey Mokrinskiy
Теги <script> </script> были изначально добавлены, т.ч. не в этом дело
Ответить
Fedor
Все сделал по инструкции. Добавил вокруг кода скрипта <script></script>.

Данные о скролинге не поступают в аналитикс.
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei
А зачем всё так усложнять?
Почему бы не использовать карту скроллинга от Яндекс Метрики или других сервисов?? В чём преимущества такого метода?
Ответить
Fed
Преимущество перед картой кликов - отчет в виде таблицы со списком страниц сайта и показателями уровня прокрутки для каждой страницы.
Ответить
Александр
Для большинства подойдет и карта скроллинга яндекс метрики и никаких проблем с настройкой
Ответить
Алексей Юрьевич
Здравствуйте. Можно ли использовать посетителей, дошедших до 50% страницы как конверсию? Как настроить это через события?
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать