Article summary

Summary
Discusses how to create an AEM 6.1 component that is integrated with Adobe Analytics. In addition, discusses how to configure AEM to connect to Adobe Analytics, setup the Adobe Analytics framework, and map component variables to Adobe Analytics variables. 
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ), Adobe Analytics
Audience
Developer (intermediate)
Required Skills
JavaScript, HTML
Tested On Adobe Experience Manager 6.1
 

Introduction

You can create Adobe Experience Manager (AEM) components that integrate with Adobe Analytics. Adobe Analytics is the industry-leading solution that provides digital marketers with one place to measure, analyze, and optimize integrated data from all online initiatives across multiple marketing channels. It provides marketers with actionable, real-time web analytics intelligence about digital strategies and marketing initiatives. Adobe SiteCatalyst helps marketers quickly identify the most profitable paths through a website, segment traffic to spot high-value web visitors, determine where visitors are navigating away from the site, and identify critical success metrics for online marketing campaigns.

By integrating AEM components with Adobe Analytics, you can gather information about user interaction with the AEM components, such as tracking how visitors are interacting with your components. For example, assume you developed an AEM component to track the number visitors using the component. When a user interacts with the component (for example, clicks a link), the component sends information to Adobe Analytics and a report is updated that you can view, such as shown in the following information.  

Report

As shown in the previous illustration, you can view component information (components integrated with Adobe Analytics) in an Adobe Analytics report. This development article walks you though all the steps to integrate AEM 6.1 components with Adobe Analytics, including how to set AEM and Analytics.

To create an AEM component that is integrated with Adobe Analytics, perform these tasks:

  1. Create a CQ application folder structure.
  2. Create a template on which the page component is based.
  3. Create the page component based on the template.
  4. Create an AEM component that hooks into Adobe Analytics.
  5. Create a CQ web page that uses the new component.

Create an Experience Manager application folder structure 

Create an Experience Manager application folder structure that contains templates, components, and pages by using CRXDE Lite. 

CQAppSetup

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on. 
  • components: contains components that your application uses. 
  • page: contains page components. A page component is a script such as a JSP file.
    global: contains global components that your application uses.
  • template: contains templates on which you base page components. 
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder). 
  • install: contains a compiled OSGi bundles container.

To create an application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter analytics-example
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button.

 

Note:

You have to click the Save All button when working in CRXDELite for the changes to be made.

Create a template 

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

Template.

 

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateAnalytics. 
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter /apps/analytics-example/components/page/templateAnalytics.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

6. Click Next for Allowed Parents.

7. Click Next for Allowed Children.

 

 

Create a render component that uses the template

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click /apps/analytics-example/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateAnalytics. 
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type:foundation/components/page. 

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the templateAnalytics.jsp located at: /apps/analytics-example/components/page/templateAnalytics/templateAnalytics.jsp.

8. Enter the following JSP code.

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is where your AEM component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Configuring AEM to use Adobe Analytics

After you setup the AEM folder structure (including the template and page component), configure AEM to connect to Adobe Analytics. To connect to Adobe Analytics, enter your Adobe Analytics account information, including your user name and password, as shown in this illustration. 

 

Config

As you can see in the previous illustration, you enter the company, user name, and password for your Analytics account. You can test the Adobe Analytics connection by clicking the Connect to Analytics button. It is strongly recommended that you test the connection. If it does not work, check your account credentials. 

To setup the connection between AEM and Adobe Analytics, perform these tasks: 

