Google Analytics Bag O' Tricks

transcript

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

My (GA) Developer Philosophy

If you build it, data will come

The Web is (inherently) stateless

User intent is untrackable in the

stateless Web

The life span of a web pageENTRAN

No, browser cookies are not the solution (or

HTML Storage)

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

They provide you with temporary state only

Google Analytics is stateful

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

Google Analytics is better at pattern-matching than a

browser

But it requires quality input

When the stateless and the stateful unite

Meaningful data

How do we find and collect meaningful

No, how do we ask the right questions?

When a user doesn’t view a page, is it a Page View?

Surely not?

* Obligatory Conference Presentation Meme

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

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

PAGE VISIBILITY API

Visible: document['hidden'] = falseHidden: document['hidden'] = true

PAGE VISIBILITY API

Visible: document['hidden'] = falseHidden: document['hidden'] = true

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

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.

PAGE VISIBILITY API

DETAILED GUIDE

http://goo.gl/DFgxmi

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…

THE PROCESS

2. Is the Visibility API supported?

THE PROCESS

…and remove visibility listener……and end the process…>> >>

THE PROCESS

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

THE PROCESS

3. Is the page visible?

THE PROCESS

4. Is a Visibility Change detected?

THE PROCESS

4. Is a Visibility Change detected?

What just happened?

We made a metric more meaningful

But it’s only meaningful if the

questions it answers are relevant

How can we measure content engagement?

Content engagement is notoriously difficult

to track

Adjusted Bounce RateAdjusted

Not happy with a metric? Sure! Tweak the data collection. Don’t tackle the real

problem, i.e. your horrible content!

Scroll Tracking

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

Scroll Tracking

Better, but it isolates the action of reading as the sole qualification of engagement.

Content is to a blog what products are to a

web store

Shopping Reading Behavior

Checkout Behavior Content Engagement

Product Article Performance

Product Content List Performance

Internal Promotions

Step 1: Terminology

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

Step 2: Data Collection

PRODUCT LISTS

Product impression

Product impressionProduct

impressions

Internal promotion

PRODUCT LISTS

ARTICLE PAGE

ARTICLE PAGE: INITIAL PAGE LOAD = PRODUCT DETAIL VIEW

ARTICLE PAGE: SCROLLING BEGINS = ADD TO CART

ARTICLE PAGE: SCROLL DEPTH = CHECKOUT

ARTICLE PAGE: SCROLL DEPTH + DWELL TIME = PURCHASE

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.

FURTHER READING

http://goo.gl/lMWqW8

FURTHER READING

http://goo.gl/xYNVb3

FURTHER READING

http://enhancedecommerce.appspot.com/

FURTHER READING

https://github.com/sahava/eec-gtm

Learning & Doing

JAVASCRIPT

http://www.codecademy.com/en/tracks/javascript

JAVASCRIPT

Nicholas Zakas: Professional JavaScript For Web Developers (3rd Edition)

JAVASCRIPT

Cody Lindley: DOM Enlightenment

JAVASCRIPT

Douglas Crockford: JavaScript: The Good Parts

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

THANK YOU

@SimoAhava

http://google.me/+SimoAhava

simo.ahava@netbooster.fi

www.simoahava.com

Google Analytics Bag O' Tricks

Data & Analytics