Integrate a Coveo VisitorIdAccessor 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 UA 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.

The coveo.analytics.js script 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 coveo.analytics.js script 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.

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

    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.

    EXAMPLE
    // LightningComponentController.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 is 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);
            }
        }
    })

    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 (e.g., in a case assist page).

See Also

What's Next for Me?