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.

Easier and faster tagging with Kermit

1,314 views

Published on

This an update on my previous presentation on Kermit. This was presented at the Brighton SEO conference on April 7th 2017. This is for Kermit v0.8 and this client-side Javascript framework will help you with:
- tagging page views including virtual page views generated by single page applications using AngularJS for example
- tagging interactions (covered in the previous presentation)
- managing your cookie consent, in particular which elements will provide implicit consent
- catch potential losses of analytics reporting caused by code changes made by your developers before these changes go live

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Easier and faster tagging with Kermit

  1. 1. Easier page element tracking with Kermit
  2. 2. Easier and faster tagging with Kermit
  3. 3. Easier and faster tagging with Kermit Alban Gérôme BrightonSEO April 7th, 2017
  4. 4. Web analytics tools are
  5. 5. Web analytics tools are Easy to implement Limited freedom for bespoke implementations
  6. 6. Web analytics tools are Easy to implement Limited freedom for bespoke implementations Hard to implement Very customisable implementations
  7. 7. Web developers • Do not consider that web analytics tagging is part of their job because it was not taught as part of the computer science curriculum
  8. 8. Web developers • Do not consider that web analytics tagging is part of their job because it was not taught as part of the computer science curriculum • Believe that tagging is either just copy and paste or your code ends up broken up into twenty files organised like Russian dolls
  9. 9. Web developers • Do not consider that web analytics tagging is part of their job because it was not taught as part of the computer science curriculum • Believe that tagging is either just copy and paste or your code ends up broken up into twenty files organised like Russian dolls • Bless them
  10. 10. QA testers
  11. 11. QA testers • If there were no Javascript errors the web analytics implementation is assumed to be correct
  12. 12. QA testers • If there were no Javascript errors the web analytics implementation is assumed to be correct • We need our own web analytics QA scripts included in their tests suites
  13. 13. QA testers • If there were no Javascript errors the web analytics implementation is assumed to be correct • We need our own web analytics QA scripts included in their tests suites • Bless them too
  14. 14. Web analysts • They cannot spend their time monitoring reports to ensure that the developers latest changes did not break anything
  15. 15. Web analysts • They cannot spend their time monitoring reports to ensure that the developers latest changes did not break anything • If the data suggests anything contrary to the business stakeholders opinion someone will invoke doubts about the data analysis and/or collection, belief persistence perhaps
  16. 16. What we need • Simple tagging for complex analytics tools where defaults are enabled but can be overridden
  17. 17. What we need • Simple tagging for complex analytics tools where defaults are enabled but can be overridden • Analytics code can be checked by looking at the source code of the page
  18. 18. What we need • Simple tagging for complex analytics tools where defaults are enabled but can be overridden • Analytics code can be checked by looking at the source code of the page • Throw errors if the analytics code no longer matches the expected web page structure
  19. 19. Page views and interactions • We only really care about page views and interactions with page elements
  20. 20. Page views and interactions • We only really care about page views and interactions with page elements • We need support for: – Single page applications and virtual page views – The click, change and blur Javascript events
  21. 21. Page views and virtual page views • Virtual page views are screen updates which did not result in a page load. The URL might not even change
  22. 22. Page views and virtual page views • Virtual page views are screen updates which did not result in a page load. The URL might not even change • These screen updates can be detected automatically and treated like ordinary page views
  23. 23. Javascript events The click, change and blur events can be inferred from the element that was interacted with automatically:
  24. 24. Javascript events The click, change and blur events can be inferred from the element that was interacted with automatically: – Buttons: click event – Drop-down menus: change event – Text fields: blur event
  25. 25. Tagging default settings • So we can handle all types of page views automatically
  26. 26. Tagging default settings • So we can handle all types of page views automatically • We can handle the page element interactions without caring which Javascript we need
  27. 27. Tagging default settings • So we can handle all types of page views automatically • We can handle the page element interactions without caring which Javascript we need • We still need to mark these pages and page element interactions and provide the values we need in our reports
  28. 28. HTML5 data- attributes • With HTML5 you can provide custom additional information
  29. 29. HTML5 data- attributes • With HTML5 you can provide custom additional information • This information will be visible in the source code or your browser developer tools
  30. 30. HTML5 data- attributes • With HTML5 you can provide custom additional information • This information will be visible in the source code or your browser developer tools • We can leverage these to describe a page view or an interaction with a page element
  31. 31. HTML5 data- attributes examples <input value="B" type="button" data-analytics- interaction-description="Button XYZ was clicked" />
  32. 32. HTML5 data- attributes examples <input value="B" type="button" data-analytics- interaction-description="Button XYZ was clicked" /> <div data-analytics-pageview-description=" homepage" />
  33. 33. Quick data- attributes reference • data-analytics-pageview-description • data-analytics-pageview-key • data-analytics-pageview-attribute-*
  34. 34. Quick data- attributes reference • data-analytics-pageview-description • data-analytics-pageview-key • data-analytics-pageview-attribute-* • data-analytics-interaction-description • data-analytics-interaction-key • data-analytics-interaction-attribute-* • data-analytics-interaction-event
  35. 35. Kermit footprint • Kermit provides clear visibility on all elements where the data-analytics HTML5 attributes were used on the page:
  36. 36. Kermit footprint • Kermit provides clear visibility on all elements where the data-analytics HTML5 attributes were used on the page: – kermit.utils.getSummary returns an array of all elements using Kermit
  37. 37. Kermit footprint • Kermit provides clear visibility on all elements where the data-analytics HTML5 attributes were used on the page: – kermit.utils.getSummary returns an array of all elements using Kermit – kermit.utils.getAttributes returns the complete description of a given element and of the page view it is related to
  38. 38. Extensible and modular architecture
  39. 39. Extensible and modular architecture • If the property you need to describe a page view or an interaction is not available you can use:
  40. 40. Extensible and modular architecture • If the property you need to describe a page view or an interaction is not available you can use: – data-analytics-interaction-attribute-* – data-analytics-pageview-attribute-*
  41. 41. Extensible and modular architecture • If the property you need to describe a page view or an interaction is not available you can use: – data-analytics-interaction-attribute-* – data-analytics-pageview-attribute-* • Kermit also supports external modules to provide additional capabilities. This way you can use only what you need
  42. 42. Useful Kermit modules • cookies – provides easy functions to manipulate cookies
  43. 43. Useful Kermit modules • cookies – provides easy functions to manipulate cookies • consent – requires the cookies module and manages all things related to cookie consent
  44. 44. Useful Kermit modules • cookies – provides easy functions to manipulate cookies • consent – requires the cookies module and manages all things related to cookie consent • md5 – generates unique identifiers and checksums
  45. 45. Useful Kermit modules • cookies – provides easy functions to manipulate cookies • consent – requires the cookies module and manages all things related to cookie consent • md5 – generates unique identifiers and checksums • beavis – uses the md5 module and provides an automatic page name to your page views, support for heatmaps and more…
  46. 46. Beavis module in one slide • Page views require a description but beavis will generate one for you that is unique, just declare data-analytics-pageview-description without a value. This will save you a ton of time early on
  47. 47. Beavis module in one slide • Page views require a description but beavis will generate one for you that is unique, just declare data-analytics-pageview-description without a value. This will save you a ton of time early on • Interaction elements also get a unique id which could help you implement a heatmap solution
  48. 48. Beavis module in one slide • Page views require a description but beavis will generate one for you that is unique, just declare data-analytics-pageview-description without a value. This will save you a ton of time early on • Interaction elements also get a unique id which could help you implement a heatmap solution • A checksum you can use to detect any changes to your implementation. If the developers made a change the checksum will change too and no longer match the expected checksum
  49. 49. Things to watch out for • Your developers may just end up tagging pages by themselves without a tagging guide
  50. 50. Things to watch out for • Your developers may just end up tagging pages by themselves without a tagging guide • The web analysts will know what’s worth tracking and what’s not, what will cause your server calls to explode and land you in trouble with your vendor and your finance department
  51. 51. Kermit output • On page view Kermit will generate a JSON object where each property is one of your data-analytics-pageview-* HTML5 attribute values
  52. 52. Kermit output • On page view Kermit will generate a JSON object where each property is one of your data-analytics-pageview-* HTML5 attribute values • On page element interactions Kermit will generate another JSON object with the same page view details as above plus a property for each data-analytics-interaction-* HTML5 attribute values
  53. 53. Integration with web analytics tools • The google module is currently in development. For GA integration the JSON outputs from Kermit should be in a format pretty close to what Google Analytics Universal expects
  54. 54. Integration with web analytics tools • The google module is currently in development. For GA integration the JSON outputs from Kermit should be in a format pretty close to what Google Analytics Universal expects • GTM integration might be ridiculously simple since you can use autotracking and read the data- attributes directly from within GTM
  55. 55. Integration with web analytics tools • The google module is currently in development. For GA integration the JSON outputs from Kermit should be in a format pretty close to what Google Analytics Universal expects • GTM integration might be ridiculously simple since you can use autotracking and read the data- attributes directly from within GTM • Adobe Analytics and DTM support is also in the pipeline but not on the MIT licence/open-source
  56. 56. Demo and documentation links • Code and documentation for Kermit v0.8 on GitHub at https://github.com/alban- gerome/kermit
  57. 57. Demo and documentation links • Code and documentation for Kermit v0.8 on GitHub at https://github.com/alban- gerome/kermit • Demo pages – http://www.albangerome.com/kermit/demo. php (uses AngularJS 1.x) – http://www.albangerome.com/kermit/demo 2.php (same as demo.php but uses CSS to hide and show the tabs instead of AngularJS)
  58. 58. Thank you! http://www.albangerome.com @albangerome

×