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
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?
12.
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
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?
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
35.
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
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