How Can We Help?

Identify visitors using a Salesforce component

Last Updated:

Visitor IDs and metadata can be ingested from a webpage through JavaScript code as an alternative to the standard IT-controlled deployment. For more information, see Deploy Custom Metadata for the Pendo Launcher. 

This requires at least one app that supports custom JavaScript code, such as Salesforce. This article describes how to implement a custom JavaScript code snippet in Salesforce Lightning, with code samples included.

Prerequisites

To identify visitors using a Salesforce component, you must:

  • Have a Pendo Adopt subscription.
  • Have the Pendo Launcher extension installed on your browser. Any browser that supports the extension is eligible. For information, se the IT guide to deploying the Pendo Launcher.
  • Be an admin user for the Pendo subscription.
  • Have a Salesforce Lightning environment.
  • Have developer access to your Salesforce Lightning environment.

Process overview

There are three main steps to configure the Salesforce Lightning component for the Pendo Launcher:

1. Configure the Pendo Launcher for Browser Scripting identification.

2. Configure a custom Salesforce Lightning component.

3. Add the component to Salesforce pages.

Step 1. Configure Pendo Launcher

1. In Pendo, navigate to Settings > Subscription > Advanced.

2. Toggle on the Set Visitor Metadata Through Browser Scripting setting. Leave the Identification App URL field blank.

Adopt_Advanced_SetVisitor.png

3. Right-click the Pendo Launcher extension in your browser toolbar and select Show Debug Info.

4. In the modal that appears, open Show Configuration Info and then select Re-fetch Extension Settings.

5. Check that the top of the modal displays an anonymized Pendo ID, which is typically in the following format: _PENDO_T_xxxxxxxxxxx.

PendoLauncher.png

Your Pendo Launcher is now ready to ingest data from the Salesforce Lightning component.

Step 2. Configure a custom Salesforce Lightning component

1. In Salesforce, open the cog icon in the top right and choose Developer Console from the menu. You must be a Salesforce admin to see this option.

DevConsole.png

2. In the Developer Console, select File > New > Lightning Component. This opens a modal requesting a name and description for your new component.

LightningComponent.png

3. Enter a meaningful name, such as pendo_identify.

Pendo_identify.png

4. Select Submit in the bottom right of the modal. Your new component automatically generates a .cmp file using the component name that you provided in the previous step. In our example, this file is called pendo_identify.cmp.

5. In the right sidebar, select the rows labeled CONTROLLER and DESIGN. This generates a controller.js file and a .design file for you. If successful, the selected rows are highlighted in blue, with the currently active file highlighted in orange.

controller_and_design_cmp.png

6. Enter the following code in the .design file with no changes.

<design:component>
    <design:attribute name="formattedJSON" label="User" />
</design:component>

7. enter the following code into the .cmp file. The list of fields (Id, LastName, FirstName, Email) represents the Salesforce User object fields that are passed into Pendo. You can add any number of fields to this list.

Any of the fields documented for the User object by Salesforce are valid if they're populated in your Salesforce environment. For more information about the User object in Salesforce, see User article in the Salesforce Developers documentation. Your Salesforce admin might have more information about which fields contain data for your users.

<aura:component implements="lightning:backgroundUtilityItem,flexipage:availableForAllPageTypes" access="global" > 

<aura:attribute name="currentUser" type="User"/>

    <aura:attribute name="formattedJSON" type="String" access="global" />
    <force:recordData aura:id="record" recordId="{!$SObjectType.CurrentUser.Id}" fields="Id,LastName,FirstName,Email" targetFields="{!v.currentUser}"/>    

    <aura:handler name="change" value="{!v.currentUser}" action="{!c.formatJSON}" />
</aura:component>

8. Enter the following code into the componentController.js file. The line const idField = 'Email' specifies which of the User object fields should be passed as the Visitor ID into Pendo. If you don't want to identify visitors using the visitor's email address, you can change Email to any field from the list specified in the .component file (step 7).

({
    formatJSON: function(component, event, handler) {
        const idField = 'Email'; 

        var visitor = JSON.parse(JSON.stringify(component.get("v.currentUser")));
        visitor.id = visitor[idField];
        delete visitor[idField];

        console.log("user object to pendo:" + JSON.stringify(visitor));

        var sfdc_url = window.location.href;
        var url_arr = sfdc_url.split("/");
        var target = url_arr[0] + "//" + url_arr[2];
        window.postMessage({
            type: 'pendo-extension-identify-visitor',
            identity: { visitor }
        }, '*');
    }
})

9. Navigate to File > Save to finish creating your component.

10. Compile a list of a few pages your users are likely to visit regularly. This where you add your component so that your visitors' extension can be initialized and updated with current metadata regularly. For a default Salesforce instance, Pendo recommends installing on the following pages. However, the most optimal pages might vary for your organization's Salesforce setup.

  • Home Page
  • Account Record Page
  • Contact Record Page
  • Lead Record Page
  • Opportunity Record Page

 

11. For each of the pages selected in the previous step, follow the instructions in the following section.

Step 3. Add your component to pages

1. While viewing the page, open the cog icon in the top right of Salesforce and choose Edit Page. This opens the Builder view.

2. In the builder, find your custom component in the left sidebar and drag this component anywhere on the page. The component displays as a small, empty rectangle. This is only visible in the Builder view. When the page is viewed live, the component is invisible.

CustomComponent.png

3. Save the page and return to the regular (non-builder) view.

4. Right-click anywhere on the page and select Inspect.

5.  In the panel that opens, select Console. A line labeled user object to pendo with the data fields you specified in the component file appears. If you see the console log, your component is correctly configured on this page.

6. Confirm the data is being ingested by the Pendo Launcher by right-clicking on the Pendo Launcher extension and selecting Show Debug Info. The ID value at the top of the debug modal is the value provided by Salesforce.

PendoLauncher_with_Salesforce_ID.png

7. Repeat this process for each page on which you'd like to deploy the component.

The component doesn't need to be on every page in Salesforce. As long as the user is identified once, they're identified on all pages in Salesforce and in other apps over which the Pendo Launcher is running. 

 

 

Related articles