1. From the AEM starting page (http://localhost:4502/projects.html), click Tools, Operations, Cloud, Cloud Services.

2. In the Adobe Analytics section, click Show Configurations.

3.  Click the [+] button in Available Configurations. 

4. In the Create Configuration dialog, enter a title and name. Be sure to select Adobe Analytics Configuration.

5. In the Edit Configurations dialog (shown in the previous illustration), enter your company name, user name, and password.

6. Test the connection.

7. If the connection is successful, click OK.

Create the TopNav component that uses Adobe Analytics

Create a TopNav component that hooks into Adobe Analytics. That is, when a user clicks on the link, data is sent to Adobe Analytics. The data can be viewed within an Adobe Analytics report (shown later in this article).

The following illustrations shows the TopNav component that is built in this section. 

 

TopNav

Note:

In this article the TopNav component is coped from libs and moved to apps. Then it is modified. 

The following illustration shows the TopNav component in CRXDE lite. 

TopNavNodes

In the previous illustration, notice the analytics node. This node is requried for your AEM component to hook into Adobe Analytics. In addition, you add JS code to the component's JSP, as specified in the following procedure. 

Perform these tasks:

1. Right-click the /libs/foundation/components/topnav node and click Copy.

2. Paste the TopNav nodes to /apps/analytics-example/components.

3. Right-click the /apps/analytics-example/components/topnav node. Select Create > Create Node.

4. Specify the following values: 

  • Name: analytics
  • Type: nt:unstructured
5. Add the following properties to the analytics node:
  • cq:trackvars (String) - topnavTarget,topnavLocation 
  • cq:componentName (String) - topnav (tracking)
  • cq:componentGroup (String) - General

6. Click Save All.

7. Open the /apps/analytics-example/components/topnav/topnav.jsp file.

8. In the a element, add the following attribute:

onclick = "tracknav('<%= child.getPath() %>.html')"

9. At the bottom of the page, add the following javascript code:

 

 

<script type="text/javascript">
    function tracknav(target) {
            if (CQ_Analytics.Sitecatalyst) {
                CQ_Analytics.record({
                    event: 'topnavClick',
                    values: {
                        topnavTarget: target,
                        topnavLocation:'<%=currentPage.getPath() %>.html'
                    },
                    componentPath: '<%=resource.getResourceType()%>'
                });
            }
    }
</script> 

10. Click Save All.

The following code example represents the entire /apps/analytics-example/components/topnav/topnav.jsp file. 

<%@page session="false"%><%--
  Copyright 1997-2008 Day Management AG
  Barfuesserplatz 6, 4001 Basel, Switzerland
  All Rights Reserved.

  This software is the confidential and proprietary information of
  Day Management AG, ("Confidential Information"). You shall not
  disclose such Confidential Information and shall use it only in
  accordance with the terms of the license agreement you entered into
  with Day.

  ==============================================================================

  Top Navigation component

  Draws the top navigation

--%><%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="java.util.Iterator,
        com.day.text.Text,
        com.day.cq.wcm.api.PageFilter,
        com.day.cq.wcm.api.Page,
        com.day.cq.commons.Doctype" %><%

    // get starting point of navigation
    long absParent = currentStyle.get("absParent", 2L);
    String navstart = Text.getAbsoluteParent(currentPage.getPath(), (int) absParent);

    //if not deep enough take current node
    if (navstart.equals("")) 
        navstart=currentPage.getPath();

    Resource rootRes = slingRequest.getResourceResolver().getResource(navstart);
    Page rootPage = rootRes == null ? null : rootRes.adaptTo(Page.class);
    String xs = Doctype.isXHTML(request) ? "/" : "";
    if (rootPage != null) {
        Iterator<Page> children = rootPage.listChildren(new PageFilter(request));
		String v1 = "Link ";
        while (children.hasNext()) {
            Page child = children.next();
            %><a onclick = "tracknav('<%= child.getPath() %>.html')" href="<%= xssAPI.getValidHref(child.getPath()) %>.html"><%
            %><img alt="<%= xssAPI.encodeForHTMLAttr(child.getTitle()) %>" src="<%= xssAPI.getValidHref(child.getPath()) %>.navimage.png"<%= xs %>></a><%
        }
    }
%>

<script type="text/javascript">
    function tracknav(target) {
            if (CQ_Analytics.Sitecatalyst) {
                CQ_Analytics.record({
                    event: 'topnavClick',
                    values: {
                        topnavTarget: target,
                        topnavLocation:'<%=currentPage.getPath() %>.html'
                    },
                    componentPath: '<%=resource.getResourceType()%>'
                });
            }
    }
</script> 

Integrating the TopNav component into the Adobe Analytics Framework

To complete the integration between an AEM component and Adobe Analytics, you map the component's variables to Adobe Analytics variables using the Adobe Analytics framework. First ensure that the TopNav component (that is enabled for Adobe Analytics tracking) is displayed in the AEM Sidekick so that you can add it to the framework.

The following illustration shows the TopNav component displayed in the sidekick. 

Sidekick

Setup a new Adobe Analytics Framework view

Setup an Adobe Analytics Framework by performing these tasks:

  1. Open the SiteCatlyst administration console. (http://localhost:4502/etc/cloudservices/sitecatalyst.html)
  2. Select the configuration that you setup already. 
  3. Click the [+] link. This brings up the Create Framework dialog. 
  4. Select Adobe Analytics Framework.
  5. Specify a Title and Name. 
  6. Click OK.
  7. This brings up the Adobe Analytics Framework.

Setup Report values in the Adobe Analytics Framework view

Setup the Analytics Report values in the newly created Framework view. In this view, you map the TopNav component's variables to Adobe Analytic variables. The first task you perform is drag the TopNav component from the AEM sidekick to the framework, as shown here.

Sidekick2

Note:

If the sidekick is empty, on Sidekick, click the Design button. In the Link Tracking Configuration area, click Configure Inheritance. In the Allowed Components list, select topnav (tracking) in the General section, then click OK. Expand Sidekick to enter edit mode. The component is now available in the General group.

This causes the AEM variables associated with the component to be displayed, as shown in the following illustration. 

sidekick3

Notice that there are three variables associated with the TopNav component.

  • eventdata.topnav.Target
  • eventdata.topnavLocation
  • eventdata.events.topnavClick

The eventdata.events.topnavClick variable represents the event that occurs when the user clicks the TopNav link. Map the eventdata.events.topnavClick variable an Adobe Analytics variable that is located in the left panel. 

Setup Report Suite details 

Next, setup the Report Suite details. In the Report Suites drop-down, you have access to Report Suites that are available for your Adobe Analytics account. Select a report from the drop-down list. Also, specify whether the TopNav component is tracked on author, publish, or both.

The following illustration shows a configured Report Suite. 

ReportSuite

In this example, the report suite is jjesquire137 and the component is configured to be tracked on both author and publish (all). 

Map Adobe Analytics variables to component variables

Once you setup the Report Suite details, you have access to Analytics variables that you can map to component variables. Mapping the TopNav component variables to Adobe Analytic variables is how you send data about a component to an Adobe Analytics report.

The Adobe Analytic variables are shown in the left pane, as shown in this illustration. 

Variables

Note:

On the variables pane, you can display different type of variables. For example, you can  display event variables (under which the Page View variable is listed) by clicking the Event button at the top of the panel. 

Map Adobe Analytic variables to the TopNav component variables by dragging the Adobe Analytics variable from the left pane to the TopNav component, as shown here: 

DragVariabels

Once you drag the Adobe Analytics variable and map it to the TopNav component variable, you will see the following mapping information: 

 

TopNavVariables

As you can see, the eventdata.events.topnavClick component variable is mapped to the Adobe Analytics Page Views variable. Now when a user clicks a link in the TopNav component, data is sent to Adobe Analytics and the Page Views variable is incremeted. 

Note:

The Adobe Analytics variables that appear depend upon the varaibles that are configured for your Adobe Analytics account. 

Activate the framework

Once you are done modifying the Adobe Analytics framework, you have to activate it in order for it to take effect. To activate it, click the Activate Framework button on the sidekick (under the page tab), as shown in the following illustration. 

 

activate

Modify templateAnalytics.jsp

Modify the templateAnalytics.jsp that is located at: 

/apps/analytics-example/components/page/templateAnalytics/templateAnalytics.jsp

Add the following line of code to include the TopNav component:

<cq:include path="topnav" resourceType="/apps/analytics-example/components/topnav" />

The following code represents the modified templateAnalytics.jsp file. 

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<cq:include path="topnav" resourceType="/apps/analytics-example/components/topnav" />
<h1>Here is where your AEM component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Create an AEM site that is based on the templateAnalytics page component

Create an AEM site (based on the templateAnalytics page component) that contains a page and a child page. The TopNav component reads the child page and provides a link to access the child page. When a user clicks the link to the child page, data is sent to Adobe Analytics.

The following illustration shows the AEM page structure. 

pagesites

Perform these tasks:

  1. Go to the CQ Websites page at http://localhost:4502/siteadmin#/content.
  2. Select New Page.
  3. Specify the title of the page in the Title field. Enter Analytics.
  4. Specify the name of the page in the Name field.
  5. Select templateAnalytics from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.
  6. Create a child page named Hello. 
  7. Open the page by clicking the Analytics page. Click the Hello Link. This fires off the event that is mapped to the Adobe Analytics variable.

View the Report in Adobe Analytics

You can view an Adobe Analytics report that shows the data that is tracked. In this example, view a report that displays the value of the Page View variable that is mapped to the TopNav component's eventdata.events.topnavClick variable. 

The following illustration shows the Adobe Analytics report displaying the Page View values.  

ReportView

See also

Congratulations, you have just created an AEM 6.1 component that is integrated with Adobe Analytics. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy