Google Analytics Bag o’ Tricks
Simo Ahava (NetBooster) – SUPERWEEK 2015
SUPERWEEK 2015 | #SPWK | @SimoAhava
Simo Ahava | NetBooster
@SimoAhava
http://google.me/+SimoAhava
www.simoahava.com
SUPERWEEK 2015 | #SPWK | @SimoAhava
My (GA) Developer Philosophy
SUPERWEEK 2015 | #SPWK | @SimoAhava
If you build it, data will come
SUPERWEEK 2015 | #SPWK | @SimoAhava
SUPERWEEK 2015 | #SPWK | @SimoAhava
The Web is (inherently) stateless
SUPERWEEK 2015 | #SPWK | @SimoAhava
User intent is untrackable in the
stateless Web
SUPERWEEK 2015 | #SPWK | @SimoAhava
The life span of a web pageENTRAN
CE
EXIT
SUPERWEEK 2015 | #SPWK | @SimoAhava
The life span of a web pageENTRAN
CE
EXIT
SUPERWEEK 2015 | #SPWK | @SimoAhava
No, browser cookies are not the solution (or
HTML Storage)
SUPERWEEK 2015 | #SPWK | @SimoAhava
document.cookie = 'returning=true'; document.cookie = 'articlesRead=3';
SUPERWEEK 2015 | #SPWK | @SimoAhava
They provide you with temporary state only
SUPERWEEK 2015 | #SPWK | @SimoAhava
Google Analytics is stateful
SUPERWEEK 2015 | #SPWK | @SimoAhava
From https://developers.google.com/analytics/devguides/platform/customdimsmets
SUPERWEEK 2015 | #SPWK | @SimoAhava
Google Analytics is better at pattern-matching than a
browser
SUPERWEEK 2015 | #SPWK | @SimoAhava
But it requires quality input
SUPERWEEK 2015 | #SPWK | @SimoAhava
When the stateless and the stateful unite
Meaningful data
Meaningful data
Meaningful data
SUPERWEEK 2015 | #SPWK | @SimoAhava
How do we find and collect meaningful
data?
SUPERWEEK 2015 | #SPWK | @SimoAhava
No, how do we ask the right questions?
SUPERWEEK 2015 | #SPWK | @SimoAhava
When a user doesn’t view a page, is it a Page View?
SUPERWEEK 2015 | #SPWK | @SimoAhava
Surely not?
* Obligatory Conference Presentation Meme
SUPERWEEK 2015 | #SPWK | @SimoAhava
APIS, WORKERS, LIBRARIES, SPECIFICATIONSECMAScript DOMSettableTokenList Web Audio AutocompleteErrorEvent Animation TimingDOMTokenList DOM Fullscreen Drag and Drop SVG Indexed DB DocumentFragment DOMError File API ChildNode
MediaDOMImplementation Web Sockets and Messaging Event WebGL VisibilityWeb 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
SUPERWEEK 2015 | #SPWK | @SimoAhava
APIS, WORKERS, LIBRARIES, SPECIFICATIONSECMAScriptDOMSettableTokenList Web Audio AutocompleteErrorEvent Animation TimingDOMTokenList DOM Fullscreen Drag and Drop SVG Indexed DB DocumentFragment DOMError File API ChildNode
MediaDOMImplementation 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
SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API
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
PAGE VISIBILITY API
SUPERWEEK 2015 | #SPWK | @SimoAhava
DETAILED GUIDE
http://goo.gl/DFgxmi
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
What just happened?
SUPERWEEK 2015 | #SPWK | @SimoAhava
We made a metric more meaningful
SUPERWEEK 2015 | #SPWK | @SimoAhava
But it’s only meaningful if the
questions it answers are relevant
SUPERWEEK 2015 | #SPWK | @SimoAhava
How can we measure content engagement?
SUPERWEEK 2015 | #SPWK | @SimoAhava
Content engagement is notoriously difficult
to track
SUPERWEEK 2015 | #SPWK | @SimoAhava
Adjusted Bounce RateAdjusted
SUPERWEEK 2015 | #SPWK | @SimoAhava
Adjusted Bounce RateAdjusted
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
Content is to a blog what products are to a
web store
SUPERWEEK 2015 | #SPWK | @SimoAhava
Shopping Reading Behavior
SUPERWEEK 2015 | #SPWK | @SimoAhava
Checkout Behavior Content Engagement
SUPERWEEK 2015 | #SPWK | @SimoAhava
Product Article Performance
SUPERWEEK 2015 | #SPWK | @SimoAhava
Product Content List Performance
SUPERWEEK 2015 | #SPWK | @SimoAhava
Internal Promotions
SUPERWEEK 2015 | #SPWK | @SimoAhava
Step 1: Terminology
SUPERWEEK 2015 | #SPWK | @SimoAhava
Product: A blog articleProduct price: Words in an articleProduct impression: Views of a title or title+ingress in content listsProduct list: Widget / content area where product impressions can be gathered fromProduct list click: Clicks on entries in a product list
Product detail view: Page load of 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
Step 2: Data Collection
SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS
SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS
Product impression
Product impressionProduct
impressions
Internal promotion
SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS
SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE
SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: INITIAL PAGE LOAD = PRODUCT DETAIL VIEW
SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: SCROLLING BEGINS = ADD TO CART
SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: SCROLL DEPTH = CHECKOUT
SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: SCROLL DEPTH + DWELL TIME = PURCHASE
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
FURTHER READING
http://goo.gl/lMWqW8
SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
http://goo.gl/xYNVb3
SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
http://enhancedecommerce.appspot.com/
SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
https://github.com/sahava/eec-gtm
SUPERWEEK 2015 | #SPWK | @SimoAhava
Learning & Doing
SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
http://www.codecademy.com/en/tracks/javascript
SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Nicholas Zakas: Professional JavaScript For Web Developers (3rd Edition)
SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Cody Lindley: DOM Enlightenment
SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Douglas Crockford: JavaScript: The Good Parts
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