Google Analytics Bag o’ Tricks презентация

Содержание

SUPERWEEK 2015 | #SPWK | @SimoAhava Simo Ahava | NetBooster @SimoAhava http://google.me/+SimoAhava simo.ahava@netbooster.fi www.simoahava.com

Слайд 1Google Analytics Bag o’ Tricks
Simo Ahava (NetBooster) – SUPERWEEK 2015


Слайд 2SUPERWEEK 2015 | #SPWK | @SimoAhava

Simo Ahava | NetBooster
@SimoAhava
http://google.me/+SimoAhava
simo.ahava@netbooster.fi
www.simoahava.com


Слайд 3SUPERWEEK 2015 | #SPWK | @SimoAhava
My (GA) Developer Philosophy


Слайд 4SUPERWEEK 2015 | #SPWK | @SimoAhava

If you build it, data will

come

Слайд 5SUPERWEEK 2015 | #SPWK | @SimoAhava


Слайд 6SUPERWEEK 2015 | #SPWK | @SimoAhava

The Web is (inherently) stateless


Слайд 7SUPERWEEK 2015 | #SPWK | @SimoAhava

User intent is untrackable in the

stateless Web

Слайд 8SUPERWEEK 2015 | #SPWK | @SimoAhava

The life span of a web

page

ENTRANCE

EXIT


Слайд 9SUPERWEEK 2015 | #SPWK | @SimoAhava

The life span of a web

page

ENTRANCE

EXIT


Слайд 10SUPERWEEK 2015 | #SPWK | @SimoAhava

No, browser cookies are not the

solution (or HTML Storage)

Слайд 11SUPERWEEK 2015 | #SPWK | @SimoAhava


document.cookie = 'returning=true';
document.cookie = 'articlesRead=3';


Слайд 12SUPERWEEK 2015 | #SPWK | @SimoAhava

They provide you with temporary state

only

Слайд 13SUPERWEEK 2015 | #SPWK | @SimoAhava

Google Analytics is stateful


Слайд 14SUPERWEEK 2015 | #SPWK | @SimoAhava

From https://developers.google.com/analytics/devguides/platform/customdimsmets


Слайд 15SUPERWEEK 2015 | #SPWK | @SimoAhava

Google Analytics is better at pattern-matching

than a browser

Слайд 16SUPERWEEK 2015 | #SPWK | @SimoAhava

But it requires quality input


Слайд 17SUPERWEEK 2015 | #SPWK | @SimoAhava

When the stateless and the stateful

unite

Meaningful data

Meaningful data

Meaningful data


Слайд 18SUPERWEEK 2015 | #SPWK | @SimoAhava

How do we find and collect

meaningful data?

Слайд 19SUPERWEEK 2015 | #SPWK | @SimoAhava

No, how do we ask the

right questions?

Слайд 20SUPERWEEK 2015 | #SPWK | @SimoAhava
When a user doesn’t view a

page, is it a Page View?

Слайд 21SUPERWEEK 2015 | #SPWK | @SimoAhava

Surely not?

* Obligatory Conference Presentation Meme


Слайд 22SUPERWEEK 2015 | #SPWK | @SimoAhava
APIS, WORKERS, LIBRARIES, SPECIFICATIONS
ECMAScript
DOMSettableTokenList
Web

Audio
AutocompleteErrorEvent
Animation Timing
DOMTokenList
DOM
Fullscreen
Drag and Drop
SVG
Indexed DB
DocumentFragment
DOMError
File API
ChildNode

Media
DOMImplementation
Web Sockets and Messaging
Event
WebGL
Visibility
Web Storage
Document
EventSource
CSS Object Model
Comment
Web Workers
Attr
WebRTC
Selectors

DocumentType
Offline
Element
CharacterData
Browser
Canvas
EventListener
CustomEvent
Shadow DOM
CloseEvent
File System API
BroadcastChannel
Typed Arrays
Pointer Lock
Elements


Слайд 23SUPERWEEK 2015 | #SPWK | @SimoAhava
APIS, WORKERS, LIBRARIES, SPECIFICATIONS
ECMAScript
DOMSettableTokenList
Web Audio


AutocompleteErrorEvent
Animation Timing
DOMTokenList
DOM
Fullscreen
Drag and Drop
SVG
Indexed DB
DocumentFragment
DOMError
File API
ChildNode

Media
DOMImplementation
Web Sockets and Messaging
Event
WebGL
Visibility
Web Storage
Document
EventSource
CSS Object Model
Comment
Web Workers
Attr
WebRTC
Selectors

DocumentType
Offline
Element
CharacterData
Browser
Canvas
EventListener
CustomEvent
Shadow DOM
CloseEvent
File System API
BroadcastChannel
Typed Arrays
Pointer Lock
Elements


Слайд 24SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API


