Capturing Analytics from IFRAME Embeds
Kaon apps and 3D product tours embedded on websites post messages to the embedding page for all user interactions. The hosting page can set up a listener, and then pass selected analytics information on to whatever web analytics package is being used.
Example listener code:
window.addEventListener("message", function(e) {
if (e.data.kaon) {
// process the data here...
}
}, false);
As the example shows, user actions are stored in an object called kaon which is an attribute of the message object.
The attributes of the kaon object indicate what user interaction took place.
Within a solution story, a single attribute "experience" will carry the information about what the user interacted with:
experience:
Name of the section viewed, collateral item clicked, etc.
Within 3D product models, a variety of attributes may be present:
action:
Name of the action which took place (this will be "model" at load time)
model:
Name of the product (this attribute is always present)
animation:
String with the name of the animation button the user selected
hotspot:
String with the text of the hotspot (truncated, since these are often quite long)
view:
Object indicating that the user manually changed the view. This object will contain one or more of the following:
view.zoom:
New field of view
view.turn:
New angle of view in degrees
view.pan:
New center of view offset
arvr:
String indicating that the user entered "ar" or "vr" mode
reset:
The string "reset" indicating the user clicked the reset button
measure:
Distance measured by user (in centimeters)
The app will periodically send a message when the user moves into a new engagement level. There are 7 levels (numbered 0 to 6) corresponding to how long they have been using the experience (excluding idle time).
engagement:
engagement.bucket:
Number in the range 0 to 6 indicating the user's level of engagement
engagement.range:
Text representation of the bucket value:
0-10s
10-30s
30s-1m
1-3m
3-5m
5-30m
30m+
The following example is typical of how events should be recorded. The specifics depend on which analytics package you use.
window.addEventListener("message", function(e) {
if (e.data.kaon && e.data.kaon.experience) {
ga('send', {
hitType: 'event',
eventCategory: 'kaon',
eventAction: e.data.kaon.experience,
eventLabel: 'solution'
});
}
if (e.data.kaon && e.data.kaon.action) {
ga('send', {
hitType: 'event',
eventCategory: 'kaon',
eventAction: e.data.kaon.action,
eventLabel: e.data.kaon.model
});
}
if (e.data.kaon && e.data.kaon.engagement) {
if (e.data.kaon.engagement.bucket == 4) {
// The user has been engaged for 5 minutes,
// trigger a call-to-action
showCTA();
}
}
}, false);
This is a live jsfiddle showing how it works: https://jsfiddle.net/jesmith_at_kaon/ktLrs7ze/