По умолчанию в Google Analytics отслеживать взаимодействие посетителей с контентом сайта довольно просто. Используя стандартный код отслеживания, вы сможете получать различную информацию такую как: время проведённое посетителем на странице (time on site), показатель отказов (bounce rate) и количество просмотров (pageviews).
Но иногда этих данных может быть недостаточно. Например, для блогеров или сайтов, где статьи и различные публикации основной контент, этих метрик может не хватать.
Мы хотим получать более детальную информацию по каждому сообщению или статье. Читают ли люди комментарии или только сообщение, статью? Открывают ли они во вкладках несколько сообщений?
Каким способом лучше получать детальную информацию о том как посетители сайта взаимодействуют с каждой страницей?
Эта статья о том, как измерить степень взаимодействия с контентом при помощи кастомизированного кода отслеживания Google Analytics (далее GA).
Бизнес цели
Как мы уже упоминали выше, наша цель получить лучшее представление о том, как посетители взаимодействую с каждой страницей сайта. Используя цели предложенные Thomas Baekdal мы будем отслеживать:
- как много людей прокручивает страницу;
- когда человек начинает прокрутку;
- когда человек достигает конца статьи (не конца страницы, а той области, где заканчивается статья или сообщение);
- какие посетители просто просматривали статьи, а какие их читали.
Задумайтесь о значимости! Мы сможем точно измерить количество действительно прочитанных статей. Мы даже сможем увидеть в каких статьях посетители читают комментарии и доходят до конца страницы.
Техника отслеживания
Всё выше перечисленное можно отслеживать с помощью стандартной функции отслеживания событий в GA. Суть заключается в том, что мы будем регистрировать события, когда происходят определенные действия. Мы будем регистрировать события, опираясь на прокрутке посетителями страницы.
Функция отслеживания событий в GA включает пять компонентов: категорию, действие, ярлык, значение и скрытый счетчик (category, action, label, value, implicit count). Нам необходимо определить данные, которые мы хотим видеть в отчетах GA.
Всю деятельность связанную с чтением мы объединим в одну категорию и назовем эту категорию Reading.
В этой категории будет четыре основных действия:
- Article load: будет измерять сколько раз статья загружалась в браузере. В общем-то, это другой счётчик количества просмотров страницы (стандартный pageviews). Это событие поможет нам понять контекст других событий, которые мы собрались отслеживать;
- Start Reading: отслеживает, когда посетитель прокручивает страницу вниз. Наступает, когда посетитель прокручивает на 150 пикселей вниз по странице. Это значение можно изменить. Также отслеживается сколько времени проходит после начала прокрутки страницы;
- Content Bottom: отслеживает, когда посетитель доходит до конца статьи и отслеживает сколько времени занимает прокрутка от начала до конца статьи;
- Page Bottom: отслеживает, когда посетитель достиг конца страницы и сколько времени это у него заняло.
Другая важная для нас информация это title и URL страницы. Эти данные нам нужны для того, чтобы выявить наиболее интересные статьи для посетителей и какие статьи влияют на дальнейшее вовлечение аудитории. GA автоматически отслеживает URL и заголовки страниц поэтому нет необходимости добавлять это в события.
Мы также будем использовать пользовательскую переменную (custom variable), чтобы различать посетителей по группам. Если посетителю потребовалось менее чем 60 секунд для достижения конца страницы – отнесем этого посетителя к группе Scanners. Но если посетителю потребовалось больше 60 секунд, чтобы достичь конца страницы – поместим его в группу Readers.
Наконец, мы установим события в качестве цели. Зададим одну цель для тех, кто достиг конца статьи, и одну цель для тех, кто достиг конца страницы. Это простой способ получить процент посетителей, которые совершили эти действия.
Код
Во-первых, мы будем использовать библиотеку jQuery. Убедитесь, что на вашем сайте подключена библиотека jQuery.
Ниже приводится код, не стесняйтесь его копировать, изменять или делиться им. Только не забывайте людей, которые внесли свой вклад в этот код!
jQuery(function($) {
// Debug flag
var debugMode = true;
// Default time delay before checking location
var callBackTime = 100;
// # px before tracking a reader
var readerLocation = 150;
// Set some flags for tracking & execution
var timer = 0;
var scroller = false;
var endContent = false;
var didComplete = false;
// Set some time variables to calculate reading time
var startTime = new Date();
var beginning = startTime.getTime();
var totalTime = 0;
// Track the aticle load
if (!debugMode) {
_gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]);
}
// Check the location and track user
function trackLocation() {
bottom = $(window).height() + $(window).scrollTop();
height = $(document).height();
// If user starts to scroll send an event
if (bottom > readerLocation && !scroller) {
currentTime = new Date();
scrollStart = currentTime.getTime();
timeToScroll = Math.round((scrollStart - beginning) / 1000);
if (!debugMode) {
_gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]);
} else {
alert('started reading ' + timeToScroll);
}
scroller = true;
}
// If user has hit the bottom of the content send an event
if (bottom >= $('.entry-content').scrollTop() + $('.entry-content').innerHeight() && !endContent) {
currentTime = new Date();
contentScrollEnd = currentTime.getTime();
timeToContentEnd = Math.round((contentScrollEnd - scrollStart) / 1000);
if (!debugMode) {
_gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]);
} else {
alert('end content section '+timeToContentEnd);
}
endContent = true;
}
// If user has hit the bottom of page send an event
if (bottom >= height && !didComplete) {
currentTime = new Date();
end = currentTime.getTime();
totalTime = Math.round((end - scrollStart) / 1000);
if (!debugMode) {
if (totalTime < 60) {
_gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]);
} else {
_gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]);
}
_gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]);
} else {
alert('bottom of page '+totalTime);
}
didComplete = true;
}
}
// Track the scrolling and track location
$(window).scroll(function() {
if (timer) {
clearTimeout(timer);
}
// Use a buffer so we don't call trackLocation too often.
timer = setTimeout(trackLocation, callBackTime);
});
});
Начнём с простого объявления переменных. Обратите внимание, значения некоторых переменных можно и нужно изменять.
// Debug flag
// CHANGE THIS TO false BEFORE INSTALLING
var debugMode = true;
// Default time delay before checking location
var callBackTime = 100;
// # px before tracking a reader
var readerLocation = 150;
// Set some flags for tracking & execution
var timer = 0;
var scroller = false;
var endContent = false;
var didComplete = false;
// Set some time variables to calculate reading time
var startTime = new Date();
var beginning = startTime.getTime();
var totalTime = 0;
Вы можете изменить переменные callBackTime и readerLocation. callbackTime – это время (в миллисекундах), которое браузер будет ждать до начала проверки положения полосы прокрутки. Исключает любые задержки при прокрутке.
readerLocation расстояние в пикселях, которое посетитель должен прокрутить до того как мы посчитаем это событием и классифицируем как начало чтения.
Теперь действие Article Load:
// Track the aticle load
if (!debugMode) {
_gaq.push(['_trackEvent', 'Reading', 'ArticleLoaded', '', , true]);
}
Далее код, который проверяет положение. Сначала собираются данные где находится посетитель на странице и как далеко он прокрутил.
bottom = $(window).height() + $(window).scrollTop();
height = $(document).height();
Затем мы начинаем проверку.
Во-первых, проверяем, прокрутил ли посетитель достаточно для того, чтобы произошло первое событие (в примере 150 пикселей).
// If user starts to scroll send an event
if (bottom > readerLocation && !scroller) {
currentTime = new Date();
scrollStart = currentTime.getTime();
timeToScroll = Math.round((scrollStart – beginning) / 1000);
if (!debugMode) {
_gaq.push(['_trackEvent', 'Reading', 'StartReading', '', timeToScroll]);
} else {
alert(‘started reading ‘ + timeToScroll);
}
scroller = true;
}
Внимание: вышеуказанное событие изменит ваш показатель отказов. Как только кто-то начинает прокручивать страницу мы не считаем это отказом. Таким образом, это событие будет занижать показатель отказов. Следует отметить, что эти события будут менять и время на сайте. Вы увидите, что время на сайте у вас будет расти.
Далее, если посетитель достиг конца статьи (мы проверяем div, который содержит статью), то считаем это наступлением события.
// If user has hit the bottom of the content send an event
if (bottom >= $(‘.entry-content’).scrollTop() + $(‘.entry-content’).innerHeight() && !endContent) {
currentTime = new Date();
contentScrollEnd = currentTime.getTime();
timeToContentEnd = Math.round((contentScrollEnd – scrollStart) / 1000);
if (!debugMode) {
_gaq.push(['_trackEvent', 'Reading', 'ContentBottom', '', timeToContentEnd]);
} else {
alert(‘end content section ‘+timeToContentEnd);
}
endContent = true;
}
Важно отметить, что выше приведенный код для блога, где div содержащий статью называется entry-content. Поэтому посмотрите в каком div содержится статья на вашем блоге.
Наконец, мы отслеживаем посетителей достигших конца страницы. Далее, делаем несколько вещей:
- считаем сколько времени на это потребовалось посетителю;
- отправляем в события;
- используем пользовательскую переменную, которая нужна нам для группировки посетителей. Если посетитель тратит больше чем 60 секунд на просмотр всей страницы, то помещаем его в группу Readers. Если посетитель тратит меньше 60 секунд, то помещаем его в группу Scanners.
Мы храним эту переменную в 5 слоте пользовательской переменной, потому что это у нас свободный слот. Вы можете использовать любой другой свободный слот. Подробнее о пользовательских переменных здесь.
// If user has hit the bottom of page send an event
if (bottom >= height && !didComplete) {
currentTime = new Date();
end = currentTime.getTime();
totalTime = Math.round((end – scrollStart) / 1000);
if (!debugMode) {
if (totalTime < 60) {
_gaq.push(['_setCustomVar', 5, 'ReaderType', 'Scanner', 2]);
} else {
_gaq.push(['_setCustomVar', 5, 'ReaderType', 'Reader', 2]);
}
_gaq.push(['_trackEvent', 'Reading', 'PageBottom', '', totalTime]);
} else {
alert('bottom of page '+totalTime);
}
didComplete = true;
}
Поскольку мы регистрируем время проведенное на странице, то мы можем использовать эти данные для того, чтобы повысить точность наших измерений. Мы выбрали 60 секунд произвольно. Как только накопится достаточно данных можно будет скорректировать это значение.
И наконец, код, который проверяет прокрутил ли посетитель до конца страницы:
// Track the scrolling and track location
$(window).scroll(function() {
if (timer) {
clearTimeout(timer);
}
// Use a buffer so we don’t call trackLocation too often.
timer = setTimeout(trackLocation, callBackTime);
});
Вот и весь код. Вы можете скопировать его здесь и разместить на своем сайте, если хотите.
Благодарности автора:
Nick Mihailovski — разработчика в Google (сидит напротив автора)
Thomas Baekdal — умный парень и публикуется на www.baekal.com
Avinash Kaushik — если вы не знаете кто это…
Joost de Valk — создатель Google Analytics для WordPress
Eivind Savio — блогер и GA консультант
Источник (оригинал на английском): http://cutroni.com/blog/2012/02/21/advanced-content-tracking-with-google-analytics-part-1/
Автор: Vaes
