Google Analytics Bag O' Tricks

Google Analytics Bag o’ Tricks Simo Ahava (NetBooster) – SUPERWEEK 2015

SUPERWEEK 2015 | #SPWK | @SimoAhava Simo Ahava | NetBooster @SimoAhava http://google.me/+SimoAhava simo.ahava@netbooster.fi 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 page ENTRANCE 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

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, 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

SUPERWEEK 2015 | #SPWK | @SimoAhava PAGE VISIBILITY API

SUPERWEEK 2015 | #SPWK | @SimoAhava PAGE VISIBILITY API Visible: document['hidden'] = false Hidden: document['hidden'] = true

SUPERWEEK 2015 | #SPWK | @SimoAhava PAGE VISIBILITY API Visible: document['hidden'] = false Hidden: 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 browser 2. Is the Visibility API supported? 3. Is the page visible? 4. Is a Visibility Change detected? yes / no FIRE 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 browser 2. Is the Visibility API supported? 3. Is the page visible? 4. Is a Visibility Change detected? yes / no FIRE 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 browser 2. Is the Visibility API supported? 3. Is the page visible? 4. Is a Visibility Change detected? yes / no FIRE 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 browser 2. Is the Visibility API supported? 3. Is the page visible? 4. 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' }); } );

SUPERWEEK 2015 | #SPWK | @SimoAhava THE PROCESS 3. Is the page visible? 1. Page is loaded in the browser 2. Is the Visibility API supported? 3. Is the page visible? 4. Is a Visibility Change detected? yes / no FIRE 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 browser 2. Is the Visibility API supported? 3. Is the page visible? 4. Is a Visibility Change detected? yes / no FIRE 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 browser 2. Is the Visibility API supported? 3. Is the page visible? 4. Is a Visibility Change detected? yes / no FIRE 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 browser 2. Is the Visibility API supported? 3. Is the page visible? 4. Is a Visibility Change detected? yes / no FIRE 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 browser 2. Is the Visibility API supported? 3. Is the page visible? 4. Is a Visibility Change detected? yes / no FIRE 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 Rate Adjusted

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 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 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

SUPERWEEK 2015 | #SPWK | @SimoAhava Step 2: Data Collection

SUPERWEEK 2015 | #SPWK | @SimoAhava PRODUCT LISTS

SUPERWEEK 2015 | #SPWK | @SimoAhava PRODUCT LISTS Product impression Product impression Product 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 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 simo.ahava@netbooster.fi www.simoahava.com