Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build your own analytics power tools

293 views

Published on

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

Published in: Internet
  • Be the first to comment

Build your own analytics power tools

  1. 1. Build your own analytics power tools like an artisan Alban Gérôme @albangerome MeasureCamp London XII 24 March 2018
  2. 2. An epiphany
  3. 3. An epiphany If I could strip down the code of the debugger to its bare essentials
  4. 4. An epiphany If I could strip down the code of the debugger to its bare essentials, I could automate QA
  5. 5. Minified, impenetrable code
  6. 6. Minified, impenetrable code • Browsers can’t tell you anything about web requests, not in client- side Javascript
  7. 7. Minified, impenetrable code • Browsers can’t tell you anything about web requests, not in client- side Javascript • But somehow, this debugger does just that
  8. 8. 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
  9. 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 • 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?
  10. 10. Fool me • Trigger artificial click, change and blur events on all page elements and I can get all the raw tracking requests
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. When the tough gets tough…
  16. 16. When the tough gets tough… • Some links are outbound links
  17. 17. 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
  18. 18. 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
  19. 19. 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?
  20. 20. 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?
  21. 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 • 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!
  22. 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 • 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?
  23. 23. Could a Chrome extension work?
  24. 24. Could a Chrome extension work? • A manifest file with all permissions and settings
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Chrome extensions powers • The background script can report and manage all web requests before and after, any analytics tool that make web requests
  31. 31. 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!
  32. 32. 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
  33. 33. 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!
  34. 34. 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
  35. 35. 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!
  36. 36. 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
  37. 37. Useful Javascript libraries for us
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. Demo, anyone?
  43. 43. Thank you!
  44. 44. http://www.albangerome.com @albangerome Thank you!

×