Integrations

Every data and transaction that Salesforce.com has made available to its Client is available to Germain UX, as long as the Client authorizes it. Germain UX integrates with all access points that are offered by Salesforce.com, including:

Salesforce User Monitoring and Replay Deployment

Requirements

  • Salesforce "Lightning Experience" must be enabled

  • Salesforce permissions to use "Developer Console" (details here)

  • Salesforce domain configured (details here)

  • Browser Incognito or other private browsing modes are not supported

  • Access to "Content Security Policy Trusted Sites" must be enabled

  • Latest Google Chrome, Microsoft Edge and Mozilla Firefox are required

  • JavaScript and Cookies must be enabled

  • HTTPS outbound traffic must be allowed from your browser(s) to the Germain UX environment

RUM Extension Deployment

There are two ways of enabling Real User Experience and Session Replay Monitoring for http://Salesforce.com (Classic or Lightning):

RUM Extension Configuration

Once Germain UX RUM Extension deployed, you will need to configure it using one of these two options (see below for deatils):

In addition, CSP Configuration must be done no matter which deployment type you select.

SFDC Lightning Component Configuration (Auto)

Create Germain UX Lightning Component
  • Login to Salesforce

  • Go to Setup > Visualforce Components

  • Click on Developer Console

  • Create new Lightning Component from the File > New menu:

    • Name: "GermainUXComponent"

    • Content:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="currentUser" type="User" default="{'sObjecttype': 'User'}"/>
    <p class="slds-hide">
        <span id="germain-ux-profile-email">
           {!v.currentUser.Email}
        </span>
        <span id="germain-ux-profile-id">
           {!v.currentUser.Id}
        </span> 
    </p>
    <p aura:id="container" class="slds-hide">
        <lightning:card title="Germain UX" iconName="custom:custom11">
            <div class="slds-grid slds-grid_vertical slds-align_absolute-center" aura:id="install">
                <div class="slds-button slds-button_brand">
                    <p class="slds-p-around_small slds-text-heading_medium">
                        <lightning:formattedUrl aura:id="extensionUrl" value="" label="Germain" target="_blank" />
                    </p>
                </div>
                <div>
                    <lightning:formattedUrl
                        value="https://docs.germainux.com/main/salesforce-com-monitoring"
                        label="Documentation"
                        target="_blank"
                    />
                </div>
            </div>
        </lightning:card>
    </p>
</aura:component>
NONE
  • Create new controller for this component (ctrl+shift+2 or click CONTROLLER in the right-hand side menu):

    • Name: "GermainUXComponentController"

    • Content:

({
    doInit: function (component, event, helper) {
        // get user info and set it back for SFDC UI
        component.set("v.currentUser", $A.get("$SObjectType.CurrentUser"));
        // get other info
        var container = component.find('container');
        var extensionUrl = component.find('extensionUrl');
        var browserType = helper.getBrowserType();        
        // check if extension exists
        if (browserType === 'CHROME' || browserType === 'EDGE' || browserType === 'FIREFOX') { // supported browser check
            // function to execute if extension doesnt exist
            var timeout = setTimeout(function () {
                window.postMessage({type: 'germainapm.notInstalled'}, '*'); // for SFDC classic
                $A.util.removeClass(container, 'slds-hide');
                extensionUrl.set('v.value', browserType === 'FIREFOX' ? helper.EXT_IDS.FIREFOX : helper.EXT_IDS.CHROME);
            }, 2000);
            // listen if extension exists
            window.addEventListener('message', function (event) {
                if (event && event.data) {
                    const msg = event.data;
                    if(msg.type === 'germainapm.pong'){
                        clearTimeout(timeout);
                        window.postMessage({type: 'germainapm.install', url: helper.GERMAIN_UX_URL, website: { url: window.location.origin, appName: helper.APP_NAME, profileName: helper.PROFILE_NAME, disableRemove: true}}, '*');
                    } else if(msg.type === 'germainapm.extinstalled'){
                        window.postMessage({type: 'germainapm.install', url: helper.GERMAIN_UX_URL, website: { url: window.location.origin, appName: helper.APP_NAME, profileName: helper.PROFILE_NAME, disableRemove: true}}, '*');
                        $A.util.addClass(container, 'slds-hide');
                    }
                }
            }, true);
            window.postMessage({type: 'germainapm.ping'}, '*');
        }
    }
});
CODE
  • Create new helper for this component (ctrl+shift+3 or click HELPER in the right-hand side menu):

    • Name: "GermainUXComponentController"

    • Content: 

