Articles in this section

In-Page Event Callbacks

Avatar
Niall Byrne
Updated
Follow

When you have implemented In-Page on your website you'll have the option to make use of the setEventCallback method. Similar to the GetFeedback Digital for Web Event Callbacks you make use of the In-Page setEventCallback function to signal that an interaction with In-Page widget has taken place on your webpage. 

The Event Callbacks can be registered through a JavaScript function. They are the backbone of many of GetFeedback Digital's integrations and can be used to make feedback submitted through the In-Page widget available in the browser. 

Event callbacks make it possible to send information from GetFeedback Digital to other web optimization tools such as Analytics Tools, Session Recording, A/B Testing Tools, or Data Management Platforms. 

In this article, we will focus on the basic implementation of In-Page EventCallbacks. Before moving on make sure to refresh you In-Page widgets and scripts by re-saving them or by turning them off and on 1 time. This makes sure that you can use the event callbacks.

Note: In order to implement the Event Callbacks, you'll need some technical knowledge since you'll have to add a javascript snippet to the existing GetFeedback Digital code on your website or in your tag management system.

The Basics

Event Callbacks can be traced on your website, using the following code:

window.usabilla('setEventCallback', callback);

Where callback is a javascript function with the following signature:

function(category, action, label, value, userData) {};

This function will be called when one of the below events occur on your website. For each event, the function's parameters will be used as described. The basic implementation can be found down below in the Gist Frame:

Please note that 'setEventCallback' can only be defined once on every page and that it must always be defined after the default GetFeedback Digital script has been loaded. If you try to define it more than once on a page, the callback function will be overwritten with the last defined one.  

The Events

Below you'll find the two events that can be used for the setEventCallback of In-Page.  

1. The user moves to the next page of the In-Page form

This event is fired when the user navigates to the next page of the In-Page feedback form. It uses the following arguments in the callback function.

  • category: "in-page"
  • action: "In-Page:Page Switch"
  • label: null
  • value: null
  • userData: An object containing the responses the user provided. The user's responses will be nested into another object called "data.data".

2. In-Page Feedback is given

This event is fired when the user successfully completes the In-Page feedback form. It uses the following arguments in the callback function.

  • category: "in-page"
  • action: "In-Page:Success"
  • label: null
  • value: null
  • userData: An object containing the responses the user provided. The user's responses will be nested into another object called "data.data". 

userData Object

The userData object itself contains several other objects that you can use. For most implementation, we recommend that you only use the userData.data.data object. For more advanced implementations you can also make use of the other objects nested in the userData object. Below you'll find a high-level overview of all available objects nested in the userData object. You can use

userData.data

The object that contains information about the widget. This includes the completion status, the ID, the signature, the subtype, the main type, and the widget version. Nested in the userData.data object you'll find the other available objects.

Browser

userData.data.browser

The object that contains information about the browser. This includes the user agent, browser language, cookie information, and doNotTrack information.

Custom

userData.data.custom

The object that contains any of the Custom Variables that were included in the In-Page feedback response. The values are sorted in the order in which you initialized them in the In-Page widget.

Data

userData.data.data

The object that contains the In-Page feedback response that the user gave. The object contains nested objects and variables that are named based on the names used for each of the form elements.

Screen

userData.data.screen

The object that contains information about the screen. This includes the available the available height from the top, the available height from the left, the available screen width, the available screen height, the screens' color depth, total screen height, the orientation, the pixel depth, and the total screen width. The data points are ordered alphabetically.

Times

userData.data.times

The object that contains any information and data about the times.

Pages

userData.data.pages

The object that contains information about the pages of the In-Page form.

Related articles