Tracking Events

You can track events for analysis by adding JavaScript code to your Liferay DXP site pages. The code you add interacts with Analytic Cloud’s APIs to capture what users are doing on your website. These events can be analyzed with the Events Analysis tool.

To do this, use Analytics.track in your JavaScript code and define your event name and attributes.

Field	Description
`event`	The name of your event. We recommend using a human-readable name that can be easily understood for when doing events analysis (e.g. “Add to Cart Click”)
`attributes`	The different attributes of the event you wish to track (e.g. price, product name, quantity, etc.)

For example, you could track how users are adding items to their shopping cart. Add JavaScript code to the product page of your website to track these events. Select attributes such as price, product name, and quantity to track with the event. Here’s a simple example:


// Add some event listener logic for when a user clicks the Add to Cart button

Analytics.track("Add to Cart Click",{
    'price': productPrice(),
    'productName': productName(),
    'quantity': productQuantity(),
});

The following data typecasts can be set for attributes: Boolean, Date, Duration, Number, and String. Analytics Cloud automatically tries to detect and cast the datatype based on the first data collected for that attribute. Make changes to the typecast if necessary in Definitions for Event Attributes found in the settings page of Analytics Cloud.

Attribute Type	Description
`Boolean`	`true` or `false`, case insensitive
`Date`	ISO-8061 format (yyyy-MM-dd’T’HH:mm:ss.SSSX)
`Duration`	In milliseconds, non-negative
`Number`	Without thousands separator, decimal separator is okay
`String`	If no other format matches, Analytics Cloud will assume string

Note, in addition to the attributes you specify, there are global attributes that are automatically associated with all events.

Adding JavaScript Code

There a few different ways you can add JavaScript code to enable tracking events. Modifying an individual page, adding a page fragment, or using a custom implementation.

Modify An Individual Page

The simplest way to add the JavaScript code is to modify an individual page. Note, make sure to use Widget Pages that have the ability to add JavaScript code to a page.

Click the Product Menu () and navigate to Site Builder → Pages.
Click the Actions icon () of the individual page and click Configure
Paste the JavaScript code in the text box area under JavaScript. This is located under the Advanced tab.
Click Save and now your page is ready to track events.

To learn more, see Configuring Individual Pages.

Add A Page Fragment

Another way to add the Javascript code is to create a page fragment that can be added to a Content Page. You get more scalability by being able to quickly add the fragment to any page on your website.

Click the Product Menu () and navigate to Design → Fragments.
Click the Plus icon () for Fragment Sets.
Click the Add icon () to create a new fragment.
Click on the Code tab and Paste the JavaScript code into the JavaScript field.

Note, you may need additional code that fetches attribute values or logic that triggers the Analytics.track code.
Click Save and now the page fragment is ready to use.
Navigate to the content page you wish to add the fragment to. Click the Edit icon () to open the page editor. Locate the fragment you just created and drag it to your page. Click Publish.