DOM Events

Fixel provides a single DOM event with multiple properties. You can use this event within your JavaScript code to trigger a function that does whatever you’d like. For example, these events can be used to trigger custom integrations that are not natively supported by Fixel, such as Mixpanel (see example below).

This article won’t be covering the basics of DOM events, but you can get acquainted with the concepts of DOM events below using these external articles:

Fixel Custom DOM Event

Fixel continuously analyzes visitors’ engagement levels from the moment they start a session. When a user’s grade reaches a specific engagement level’s threshold (e.g. Medium), Fixel will fire a DOM Event.

fxl_event — This event fires when a session’s grade reaches a specific engagement level and will contain the following properties:

Event Properties

PROPERTY DESCRIPTION
codeName The name of your segment.
class This session’s achieved engagement level: ‘Basic’, ‘Med’ or ‘High’.

Using the Event Handler

A simple example of using the Fixel DOM Event is this:

document.addEventListener('fxl_event', function(event) {
    //do something awesome
})

 

In this example, the event will trigger every time a user has reached a new engagement threshold.

Using the Event Properties

A good example for using the event’s properties can be sending the Fixel Event to Mixpanel:

document.addEventListener('fxl_event', function(event) {
    mixpanel.track(
        "Fixel", {
            "grade": event.class,
            "display": event.codeName
        }
    );
})

This is ofcourse applicable to any other web analytics solution you might want to integrate with.

Using a Specific Event Property

In some cases, you might want to activate a function only when a user reaches ‘High’ engagement you would:

Add an event listener, define the condition and then trigger the function.
document.addEventListener('fxl_event', function(event) {
    if (event.class === 'High') {
        //do something awesome
    }
})

One practical example for this can be presenting a Poptin popup with a coupon only to users that reached ‘High’ engagement.

document.addEventListener('fxl_event', function(event) {
    if (event.class === 'High') {
        poptin_display('dc25557cecb38')
    }
})
Was this article helpful to you? Yes No

How can we help?