({
    GERMAIN_UX_URL: 'YOUR_GERMAIN_UX_HOST', //e.g. https://germainux.mydomain.com
    APP_NAME: 'Salesforce',
    PROFILE_NAME: 'Salesforce',
    EXT_IDS: {
        CHROME: 'https://chrome.google.com/webstore/detail/user-monitoring-for-webap/fkcljfeejffnjajnpjflfammljcmdfnh',
        FIREFOX: 'https://addons.mozilla.org/en-US/firefox/addon/user-monitoring-for-webapp/'
    },
    getBrowserType: function () {
        var browser = JSON.parse(JSON.stringify($A.get('$Browser')));
        if (browser.isWEBKIT) {
            return 'CHROME';
        } else if (browser.isFIREFOX) {
            return 'FIREFOX';
        } else {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.indexOf('edg') > -1 && ua.indexOf('edge') === -1) {
                return 'EDGE';
            }
        }
        return null;
    },
});
CODE
  • Replace YOUR_GERMAIN_UX_HOST with your Germain UX instance URL (ask Germain Team how to find it if not sure)

  • Create new Lightning Application from the File > New menu:

    • Name: "GermainUXApplication"

    • Content: 

<aura:application access="global" extends="ltng:outApp" >
	<aura:dependency resource="YOUR_SALESFORCE_NAMESPACE:GermainUXComponent"/>
</aura:application>
CODE
  • Replace YOUR_SALESFORCE_NAMESPACE with your unique namespace (details here)

Install Germain UX Lightning Component

We recommend to install our Lightning Component into Salesforce Utility Bar. Below, an installation example for Salesforce Home Page:

  • Go to your Home Page or any other default page on your Salesforce environment

  • Click Edit Page from the Setup menu

  • Add GermainUXComponent, from Lightning Component > Custom menu, to your page somewhere at the top

  • Save your changes and activate them (Activate) for all profiles

  • Clear your browser cache and refresh your page

  • Your page should contain now Germain UX Component, similar to this:

Salesforce Home Page with Germain UX SFDC Lightning Component

Salesforce Home Page with Germain UX SFDC Lightning Component

Extension Configuration (Manual)

Follow the below steps if you prefer to let Salesforce end users decide when to enable/disable Germain UX User Monitoring and Replay.

  • Open Germain RUM Extension (below an example where you can find it in Chrome browser)

  • Set Germain UX URL - this will be the base URL of your Germain instance (ask Germain Team how to find it if not sure)

  • Click Add New Website

    • Website URL - this is the base URL of the site you want to monitor (in this case Salesforce instance URL starting with https://)

    • Application Name - set this to the name of the application (e.g. Salesforce)

    • Profile Name - set this to the same value that is set in Germain (e.g. Salesforce)

Once configured, refresh the page. Your application is now ready to be monitored.

Germain UX RUM Extension Settings

Germain UX RUM Extension Settings

CSP Configuration

  • Go to Setup > CSP Trusted Sites

  • Add the following 4 trusted sites:

Trusted Site Name = GermainUX
Trusted Site URL = Url of your Germain root domain (e.g. https://abc.cloud.germainux.com; ask germain Team how to find it if not sure)
Active = true
Context = All
CSP Directives = Select All
---
Trusted Site Name = SalesforceDomain
Trusted Site URL = Url of your Salesforce domain (e.g. https://mycompanyname.my.salesforce.com; ask germain Team how to find it if not sure)
Active = true
Context = All
CSP Directives = Select All
---
Trusted Site Name = SalesforceLightningDomain
Trusted Site URL = Similar to SalesforceDomain url but replace "my.salesforce.com" by "lightning.force.com" (e.g. https://mycompanyname.lightning.force.com; ask germain Team how to find it if not sure)
Active = true
Context = All
CSP Directives = Select All
---
Trusted Site Name = SalesforceContentDomain
Trusted Site URL = Url of your Salesforce content domain (ask germain Team how to find it)
Active = true
Context = All
CSP Directives = Select All
CODE
  • Configuration example:

CSP Settings in Salesforce

CSP Settings in Salesforce

Salesforce Application Monitoring Deployment

Prerequisites

Germain UX Engine must be configured and deployed. Check Germain UX Engine for Engine deployement and configuration details.

SFDC OAuth App Configuration

SFDC OAuth configuration is a required step if you want to deploy Germain UX Engine to monitor your Salesforce environment.

  • Login to Salesforce

  • Go to Setup

  • Go to Apps > App Manager

  • Click on New Connected App to create new app

    • Connected App Name: “germainUXOAuth“

    • Contact Email: your email

    • Enable “Enable OAuth Settings”

    • Callback Url: “https://YOUR_GERMAIN_UX_HOST/germainapm/callback

    • Selected OAuth Scopes: “Full Access (full)”

    • Disable “Require Secret for Web Server Flow

    • Disable “Require Secret for Refresh Token Flow“

    • Save your changes

Salesforce Application Monitoring Deployment

  1. Go to Germain Workspace > Left Menu > Wizard > SalesForce.com Application

  2. Select Server on which the Salesforce Application Monitoring will be running

  3. Fill in the form and click FINISH to deploy this monitoring

Salesforce Application Monitoring wizard

Salesforce Application Monitoring wizard

Salesforce JavaScript Analysis Deployment

Germain UX JS Profiler Deployment

Salesforce Android Application End Users Monitoring Deployment

Germain UX Android App Deployment

Salesforce RPA Bot Recorder Deployment

Germain UX RPA Bot Recorder Deployment

Component: Engine, RUM Extension, JS Profiler, Android App, RPA Bot Recorder

Feature Availability: 2022.1 or later