Experience Cloud Developer Guide
jNewer Version Available
Example: Adobe Analytics and Lightning Locker in Experience Builder Sites
Because Adobe Analytics interacts with components in your Experience Builder site,
Lightning Locker can produce unexpected results. The recommended workaround is to isolate Adobe
Analytics by using JavaScript Custom Events in your head
markup. Adobe Analytics can then interact with components without being responsible for loading
or referencing that resource directly.
Include Adobe Analytics in Your Site
Add the Adobe Analytics script and applicable event listeners to your Experience Builder
head markup using the script
tag.
1<script>
2 document.addEventListener('analyticsEvent', function(e) {
3 //add logic here to tell your dataLayer about the event
4 //dataLayer.action = e.detail.action;
5 //dataLayer.label = e.detail.label;
6 //or map payload to an AA library event
7 });
8
9 document.addEventListener('analyticsViewChange', function() {
10 });
11</script>
12<script src="full-url-to-your-adobe-script" async></script>Use Custom Events
For any component you want to interact with Adobe Analytics, implement a custom event using
the detail property. This property passes data
through the event to the listener and is mapped to the dataLayer in your head markup listener. The
custom events can then be dispatched to any resource that extends EventTarget.
1document.dispatchEvent(new CustomEvent('analyticsEvent', {'detail': {action: 'click', label: 'Submitted Case'}}));Implement Additional Events for Aura Components
If Adobe Analytics interacts with an Aura component, you also must implement the forceCommunity:routeChange and aura:locationChange events.
forceCommunity:routeChange tracks view changes
within the Lightning Component
Framework.
1<aura:component implements="forceCommunity:availableForAllPageTypes">
2 <aura:handler event="forceCommunity:routeChange" action="{!c.handleRouteChange}" />
3</aura:component>1handleRouteChange : function(component, event, helper) {
2 document.dispatchEvent(new Event('analyticsViewChange'));
3}aura:locationChange indicates that the hash part of the URL in the browser's location bar has been modified. However, changing the hash part of a location URL is used only rarely—for example, to implement a tab change in the Tabs component.