Capturing Analytics from IFRAME Embeds

Kaon 3D product models 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.

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 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) {
      ga('send', {
          hitType: 'event',
          eventCategory: 'kaon',
          eventAction: e.data.kaon.action,
          eventLabel: e.data.kaon.model
      });
  }
}, false);


This is a live jsfiddle showing how it works: https://jsfiddle.net/jesmith_at_kaon/ktLrs7ze/
Comments