Слайд 25SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API
Visible: document['hidden'] = false
Hidden:

document['hidden'] = true

Слайд 26SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API
Visible: document['hidden'] = false
Hidden:

document['hidden'] = true

document.addEventListener('visibilitychange', function() {
dataLayer.push({
'event' : 'visibilityChange'
});
});

Слайд 27SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API
Meaningful data:

When a page

is loaded in hidden state, do not send a Page View.

If the visibility of the page changes from hidden to visible, then
send the Page View.

Слайд 28SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API


Слайд 29SUPERWEEK 2015 | #SPWK | @SimoAhava
DETAILED GUIDE
http://goo.gl/DFgxmi


Слайд 30SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
1. Page is loaded in

the browser

Page is loaded in the browser
Is the Visibility API supported?
Is the page visible?
Is a Visibility Change detected?

yes / no

FIRE PAGE VIEW …and remove visibility listener…
…and end the process…


Слайд 31SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
2. Is the Visibility API

supported?

Page is loaded in the browser
Is the Visibility API supported?
Is the page visible?
Is a Visibility Change detected?

yes / no

FIRE PAGE VIEW …and remove visibility listener…
…and end the process…


Слайд 32SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
2. Is the Visibility API

supported?

Page is loaded in the browser
Is the Visibility API supported?
Is the page visible?
Is a Visibility Change detected?

yes / no

FIRE PAGE VIEW …and remove visibility listener…
…and end the process…

>>

>>


Слайд 33SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
2. Is the Visibility API

supported?

Page is loaded in the browser
Is the Visibility API supported?
Is the page visible?
Is a Visibility Change detected?

yes / no

FIRE PAGE VIEW …and remove visibility listener…
…and end the process…

document.addEventListener(
'visibilitychange',
function() {
dataLayer.push({
'event' : 'visibility- Change'
});
}
);


Слайд 34SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
3. Is the page visible?
Page

is loaded in the browser
Is the Visibility API supported?
Is the page visible?
Is a Visibility Change detected?

yes / no

FIRE PAGE VIEW …and remove visibility listener…
…and end the process…


Слайд 35SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
3. Is the page visible?
Page

is loaded in the browser
Is the Visibility API supported?
Is the page visible?
Is a Visibility Change detected?

yes / no

FIRE PAGE VIEW …and remove visibility listener…
…and end the process…

>>

>>


Слайд 36SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
3. Is the page visible?
Page

is loaded in the browser
Is the Visibility API supported?
Is the page visible?
Is a Visibility Change detected?

yes / no

FIRE PAGE VIEW …and remove visibility listener…
…and end the process…


Слайд 37SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
4. Is a Visibility Change

detected?

Page is loaded in the browser
Is the Visibility API supported?
Is the page visible?
Is a Visibility Change detected?

yes / no

FIRE PAGE VIEW …and remove visibility listener…
…and end the process…


Слайд 38SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
4. Is a Visibility Change

detected?

Page is loaded in the browser
Is the Visibility API supported?
Is the page visible?
Is a Visibility Change detected?

yes / no

FIRE PAGE VIEW …and remove visibility listener…
…and end the process…

>>

>>


Слайд 39SUPERWEEK 2015 | #SPWK | @SimoAhava

What just happened?


Слайд 40SUPERWEEK 2015 | #SPWK | @SimoAhava

We made a metric more meaningful


Слайд 41SUPERWEEK 2015 | #SPWK | @SimoAhava

But it’s only meaningful if the

questions it answers are relevant

Слайд 42SUPERWEEK 2015 | #SPWK | @SimoAhava
How can we measure content engagement?


Слайд 43SUPERWEEK 2015 | #SPWK | @SimoAhava

Content engagement is notoriously difficult to

track

Слайд 44SUPERWEEK 2015 | #SPWK | @SimoAhava

Adjusted Bounce Rate
Adjusted


Слайд 45SUPERWEEK 2015 | #SPWK | @SimoAhava

Adjusted Bounce Rate
Adjusted
Not happy with a

metric? Sure! Tweak the data collection. Don’t tackle the real problem, i.e. your horrible content!

Слайд 46SUPERWEEK 2015 | #SPWK | @SimoAhava

Scroll Tracking
http://cutroni.com/blog/2014/02/12/advanced-content-tracking-with-universal-analytics/


Слайд 47SUPERWEEK 2015 | #SPWK | @SimoAhava

Scroll Tracking
Better, but it isolates the

action of reading as the sole qualification of engagement.

Слайд 48SUPERWEEK 2015 | #SPWK | @SimoAhava

Content is to a blog what

products are to a web store

Слайд 49SUPERWEEK 2015 | #SPWK | @SimoAhava

Shopping Reading Behavior


Слайд 50SUPERWEEK 2015 | #SPWK | @SimoAhava

