Upload
alban-gerome
View
181
Download
0
Embed Size (px)
Citation preview
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
Web analytics tools are
Easy to implement
Limited freedom for bespoke implementations
Web analytics tools are
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
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
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
QA testers
QA testers• If there were no Javascript errors the web
analytics implementation is assumed to be correct
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
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
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
• 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
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 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
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
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
HTML5 data- attributes
• With HTML5 you can provide custom additional information
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
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
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
Extensible and modular architecture
• If the property you need to describe a page view or an interaction is not available you can use:
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-*
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
Useful Kermit modules
• cookies – provides easy functions to manipulate cookies
Useful Kermit modules
• cookies – provides easy functions to manipulate cookies
• consent – requires the cookies module and manages all things related to cookie consent
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
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…
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
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
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
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
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
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
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