This an update on my previous presentation on Kermit. This was presented at the Brighton SEO conference on April 7th 2017. This is for Kermit v0.8 and this client-side Javascript framework will help you with: - tagging page views including virtual page views generated by single page applications using AngularJS for example - tagging interactions (covered in the previous presentation) - managing your cookie consent, in particular which elements will provide implicit consent - catch potential losses of analytics reporting caused by code changes made by your developers before these changes go live

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)

68. Thank you!
http://www.albangerome.com
@albangerome