ntegratingAdobeExperienceManager6.1ComponentswithAdobeAnalytics
AppliestoAdobeCQAdobeExperienceManagerSearch
AdobeCommunityHelp Contactsupport
Articlesummary
Summary
DiscusseshowtocreateanAEM6.1componentthatisintegratedwithAdobeAnalytics.Inaddition,discusseshowtoconfigureAEMtoconnecttoAdobeAnalytics,setuptheAdobeAnalyticsframework,andmapcomponentvariablestoAdobeAnalyticsvariables.
DigitalMarketingSolution(s)
AdobeExperienceManager(AdobeCQ),AdobeAnalytics
Audience Developer(intermediate)
RequiredSkills JavaScript,HTML
TestedOn AdobeExperienceManager6.1
Introduction
YoucancreateAdobeExperienceManager(AEM)componentsthatintegratewithAdobeAnalytics.AdobeAnalyticsistheindustryleadingsolutionthatprovidesdigitalmarketerswithoneplacetomeasure,analyze,andoptimizeintegrateddatafromallonlineinitiativesacrossmultiplemarketingchannels.Itprovidesmarketerswithactionable,realtimewebanalyticsintelligenceaboutdigitalstrategiesandmarketinginitiatives.AdobeSiteCatalysthelpsmarketersquicklyidentifythemostprofitablepathsthroughawebsite,segmenttraffictospothighvaluewebvisitors,determinewherevisitorsarenavigatingawayfromthesite,andidentifycriticalsuccessmetricsforonlinemarketingcampaigns.
ByintegratingAEMcomponentswithAdobeAnalytics,youcangatherinformationaboutuserinteractionwiththeAEMcomponents,suchastrackinghowvisitorsareinteractingwithyourcomponents.Forexample,assumeyoudevelopedanAEMcomponenttotrackthenumbervisitorsusingthecomponent.Whenauserinteractswiththecomponent(forexample,clicksalink),thecomponentsendsinformationtoAdobeAnalyticsandareportisupdatedthatyoucanview,suchasshowninthefollowinginformation.
Wasthishelpful?
Yes No
AnAdobeAnalyticsreportdisplayingdatasentfromanAEMcomponent
Asshowninthepreviousillustration,youcanviewcomponentinformation(componentsintegratedwithAdobeAnalytics)inanAdobeAnalyticsreport.ThisdevelopmentarticlewalksyouthoughallthestepstointegrateAEM6.1componentswithAdobeAnalytics,includinghowtosetAEMandAnalytics.
TocreateanAEMcomponentthatisintegratedwithAdobeAnalytics,performthesetasks:
1. CreateaCQapplicationfolderstructure.2. Createatemplateonwhichthepagecomponentisbased.3. Createthepagecomponentbasedonthetemplate.4. CreateanAEMcomponentthathooksintoAdobeAnalytics.5. CreateaCQwebpagethatusesthenewcomponent.
Tothetop
CreateaCQapplicationfolderstructure
CreateanAdobeCQapplicationfolderstructurethatcontainstemplates,components,andpagesbyusingCRXDELite.
Note:
ACQapplicationfolderstructure
Thefollowingdescribeseachapplicationfolder:
applicationname:containsalloftheresourcesthatanapplicationuses.Theresourcescanbetemplates,pages,components,andsoon.
components:containscomponentsthatyourapplicationuses.
page:containspagecomponents.ApagecomponentisascriptsuchasaJSPfile.global:containsglobalcomponentsthatyourapplicationuses.
template:containstemplatesonwhichyoubasepagecomponents.
src:containssourcecodethatcomprisesanOSGicomponent(thisdevelopmentarticledoesnotcreateanOSGibundleusingthisfolder).
install:containsacompiledOSGibundlescontainer.
Tocreateanapplicationfolderstructure:
1. ToviewtheCQwelcomepage,entertheURLhttp://[hostname]:[port]intoawebbrowser.Forexample,http://localhost:4502.
2. SelectCRXDELite.
3. Rightclicktheappsfolder(ortheparentfolder),selectCreate,CreateFolder.
4. EnterthefoldernameintotheCreateFolderdialogbox.Enteranalyticsexample.
5. Repeatsteps14foreachfolderspecifiedinthepreviousillustration.
6. ClicktheSaveAllbutton.
YouhavetoclicktheSaveAllbuttonwhenworkinginCRXDELiteforthechangestobemade.
Tothetop
Createatemplate
YoucancreateatemplatebyusingCRXDELite.ACQtemplateenablesyoutodefineaconsistentstyleforthepagesinyourapplication.Atemplatecomprisesofnodesthatspecifythepagestructure.Formoreinformationabouttemplates,seeTemplates.
Tocreateatemplate,performthesetasks:
1.ToviewtheCQwelcomepage,entertheURLhttp://[hostname]:[port]intoawebbrowser.Forexample,http://localhost:4502.2.SelectCRXDELite.3.Rightclickthetemplatefolder(withinyourapplication),selectCreate,CreateTemplate.4.EnterthefollowinginformationintotheCreateTemplatedialogbox:
Label:Thenameofthetemplatetocreate.EntertemplateAnalytics.
Title:Thetitlethatisassignedtothetemplate.
Description:Thedescriptionthatisassignedtothetemplate.
ResourceType:Thecomponent'spaththatisassignedtothetemplateandcopiedtoimplementingpages.Enter/apps/analyticsexample/components/page/templateAnalytics.
Ranking:Theorder(ascending)inwhichthistemplatewillappearinrelationtoothertemplates.Settingthisvalueto1ensuresthatthetemplateappearsfirstinthelist.
5.AddapathtoAllowedPaths.Clickontheplussignandenterthefollowingvalue:/content(/.*)?.6.ClickNextforAllowedParents.7.SelectOKonAllowedChildren.
Tothetop
Createarendercomponentthatusesthetemplate
Componentsarereusablemodulesthatimplementspecificapplicationlogictorenderthecontentofyourwebsite.Youcanthinkofacomponentasacollectionofscripts(forexample,JSPs,Javaservlets,andsoon)thatcompletelyrealizeaspecificfunction.Inordertorealizethisfunctionality,itisyourresponsibilityasaCQdevelopertocreatescriptsthatperformspecificfunctionality.Formoreinformationaboutcomponents,seeComponents.
Bydefault,acomponenthasatleastonedefaultscript,identicaltothenameofthecomponent.Tocreatearendercomponent,performthesetasks:
1.ToviewtheCQwelcomepage,entertheURLhttp://[hostname]:[port]intoawebbrowser.Forexample,http://localhost:4502.
2.SelectCRXDELite.
3.Rightclick/apps/analyticsexample/components/page,thenselectCreate,CreateComponent.
4.EnterthefollowinginformationintotheCreateComponentdialogbox:
Label:Thenameofthecomponenttocreate.EntertemplateAnalytics.
Title:Thetitlethatisassignedtothecomponent.
Description:Thedescriptionthatisassignedtothetemplate.
SuperType:foundation/components/page.
5.SelectNextforAdvancedComponentSettingsandAllowedParents.
6.SelectOKonAllowedChildren.
7.OpenthetemplateAnalytics.jsplocatedat:/apps/analyticsexample/components/page/templateAnalytics/templateAnalytics.jsp.
8.EnterthefollowingJSPcode.
12
Tothetop
ConfiguringAEMtouseAdobeAnalytics
AfteryousetuptheAEMfolderstructure(includingthetemplateandpagecomponent),configureAEMtoconnecttoAdobeAnalytics.ToconnecttoAdobeAnalytics,enteryourAdobeAnalyticsaccountinformation,includingyourusernameandpassword,asshowninthisillustration.
TheAEMAnalyticsSettingsdialog
Asyoucanseeinthepreviousillustration,youenterthecompany,username,andpasswordforyourAnalyticsaccount.YoucantesttheAdobeAnalyticsconnectionbyclickingtheConnecttoAnalyticsbutton.Itisstronglyrecommendedthatyoutesttheconnection.Ifitdoesnotwork,checkyouraccountcredentials.
TosetuptheconnectionbetweenAEMandAdobeAnalytics,performthesetasks:
1.FromtheAEMstartingpage(http://localhost:4502/projects.html),clickTools,Operations,Cloud,CloudServices.
2345678
Note:
2.IntheAdobeAnalyticssection,clickShowConfigurations.
3.Clickthe[+]buttoninAvailableConfigurations.
4.IntheCreateConfigurationdialog,enteratitleandname.BesuretoselectAdobeAnalyticsConfiguration.
5.IntheEditConfigurationsdialog(showninthepreviousillustration),enteryourcompanyname,username,andpassword.
6.Testtheconnection.
7.Iftheconnectionissuccessful,clickOK.
Tothetop
CreatetheTopNavcomponentthatusesAdobeAnalytics
CreateaTopNavcomponentthathooksintoAdobeAnalytics.Thatis,whenauserclicksonthelink,dataissenttoAdobeAnalytics.ThedatacanbeviewedwithinanAdobeAnalyticsreport(shownlaterinthisarticle).
ThefollowingillustrationsshowstheTopNavcomponentthatisbuiltinthissection.
AnAEMTopNavcomponentthatisintegratedwithAdobeAnalytics
InthisarticletheTopNavcomponentiscopedfromlibsandmovedtoapps.Thenitismodified.
ThefollowingillustrationshowstheTopNavcomponentinCRXDElite.
JCRnodesthatbelongtotheTopNavcomponent
Inthepreviousillustration,noticetheanalyticsnode.ThisnodeisrequriedforyourAEMcomponenttohookintoAdobeAnalytics.Inaddition,youaddJScodetothecomponent'sJSP,asspecifiedinthefollowingprocedure.
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('.html')"
9.Atthebottomofthepage,addthefollowingjavascriptcode:
10.ClickSaveAll.
Thefollowingcodeexamplerepresentstheentire/apps/analytics
1234567891011121314
functiontracknav(target){if(CQ_Analytics.Sitecatalyst){CQ_Analytics.record({event:'topnavClick',values:{topnavTarget:target,topnavLocation:'.html'},componentPath:''});}}
Thefollowingcodeexamplerepresentstheentire/apps/analyticsexample/components/topnav/topnav.jspfile.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
functiontracknav(target){if(CQ_Analytics.Sitecatalyst){CQ_Analytics.record({event:'topnavClick',values:{topnavTarget:target,topnavLocation:'.html'},componentPath:''});}}
Tothetop
IntegratingtheTopNavcomponentintotheAdobeAnalyticsFramework
TocompletetheintegrationbetweenanAEMcomponentandAdobeAnalytics,youmapthecomponent'svariablestoAdobeAnalyticsvariablesusingtheAdobeAnalyticsframework.FirstensurethattheTopNavcomponent(thatisenabledforAdobeAnalyticstracking)isdisplayedintheAEMSidekicksothatyoucanaddittotheframework.
ThefollowingillustrationshowstheTopNavcomponentdisplayedinthesidekick.
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
5960
}
Note:
SetuptheAnalyticsReportvaluesinthenewlycreatedFrameworkview.Inthisview,youmaptheTopNavcomponent'svariablestoAdobeAnalyticvariables.ThefirsttaskyouperformisdragtheTopNavcomponentfromtheAEMsidekicktotheframework,asshownhere.
AdobeAnalyticsFrameworkview
Ifthesidekickisempty,onSidekick,clicktheDesignbutton.IntheLinkTrackingConfigurationarea,clickConfigureInheritance.IntheAllowedComponentslist,selecttopnav(tracking)intheGeneralsection,thenclickOK.ExpandSidekicktoentereditmode.ThecomponentisnowavailableintheGeneralgroup.
ThiscausestheAEMvariablesassociatedwiththecomponenttobedisplayed,asshowninthefollowingillustration.
TopNavcomponentvariables
NoticethattherearethreevariablesassociatedwiththeTopNavcomponent.
eventdata.topnav.Target
eventdata.topnavLocation
eventdata.events.topnavClick
Theeventdata.events.topnavClickvariablerepresentstheeventthatoccurswhentheuserclickstheTopNavlink.Maptheeventdata.events.topnavClickvariableanAdobeAnalyticsvariablethatislocatedintheleftpanel.
SetupReportSuitedetails
Next,setuptheReportSuitedetails.IntheReportSuitesdropdown,youhaveaccesstoReportSuitesthatareavailableforyourAdobeAnalyticsaccount.Selectareportfromthedropdownlist.Also,specifywhethertheTopNavcomponentistrackedonauthor,publish,orboth.
ThefollowingillustrationshowsaconfiguredReportSuite.
ReportSuitedetails
Inthisexample,thereportsuiteisjjesquire137andthecomponentisconfiguredtobetrackedonbothauthorandpublish(all).
MapAdobeAnalyticsvariablestocomponentvariables
OnceyousetuptheReportSuitedetails,youhaveaccesstoAnalyticsvariablesthatyoucanmaptocomponentvariables.MappingtheTopNavcomponentvariablestoAdobeAnalyticvariablesishowyousenddataaboutacomponenttoanAdobeAnalyticsreport.
TheAdobeAnalyticvariablesareshownintheleftpane,asshowninthisillustration.
Note:
AdobeAnalyticsvariables
Onthevariablespane,youcandisplaydifferenttypeofvariables.Forexample,youcandisplayeventvariables(underwhichthePageViewvariableislisted)byclickingtheEventbuttonatthetopofthepanel.
MapAdobeAnalyticvariablestotheTopNavcomponentvariablesbydraggingtheAdobeAnalyticsvariablefromtheleftpanetotheTopNavcomponent,asshownhere:
OnceyoudragtheAdobeAnalyticsvariableandmapittotheTopNavcomponentvariable,youwillseethefollowingmappinginformation:
Note:
Note:
componentvariable,youwillseethefollowingmappinginformation:
TopNavcomponents
Asyoucansee,theeventdata.events.topnavClickcomponentvariableismappedtotheAdobeAnalyticsPageViewsvariable.NowwhenauserclicksalinkintheTopNavcomponent,dataissenttoAdobeAnalyticsandthePageViewsvariableisincremeted.
TheAdobeAnalyticsvariablesthatappeardependuponthevaraiblesthatareconfiguredforyourAdobeAnalyticsaccount.
FormoreinformationabouttheAdobeAnalyticsFramework,seehttps://docs.adobe.com/docs/en/aem/61/administer/integration/marketingcloud/sitecatalyst/scconnect.html.
Activatetheframework
OnceyouaredonemodifyingtheAdobeAnalyticsframework,youhavetoactivateitinorderforittotakeeffect.Toactivateit,clicktheActivateFrameworkbuttononthesidekick(underthepagetab),asshowninthefollowingillustration.
ActivateFrameworkoperationonthesidekick
Tothetop
ModifytemplateAnalytics.jsp
ModifythetemplateAnalytics.jspthatislocatedat:
/apps/analytics
example/components/page/templateAnalytics/templateAnalytics.jsp
AddthefollowinglineofcodetoincludetheTopNavcomponent:
ThefollowingcoderepresentsthemodifiedtemplateAnalytics.jspfile.
Tothetop
CreateanAEMsitethatisbasedonthetemplateAnalyticspagecomponent
CreateanAEMsite(basedonthetemplateAnalyticspagecomponent)thatcontainsapageandachildpage.TheTopNavcomponentreadsthechildpageandprovidesalinktoaccessthechildpage.Whenauserclicksthelinktothechildpage,dataissenttoAdobeAnalytics.
ThefollowingillustrationshowstheAEMpagestructure.
123456789
Thewebsitestructure
Performthesetasks:
1. GototheCQWebsitespageathttp://localhost:4502/siteadmin#/content.
2. SelectNewPage.
3. SpecifythetitleofthepageintheTitlefield.EnterAnalytics.
4. SpecifythenameofthepageintheNamefield.
5. SelecttemplateAnalyticsfromthetemplatelistthatappears.Thisvaluerepresentsthetemplatethatiscreatedinthisdevelopmentarticle.Ifyoudonotseeit,thenrepeatthestepsinthisdevelopmentarticle.Forexample,ifyoumadeatypingmistakewhenenteringinpathinformation,thetemplatewillnotshowupintheNewPagedialogbox.
6. CreateachildpagenamedHello.
7. OpenthepagebyclickingtheAnalyticspage.ClicktheHelloLink.ThisfiresofftheeventthatismappedtotheAdobeAnalyticsvariable.
ViewtheReportinAdobeAnalytics
YoucanviewanAdobeAnalyticsreportthatshowsthedatathatistracked.Inthisexample,viewareportthatdisplaysthevalueofthePageViewvariablethatismappedtotheTopNavcomponent'seventdata.events.topnavClickvariable.
ThefollowingillustrationshowstheAdobeAnalyticsreportdisplayingthePageViewvalues.
AnAdobeAnalyticsReportdisplayingpageviews
Seealso
Congratulations,youhavejustcreatedanAEM6.1componentthatisintegratedwithAdobeAnalytics.PleaserefertotheAEMcommunitypageforotherarticlesthatdiscusshowtobuildAEMservices/applications.
