ntegratingAdobeExperienceManager6.

1
ComponentswithAdobeAnalytics

Wasthishelpful?
Yes

No

AdobeCommunityHelp
Search

Appliesto

Contact

AdobeCQ
AdobeExperienceManager

support

Articlesummary

Summary

DiscusseshowtocreateanAEM6.1
componentthatisintegratedwithAdobe
Analytics.Inaddition,discusseshowto
configureAEMtoconnecttoAdobeAnalytics,
setuptheAdobeAnalyticsframework,andmap
componentvariablestoAdobeAnalytics
variables.

Digital
AdobeExperienceManager(AdobeCQ),
Marketing
AdobeAnalytics
Solution(s)
Audience

Developer(intermediate)

Required
Skills

JavaScript,HTML

TestedOn

AdobeExperienceManager6.1

Introduction
YoucancreateAdobeExperienceManager(AEM)componentsthatintegratewith
AdobeAnalytics.AdobeAnalyticsistheindustryleadingsolutionthatprovidesdigital
marketerswithoneplacetomeasure,analyze,andoptimizeintegrateddatafromall
onlineinitiativesacrossmultiplemarketingchannels.Itprovidesmarketerswith
actionable,realtimewebanalyticsintelligenceaboutdigitalstrategiesandmarketing
initiatives.AdobeSiteCatalysthelpsmarketersquicklyidentifythemostprofitablepaths
throughawebsite,segmenttraffictospothighvaluewebvisitors,determinewhere
visitorsarenavigatingawayfromthesite,andidentifycriticalsuccessmetricsforonline
marketingcampaigns.
ByintegratingAEMcomponentswithAdobeAnalytics,youcangatherinformationabout
userinteractionwiththeAEMcomponents,suchastrackinghowvisitorsareinteracting
withyourcomponents.Forexample,assumeyoudevelopedanAEMcomponenttotrack
thenumbervisitorsusingthecomponent.Whenauserinteractswiththecomponent
(forexample,clicksalink),thecomponentsendsinformationtoAdobeAnalyticsanda
reportisupdatedthatyoucanview,suchasshowninthefollowinginformation.

AnAdobeAnalyticsreportdisplayingdatasentfromanAEMcomponent
Asshowninthepreviousillustration,youcanviewcomponentinformation
(componentsintegratedwithAdobeAnalytics)inanAdobeAnalyticsreport.
ThisdevelopmentarticlewalksyouthoughallthestepstointegrateAEM
6.1componentswithAdobeAnalytics,includinghowtosetAEMand
Analytics.
TocreateanAEMcomponentthatisintegratedwithAdobeAnalytics,
performthesetasks:
1. CreateaCQapplicationfolderstructure.
2. Createatemplateonwhichthepagecomponentisbased.
3. Createthepagecomponentbasedonthetemplate.
4. CreateanAEMcomponentthathooksintoAdobeAnalytics.
5. CreateaCQwebpagethatusesthenewcomponent.
Tothetop

CreateaCQapplicationfolderstructure
CreateanAdobeCQapplicationfolderstructurethatcontainstemplates,
components,andpagesbyusingCRXDELite.

ACQapplicationfolderstructure
Thefollowingdescribeseachapplicationfolder:
applicationname:containsalloftheresourcesthatanapplicationuses.The
resourcescanbetemplates,pages,components,andsoon.
components:containscomponentsthatyourapplicationuses.
page:containspagecomponents.ApagecomponentisascriptsuchasaJSPfile.
global:containsglobalcomponentsthatyourapplicationuses.
template:containstemplatesonwhichyoubasepagecomponents.
src:containssourcecodethatcomprisesanOSGicomponent(thisdevelopment
articledoesnotcreateanOSGibundleusingthisfolder).
install:containsacompiledOSGibundlescontainer.
Tocreateanapplicationfolderstructure:
1. ToviewtheCQwelcomepage,entertheURLhttp://[hostname]:[port]intoaweb
browser.Forexample,http://localhost:4502.
2. SelectCRXDELite.
3. Rightclicktheappsfolder(ortheparentfolder),selectCreate,CreateFolder.
4. EnterthefoldernameintotheCreateFolderdialogbox.Enteranalyticsexample.
5. Repeatsteps14foreachfolderspecifiedinthepreviousillustration.
6. ClicktheSaveAllbutton.

