1.
Easier page
element tracking
with Kermit

2.
Easier and faster
tagging with Kermit

3.
Easier and faster
tagging with Kermit
Alban Gérôme
BrightonSEO April 7th, 2017

4.
Web analytics tools are

5.
Web analytics tools are
Easy to implement
Limited freedom for
bespoke
implementations

6.
Web analytics tools are
Easy to implement
Limited freedom for
bespoke
implementations
Hard to implement
Very customisable
implementations

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.
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.
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.
QA testers

11.
QA testers
• If there were no Javascript errors the web
analytics implementation is assumed to be
correct

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.
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.
Web analysts
• They cannot spend their time monitoring
reports to ensure that the developers latest
changes did not break anything

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.
What we need
• Simple tagging for complex analytics tools
where defaults are enabled but can be
overridden

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.
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.
Page views and interactions
• We only really care about page views and
interactions with page elements

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.
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.
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.
Javascript events
The click, change and blur events can be
inferred from the element that was interacted
with automatically:

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.
Tagging default settings
• So we can handle all types of page views
automatically

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.
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.
HTML5 data- attributes
• With HTML5 you can provide custom
additional information

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.
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.
HTML5 data- attributes examples
<input value="B" type="button" data-analytics-
interaction-description="Button XYZ was
clicked" />

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.
Quick data- attributes reference
• data-analytics-pageview-description
• data-analytics-pageview-key
• data-analytics-pageview-attribute-*

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.
Kermit footprint
• Kermit provides clear visibility on all
elements where the data-analytics HTML5
attributes were used on the page:

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.
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.
Extensible and modular architecture

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.
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.
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.
Useful Kermit modules
• cookies – provides easy functions to
manipulate cookies

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.
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.
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.
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.
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.
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.
Things to watch out for
• Your developers may just end up tagging
pages by themselves without a tagging guide

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.
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.
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.
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.
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.
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.
Demo and documentation links
• Code and documentation for Kermit v0.8 on
GitHub at https://github.com/alban-
gerome/kermit

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.
Thank you!
http://www.albangerome.com
@albangerome