Example: Adobe Analytics and Lightning Locker in Aura Sites

Because Adobe Analytics interacts with components in your Aura 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.

LWR sites can include analytics by using a different strategy. For more information, see Integrate Third-Party Libraries Using the Privileged Script Tag in LWR Sites for Experience Cloud.

Tip

Include Adobe Analytics in Your Aura Site

Add the Adobe Analytics script and applicable event listeners to your site’s 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'}}));

Be aware of the data you’re passing with the JavaScript CustomEvent constructor, and ensure that your usage is secure. Any JavaScript running on your page, including Adobe Analytics, can potentially listen for your event names and read this data.

Note

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.

See Also