Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Brand Your Aura Site
Develop Secure Sites: Authenticated and Guest Users
Develop Secure Sites: CSP, LWS, and Lightning Locker
Resolve Lightning Locker Conflicts in Aura Sites
Enable Third-Party Components to Run When Lightning Locker Is Off
Example: Adobe Analytics and Lightning Locker in Aura Sites
Add Pardot Tracking to Your Experience Builder Site
Use a CMS with Your Experience Builder Site
Report on Deflections: The Deflection Signals Framework
Avoid Deployment Issues When Moving to Enhanced LWR Sites
Considerations for Deploying Authenticated LWR Sites
ExperienceBundle for Experience Builder Sites
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

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.

Warning

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.