In a previous blog post, we discussed the features and capabilities of Data Cloud’s Web SDK and how to set it up to capture user engagement on externally hosted websites. When it comes to websites built using Experience Cloud, a lot of the setup and tracking process is automated with the built-in integration between Data Cloud and Experience Cloud.

In this blog post, we’ll explore how to set up this integration and its out-of-the-box features, and how you can track engagement on your custom Lightning web components.

Setting up the integration

To connect Data Cloud and Experience Cloud, you must add the Data Cloud integration to your site from the Integrations menu in your site’s settings. This integration is only available in enhanced LWR sites.

This will automatically create a Web SDK connector and the data streams for Behavioral, Identity, Party Identification, and Contact Point events. Data mappings from these streams to the standard data model objects (DMOs) are also automatically created.

These data streams are not specific to a single Experience Cloud site. Every site created in the org sends events to the same data streams. Each event captured from the site includes siteId as an attribute that contains the 18-digit Salesforce ID of the corresponding site (API Name: Site). This siteId is stored in the corresponding data lake objects and subsequently mapped to the Website field in the data model objects. Below is a screenshot showing the data from the Website Engagement DMO, especially the Website field.

Understanding the Experience Tag Manager

With the built-in Data Cloud integration, you aren’t going to directly use the methods exposed by the Web SDK to send events to Data Cloud. Instead, you’ll be sending events to the Experience Tag Manager, which is a JavaScript library that captures user interaction events from Experience Cloud and combines them with the site data to subsequently generate Web SDK events. The Experience Tag Manager is automatically added to your site whenever you enable the built-in Data Cloud integration.

To send an event to the Experience Tag Manager, you need to fire a custom event with the name experience_interaction as shown below. Within the detail property, you’ll pass in the name of the interaction you are tracking.

The interaction name can be any of the standard interactions we’ve defined, or it can be any custom interaction you are tracking.

Capture consent

You first need to capture the consent of the user before any events from Experience Cloud are sent to Data Cloud. We recommend using an external consent management provider (CMP) to manage and present consent options to the user. Alternatively, you can create a custom Lightning web component to present and capture consent. A simple Lightning web component to capture consent would have two buttons: one for Opt-In and the other for Opt-Out, as shown below.

Once a user clicks either of the buttons, you must send an event to the Experience Tag Manager with the interaction name as set-consent. If consent is given, then the value property must be set to true. If consent is revoked, set the value to false.

It’s important to remember that this consent value is stored by the Experience Tag Manager only as long as the session is active and the page isn’t reloaded. Every time the page is refreshed, the consent value must be re-sent through the set-consent event. To achieve this in your custom Lightning web component, you can use a combination of sessionStorage (see docs) and renderedCallback(). This component should ideally be placed in the footer of your site template, so it works across all the pages.

In upcoming releases, we’re planning to provide a consent banner that would internally take care of consent management, and you won’t have to create custom components for this purpose.

Once consent is given, we create a universally unique ID (UUID) for the browser called anonymousId and store it in a first-party cookie with the name _sfid_<<domain_hash>>. This anonymous ID becomes a unique identifier for the user visiting your site on that particular browser. Whenever an event is sent from the browser, we send the anonymousId as the deviceId attribute of the event.

Interactions from standard pages and components

With the built-in Data Cloud integration, we automatically send various engagement events from the site without you having to write a single line of code. Here are some out-of-the-box events we automatically send:

• Each time you view a page, a page-view interaction is sent
• If you scroll to the bottom of a page, a page-scroll-to-bottom interaction is sent
• If you are using a standard content component on the page, like a button or search bar, events like button-click and search are automatically sent
• An anchor-click event is sent for clicks on hyperlinks included as a part of Rich Content or HTML Editor components
• If you are using any of the site templates, like B2B Commerce, we send events such as cart-add, cart-remove, catalog-object-click, form-submit, and so on from the standard commerce components

You can see which events are being sent to Data Cloud using the Network tab on your browser. Filter the requests going out to c360a.salesforce.com.

In the Payload tab of a network entry, you’ll find the captured event data in Base64 encoded format. Upon decoding it using a decoding tool, you’ll see the JSON structure of the event being sent.

For example, below is the event being sent upon clicking a standard button component. The componentId property denotes the component that triggered the event.

In the upcoming releases, you’ll be able to use the statement below to display logs in the browser console, which will automatically show the JSON body of the events being sent. Currently, this statement only shows logs for errors.

Profile events

Apart from Engagement events, the built-in integration also automatically sends Profile events to Data Cloud. These events help us keep track of all the anonymous and known users visiting our site. Anonymous users are guest users accessing our site, and once they log in, they become a known user.

The first time the Experience Tag Manager is loaded on the browser, it generates a unique ID for the browser and stores it in a first-party cookie. This ID is sent as the deviceId property with every event (Profile or Engagement), allowing us to track all the events coming from a particular browser or user.

Each time a site page is viewed, along with the page-view event, the Experience Tag Manager also includes a Profile event of type Identity. The identity event includes the deviceId property and the isAnonymous property. If the user accessing the page is a guest user, the isAnonymous property is set to 1.

If the user accessing the page is a logged-in user, the isAnonymous property is set to 0. Additionally, another Profile event of type partyIdentification is sent. The partyIdentification event contains the 18-digit Salesforce ID of the logged-in user in the userId property. This allows us to associate a user to a deviceId.

Within Data Cloud, identity events flow through the Experience_Cloud_Event_Connector-identity data stream and are mapped to the Individual DMO. The partyIdentification events flow through the Experience_Cloud_Event_Connector-partyIdentification data stream and are mapped to the Party Identification DMO.

Interactions from custom components

If you are using custom Lightning web components on the site, any engagement activities within the component, like clicks on buttons and hyperlinks, are not automatically tracked. It is up to you to define what activities to track within your component. To track engagements in your component, you must send an experience_interaction event to the Experience Tag Manager.

For example, if you want to track a button click in your custom component, you have to fire the experience_interaction event with an interaction name of your choice. The interaction name can be button-click, or can be any other name you decide. You can optionally include additional attributes like buttonLabel.

The attributes you can include in the event depend on the schema definition of the Web SDK connector that is automatically created by the built-in integration. In Data Cloud Setup, find the connector Experience_Cloud_Event_Connector in the Websites and Mobiles Apps section.

To send additional custom attributes from your component, you need to update the schema definition with the new attribute and map the new attribute to a field on the corresponding data model object.

For example, let’s say you have a Lightning web component with a few filters as shown below (which is a part of the E-Bikes sample app), and you want to fire an engagement event each time the filter is updated. Within the event, you want to also include the current filter options.

First, you must download the Experience_Cloud_Event_Connector’s schema, and update it to include an attribute that lets you track the current filters. In the below code snippet, we’ve added the categoryFilters attribute to track the filters in the Category section of the web component.

You must then re-upload the Schema back to the connector.

Next, from the Data Streams tab, you must go to the Behavioral Events stream of the site, and click Sync Schema, so that a new field is created in the data lake object (DLO) for the new attribute.

You can then map the new field on the DLO to a DMO of your choice.

Now that you’ve updated the schema, you can send an event from the web component, including the new attribute name as shown below.

In future releases, we’ll roll out a simpler way to update the Website connector schema with new attributes and event types.

Conclusion

In this blog post, you learned about Experience Cloud’s new built-in integration with Data Cloud. You also learned about all the events the integration automatically sends, and how you can send custom events from your Lightning web components.

Keep an eye on our release notes to stay updated on the new features we roll out in upcoming releases.

Resources

• Documentation: Capture and Integrate Engagement Data
• Documentation: Experience Tag Manager Event Reference

About the author

Aditya Naag Topalli is a 14x Certified Principal Developer Advocate at Salesforce. He empowers and inspires developers in and outside the Salesforce ecosystem through his videos, webinars, blog posts, and open-source contributions, and he also frequently speaks at conferences and events worldwide. Follow him on LinkedIn.