Become an artisan web analytics practitioner by building your own analytics QA tool. For Adobe Analytics but you could do the same with Google Analytics, A/B testing, tag management, VOC tools and many other analytics tools

1. Build your own
analytics power tools
like an artisan
Alban Gérôme
@albangerome
MeasureCamp London XII
24 March 2018

3. An epiphany

4. An epiphany
If I could strip down the code of the debugger to its
bare essentials

5. An epiphany
If I could strip down the code of the debugger to its
bare essentials, I could automate QA

7. Minified, impenetrable code

8. Minified, impenetrable code
• Browsers can’t tell you anything about web requests, not in client-
side Javascript

9. Minified, impenetrable code
• Browsers can’t tell you anything about web requests, not in client-
side Javascript
• But somehow, this debugger does just that

10. Minified, impenetrable code
• Browsers can’t tell you anything about web requests, not in client-
side Javascript
• But somehow, this debugger does just that
• The analytics library exposes a variable containing an <img> element
with src attribute and that’s the whole tracking request URL

11. Minified, impenetrable code
• Browsers can’t tell you anything about web requests, not in client-
side Javascript
• But somehow, this debugger does just that
• The analytics library exposes a variable containing an <img> element
with src attribute and that’s the whole tracking request URL
• I bet the other analytics tools this debugger supports all do
something similar but how could we expand this to more tools?

13. Fool me
• Trigger artificial click, change and blur events on all page elements
and I can get all the raw tracking requests

14. Fool me
• Trigger artificial click, change and blur events on all page elements
and I can get all the raw tracking requests
• I could represent the page view and the interactions in JSON format

15. Fool me
• Trigger artificial click, change and blur events on all page elements
and I can get all the raw tracking requests
• I could represent the page view and the interactions in JSON format
• I could represent our tracking requirements in JSON format too

16. Fool me
If the developers could generate the first JSON on the
fly and compare it with our tagging guide JSON, they
could catch implementation errors at build time

17. Fool me
If the developers could generate the first JSON on the
fly and compare it with our tagging guide JSON, they
could catch implementation errors at build time, before
going live

19. When the tough gets tough…

20. When the tough gets tough…
• Some links are outbound links

21. When the tough gets tough…
• Some links are outbound links
• I want to trigger the Javascript events, get them to trigger an analytics
tracking request but nothing else

22. When the tough gets tough…
• Some links are outbound links
• I want to trigger the Javascript events, get them to trigger an analytics
tracking request but nothing else
• Some events still fall through the cracks

23. When the tough gets tough…
• Some links are outbound links
• I want to trigger the Javascript events, get them to trigger an analytics
tracking request but nothing else
• Some events still fall through the cracks
• How am I going to identify which elements are tracked?

24. When the tough gets tough…
• Some links are outbound links
• I want to trigger the Javascript events, get them to trigger an analytics
tracking request but nothing else
• Some events still fall through the cracks
• How am I going to identify which elements are tracked?
• How can I make the script run fast enough?

25. When the tough gets tough…
• Some links are outbound links
• I want to trigger the Javascript events, get them to trigger an analytics
tracking request but nothing else
• Some events still fall through the cracks
• How am I going to identify which elements are tracked?
• How can I make the script run fast enough?
• THE #@%£ script worked yesterday and today it doesn’t!

26. When the tough gets tough…
• Some links are outbound links
• I want to trigger the Javascript events, get them to trigger an analytics
tracking request but nothing else
• Some events still fall through the cracks
• How am I going to identify which elements are tracked?
• How can I make the script run fast enough?
• THE #@%£ script worked yesterday and today it doesn’t!
• Why can’t I replace the cursor to a spinner while the script runs?

28. Could a Chrome extension work?

29. Could a Chrome extension work?
• A manifest file with all permissions and settings

30. Could a Chrome extension work?
• A manifest file with all permissions and settings
• A content script that runs on the page you want to process

31. Could a Chrome extension work?
• A manifest file with all permissions and settings
• A content script that runs on the page you want to process
• A popup script that runs inside your extension popup if your
extension has one