Note: YouhavetoclicktheSaveAllbuttonwhenworkinginCRXDELite
forthechangestobemade.
Tothetop

Createatemplate
YoucancreateatemplatebyusingCRXDELite.ACQtemplateenablesyoutodefinea
consistentstyleforthepagesinyourapplication.Atemplatecomprisesofnodesthat
specifythepagestructure.Formoreinformationabouttemplates,seeTemplates.
Tocreateatemplate,performthesetasks:
1.ToviewtheCQwelcomepage,entertheURLhttp://[hostname]:[port]intoaweb
browser.Forexample,http://localhost:4502.
2.SelectCRXDELite.
3.Rightclickthetemplatefolder(withinyourapplication),selectCreate,Create
Template.
4.EnterthefollowinginformationintotheCreateTemplatedialogbox:
Label:Thenameofthetemplatetocreate.EntertemplateAnalytics.
Title:Thetitlethatisassignedtothetemplate.

Description:Thedescriptionthatisassignedtothetemplate.
ResourceType:Thecomponent'spaththatisassignedtothetemplateand
copiedtoimplementingpages.Enter/apps/analytics
example/components/page/templateAnalytics.
Ranking:Theorder(ascending)inwhichthistemplatewillappearinrelationto
othertemplates.Settingthisvalueto1ensuresthatthetemplateappearsfirstin
thelist.
5.AddapathtoAllowedPaths.Clickontheplussignandenterthefollowing
value:/content(/.*)?.
6.ClickNextforAllowedParents.
7.SelectOKonAllowedChildren.

Tothetop

Createarendercomponentthatusesthetemplate
Componentsarereusablemodulesthatimplementspecificapplication
logictorenderthecontentofyourwebsite.Youcanthinkofacomponent
asacollectionofscripts(forexample,JSPs,Javaservlets,andsoon)that
completelyrealizeaspecificfunction.Inordertorealizethisfunctionality,it
isyourresponsibilityasaCQdevelopertocreatescriptsthatperform
specificfunctionality.Formoreinformationaboutcomponents,
seeComponents.
Bydefault,acomponenthasatleastonedefaultscript,identicaltothenameofthe
component.Tocreatearendercomponent,performthesetasks:
1.ToviewtheCQwelcomepage,entertheURLhttp://[hostname]:[port]intoaweb
browser.Forexample,http://localhost:4502.
2.SelectCRXDELite.
3.Rightclick/apps/analyticsexample/components/page,thenselectCreate,Create
Component.
4.EnterthefollowinginformationintotheCreateComponentdialogbox:
Label:Thenameofthecomponenttocreate.EntertemplateAnalytics.
Title:Thetitlethatisassignedtothecomponent.
Description:Thedescriptionthatisassignedtothetemplate.
SuperType:foundation/components/page.
5.SelectNextforAdvancedComponentSettingsandAllowedParents.
6.SelectOKonAllowedChildren.
7.OpenthetemplateAnalytics.jsplocatedat:/apps/analytics
example/components/page/templateAnalytics/templateAnalytics.jsp.
8.EnterthefollowingJSPcode.

1
2

<html>
<%@includefile="/libs/foundation/global.jsp"%>

2
3
4
5
6
7
8

<%@includefile="/libs/foundation/global.jsp"%>
<cq:includescript="/libs/wcm/core/components/init/init.jsp"
<body>
<h1>HereiswhereyourAEMcomponentwillgo</h1>
<cq:includepath="par"resourceType="foundation/components/parsys"
</body>
</html>
Tothetop

ConfiguringAEMtouseAdobeAnalytics
AfteryousetuptheAEMfolderstructure(includingthetemplateandpage
component),configureAEMtoconnecttoAdobeAnalytics.Toconnectto
AdobeAnalytics,enteryourAdobeAnalyticsaccountinformation,including
yourusernameandpassword,asshowninthisillustration.

