Integrate a Coveo VisitorIdAccessor Lightning component

This is for:

Developer System Administrator

Deprecated

Important
Important

As of the Coveo for Salesforce v5 release, the Coveo VisitorIdAccessor Lightning component has been replaced by the Coveo ClientIdAccessor Lightning component.

The Coveo VisitorIdAccessor Lightning component reads and writes the visitor ID in the CoveoV2 namespace localStorage. Due to Lightning Locker restrictions, an Aura wrapper component that belongs to a different namespace can’t directly access the visitor ID in the CoveoV2 namespace localStorage. The Coveo VisitorIdAccessor Lightning component lets any Aura wrapper component in a different namespace access and manipulate the visitor ID so it can be retrieved and reused across sites during a visit.

Overview

All components that send usage analytics events require a visitor ID. The Coveo VisitorIdAccessor Lightning component lets customers retrieve the visitor ID in their custom components. As a result, any other custom components that send UA events will be able to access the visitor ID.

Note

The Coveo UA library that’s used to log Coveo Case Assist events checks the localStorage for the visitor ID. If there’s no visitor ID in the localStorage, it creates one. This can cause issues if you have other components that log UA events by accessing the visitor ID in the CoveoV2 namespace localStorage. Since the library can’t detect those visitor IDs, it generates new ones. This makes it impossible to report on a visit in which the user interacted with components from different namespaces, such as a Full Search page and a case creation page powered by Coveo Case Assist. To fix this issue, we recommend that you create a custom component that wraps the Coveo VisitorIdAccessor Lightning component and stores the visitor ID in the localStorage (see Procedure).

Prerequisite

Ensure that the visitor ID has been generated by a Coveo component and that it’s stored in the CoveoV2 namespace localStorage.

Procedure

  1. Create a new Aura component using a descriptive name such as VisitorIdHandler.cmp.

  2. Specify the Coveo VisitorIdAccessor component in the CoveoV2 namespace and associate an aura:id to it.

    <!-- VisitorIdHandler.cmp -->
<aura:component implements="forceCommunity:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <CoveoV2:VisitorIdAccessor aura:id="visitorIdAccessor"/>
</aura:component>
    Note

    The implements="forceCommunity:availableForAllPageTypes" attribute tells the Lightning framework that your component can be used in the drag-and-drop interface in the Experience Builder.

  3. Access the visitor ID in the CoveoV2 namespace localStorage and save the value in the localStorage of the c namespace.

    // VisitorIdHandler.js
({
    doInit: function(component) {
        const visitorIdCmp = component.find("visitorIdAccessor");
        // Access the VisitorID value from the CoveoV2 namespace.
        const visitorId = visitorIdCmp.getVisitorId();
        // Access the VisitorID value from the c namespace.
        const cVisitorId = localStorage.getItem('visitorId');
        if(visitorId) {
            // If there's a value in the CoveoV2 namespace, use it.
            // Save the value in the c namespace localStorage so it
            // can be used by other components.
            localStorage.setItem('visitorId', visitorId);
        } else if(cVisitorId) {
            // If there is no value in the CoveoV2 namespace,
            // but there is one in the c namespace, set it to the CoveoV2 namespace.
            visitorIdCmp.setVisitorId(cVisitorId);
        }
    }
})
    Note

    Any page where you want to use the visitor ID will now be able to access it in the localStorage.

  4. Include your newly created custom Aura component in the pages where you want to make the visitor ID available in the localStorage (for example, in a Case Assist page).

See also