Easier and faster tagging with Kermit
Download as PPTX, PDF2 likes2,607 views
The document discusses the Kermit web analytics tool designed to simplify tagging and tracking of web elements, particularly for web developers, QA testers, and analysts. It emphasizes using HTML5 data attributes for custom analytics management and outlines various default settings and extensible modules to enhance functionality. Additionally, it touches on integration with existing analytics platforms like Google Analytics and Adobe Analytics.
Easier and faster tagging with Kermit
- 2. Easier page element tracking with Kermit
- 3. Easier and faster tagging with Kermit
- 4. Easier and faster tagging with Kermit Alban Gérôme BrightonSEO April 7th, 2017
- 6. Web analytics tools are
- 7. Web analytics tools are Easy to implement Limited freedom for bespoke implementations
- 8. Web analytics tools are Easy to implement Limited freedom for bespoke implementations Hard to implement Very customisable implementations
- 10. 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
- 11. 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
- 12. 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
- 13. QA testers
- 14. QA testers • If there were no Javascript errors the web analytics implementation is assumed to be correct
- 15. 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
- 16. 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
- 18. Web analysts • They cannot spend their time monitoring reports to ensure that the developers latest changes did not break anything
- 19. 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
- 21. What we need • Simple tagging for complex analytics tools where defaults are enabled but can be overridden
- 22. 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
- 23. 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
- 25. Page views and interactions • We only really care about page views and interactions with page elements
- 26. 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
- 27. 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
- 28. 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
- 29. Javascript events The click, change and blur events can be inferred from the element that was interacted with automatically:
- 30. 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
- 31. Tagging default settings • So we can handle all types of page views automatically
- 32. 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
- 33. 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
- 35. HTML5 data- attributes • With HTML5 you can provide custom additional information
- 36. 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
- 37. 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
- 38. HTML5 data- attributes examples <input value="B" type="button" data-analytics- interaction-description="Button XYZ was clicked" />
- 39. HTML5 data- attributes examples <input value="B" type="button" data-analytics- interaction-description="Button XYZ was clicked" /> <div data-analytics-pageview-description=" homepage" />
- 40. Quick data- attributes reference • data-analytics-pageview-description • data-analytics-pageview-key • data-analytics-pageview-attribute-*
- 41. 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
- 42. Kermit footprint • Kermit provides clear visibility on all elements where the data-analytics HTML5 attributes were used on the page:
- 43. 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
- 44. 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
- 45. Extensible and modular architecture
- 46. Extensible and modular architecture • If the property you need to describe a page view or an interaction is not available you can use:
- 47. 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-*
- 48. 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
- 49. Useful Kermit modules • cookies – provides easy functions to manipulate cookies
- 50. Useful Kermit modules • cookies – provides easy functions to manipulate cookies • consent – requires the cookies module and manages all things related to cookie consent
- 51. 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
- 52. 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…
- 53. 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
- 54. 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
- 55. 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
- 57. Things to watch out for • Your developers may just end up tagging pages by themselves without a tagging guide
- 58. 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
- 60. Kermit output • On page view Kermit will generate a JSON object where each property is one of your data-analytics-pageview-* HTML5 attribute values
- 61. 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
- 62. 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
- 63. 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
- 64. 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
- 66. Demo and documentation links • Code and documentation for Kermit v0.8 on GitHub at https://github.com/alban- gerome/kermit
- 67. 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)