SUPERWEEK 2015 | #SPWK | @SimoAhava
Simo Ahava | NetBooster
@SimoAhava
http://google.me/+SimoAhava
www.simoahava.com
SUPERWEEK 2015 | #SPWK | @SimoAhava
document.cookie = 'returning=true'; document.cookie = 'articlesRead=3';
SUPERWEEK 2015 | #SPWK | @SimoAhava
From https://developers.google.com/analytics/devguides/platform/customdimsmets
SUPERWEEK 2015 | #SPWK | @SimoAhava
APIS, WORKERS, LIBRARIES, SPECIFICATIONS
ECMAScriptDOMSettableTokenListWeb AudioAutocompleteErrorEventAnimation TimingDOMTokenListDOMFullscreenDrag and DropSVGIndexed DBDocumentFragmentDOMErrorFile APIChildNode
MediaDOMImplementationWeb Sockets and MessagingEventWebGLVisibilityWeb StorageDocumentEventSourceCSS Object ModelCommentWeb WorkersAttrWebRTCSelectors
DocumentTypeOfflineElementCharacterDataBrowserCanvasEventListenerCustomEventShadow DOM CloseEventFile System API BroadcastChannelTyped ArraysPointer LockElements
SUPERWEEK 2015 | #SPWK | @SimoAhava
APIS, WORKERS, LIBRARIES, SPECIFICATIONS
ECMAScriptDOMSettableTokenListWeb Audio AutocompleteErrorEventAnimation TimingDOMTokenListDOM FullscreenDrag and DropSVG Indexed DB DocumentFragmentDOMErrorFile API ChildNode
MediaDOMImplementationWeb Sockets and Messaging EventWebGLVisibilityWeb Storage DocumentEventSourceCSS Object ModelCommentWeb WorkersAttrWebRTCSelectors
DocumentTypeOfflineElementCharacterDataBrowserCanvasEventListenerCustomEventShadow DOM CloseEventFile System API BroadcastChannelTyped ArraysPointer LockElements
SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API
Visible: document['hidden'] = falseHidden: document['hidden'] = true
SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API
Visible: document['hidden'] = falseHidden: document['hidden'] = true
document.addEventListener('visibilitychange', function() { dataLayer.push({'event' : 'visibilityChange'
});});
SUPERWEEK 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.
SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
1. Page is loaded in the browser
1. Page is loaded in the browser2. Is the Visibility API supported?3. Is the page visible?4. Is a Visibility Change detected?
yes / noFIRE PAGE VIEW
…and remove visibility listener……and end the process…
SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
2. Is the Visibility API supported?
1. Page is loaded in the browser2. Is the Visibility API supported?3. Is the page visible?4. Is a Visibility Change detected?
yes / noFIRE PAGE VIEW
…and remove visibility listener……and end the process…
SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
2. Is the Visibility API supported?
1. Page is loaded in the browser2. Is the Visibility API supported?3. Is the page visible?4. Is a Visibility Change detected?
yes / noFIRE PAGE VIEW
…and remove visibility listener……and end the process…>> >>
SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
2. Is the Visibility API supported?
1. Page is loaded in the browser2. Is the Visibility API supported?3. Is the page visible?4. Is a Visibility Change detected?
yes / noFIRE PAGE VIEW
…and remove visibility listener……and end the process…
document.addEventListener('visibilitychange', function() {
dataLayer.push({'event' : 'visibility-
Change'});
});
SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
3. Is the page visible?
1. Page is loaded in the browser2. Is the Visibility API supported?3. Is the page visible?4. Is a Visibility Change detected?
yes / noFIRE PAGE VIEW
…and remove visibility listener……and end the process…
SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
3. Is the page visible?
1. Page is loaded in the browser2. Is the Visibility API supported?3. Is the page visible?4. Is a Visibility Change detected?
yes / noFIRE PAGE VIEW
…and remove visibility listener……and end the process…>> >>
SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
3. Is the page visible?
1. Page is loaded in the browser2. Is the Visibility API supported?3. Is the page visible?4. Is a Visibility Change detected?
yes / noFIRE PAGE VIEW
…and remove visibility listener……and end the process…
SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
4. Is a Visibility Change detected?
1. Page is loaded in the browser2. Is the Visibility API supported?3. Is the page visible?4. Is a Visibility Change detected?
yes / noFIRE PAGE VIEW
…and remove visibility listener……and end the process…
SUPERWEEK 2015 | #SPWK | @SimoAhava
THE PROCESS
4. Is a Visibility Change detected?
1. Page is loaded in the browser2. Is the Visibility API supported?3. Is the page visible?4. Is a Visibility Change detected?
yes / noFIRE PAGE VIEW
…and remove visibility listener……and end the process…>> >>
SUPERWEEK 2015 | #SPWK | @SimoAhava
But it’s only meaningful if
the questions it answers
are relevant
SUPERWEEK 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!
SUPERWEEK 2015 | #SPWK | @SimoAhava
Scroll Tracking
http://cutroni.com/blog/2014/02/12/advanced-content-tracking-with-universal-analytics/
SUPERWEEK 2015 | #SPWK | @SimoAhava
Scroll Tracking
Better, but it isolates the action of reading as the sole
qualification of engagement.
SUPERWEEK 2015 | #SPWK | @SimoAhava
Product: A blog articleProduct price: Words in an articleProduct impression: Views of a title or title+ingress in contentlistsProduct list: Widget / contentarea where product impressionscan be gathered fromProduct list click: Clicks on entriesin a product list
Product detail view: Page loadof an article pageAdd to cart: First scroll on an article pageCheckout: 1/3, 2/3, and 3/3 scroll depth on an article pagePurchase: 3/3 scroll depth on an article page and minimum of 60 seconds dwell time
SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS
Product impression
Product impressionProduct
impressions
Internal promotion
SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
1. Use dataLayer, don’t do what I did (DOM scrape)
2. Feel free to leave something out if it isn’t meaningful
or doesn’t make sense
3. Design the data collection with analysis in mind – not
because it’s fun and cool
4. 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
5. Read Google’s Dev Guide! It’s all in there.
SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
1. Use dataLayer, don’t do what I did (DOM scrape)
2. Feel free to leave something out if it isn’t meaningful
or doesn’t make sense
3. Design the data collection with analysis in mind – not
because it’s fun and cool
4. 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
5. Read Google’s Dev Guide! It’s all in there.
SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
1. Use dataLayer, don’t do what I did (DOM scrape)
2. Feel free to leave something out if it isn’t meaningful
or doesn’t make sense
3. Design the data collection with analysis in mind – not
because it’s fun and cool
4. 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
5. Read Google’s Dev Guide! It’s all in there.
SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
1. Use dataLayer, don’t do what I did (DOM scrape)
2. Feel free to leave something out if it isn’t meaningful
or doesn’t make sense
3. Design the data collection with analysis in mind – not
because it’s fun and cool
4. 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
5. Read Google’s Dev Guide! It’s all in there.
SUPERWEEK 2015 | #SPWK | @SimoAhava
TIPS
1. Use dataLayer, don’t do what I did (DOM scrape)
2. Feel free to leave something out if it isn’t meaningful
or doesn’t make sense
3. Design the data collection with analysis in mind – not
because it’s fun and cool
4. 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
5. Read Google’s Dev Guide! It’s all in there.
SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Nicholas Zakas: Professional JavaScript For Web Developers (3rd Edition)
SUPERWEEK 2015 | #SPWK | @SimoAhava
HTML5
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
SUPERWEEK 2015 | #SPWK | @SimoAhava
THANK YOU
@SimoAhava
http://google.me/+SimoAhava
www.simoahava.com