easier and faster tagging with kermit

Easier pageelement trackingwith Kermit

Easier and fastertagging with Kermit

Easier and fastertagging with Kermit

Alban GérômeBrightonSEO April 7th, 2017

Web analytics tools are


Easy to implement

Limited freedom for bespoke implementations


Easy to implement

Limited freedom for bespoke implementations

Hard to implement

Very customisable implementations

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



• 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

QA testers

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



• We need our own web analytics QA scripts included in their tests suites

• Bless them too

Web analysts

• They cannot spend their time monitoring reports to ensure that the developers latest changes did not break anything

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

What we need

• Simple tagging for complex analytics tools where defaults are enabled but can be overridden

What we need


• Analytics code can be checked by looking at the source code of the page

What we need


• 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 views and interactions

• We only really care about page views and interactions with page elements

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 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 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

Javascript events

The click, change and blur events can be inferred from the element that was interacted with automatically:

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

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 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

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



• 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

HTML5 data- attributes examples

<input value="B" type="button" data-analytics-interaction-description="Button XYZ was clicked" />

HTML5 data- attributes examples

<input value="B" type="button" data-analytics-interaction-description="Button XYZ was clicked" />

<div data-analytics-pageview-description=" homepage" />

Quick data- attributes reference

• data-analytics-pageview-description• data-analytics-pageview-key• data-analytics-pageview-attribute-*

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

Kermit footprint

• Kermit provides clear visibility on all elements where the data-analytics HTML5 attributes were used on the page:

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 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

Extensible and modular architecture


• If the property you need to describe a page view or an interaction is not available you can use:


• 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-*


• 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

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




• 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…

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



• 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

Things to watch out for

• Your developers may just end up tagging pages by themselves without a tagging guide

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

Kermit output

• On page view Kermit will generate a JSON object where each property is one of your data-analytics-pageview-* HTML5 attribute values

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

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



• 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

Demo and documentation links• Code and documentation for Kermit v0.8 on

GitHub at https://github.com/alban-gerome/kermit

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)

Thank you!

http://www.albangerome.com@albangerome

easier and faster tagging with kermit

Internet