easier and faster tagging with kermit
TRANSCRIPT
![Page 1: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/1.jpg)
![Page 2: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/2.jpg)
Easier pageelement trackingwith Kermit
![Page 3: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/3.jpg)
Easier and fastertagging with Kermit
![Page 4: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/4.jpg)
Easier and fastertagging with Kermit
Alban GérômeBrightonSEO April 7th, 2017
![Page 5: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/5.jpg)
![Page 6: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/6.jpg)
Web analytics tools are
![Page 7: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/7.jpg)
Web analytics tools are
Easy to implement
Limited freedom for bespoke implementations
![Page 8: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/8.jpg)
Web analytics tools are
Easy to implement
Limited freedom for bespoke implementations
Hard to implement
Very customisable implementations
![Page 9: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/9.jpg)
![Page 10: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/10.jpg)
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
![Page 11: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/11.jpg)
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
![Page 12: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/12.jpg)
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
![Page 13: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/13.jpg)
QA testers
![Page 14: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/14.jpg)
QA testers• If there were no Javascript errors the web
analytics implementation is assumed to be correct
![Page 15: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/15.jpg)
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
![Page 16: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/16.jpg)
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
![Page 17: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/17.jpg)
![Page 18: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/18.jpg)
Web analysts
• They cannot spend their time monitoring reports to ensure that the developers latest changes did not break anything
![Page 19: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/19.jpg)
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
![Page 20: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/20.jpg)
![Page 21: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/21.jpg)
What we need
• Simple tagging for complex analytics tools where defaults are enabled but can be overridden
![Page 22: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/22.jpg)
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
![Page 23: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/23.jpg)
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
![Page 24: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/24.jpg)
![Page 25: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/25.jpg)
Page views and interactions
• We only really care about page views and interactions with page elements
![Page 26: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/26.jpg)
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
![Page 27: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/27.jpg)
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
![Page 28: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/28.jpg)
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
![Page 29: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/29.jpg)
Javascript events
The click, change and blur events can be inferred from the element that was interacted with automatically:
![Page 30: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/30.jpg)
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
![Page 31: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/31.jpg)
Tagging default settings
• So we can handle all types of page views automatically
![Page 32: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/32.jpg)
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
![Page 33: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/33.jpg)
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
![Page 34: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/34.jpg)
![Page 35: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/35.jpg)
HTML5 data- attributes
• With HTML5 you can provide custom additional information
![Page 36: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/36.jpg)
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
![Page 37: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/37.jpg)
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
![Page 38: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/38.jpg)
HTML5 data- attributes examples
<input value="B" type="button" data-analytics-interaction-description="Button XYZ was clicked" />
![Page 39: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/39.jpg)
HTML5 data- attributes examples
<input value="B" type="button" data-analytics-interaction-description="Button XYZ was clicked" />
<div data-analytics-pageview-description=" homepage" />
![Page 40: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/40.jpg)
Quick data- attributes reference
• data-analytics-pageview-description• data-analytics-pageview-key• data-analytics-pageview-attribute-*
![Page 41: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/41.jpg)
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
![Page 42: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/42.jpg)
Kermit footprint
• Kermit provides clear visibility on all elements where the data-analytics HTML5 attributes were used on the page:
![Page 43: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/43.jpg)
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
![Page 44: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/44.jpg)
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
![Page 45: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/45.jpg)
Extensible and modular architecture
![Page 46: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/46.jpg)
Extensible and modular architecture
• If the property you need to describe a page view or an interaction is not available you can use:
![Page 47: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/47.jpg)
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-*
![Page 48: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/48.jpg)
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
![Page 49: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/49.jpg)
Useful Kermit modules
• cookies – provides easy functions to manipulate cookies
![Page 50: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/50.jpg)
Useful Kermit modules
• cookies – provides easy functions to manipulate cookies
• consent – requires the cookies module and manages all things related to cookie consent
![Page 51: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/51.jpg)
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
![Page 52: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/52.jpg)
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…
![Page 53: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/53.jpg)
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
![Page 54: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/54.jpg)
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
![Page 55: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/55.jpg)
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
![Page 56: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/56.jpg)
![Page 57: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/57.jpg)
Things to watch out for
• Your developers may just end up tagging pages by themselves without a tagging guide
![Page 58: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/58.jpg)
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
![Page 59: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/59.jpg)
![Page 60: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/60.jpg)
Kermit output
• On page view Kermit will generate a JSON object where each property is one of your data-analytics-pageview-* HTML5 attribute values
![Page 61: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/61.jpg)
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
![Page 62: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/62.jpg)
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
![Page 63: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/63.jpg)
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
![Page 64: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/64.jpg)
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
![Page 65: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/65.jpg)
![Page 66: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/66.jpg)
Demo and documentation links• Code and documentation for Kermit v0.8 on
GitHub at https://github.com/alban-gerome/kermit
![Page 67: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/67.jpg)
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/
demo2.php (same as demo.php but uses CSS to hide and show the tabs instead of AngularJS)
![Page 68: Easier and faster tagging with Kermit](https://reader038.vdocuments.us/reader038/viewer/2022103105/58f9b2fe760da3da068bd161/html5/thumbnails/68.jpg)
Thank you!
http://www.albangerome.com@albangerome