Checkout Behavior Content Engagement


Слайд 51SUPERWEEK 2015 | #SPWK | @SimoAhava

Product Article Performance


Слайд 52SUPERWEEK 2015 | #SPWK | @SimoAhava

Product Content List Performance


Слайд 53SUPERWEEK 2015 | #SPWK | @SimoAhava

Internal Promotions


Слайд 54SUPERWEEK 2015 | #SPWK | @SimoAhava

Step 1: Terminology


Слайд 55SUPERWEEK 2015 | #SPWK | @SimoAhava

Product: A blog article
Product price: Words

in an article
Product impression: Views of a title or title+ingress in content lists
Product list: Widget / content area where product impressions can be gathered from
Product list click: Clicks on entries in a product list

Product detail view: Page load of an article page
Add to cart: First scroll on an article page
Checkout: 1/3, 2/3, and 3/3 scroll depth on an article page
Purchase: 3/3 scroll depth on an article page and minimum of 60 seconds dwell time


Слайд 56SUPERWEEK 2015 | #SPWK | @SimoAhava

Step 2: Data Collection


Слайд 57SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS


Слайд 58SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS



Product impression
Product impression
Product impressions

Internal promotion


Слайд 59SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS


Слайд 60SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE


Слайд 61SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: INITIAL PAGE LOAD =

PRODUCT DETAIL VIEW

Слайд 62SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: SCROLLING BEGINS = ADD

TO CART

Слайд 63SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: SCROLL DEPTH = CHECKOUT


Слайд 64SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: SCROLL DEPTH + DWELL

TIME = PURCHASE

Слайд 65SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
Use dataLayer, don’t do what I

did (DOM scrape)
Feel free to leave something out if it isn’t meaningful or doesn’t make sense
Design the data collection with analysis in mind – not because it’s fun and cool
If using GTM, remember that only the most recent ’ecommerce’ object push is sent with a tag! Always remember to push an ’event’ value with an ’ecommerce’ object push
Read Google’s Dev Guide! It’s all in there.

Слайд 66SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
Use dataLayer, don’t do what I

did (DOM scrape)
Feel free to leave something out if it isn’t meaningful or doesn’t make sense
Design the data collection with analysis in mind – not because it’s fun and cool
If using GTM, remember that only the most recent ’ecommerce’ object push is sent with a tag! Always remember to push an ’event’ value with an ’ecommerce’ object push
Read Google’s Dev Guide! It’s all in there.

Слайд 67SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
Use dataLayer, don’t do what I

did (DOM scrape)
Feel free to leave something out if it isn’t meaningful or doesn’t make sense
Design the data collection with analysis in mind – not because it’s fun and cool
If using GTM, remember that only the most recent ’ecommerce’ object push is sent with a tag! Always remember to push an ’event’ value with an ’ecommerce’ object push
Read Google’s Dev Guide! It’s all in there.

Слайд 68SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
Use dataLayer, don’t do what I

did (DOM scrape)
Feel free to leave something out if it isn’t meaningful or doesn’t make sense
Design the data collection with analysis in mind – not because it’s fun and cool
If using GTM, remember that only the most recent ’ecommerce’ object push is sent with a tag! Always remember to push an ’event’ value with an ’ecommerce’ object push
Read Google’s Dev Guide! It’s all in there.

Слайд 69SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
Use dataLayer, don’t do what I

did (DOM scrape)
Feel free to leave something out if it isn’t meaningful or doesn’t make sense
Design the data collection with analysis in mind – not because it’s fun and cool
If using GTM, remember that only the most recent ’ecommerce’ object push is sent with a tag! Always remember to push an ’event’ value with an ’ecommerce’ object push
Read Google’s Dev Guide! It’s all in there.

Слайд 70SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
http://goo.gl/lMWqW8


Слайд 71SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
http://goo.gl/xYNVb3


Слайд 72SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
http://enhancedecommerce.appspot.com/


Слайд 73SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
https://github.com/sahava/eec-gtm


Слайд 74SUPERWEEK 2015 | #SPWK | @SimoAhava
Learning & Doing


Слайд 75SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
http://www.codecademy.com/en/tracks/javascript


Слайд 76SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Nicholas Zakas: Professional JavaScript For Web

Developers (3rd Edition)

Слайд 77SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Cody Lindley: DOM Enlightenment


Слайд 78SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Douglas Crockford: JavaScript: The Good Parts


Слайд 79SUPERWEEK 2015 | #SPWK | @SimoAhava
HTML5
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5


Слайд 80SUPERWEEK 2015 | #SPWK | @SimoAhava

THANK YOU
@SimoAhava
http://google.me/+SimoAhava
simo.ahava@netbooster.fi
www.simoahava.com


Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

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


Для правообладателей

Яндекс.Метрика