Integrate a Coveo ClientIdAccessor Lightning component

This is for:

Developer System Administrator
In this article

Coveo for Salesforce 5.2

The Coveo ClientIdAccessor Lightning component reads and writes the client ID in the CoveoV2 namespace localStorage. Due to Lightning Locker restrictions, a Lightning component that belongs to a different namespace can’t directly access the client ID in the CoveoV2 namespace localStorage. The Coveo ClientIdAccessor Lightning component offers methods to access and manipulate the client ID in the CoveoV2 namespace so it can be retrieved and reused across sites during a visit.

Overview

All components that send usage analytics events require a client ID. To ensure proper reporting, both custom components and CoveoV2 packaged components must send the same client ID value. The Coveo ClientIdAccessor Lightning component lets you manipulate the client ID in the CoveoV2 components to ensure the same client ID value is shared by all components that send UA events.

Note

The Coveo UA library that’s used to log Coveo Case Assist events checks the localStorage for the client ID. If there’s no client ID in the localStorage, it creates one. This can cause issues if you have other components that log UA events by accessing the client ID in the CoveoV2 namespace localStorage. Since the library can’t detect those client 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 ClientIdAccessor Lightning component and stores the client ID in the localStorage (see Procedure).

Procedure

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

  2. Use the Coveo ClientIdAccessor component from the CoveoV2 namespace and associate an aura:id to it.

    <!-- ClientIdHandler.cmp -->
<aura:component implements="forceCommunity:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <CoveoV2:ClientIdAccessor aura:id="clientIdAccessor"/>
</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 client ID in the CoveoV2 namespace localStorage and save the value in the localStorage of the c namespace.

    // ClientIdHandler.js
({
    doInit: function(component) {
        const clientIdCmp = component.find("clientIdAccessor");
        // Access the ClientID value from the CoveoV2 namespace.
        const clientId = clientIdCmp.getClientId();
        // Access the ClientID value from the c namespace.
        const cClientId = localStorage.getItem('visitorId');

        const key = 'coveo_visitorId';
        if(clientId) {
            // 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', clientId);
            const host = window.location.hostname;
            if (host.indexOf('.') === -1) {
                document.cookie =
                    `${key}=${encodeURIComponent(clientId)}` +
                    ';path=/;SameSite=Lax';
            } else {
                const domainParts = host.split('.');
                const domain = domainParts[domainParts.length - 2] + '.' + domainParts[domainParts.length - 1];
                document.cookie =
                    `${key}=${encodeURIComponent(clientId)}` +
                    (domain ? `;domain=${domain}` : '') +
                    ';path=/;SameSite=Lax';
            }
        } else if(cClientId) {
            // If there is no value in the CoveoV2 namespace,
            // but there is one in the c namespace, set it to the CoveoV2 namespace.
           clientIdCmp.setClientId(cClientId);
        }
    }
})
    Note

    Any page where you want to use the client 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 client ID available in the localStorage (for example, in a Case Assist page).

See also