You're viewing help content for version:

AEM Analytics allows you to track user interaction on your website. As a developer you may need to:


This information is basically generic, but it uses SiteCatalyst for specific examples.

For general information on developing components and dialog boxes, see Developing Components.

Custom Events

Custom events track anything that is dependent on the availability of a specific component on the page. This also includes events that are template-specific, as the page-component is treated as another component.

Tracking Custom Events On Page Load

This can be done using the pseudo-attribute data-tracking (the older record attribute is still supported for backwards compatibility). You can add this to any HTML tag.

The syntax for data-tracking is

  • data-tracking="{'event': ['eventName'], 'values': {'key': 'value', 'nextKey': 'nextValue'}, componentPath: 'myapp/component/mycomponent'}"

You can pass any number of key-value pairs as the second parameter, which is called payload.

An example might look like:

<span data-tracking="{event:'blogEntryView', 
                                   'blogEntryContentType': 'blog', 
                                   'blogEntryUniqueID': '<%= xssAPI.encodeForJSString(entry.getId()) %>',
                                   'blogEntryTitle': '<%= xssAPI.encodeForJSString(entry.getTitle()) %>',
                                   'blogEntryAuthor':'<%= xssAPI.encodeForJSString(entry.getAuthor()) %>',
                                   'blogEntryPageLanguage':'<%= currentPage.getLanguage(true) %>'

At page load, all data-tracking attributes will be collected and added to the event section of the Client Context, where they can be mapped to SiteCatalyst events. Events that are not mapped will not be tracked by SiteCatalyst. See Connecting to Adobe Analytics for more details about mapping events.

Tracking Custom Events After Page Load

To track events that occur after a page is loaded (such as user interactions), use the CQ_Analytics.record JavaScript function:

  • CQ_Analytics.record({event: 'eventName', values: { valueName: 'VALUE' }, collect:  false, options: { obj: this, defaultLinkType: 'X' }, componentPath: '<%=resource.getResourceType()%>'})


  • events is either a string or a string array (for multiple events).
  • values contains all of the values to be tracked
  • collect is optional and will return an array containg the event and data object.
  • options is optional and contains link tracking options like HTML element obj and defaultLinkType.
  • componentPath is a necessary attribute and it is recommended to set it to <%=resource.getResourceType()%>

For example, with the following definition, a user clicking the Jump to top link will cause the two events, jumptop and headlineclick, to be fired:

<h1 data-tracking="{event: 'headline', values: {level:'1'}, componentPath: '<%=resource.getResourceType()%>'}">
  My Headline <a href="#" onclick="CQ_Analytics.record({event: ['jumptop','headlineclick'],  values: {level:'1'}, componentPath: '<%=resource.getResourceType()%>'})">Jump to top</a>

Sample script setting store data on page load

Accessing Values in the Client Context

Every Data Manager has a getProperty(key) function that returns the value of the specified key, if available. Using the getPropertyNames function it is possible to retrieve an array of defined keys.

You can be notified of value changes by adding a listener function using the addListener(event, callback, scope) function. Events that can be fired are updated and persisted.

The best way to be notified of initial availability of the Client Context is to use the CQ_Analytics.ClientContextMgr.addListener("storesloaded", function(e) { }) function.

Additional listeners for ClientContext:

All stores ready:


Store specific:

CQ_Analytics.ClientContextUtils.onStoreInitialized("profile",function(event) {});

Adding Record Callbacks

Before and after callbacks are registered using the functions CQ_Analytics.registerBeforeCallback(callback,rank) and CQ_Analytics.registerAfterCallback(callback,rank).

Both functions take a function as the first argument and a rank as the second argument, which dictates the order that callbacks are executed.

If your callback returns false, the callbacks following in the execution chain will not be executed.