Alternative Asset Tracking Methods

Liferay Analytics Cloud can detect and analyze built-in Liferay DXP assets like blogs, documents and media, forms, and web content throught their respective widgets. If you have custom fragments or widgets that display these assets on your site and want Analytics Cloud to track them, use HTML attributes. Analytics Cloud’s JavaScript plugin detects these HTML attributes, tracks user interaction, and shows the data in their respective asset type dashboards. You can also use these tags to track custom assets and include their metrics with one of the other asset types.

Asset Events

The Analytics Cloud JavaScript plugin contains the following events that you can track:

AssetClicked: User clicks the asset area. Also carries information about the tag clicked.

AssetDepthReached: Scroll event in the asset area. Also carries information about the content depth the user reached (e.g., how far down a blog post the user scrolled).

AssetViewed: User views the asset.

AssetDownloaded: User clicks a link that downloads the asset.

AssetSubmitted: Form submission in the asset area. This requires an input type of submit to be placed under an HTML form element.

Required Metadata

You must specify the following HTML attributes to enable tracking in your custom widgets or fragments.

Name	Type	Description
data-analytics-asset-action	string	The event’s type (preview or download). Only applies to documents and media.
data-analytics-asset-id	string	A unique identifier for each asset. The string must not contain spaces.
data-analytics-asset-title	string	The asset’s title.
data-analytics-asset-type	string	The asset type (blog, document, form, or web-content).

Note

You must add these attributes to each individual asset that you want Analytics Cloud to track. You can, however, use a script to populate the attributes’ values, automating this process for each asset.

Example for Blogs Type

To track blogs, use data-analytics-asset-type="blog" along with the other required HTML tags:

<div
  data-analytics-asset-id="myBlogId"
  data-analytics-asset-title="Blog Title"
  data-analytics-asset-type="blog"
>
  <h3>Bringing Ideas To Life: A Look Into Creative Writing</h3>

  <p>
    This blog explores the ways in which we can use creativity to bring our
    ideas to life. We will be looking at techniques for how to inspire, generate
    and develop characters and plot lines for compelling stories. We will also
    look at real-life examples and discuss practical use cases to apply
    knowledge to real writing.
  </p>
</div>

Example for Documents and Media Type

To track documents and media, use data-analytics-asset-type="document" along with the other required HTML tags:

<div>
  <h3>List of the documents related to Analytics Cloud</h3>

  <ul>
    <li
      data-analytics-asset-action="preview"
      data-analytics-asset-id="myDocumentA"
      data-analytics-asset-title="Document A"
      data-analytics-asset-type="document"
    >
      <a data-analytics-asset-action="download" href="/document-a.pdf">Document A</a>
    </li>
    <li
      data-analytics-asset-action="preview"
      data-analytics-asset-id="myDocumentB"
      data-analytics-asset-title="Document B"
      data-analytics-asset-type="document"
    >
      <a data-analytics-asset-action="download" href="document-b.pdf">Document B</a>
    </li>
    <li
      data-analytics-asset-action="preview"
      data-analytics-asset-id="myDocumentC"
      data-analytics-asset-title="Document C"
      data-analytics-asset-type="document"
    >
      <a data-analytics-asset-action="download" href="document-c.pdf">Document C</a>
    </li>
  </ul>
</div>

Example for Forms Type

To track forms, use data-analytics-asset-type="form" along with the other required HTML tags:

<form
  data-analytics-asset-id="myFormId"
  data-analytics-asset-title="Form Title"
  data-analytics-asset-type="form"
>
  <h3>Create new user</h3>

  <div class="content">
    <label for="name">Name</label>
    <input id="name" type="text" />
  </div>

  <div class="content">
    <label for="city">City</label>
    <input id="city" type="text" />
  </div>

  <div class="content">
    <label for="age">Age</label>
    <input id="age" type="text" />
  </div>

  <button type="submit">save</button>
</form>

Example for Web Content Type

To track web content, use data-analytics-asset-type="web-content" along with the other required HTML tags:

<div
  data-analytics-asset-id="myWebContentId"
  data-analytics-asset-title="Web Content Title"
  data-analytics-asset-type="web-content"
>
  <h3>Bringing Ideas To Life: A Look Into Creative Writing</h3>

  <p>
    This blog explores the ways in which we can use creativity to bring our
    ideas to life. We will be looking at techniques for how to inspire, generate
    and develop characters and plotlines for compelling stories. We will also
    look at real-life examples and discuss practical use cases to apply
    knowledge to real writing.
  </p>
</div>