Usage Insights

info

The usageInsights callback is designed to give you a good understanding, how your customers are using the Sizing Widget and provide you with valuable information which can be used for google analytics or similar.

important

This callback function is fired for all relevant events that are happening in the widget. You are provided with a payload with all the information you need to get a better understanding, how your customers are using the widget. See the example below how it is implemented and what`s in the payload.

Visual overview

See the flowchart below, when the callback is triggered and what the event name is.

Implementation

Javascript

const myTrackingFunction = (payload) => {
  const {
    event,
    eventCategory,
    modelCode,
    modelName,
    nonInteractive,
    recommendationReason,
    recommendationURL,
    resultCode,
    resultSize,
    units,
    widgetType,
  } = payload;
  // your code to analyze and process these values
};

const OZ_CONFIG = {
  settings: {
    //config options here
  },
  events: {
    usageInsights: {
      callback: myTrackingFunction,
    },
    // other callback functions
  },
};

Payload

Object {
    event: "resultShown",
    eventCategory: "funnel",
    modelCode: "4039645500299",
    modelName: "Centurion Backfire E",
    nonInteractive: false,
    recommendationReason: undefined,
    recommendationURL: undefined,
    resultCode: "4039645500305",
    resultSize: "S-M",
    units: "metric",
    widgetType: "sizing",
}

Payload explanations:

important

Please note that every every payload contains every attribute. If the attribute isn't available yet, it will be undefined. For example: The resultSize will not be available before the result screen. Therefore it will be undefined most of the time. It might be a good idea to play around and just log the payload to the console to get a feeling what is going on.

• widgetType: Defines the type of the widget. Possible values: "sizing" | "geometries"
• event: Indicates why the callback is triggered and is the most important attribute. See here the detailed information.
• eventCategory: Differs between initialization and funnel events: Possible values: "init" | "funnel"
• nonInteractive: Indicates if the user actively clicked or not. Possible values: true | false
• units: Shows the unit type displayed in the widget. Possible values: "metric" | "imperial"
• modelName: Provides the model name of the bike
• modelCode: Provides the EAN of the requested bike
• resultSize: Provides the sizing result if available
• resultCode: Provides the EAN of the recommended bike
• recommendationReason: Indicates why the recommendations are shown. Possible values: "outOfStock" | "tooSmall" | "tooBig"
• recommendationURL: URL of the clicked recommendation#

Events

This is a list of cases when the function is executed. It is also the value of the event attribute:

• loaded
• loadingFailed
• opened
• heightViewOpened
• legViewOpened
• armViewOpened
• preferenceViewOpened
• resultShown
• bikeFitted
• closed
• recommendationAvailable
• recommendationOpened
• recommendationClicked

Event details

• loaded: This event is fired, whenever the widget script is loaded properly and the bike is available in our database.

• loadingFailed: This event is fired, when the widget can't be displayed, for example the bike is not available in our database.

• opened: This event is fired, when a user clicks the button on your product page.

  

• heightViewOpened: This event is fired, when the height view is opened.

  

• legViewOpened: This event is fired, when the leg view is opened.

  

• armViewOpened: This event is fired, when the arm view is opened.

  

• preferenceViewOpened: This event is fired, when the preference view is opened:

  

• resultShown: This event is fired, when the user receives a frame recommendation

  

• bikeFitted: This event is fired, when a user clicks on this button, where you can implement your own logic to select the recommended size in your shop for example. More information.

  

• closed: This event is fired, when a user closes the widget either with a click on one of the close buttons or beside the widget.

Recommendation Engine

If you have implemented our Recommendation Engine, then you will receive the following events as well.

• recommendationAvailable: This event is fired, when the recommended size of the requested bike is not available and there are suitable alternatives available. The cta button says Show me available bikes or Show me fitting bikes.

  

• recommendationOpened: This event is fired, when the user clicks the cta button and opens the Recommendation Engine.

  

• recommendationClicked: This event is fired, when the user clicks on one of the recommended alternatives.