Tracking Events
You can track events for analysis by adding JavaScript code to your Liferay DXP site pages. Your code 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. You can add JavaScript code by modifying pages individually, by adding a page fragment, or using your own development tools and approach.
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(),
});
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. In addition to the attributes you specify, there are global attributes that are associated automatically with all events. The following data typecasts can be set for attributes:
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 |
Modify An Individual Page
The simplest way to add the JavaScript code is to modify an individual page. Make sure to use widget pages as they can add JavaScript code.
-
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.
Fragments that use the Analytics JavaScript object may break on sites that aren’t linked to Analytics Cloud. If you want to use the same fragment across multiple sites, check for the existence of the Analytics object before referencing it.
To learn more, see Developing Fragments.