TheAEMAnalyticsSettingsdialog
Asyoucanseeinthepreviousillustration,youenterthecompany,username,and
passwordforyourAnalyticsaccount.YoucantesttheAdobeAnalyticsconnectionby
clickingtheConnecttoAnalyticsbutton.Itisstronglyrecommendedthatyoutestthe
connection.Ifitdoesnotwork,checkyouraccountcredentials.
TosetuptheconnectionbetweenAEMandAdobeAnalytics,performthesetasks:
1.FromtheAEMstartingpage(http://localhost:4502/projects.html),
clickTools,Operations,Cloud,CloudServices.

2.IntheAdobeAnalyticssection,clickShowConfigurations.
3.Clickthe[+]buttoninAvailableConfigurations.
4.IntheCreateConfigurationdialog,enteratitleandname.BesuretoselectAdobe
AnalyticsConfiguration.
5.IntheEditConfigurationsdialog(showninthepreviousillustration),enteryour
companyname,username,andpassword.
6.Testtheconnection.
7.Iftheconnectionissuccessful,clickOK.
Tothetop

CreatetheTopNavcomponentthatusesAdobe
Analytics
CreateaTopNavcomponentthathooksintoAdobeAnalytics.Thatis,
whenauserclicksonthelink,dataissenttoAdobeAnalytics.Thedata
canbeviewedwithinanAdobeAnalyticsreport(shownlaterinthisarticle).
ThefollowingillustrationsshowstheTopNavcomponentthatisbuiltinthis
section.

AnAEMTopNavcomponentthatisintegratedwithAdobeAnalytics
Note: InthisarticletheTopNavcomponentiscopedfromlibsandmoved
toapps.Thenitismodified.
ThefollowingillustrationshowstheTopNavcomponentinCRXDElite.

JCRnodesthatbelongtotheTopNavcomponent
Inthepreviousillustration,noticetheanalyticsnode.Thisnodeis
requriedforyourAEMcomponenttohookintoAdobeAnalytics.Inaddition,
youaddJScodetothecomponent'sJSP,asspecifiedinthefollowing
procedure.
Performthesetasks:
1.Rightclickthe/libs/foundation/components/topnavnodeandclickCopy.
2.PastetheTopNavnodesto/apps/analyticsexample/components.
3.Rightclickthe/apps/analyticsexample/components/topnavnode.SelectCreate>
CreateNode.
4.Specifythefollowingvalues:
Name:analytics
Type:nt:unstructured
5.Addthefollowingpropertiestotheanalyticsnode:
cq:trackvars(String)topnavTarget,topnavLocation
cq:componentName(String)topnav(tracking)
cq:componentGroup(String)General
6.ClickSaveAll.
7.Openthe/apps/analyticsexample/components/topnav/topnav.jspfile.
8.Intheaelement,addthefollowingattribute:
onclick="tracknav('<%=child.getPath()%>.html')"
9.Atthebottomofthepage,addthefollowingjavascriptcode:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

10.ClickSaveAll.
Thefollowingcodeexamplerepresentstheentire/apps/analytics

Thefollowingcodeexamplerepresentstheentire/apps/analytics
example/components/topnav/topnav.jspfile.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<%@pagesession="false"%><%
Copyright19972008DayManagementAG
Barfuesserplatz6,4001Basel,Switzerland
AllRightsReserved.

Thissoftwareistheconfidentialandproprietaryinformationof
DayManagementAG,("ConfidentialInformation").Youshallnot
disclosesuchConfidentialInformationandshalluseitonly
accordancewiththetermsofthelicenseagreementyouenteredinto
withDay.

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

TopNavigationcomponent

Drawsthetopnavigation

%><%@includefile="/libs/foundation/global.jsp"%><%
%><%@pageimport="java.util.Iterator,
com.day.text.Text,
com.day.cq.wcm.api.PageFilter,
com.day.cq.wcm.api.Page,
com.day.cq.commons.Doctype"%><%

//getstartingpointofnavigation
longabsParent=currentStyle.get("absParent",2L);
Stringnavstart=Text.getAbsoluteParent(currentPage.getPath(),(int)absParent)

//ifnotdeepenoughtakecurrentnode
if(navstart.equals(""))
navstart=currentPage.getPath();

ResourcerootRes=slingRequest.getResourceResolver().getResource(navstart);
PagerootPage=rootRes==null?null:rootRes.adaptTo(Page.class);
Stringxs=Doctype.isXHTML(request)?"/":""
if(rootPage!=null){
Iterator<Page>children=rootPage.listChildren(
Stringv1="Link";
while(children.hasNext()){
Pagechild=children.next();
%><aonclick="tracknav('<%=child.getPath()%>.html')"
%><imgalt="<%=xssAPI.encodeForHTMLAttr(child.getTitle())%>"
}
}
%>

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

59
60

}
</script>
Tothetop

IntegratingtheTopNavcomponentintotheAdobe
AnalyticsFramework
TocompletetheintegrationbetweenanAEMcomponentandAdobe
Analytics,youmapthecomponent'svariablestoAdobeAnalyticsvariables
usingtheAdobeAnalyticsframework.FirstensurethattheTopNav
component(thatisenabledforAdobeAnalyticstracking)isdisplayedinthe
AEMSidekicksothatyoucanaddittotheframework.
ThefollowingillustrationshowstheTopNavcomponentdisplayedinthe
sidekick.

TheTopNavcomponentthatisdisplayedinthesidekick

SetupanewAdobeAnalyticsFrameworkview
SetupanAdobeAnalyticsFrameworkbyperformingthesetasks:
1. OpentheSiteCatlystadministrationconsole.
(http://localhost:4502/etc/cloudservices/sitecatalyst.html)
2. Selecttheconfigurationthatyousetupalready.
3. Clickthe[+]link.ThisbringsuptheCreateFrameworkdialog.
4. SelectAdobeAnalyticsFramework.
5. SpecifyaTitleandName.
6. ClickOK.
7. ThisbringsuptheAdobeAnalyticsFramework.

SetupReportvaluesintheAdobeAnalyticsFrameworkview

SetuptheAnalyticsReportvaluesinthenewlycreatedFrameworkview.In
thisview,youmaptheTopNavcomponent'svariablestoAdobeAnalytic
variables.ThefirsttaskyouperformisdragtheTopNavcomponentfrom
theAEMsidekicktotheframework,asshownhere.

AdobeAnalyticsFrameworkview
Note: Ifthesidekickisempty,onSidekick,clicktheDesignbutton.Inthe
LinkTrackingConfigurationarea,clickConfigureInheritance.Inthe
AllowedComponentslist,selecttopnav(tracking)intheGeneralsection,
thenclickOK.ExpandSidekicktoentereditmode.Thecomponentisnow
availableintheGeneralgroup.
ThiscausestheAEMvariablesassociatedwiththecomponenttobe
displayed,asshowninthefollowingillustration.

TopNavcomponentvariables
NoticethattherearethreevariablesassociatedwiththeTopNav
component.
eventdata.topnav.Target

eventdata.topnavLocation
eventdata.events.topnavClick
Theeventdata.events.topnavClickvariablerepresentstheevent
thatoccurswhentheuserclickstheTopNavlink.Map
theeventdata.events.topnavClickvariableanAdobeAnalytics
variablethatislocatedintheleftpanel.
SetupReportSuitedetails
Next,setuptheReportSuitedetails.IntheReportSuitesdropdown,you
haveaccesstoReportSuitesthatareavailableforyourAdobeAnalytics
account.Selectareportfromthedropdownlist.Also,specifywhetherthe
TopNavcomponentistrackedonauthor,publish,orboth.
ThefollowingillustrationshowsaconfiguredReportSuite.

ReportSuitedetails
Inthisexample,thereportsuiteisjjesquire137andthecomponentis
configuredtobetrackedonbothauthorandpublish(all).
MapAdobeAnalyticsvariablestocomponentvariables
OnceyousetuptheReportSuitedetails,youhaveaccesstoAnalytics
variablesthatyoucanmaptocomponentvariables.MappingtheTopNav
componentvariablestoAdobeAnalyticvariablesishowyousenddata
aboutacomponenttoanAdobeAnalyticsreport.
TheAdobeAnalyticvariablesareshownintheleftpane,asshowninthis
illustration.

AdobeAnalyticsvariables
Note: Onthevariablespane,youcandisplaydifferenttypeofvariables.
Forexample,youcandisplayeventvariables(underwhichthePage
Viewvariableislisted)byclickingtheEventbuttonatthetopofthepanel.
MapAdobeAnalyticvariablestotheTopNavcomponentvariablesby
draggingtheAdobeAnalyticsvariablefromtheleftpanetotheTopNav
component,asshownhere:

OnceyoudragtheAdobeAnalyticsvariableandmapittotheTopNav
componentvariable,youwillseethefollowingmappinginformation:

componentvariable,youwillseethefollowingmappinginformation:

TopNavcomponents
Asyoucansee,theeventdata.events.topnavClickcomponent
variableismappedtotheAdobeAnalyticsPageViewsvariable.Now
whenauserclicksalinkintheTopNavcomponent,dataissenttoAdobe
AnalyticsandthePageViewsvariableisincremeted.
Note: TheAdobeAnalyticsvariablesthatappeardependuponthe
varaiblesthatareconfiguredforyourAdobeAnalyticsaccount.
Note: FormoreinformationabouttheAdobeAnalyticsFramework,
seehttps://docs.adobe.com/docs/en/aem/61/administer/integration/marketing
cloud/sitecatalyst/scconnect.html.

Activatetheframework
OnceyouaredonemodifyingtheAdobeAnalyticsframework,youhaveto
activateitinorderforittotakeeffect.Toactivateit,clicktheActivate
Frameworkbuttononthesidekick(underthepagetab),asshowninthe
followingillustration.

ActivateFrameworkoperationonthesidekick
Tothetop

ModifytemplateAnalytics.jsp
ModifythetemplateAnalytics.jspthatislocatedat:
/apps/analytics
example/components/page/templateAnalytics/templateAnalytics.jsp
AddthefollowinglineofcodetoincludetheTopNavcomponent:
<cq:includepath="topnav"resourceType="/apps/analytics
example/components/topnav"/>
ThefollowingcoderepresentsthemodifiedtemplateAnalytics.jspfile.

1
2
3
4
5
6
7
8
9

<html>
<%@includefile="/libs/foundation/global.jsp"%>
<cq:includescript="/libs/wcm/core/components/init/init.jsp"
<body>
<cq:includepath="topnav"resourceType="/apps/analyticsexample/components/topnav"
<h1>HereiswhereyourAEMcomponentwillgo</h1>
<cq:includepath="par"resourceType="foundation/components/parsys"
</body>
</html>
Tothetop

CreateanAEMsitethatisbasedonthe
templateAnalyticspagecomponent
CreateanAEMsite(basedonthetemplateAnalyticspagecomponent)thatcontainsa
pageandachildpage.TheTopNavcomponentreadsthechildpageandprovidesalink
toaccessthechildpage.Whenauserclicksthelinktothechildpage,dataissentto
AdobeAnalytics.
ThefollowingillustrationshowstheAEMpagestructure.

Thewebsitestructure
Performthesetasks:
1. GototheCQWebsitespageathttp://localhost:4502/siteadmin#/content.
2. SelectNewPage.
3. SpecifythetitleofthepageintheTitlefield.EnterAnalytics.
4. SpecifythenameofthepageintheNamefield.
5. SelecttemplateAnalyticsfromthetemplatelistthatappears.Thisvaluerepresents
thetemplatethatiscreatedinthisdevelopmentarticle.Ifyoudonotseeit,then
repeatthestepsinthisdevelopmentarticle.Forexample,ifyoumadeatyping
mistakewhenenteringinpathinformation,thetemplatewillnotshowupinthe
NewPagedialogbox.
6. CreateachildpagenamedHello.
7. OpenthepagebyclickingtheAnalyticspage.ClicktheHelloLink.Thisfiresoffthe
eventthatismappedtotheAdobeAnalyticsvariable.

ViewtheReportinAdobeAnalytics
YoucanviewanAdobeAnalyticsreportthatshowsthedatathatistracked.
Inthisexample,viewareportthatdisplaysthevalueofthePageView
variablethatismappedtotheTopNav
component'seventdata.events.topnavClickvariable.
ThefollowingillustrationshowstheAdobeAnalyticsreportdisplayingthe
PageViewvalues.

AnAdobeAnalyticsReportdisplayingpageviews
Seealso
Congratulations,youhavejustcreatedanAEM6.1componentthatis
integratedwithAdobeAnalytics.PleaserefertotheAEMcommunity
pageforotherarticlesthatdiscusshowtobuildAEMservices/applications.