Overview

Many of UserReplay’s customers utilize the ability to integrate a session replay link to solutions outside of UserReplay. These solutions are varied and can include online surveys, chat, user initiated feedback, or web analytics. It is very valuable to be able to integrate a session replay solutions with UserReplay for the following reasons:

  • Put context around the feedback users are giving you by being able to replay that specific customer’s experience. e.g. If a customer gives you poor feedback scores or comments such as “your site sucks”, it is useful to know really what happened to that customer on their journey.
  • Shadow browse during support calls/chats.
  • Direct link from analytics segments to a session replay.

The following approach is agnostic of particular vendor but UserReplay already has proven integrations with a number of vendors – including Google Analytics, OpinionLab, iPerceptions and Rant&Rave. Additionally, you can build your own custom integration by building a parameterized URL.

Integration

UserReplay has the ability to generate a parameterized Session Replay link for every visitor to your application, the Session Replay link is then placed into the websites data layer. Once the link is generated, other applications such as Google Analytics can then access it to provide the ability to link directly from a segment, or individual user, directly into a replay of that user journey.

The integration is an optional JavaScript configuration which can be deployed as a part of your UserReplay capture JavaScript library.

An example of the configured code is below:

/*
Session Replay Link Generator v0.3
This allows a Session Replay URL to be formed and placed into the client's data layer
*/
(function () {
// Configurable tenant
var securityTenant = 'default’
// Configurable Cookie Name (if custom cookie is used)
var urCookieName = 'UrCapture',
// Configurable Base Session Link (Kibana Base Link Provided by UserReplay)
baseLink = 'https://kibana.qa.devpoc.ur-sirius.net/app/kibana?security_tenant='+securityTenant+'#/discover/2ea019e0-99b7-11e9-ade0-4b7d1b5c83ab?';
var date = formatDate(new Date());
// Utility
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
function formatDate(date) {
var month = '' + (date.getMonth() + 1),
day = '' + date.getDate(),
year = date.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
// Get Web Session ID from User's Cookie
var urSessionId = getCookie(urCookieName);
// Check to see if urSessionId and projectId are not undefined
if (typeof urSessionId !== "undefined" && typeof date !== "undefined") {
var queryLink = "_g=(time:(from:'" + date + "T00:00:00.000Z',mode:absolute,to:'" + date + "T21:59:59.999Z'))&_a=(columns:!(_source),filters:!(),index:'01e58520-8eb3-11e9-b99d-276e7e499702',query:(language:lucene,query:'" + urSessionId + "'))"
var sessionLink = baseLink + queryLink;
// Insert UserReplay Session Link into datalayer
window.dataLayer.push({
"userReplayLink": sessionLink
});
}
})();

Configuration

There are two items to configure when deploying the Session Replay integration:

1. Base URL – This is provided by UserReplay and is the main URL for securely accessing your system.

2. Data layer key to set – This is the key where the data layer variable will be set for each user, the default is dataLayer.userReplayLink but this can be adjusted to suit the solution you are integrating with and the vendor will be able to advise if any changes are required to pick up the Session Replay link.

Testing

Once deployed, you can test the integration by examining your applications data layer.

From any page of the application, open up Developer Tools and navigate to the console window. Enter the text dataLayer and hit return. You should then see the Session Replay link in the data layer:

Custom Integration

Additionally, you can build your own integration to Session Replay by configuring a parameterized search URL around your UserReplay Base Link (provided by UserReplay).

To build the parameterized Session Replay link you will need to capture the UserReplay Session ID (Set in cookies and Local storage) as well as the current date.

The URL can then be built using the following format:

[BASEURL]_g=(time:(from:'[DATE]:00:00.000Z',mode:absolute,to:[DATE]T21:59:59.999Z'))&_a=(columns:!(_source),filters:!(),index:'01e58520-8eb3-11e9-b99d-276e7e499702',query:(language:lucene,query:'[URSESSION]'))

BASEURL as supplied by UserReplay

DATE in the format yyyy-mm-dd

URSESSION is the urCapture Session ID from local storage or cookie

An example of which is below:

https://userreplayportal.com/app/kibana#/discover/2ea019e0-99b7-11e9-ade0-4b7d1b5c83ab?_g=(time:(from:'2021-02-18T00:00:00.000Z',mode:absolute,to:'2021-02-18T21:59:59.999Z'))&_a=(columns:!(_source),filters:!(),index:'01e58520-8eb3-11e9-b99d-276e7e499702',query:(language:lucene,query:'6d752719-67f3-0417-9ac9-573c6e9fa490'))

Multiple Tenant Support

If you are monitoring multiple applications with UserReplay there is an additional parameter required in the query string so the search knows which tenant to search against.

This can also be configured in the JS itself by configuring the host names to set the security tenant variable as per below;

// Check for the project ID
switch(window.location.hostname) {
// Production Sites:
case 'www.userreplay.com':
securityTenant = 'prod';
break;
// Staging Sites:
case 'staging.userreplay.com':
securityTenant = 'stage';
break;
// Default any uncaught traffic goes to prod project
default:
securityTenant = 'prod';
break;
}

To build the parameterized Session Replay link you will need to insert the security_tenant variable to the BASEURL then complete the integration as in the above Custom Integration section.

BASEURL and security_tenant as supplied by UserReplay

An example BASEURL including ‘default’ Security Tenant is below:

https://userreplayportal.com/app/kibana?secutity_tenant=default#/discover/2ea019e0-99b7-11e9-ade0-4b7d1b5c83ab?

Did this answer your question?