Custom Events

In addition to page views, Data4 can also track events that occur on your website. Data4 offers two methods for recording events: using Data Attributes or using JavaScript.

Limitations

• Event names are limited to 50 characters.

• Event data cannot be sent without an event name.

Using Data Attributes

To enable custom events, simply add special data attributes to the elements you want to track.

For example, you might have a button with the following code:

<button id="login-button">Login</button>

Add a data attribute with the following format:

data-data4fun-event="event name"

So your button element should now look like this:

<button id="login-button" data-data4fun-event="Login button">Login</button>

You can optionally employ the data-data4fun-event-* pattern to convey event data.

data-data4fun-event="Login button"
data-data4fun-event-email="data4@data4.com"
data-data4fun-event-id="123"

This will record the event with the name Login button along with the additional properties{ email: 'data4@data4.com', id: '123' }.

Note

• Using this method, all event data will be saved as strings. If you wish to save event data as numbers, dates, booleans, etc., please use the JavaScript method described below.

• Other event listeners inside the element will not be triggered.

 

Using JavaScript

You can also manually record events using the window.data4fun object. To achieve the same result as the data-* method above, you can do the following:

const button = document.getElementById('login-button');

  button.onclick = () => data4fun.track('Login button');

If you want to add additional properties, include them in the second parameter of the track method. The second parameter is an object, and the properties within it support number, string, and boolean types, as shown below:

data4fun.track('Login button',{
  email: 'data4@data4.com', // string
  id: 123, // number
  isNewUser: true // boolean
})

Note: The event name must be of string type!

 

Viewing Events

Once your events are recorded, you can view the event statistics in the Overview/Comparison - Events module.

1. Overview Page

2. Comparison Page