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.