Deployment for Salesforce Classic, Lightning
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 Interfaces (monitored via Germain UX RUM Extension)
Salesforce Rest APIs (monitored via Germain UX Engine)
Salesforce Logs (monitored via Germain UX Engine)
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>
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'}, '*');
}
}
});
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;
},
});
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>
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
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
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
Configuration example:

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
Go to Germain Workspace > Left Menu > Wizard > SalesForce.com Application
Select Server on which the Salesforce Application Monitoring will be running
Fill in the form and click FINISH to deploy this monitoring

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