Строим произвольные воронки на событиях в dataStudio
Очень часто, стандартных средств Google Analytics по воронкам, не хватает для необходимого визуального отображения движения пользователей по сайту.
А такие данные часто важны при различных тестах, да и вообще, понимания как ведет себя аудитория.
А такие данные часто важны при различных тестах, да и вообще, понимания как ведет себя аудитория.
Что можно делать сейчас?
Если мы говорим про Google Analytics, из существующих методов есть funnel visualization:
довольно старый инструмент, который в бесплатной версии Google Analytics, можно строить только на просмотрах страниц, и если мы хотим использовать события для воронок, то приходится создавать виртуальные страницы, дублирующие события. Кроме того, этот инструмент только показывает общее количество сессий, без возможности какой-либо сегментации, не считая выбора дат.
Также, есть функционал расширенной электронной торговли, в котором, нам никто не мешает передавать свои значения в нужные столбики:
Также, есть функционал расширенной электронной торговли, в котором, нам никто не мешает передавать свои значения в нужные столбики:
А особенно отчет checkout behaviour, в котором мы можем добавлять до 7 шагов. Проблема в том, что если настроена стандартная воронка, то со второй воронкой будет работать не очень удобно, кроме того, в один момент времени можно смотреть только один сегмент.
Используем DataStudio
DataStudio — простой инструмент для решения задач по визуализации данных, и главное в этом высказывании — простой, не смотря на то, что команда, которая работает над этим инструментом постоянно добавляет новый функционал, по сравнению с другими системами, такими как powerBi, количество возможностей у DataStudio сильно ограничено. Тем не менее, порог входа в использовании этого инструмента крайне низкий, и мы возьмем его для решении нашей задачи.
В DataStudio есть BarCharts, которые, если развернуть, будут похожи на воронки:
В DataStudio есть BarCharts, которые, если развернуть, будут похожи на воронки:
Где, в виде dimensions можно передавать event action, а в metrics — unique events. Если просто настроить события по факту загрузки каждого шага, возникает три проблемы:
— если пользователь уйдет с воронки, в рамках сессии, а затем вернется на следующий шаг, то его действие будет записано, то есть нет возможности, как в funnel visualization, поставить галочку "Required?". И не видно, куда именно пользователь отвалился с воронки.
— одна из особенностей dataStudio заключается в том, что мы не можем делать метрики на основе условий, те посчитать сколько пользователь попало в нужную нам воронку в отношении ко всем и сколько успешно дошло до конца, в отношении к тем кто зашел. Можно, конечно же, сделать цели, но слотов для целей не много, и если таких воронок будет много, то их не хватит.
— если воронок несколько, и, особенно их шаги пересекаются, то ничего не выйдет. Например, у нас есть воронки: main - category - product - cart - thankyou и category - product - cart - thankyou, то даже стандартными средствами их не разделить, вторая будет включена в первую.
— если пользователь уйдет с воронки, в рамках сессии, а затем вернется на следующий шаг, то его действие будет записано, то есть нет возможности, как в funnel visualization, поставить галочку "Required?". И не видно, куда именно пользователь отвалился с воронки.
— одна из особенностей dataStudio заключается в том, что мы не можем делать метрики на основе условий, те посчитать сколько пользователь попало в нужную нам воронку в отношении ко всем и сколько успешно дошло до конца, в отношении к тем кто зашел. Можно, конечно же, сделать цели, но слотов для целей не много, и если таких воронок будет много, то их не хватит.
— если воронок несколько, и, особенно их шаги пересекаются, то ничего не выйдет. Например, у нас есть воронки: main - category - product - cart - thankyou и category - product - cart - thankyou, то даже стандартными средствами их не разделить, вторая будет включена в первую.
Метрики в calculated fields с фильтрами
Во-первых, решим проблему с расчетом показателей на базе событий, то есть создадим метрики в DataStudio: какое количество вхождений в воронку и успешных достижений воронки.
Для этого, нам необходимо создать новый custom dimension с scope = session, назовем его sessionID, в GTM создадим новую переменную, типа custom javascript, и напишем туда следующее:
Для этого, нам необходимо создать новый custom dimension с scope = session, назовем его sessionID, в GTM создадим новую переменную, типа custom javascript, и напишем туда следующее:
function() {
var now = new Date();
return String(now.getTime()) + '.' + String(Math.round(Math.random()*10000000))
}
Эта переменная генерирует случайный идентификатор, который мы используем как идентификатор сессии. Он нужен нам для корректного расчета метрик в DataStudio.
Затем, необходимо создать новую custom dimension в Google Analytics с scope sessions и запомнить ее индекс:
Затем, необходимо создать новую custom dimension в Google Analytics с scope sessions и запомнить ее индекс:
Но, если мы оставим как есть, то при каждом новом событии tag manager переменная будет генерироваться заново, а нам нужно, чтобы она не изменялась во время всей сессии, поэтому создадим custom js тэг, в которой напишем следующее:
<script>
//30 min cookie
function setCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (30*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
if ({{session_id_cookie}}) {
setCookie('sessionID', {{session_id_cookie}});
} else {
setCookie('sessionID', {{sessionID}});
}
</script>
Правилом активации, сделаем Dom ready. Этот тэг будет проверять наличие sessionID, и если ее нет, то устанавливать, а если есть, до увеличивать время жизни куки до 30 минут (прямо как в google analytics).
А чтобы читать эту переменную, сделаем еще одну переменную в tag manager, типа 1st Party Cookie:
А чтобы читать эту переменную, сделаем еще одну переменную в tag manager, типа 1st Party Cookie:
И передадим это все в google analytics:
Как только соберутся данные, в DataStudio мы можем создавать calculated fields, используя dimensions:
COUNT_DISTINCT(CASE WHEN Event Category = 'funnel_main' THEN SessionID ELSE "" END)
Где, функция COUNT_DISTINCT посчитает количество сессий, которые подходят под условие Event Category = 'funnel_main':
COUNT_DISTINCT(CASE WHEN Event Category = 'funnel_main' THEN SessionID ELSE "" END)
Где, функция COUNT_DISTINCT посчитает количество сессий, которые подходят под условие Event Category = 'funnel_main':
А дальше, мы можем посчитать CR, создав новый calculated fields:
COUNT_DISTINCT(CASE WHEN Event Category = 'funnel_main' And Event Action = '4. thank you page' THEN SessionID ELSE "" END)
Или посчитать, сколько пользователей от общего, попали в воронку (тут тип поля лучше поставить процент):
main funnel users / sessions
COUNT_DISTINCT(CASE WHEN Event Category = 'funnel_main' And Event Action = '4. thank you page' THEN SessionID ELSE "" END)
Или посчитать, сколько пользователей от общего, попали в воронку (тут тип поля лучше поставить процент):
main funnel users / sessions
Передаем данные о прохождении воронок с помощью событий
Так как мы хотим посмотреть сразу несколько воронок, то нам нужны правила того, как пользователь попадает в воронку и как уходит из нее. Логика будет простая:
— если первое посещение сайта главная или категорийная или продуктовая страница, то передаем название воронки и шаг 1:
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_main', 'eventAction': '1. main page', 'eventLabel': ''})
Передаем, с помощью autoEvent (подробнее тут)
— если вторая или следующая страница, то смотрим название текущей воронки, смотрим предыдущий шаг и также вызываем autoEvent
— если пользователь уходит с воронки, то также вызываем соответствующее событие с информацией откуда ушел (с воронки какого типа и с какого шага)
Общий код будет выглядеть так:
— если первое посещение сайта главная или категорийная или продуктовая страница, то передаем название воронки и шаг 1:
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_main', 'eventAction': '1. main page', 'eventLabel': ''})
Передаем, с помощью autoEvent (подробнее тут)
— если вторая или следующая страница, то смотрим название текущей воронки, смотрим предыдущий шаг и также вызываем autoEvent
— если пользователь уходит с воронки, то также вызываем соответствующее событие с информацией откуда ушел (с воронки какого типа и с какого шага)
Общий код будет выглядеть так:
<script>
//30 min cookie
function setCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (30*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
if ({{session_id_cookie}}) {
setCookie('sessionID', {{session_id_cookie}});
} else {
setCookie('sessionID', {{session_id}});
}
//if first pageview
if (!{{start_session}}) {
//first step for main funnel
if ({{Page Path}} == '/') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_main', 'eventAction': '1. main page', 'eventLabel': ''})
setCookie('funnel_type', 'main');
setCookie('previous_page', 'main');
}
//first step for category or search funnel
if ({{pageType}} == 'Category' || {{Page Path}} == '/search/new') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_cat_search', 'eventAction': '1. cat or search page', 'eventLabel': ''})
setCookie('funnel_type', 'category/search');
setCookie('previous_page', 'category/search');
}
//first step for product funnel
if ({{pageType}} == 'Product') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_product', 'eventAction': '1. product page', 'eventLabel': ''})
setCookie('funnel_type', 'product');
setCookie('previous_page', 'product');
}
setCookie('start_session', 1);
//if second or more pageviews
} else {
//second step for main funnel
if ({{pageType}} == 'Category' || {{Page Path}} == '/search/new') {
if ({{funnel_type}} == 'main' && {{previous_page}} == 'main') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_main', 'eventAction': '2. category page', 'eventLabel': ''})
setCookie('previous_page', 'category/search');
}
}
if ({{pageType}} == 'Product') {
if ({{funnel_type}} == 'main' && {{previous_page}} == 'category/search') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_main', 'eventAction': '3. product page', 'eventLabel': ''})
setCookie('previous_page', 'product');
}
if ({{funnel_type}} == 'category/search' && {{previous_page}} == 'category/search') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_cat_search', 'eventAction': '2. product page', 'eventLabel': ''})
setCookie('previous_page', 'product');
}
}
if ({{Page Path}} == '/moyobasket/basket.html' && {{previous_page}} == 'product') {
if ({{funnel_type}} == 'main') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_main', 'eventAction': '4. cart page', 'eventLabel': ''})
setCookie('previous_page', 'cart');
}
if ({{funnel_type}} == 'category/search' && {{previous_page}} == 'product') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_cat_search', 'eventAction': '3. cart page', 'eventLabel': ''})
setCookie('previous_page', 'cart');
}
if ({{funnel_type}} == 'product' && {{previous_page}} == 'product') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_product', 'eventAction': '2. cart page', 'eventLabel': ''})
setCookie('previous_page', 'cart');
}
}
if ({{Page Path}} == '/moyobasket/proceed.html') {
if ({{funnel_type}} == 'main' && {{previous_page}} == 'cart') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_main', 'eventAction': '5. checkout page', 'eventLabel': ''})
setCookie('previous_page', 'checkout');
}
if ({{funnel_type}} == 'category/search' && {{previous_page}} == 'cart') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_cat_search', 'eventAction': '4. checkout page', 'eventLabel': ''})
setCookie('previous_page', 'checkout');
}
if ({{funnel_type}} == 'product' && {{previous_page}} == 'cart') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_product', 'eventAction': '3. checkout page', 'eventLabel': ''})
setCookie('previous_page', 'checkout');
}
}
if ({{pageType}} == 'ThankYouPage') {
if ({{funnel_type}} == 'main' && {{previous_page}} == 'checkout') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_main', 'eventAction': '6. thank you page', 'eventLabel': ''})
}
if ({{funnel_type}} == 'category/search' && {{previous_page}} == 'checkout') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_cat_search', 'eventAction': '5. thank you page', 'eventLabel': ''})
}
if ({{funnel_type}} == 'product' && {{previous_page}} == 'checkout') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'funnel_product', 'eventAction': '4. thank you page', 'eventLabel': ''})
}
}
//if user exits from funnel
if ({{pageType}} != 'ThankYouPage' && {{Page Path}} != '/moyobasket/proceed.html' && {{Page Path}} != '/moyobasket/basket.html' &&{{pageType}} != 'Product' && {{pageType}} != 'Category' && {{Page Path}} != '/search/new' && {{previous_page}} != 'other') {
dataLayer.push({'event': 'autoEvent', 'eventCategory': 'exitfunnel_'+{{funnel_type}}, 'eventAction': {{Page Path}}, 'eventLabel': {{previous_page}}})
setCookie('previous_page', 'other');
}
//increment, count of pages
setCookie('start_session', parseInt({{start_session}}) + 1);
}
</script> После чего в dataStudio делаем BarCharts, переворачиваем его, и ставим в dimensions EventAction, а в metrics — unique events. И устанавливаем фильтр соответствующей воронки:
Также, элементом filter control, выставляем фильтры по типу устройств и трафика.
