Easy page element interactions tagging

with Kermit

Alban Gérôme, MeasureCamp London, Sep 10th 2016

2 types of page element interactions

• Page views

• Page element interactions

– Clicks on buttons, links, checkboxes, image maps– Drop-down or radio button selections– Text field entries

Save time with Kermit

• Most tracking requirements are for page element interactions

• Most of them track very little• What if you could ask the developers to add

a class-like HTML attribute containing the description of the interaction and let you do more fun stuff?

Like this?

<input value="B" type="button" />

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

So many Javascript events

• click – buttons, links, check boxes, image maps

• change – drop-downs and radio buttons

• blur – text fields

• The rest is not relevant

Let Kermit determine the event

• Add the data-analytics-interaction-description HTML field on the elements you are interested

• If this is a field visitors can interact with Kermit will determine the relevant Javascript event

• Next time the visitor interacts with the page element it will fire a tracking request

Internal cross-browser support

Event tracking cross-browser can be tricky. Kermit supports:

• addEventListener (most browsers)• attachEvent (IE)• DOM Level 0 events like onclick, onchange and

onblur

Racing conditions tamed

Tracking links that take your visitors to a new page cause a so-called racing condition.

• The new page is trying to load• The tracking request is trying to fire

Kermit uses sendBeacon or delays the loading of the new page by 500 milliseconds

Supported HTML5 tags

click category• input[button]• input[submit]• input[checkbox]• button• a[href]• area[href]

change category• select• input[radio]

Supported HTML5 tags (ctnd)

blur category• input[text]• input[color]• input[date]• input[datetime]• input[datetime-

local]• input[email]

• input[month]• input[number]• input[range]• input[search]• input[tel]• input[time]

• input[url]• input[week]• textarea

Configuring Kermit

• You can rename the data-analytics-interaction-description HTML attribute

• You can change the delay applied to pages that load after a click on a link

• All HTML5 tags a visitor could interact with but you can add more

Controlling your server calls

• Some page element interactions have business value, most do not

• Your business stakeholders cannot tell the difference so they want everything tracked

• Your developers will use Kermit everywhere and your server calls will explode

Controlling your server calls (ctnd)

• High traffic pages with many page interactions tracked should be your first target

• Count how many tags use Kermit per page and pass it into a page view variable like a prop

s.prop67 = document.querySelectorAll("[data-analytics-interaction-description]").length;

High traffic(page views)

Low traffic(page views)

Many pageelement

interactions

No pageelement

interactions

Server callsout of control

Conclusion

• Collect the tracking requirements like before• Review which tracking requirements have

business value, this is not a free candy shop!• Agree on the remaining interactions• Let the stakeholder liaise with the developers• Still keep an eye for high traffic pages with

many page elements tracked

Use Kermit, extend it and share

• Get Kermit on GitHub• Provided « as-is » so contact me about bugs

and suggestions• Fork my repo and extend Kermit• Check for updates

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

http://www.albangerome.com@albangerome

Thank you!