The document discusses Google Analytics and strategies for making metrics more meaningful. It proposes treating blog content like online products by tracking things like page views, scroll depth, and dwell time to measure user engagement. Specific strategies covered include using the Page Visibility API to determine meaningful page views and modeling content engagement metrics after ecommerce metrics like product impressions, add to cart, and purchase. The tips provided emphasize designing data collection with analysis in mind.

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

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

3. SUPERWEEK 2015 | #SPWK | @SimoAhava
My (GA) Developer Philosophy

4. SUPERWEEK 2015 | #SPWK | @SimoAhava
If you build it, data will
come

5. SUPERWEEK 2015 | #SPWK | @SimoAhava

6. SUPERWEEK 2015 | #SPWK | @SimoAhava
The Web is (inherently)
stateless

7. SUPERWEEK 2015 | #SPWK | @SimoAhava
User intent is untrackable
in the stateless Web

8. SUPERWEEK 2015 | #SPWK | @SimoAhava
The life span of a web page
ENTRANCE
EXIT

9. SUPERWEEK 2015 | #SPWK | @SimoAhava
The life span of a web page
ENTRANCE
EXIT

10. SUPERWEEK 2015 | #SPWK | @SimoAhava
No, browser cookies are
not the solution (or HTML
Storage)

11. SUPERWEEK 2015 | #SPWK | @SimoAhava
document.cookie = 'returning=true'; document.cookie = 'articlesRead=3';

12. SUPERWEEK 2015 | #SPWK | @SimoAhava
They provide you with
temporary state only

13. SUPERWEEK 2015 | #SPWK | @SimoAhava
Google Analytics is
stateful

14. SUPERWEEK 2015 | #SPWK | @SimoAhava
From https://developers.google.com/analytics/devguides/platform/customdimsmets

15. SUPERWEEK 2015 | #SPWK | @SimoAhava
Google Analytics is better
at pattern-matching than a
browser

16. SUPERWEEK 2015 | #SPWK | @SimoAhava
But it requires quality
input

17. SUPERWEEK 2015 | #SPWK | @SimoAhava
When the stateless and the stateful unite
Meaningful data

18. SUPERWEEK 2015 | #SPWK | @SimoAhava
How do we find and
collect meaningful data?

19. SUPERWEEK 2015 | #SPWK | @SimoAhava
No, how do we ask the
right questions?

20. SUPERWEEK 2015 | #SPWK | @SimoAhava
When a user doesn’t view a page, is it a Page View?

21. SUPERWEEK 2015 | #SPWK | @SimoAhava
Surely not?
* Obligatory Conference Presentation Meme

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

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

24. SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API

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

26. SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API
Visible: document['hidden'] = false
Hidden: document['hidden'] = true
document.addEventListener('visibilitychange', function() {
dataLayer.push({
'event' : 'visibilityChange'
});
});

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

28. SUPERWEEK 2015 | #SPWK | @SimoAhava
PAGE VISIBILITY API

29. SUPERWEEK 2015 | #SPWK | @SimoAhava
DETAILED GUIDE
http://goo.gl/DFgxmi

30. 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…

31. 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…

32. 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…>> >>

33. 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'
});
}
);

34. 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…

35. 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…>> >>

36. 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…

37. 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…

38. 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…>> >>

39. SUPERWEEK 2015 | #SPWK | @SimoAhava
What just happened?

40. SUPERWEEK 2015 | #SPWK | @SimoAhava
We made a metric more
meaningful

41. SUPERWEEK 2015 | #SPWK | @SimoAhava
But it’s only meaningful if
the questions it answers
are relevant

42. SUPERWEEK 2015 | #SPWK | @SimoAhava
How can we measure content engagement?

43. SUPERWEEK 2015 | #SPWK | @SimoAhava
Content engagement is
notoriously difficult to
track

44. SUPERWEEK 2015 | #SPWK | @SimoAhava
Adjusted Bounce Rate
Adjusted

45. 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!

46. SUPERWEEK 2015 | #SPWK | @SimoAhava
Scroll Tracking
http://cutroni.com/blog/2014/02/12/advanced-content-tracking-with-universal-analytics/

47. SUPERWEEK 2015 | #SPWK | @SimoAhava
Scroll Tracking
Better, but it isolates the action of reading as the sole
qualification of engagement.

48. SUPERWEEK 2015 | #SPWK | @SimoAhava
Content is to a blog what
products are to a web
store

49. SUPERWEEK 2015 | #SPWK | @SimoAhava
Shopping Reading Behavior

50. SUPERWEEK 2015 | #SPWK | @SimoAhava
Checkout Behavior Content Engagement

51. SUPERWEEK 2015 | #SPWK | @SimoAhava
Product Article Performance

52. SUPERWEEK 2015 | #SPWK | @SimoAhava
Product Content List Performance

53. SUPERWEEK 2015 | #SPWK | @SimoAhava
Internal Promotions

54. SUPERWEEK 2015 | #SPWK | @SimoAhava
Step 1: Terminology

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

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

57. SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS

58. SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS
Product impression
Product impression
Product
impressions
Internal promotion

59. SUPERWEEK 2015 | #SPWK | @SimoAhava
PRODUCT LISTS

60. SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE

61. SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: INITIAL PAGE LOAD = PRODUCT DETAIL VIEW

62. SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: SCROLLING BEGINS = ADD TO CART

63. SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: SCROLL DEPTH = CHECKOUT

64. SUPERWEEK 2015 | #SPWK | @SimoAhava
ARTICLE PAGE: SCROLL DEPTH + DWELL TIME = PURCHASE

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

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

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

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

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

70. SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
http://goo.gl/lMWqW8

71. SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
http://goo.gl/xYNVb3

72. SUPERWEEK 2015 | #SPWK | @SimoAhava
FURTHER READING
http://enhancedecommerce.appspot.com/

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

74. SUPERWEEK 2015 | #SPWK | @SimoAhava
Learning & Doing

75. SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
http://www.codecademy.com/en/tracks/javascript

76. SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Nicholas Zakas: Professional JavaScript For Web Developers (3rd Edition)

77. SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Cody Lindley: DOM Enlightenment

78. SUPERWEEK 2015 | #SPWK | @SimoAhava
JAVASCRIPT
Douglas Crockford: JavaScript: The Good Parts

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

80. SUPERWEEK 2015 | #SPWK | @SimoAhava
THANK YOU
@SimoAhava
http://google.me/+SimoAhava
simo.ahava@netbooster.fi
www.simoahava.com