Skip to main content

Usage Insights


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.


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.


const myTrackingFunction = (payload) => {
const {
} = payload;
// your code to analyze and process these values

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

Payload explanations:


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#


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.

    Product page

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

    Height view

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

    Leg view

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

    Arm view

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

    Preference view

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

    result view

  • 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.

    bike fitted

  • 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.

    recommendation available

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

    recommendation opened

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

    recommendation clicked