32. Could a Chrome extension work?
• A manifest file with all permissions and settings
• A content script that runs on the page you want to process
• A popup script that runs inside your extension popup if your
extension has one
• A background script that sits between the content and popup scripts
with some limitations but also extra power

33. Could a Chrome extension work?
• A manifest file with all permissions and settings
• A content script that runs on the page you want to process
• A popup script that runs inside your extension popup if your
extension has one
• A background script that sits between the content and popup scripts
with some limitations but also extra power
• A messaging system to pass information between all three scripts

34. Could a Chrome extension work?
• A manifest file with all permissions and settings
• A content script that runs on the page you want to process
• A popup script that runs inside your extension popup if your
extension has one
• A background script that sits between the content and popup scripts
with some limitations but also extra power
• A messaging system to pass information between all three scripts
• A limited-capacity but useful common data storage to remember
custom settings

36. Chrome extensions powers
• The background script can report and manage all web requests before
and after, any analytics tool that make web requests

37. Chrome extensions powers
• The background script can report and manage all web requests before
and after, any analytics tool that make web requests – oh yeah!

38. Chrome extensions powers
• The background script can report and manage all web requests before
and after, any analytics tool that make web requests – oh yeah!
• This lets you cancel your test traffic and keep your server calls low or
let the requests reach your analytics servers and see the hit in a test
account or redirect them to somewhere else

39. Chrome extensions powers
• The background script can report and manage all web requests before
and after, any analytics tool that make web requests – oh yeah!
• This lets you cancel your test traffic and keep your server calls low or
let the requests reach your analytics servers and see the hit in a test
account or redirect them to somewhere else – how flexible!

40. Chrome extensions powers
• The background script can report and manage all web requests before
and after, any analytics tool that make web requests – oh yeah!
• This lets you cancel your test traffic and keep your server calls low or
let the requests reach your analytics servers and see the hit in a test
account or redirect them to somewhere else – how flexible!
• This lets you do screenshots – only what’s visible in the window but
some extensions can generate full page screenshots

41. Chrome extensions powers
• The background script can report and manage all web requests before
and after, any analytics tool that make web requests – oh yeah!
• This lets you cancel your test traffic and keep your server calls low or
let the requests reach your analytics servers and see the hit in a test
account or redirect them to somewhere else – how flexible!
• This lets you do screenshots – only what’s visible in the window but
some extensions can generate full page screenshots – how useful!

42. Chrome extensions powers
• The background script can report and manage all web requests before
and after, any analytics tool that make web requests – oh yeah!
• This lets you cancel your test traffic and keep your server calls low or
let the requests reach your analytics servers and see the hit in a test
account or redirect them to somewhere else – how flexible!
• This lets you do screenshots – only what’s visible in the window but
some extensions can generate full page screenshots – how useful!
• You could actually package this into a commercial product

44. Useful Javascript libraries for us

45. Useful Javascript libraries for us
• jQuery – although you won’t care about cross-browser support, it will
make your code leaner and easier to maintain and add new features

46. Useful Javascript libraries for us
• jQuery – although you won’t care about cross-browser support, it will
make your code leaner and easier to maintain and add new features
• Bootstrap – makes interfaces look very slick

47. Useful Javascript libraries for us
• jQuery – although you won’t care about cross-browser support, it will
make your code leaner and easier to maintain and add new features
• Bootstrap – makes interfaces look very slick
• DataTables – a jQuery module that lets you convert Javascript arrays
and JSONs into sortable, searchable, paginated tables – perfect to
represent our decoded page view and interaction tracking requests

48. Useful Javascript libraries for us
• jQuery – although you won’t care about cross-browser support, it will
make your code leaner and easier to maintain and add new features
• Bootstrap – makes interfaces look very slick
• DataTables – a jQuery module that lets you convert Javascript arrays
and JSONs into sortable, searchable, paginated tables – perfect to
represent our decoded page view and interaction tracking requests
• jsPDF – a library that will generate a PDF from a HTML document.
Imagine generating a snazzy PDF report with your full page
screenshot showing which elements are tracked and a page number
reference for all the details about what each element tracks

50. Demo, anyone?

51. Thank you!

52. http://www.albangerome.com
@albangerome
Thank you!