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.

FieldDescription
eventThe 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”)
attributesThe 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 TypeDescription
Booleantrue or false, case insensitive
DateISO-8061 format (yyyy-MM-dd’T’HH:mm:ss.SSSX)
DurationIn milliseconds, non-negative
NumberWithout thousands separator; decimal separator is okay
StringIf 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.

  1. Click the Product Menu (Product Menu icon.) and navigate to Site BuilderPages.

  2. Click the Actions icon (Actions icon.) of the individual page and click Configure

  3. Paste the JavaScript code in the text box area under JavaScript. This is located under the Advanced tab.

    Paste the JavaScript code into the text box.

  4. Click Save and now your page is ready to track events.

To learn more, see Page Settings UI Reference.

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.

  1. Click the Product Menu (Product Menu icon.) and navigate to DesignFragments.

  2. Click the Plus icon (Plus icon.) for Fragment Sets.

  3. Click the Add icon (Add icon.) to create a new fragment.

  4. Click on the Code tab and Paste the JavaScript code into the JavaScript field.

    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.

  5. Click Save and now the page fragment is ready to use.

  6. Navigate to the content page you wish to add the fragment to. Click the Edit icon (Edit icon.) to open the page editor. Locate the fragment you just created and drag it to your page. Click Publish.

Note

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.

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy