Sending custom context information in a custom Page View Tracker component

This is for:

In this article

Create your custom component
Integrate your custom component
Test your custom component

The Coveo PageViewTracker component can be added to your Experience Cloud site to send Coveo Usage Analytics view events to Coveo. These events can later be leveraged to recommend pages to your users via an Content Recommendation (CR) model.

If you want to log custom context information in those view events, you must create a custom page view tracker component. This could be the case, for example, if you want to create a custom recommendations component that sends custom context information when requesting content recommendations, and you want to send that same custom context information when logging view events.

Leading practice

You should implement your custom page view tracker early in your project so you can start logging the target view events as early as possible.

This topic explains how to create such a custom page view tracker component by guiding you through an implementation example.

Let’s say that you’ve already created an Apex class to retrieve the user profile:

// userProfileController.cls
@AuraEnabled
public static Map<String,Object> getUserProfile() {
  List<Profile> myProfile = [SELECT Id, Name FROM Profile WHERE Id=:userinfo.getProfileId() LIMIT 1];
  return new Map<String,Object>{ 'user_profile' => myProfile[0].Name };
}

Say that you want to send that user profile as custom context when logging view events. Furthermore, say that you also want to send a recommendationsContext value set through the Salesforce Experience Builder.

Create your custom component

First, create a Lightning Aura component.

Markup

Next, edit the .cmp file to wrap the Coveo PageViewTracker component. The key here is to use an aura:if condition upon the presence of the target customData, as in the following example:

<aura:component implements='forceCommunity:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName'
                controller="userProfileController"> 
 
   <aura:attribute name="myCustomData"
                   type="Object"  />
 
   <aura:attribute name="recommendationsContext"
                   type="String"
                   access="global" />
 
   <aura:if isTrue="{!v.myCustomData}"> 
       <CoveoV2:PageViewTracker customData="{!v.myCustomData}"
                                recordId="{!v.recordId}"
                                sObjectName="{!v.sObjectName}"/> 
   </aura:if>
 
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
 
</aura:component>

	The `hasRecordId` interface lets your custom component fetch the record ID of records, such as support cases for example. You’ll pass that to the `PageViewTracker` component below when wrapping it, so it has access to that record ID when logging events. You do similarly with `hasSObjectName` for the Salesforce object name. Also, notice that you’re passing your `userProfileController` Apex class, which you’ll use in your `controller.js` file to retrieve the user profile.
	This condition only passes when your component’s `myCustomData` attribute is populated. This means your custom component will only initialize the Coveo `PageViewTracker` once you’ve specified the target custom data. You’ll see how to do that in the `controller.js` file.
	Once the custom context attribute is defined, wrap the Coveo `PageViewTracker` component, passing the custom context attribute, along with the others.

Design file

Then, edit the .design file to expose the target attributes in the Experience Builder. In this case, you expose the recommendationsContext attribute.

<design:component >
   <design:attribute name="recommendationsContext" label="Recommendations Interface" />
</design:component>

Controller

Finally, edit the controller.js file to set the customData attribute of your component using your Apex controller and the recommendationsContext attribute exposed through the Experience Builder.

({
   doInit: function(component, event, helper) {
       const action = component.get('c.getUserProfile');
       const recommendationsContext = component.get('v.recommendationsContext');
       action.setCallback(this, function (response) {
           var state = response.getState();
           if (state === 'SUCCESS') {
               var responseValue = response.getReturnValue();
               var customData = {
                   'context_user_profile': responseValue.user_profile,
               }
               if (recommendationsContext) {
                   customData.context_recommendations_context = recommendationsContext
               }
               component.set('v.myCustomData', customData);
           } else if (state === 'ERROR') {
               return new Error(response.getError());
           }
       });
       $A.enqueueAction(action);
   }
})

Once your component initializes, it will execute this doInit function, fetching the user profile from your Apex controller and setting it as custom context along with the recommendationsContext set through the Experience Builder. Once that custom context is defined, the <aura:if isTrue="{!v.myCustomData}"> condition in your .cmp file is satisfied and the Coveo PageViewTracker component initializes, with the target custom context.

Integrate your custom component

Access the Salesforce Experience Builder.
In the left sidebar, select Components.
Under Custom Components, drag your custom page view tracker component in the header of your page.

Leading practice

We recommend adding the component to the header of your community so that it records view events across all pages.
At the upper-right corner of the screen, set the Recommendations Interface attribute of your component to the target value.

Test your custom component

Your custom page view tracker should now be logging view events correctly in all pages of your community. To make sure, navigate the various pages of your community and inspect the /analytics/view request by accessing the Network tab of your browser developer tools. An output similar to the following should be displayed:

{
   ...
   "context_user_profile":"System Administrator",
   "context_recommendations_context":"custom_reco",
   ...
}