Cross-domain session tracking

The PLuG SDK tracks session details using the client-side browser storage, but this approach is limited by the same-origin policy. As a result, when users navigate between different domains or subdomains (for example, from domain1.com to domain2.com), the SDK records separate, unconnected sessions, preventing comprehensive user journey tracking.

PLuG SDK enables cross-domain session tracking by using the following method.

Get session and tab IDs

A session ID identifies a user's entire visit to a website or app, while a tab ID distinguishes activity within individual browser tabs. This separation allows precise tracking of interactions across multiple tabs in a single session.

The PLuG SDK exposes the session ID and tab ID of an ongoing session by the getSessionDetails() method. When navigating from one domain to another you can hit this method to fetch these ids.

1 const { sessionId, tabId } = window.plugSDK.getSessionDetails();

To ensure that the session recording features are ready before calling getSessionDetails, wait on the ON_OBSERVABILITY_READY PLuG event. For more information about this event, refer to the methods reference.

1 window.plugSDK.onEvent(payload => {
2   if (payload.type === "ON_OBSERVABILITY_READY") {
3     const { sessionId, tabId } = window.plugSDK.getSessionDetails();
4   }
5 });

Passing the session and tab IDs across domains

You need to pass session and tab IDs to the second domain that is being navigated to. You can choose from the following methods to pass data between domains

• Server-side synchronization: Use backend APIs to store and share session data across different domains.

• Client-side communication: Pass the session details using client-side methods like via URL parameters, or by storing them in first-party cookies within the same top-level domain.

The example below demonstrates how to pass data using URL query parameters in a journey between two domains: domain1.com and domain2.com.

On domain1.com

You need to set the session ID and tab ID in URL query parameters of the domain you are navigating to.

1 const url = new URL('domain2.com'); // second domain
2 const params = new URLSearchParams(url.search);
3 
4 // Add or Update parameters
5 params.set('sessionId', sessionId);
6 params.set('tabId', tabId); // skip this if you want the recording to be part of the session but as a different tab
7 
8 // Update URL
9 url.search = params.toString();
10 
11 // Navigate to second page (domain2.com)
12 window.location.href = url.toString();
Show more

On domain2.com

1 const params = new URLSearchParams(window.location.search);
2 const sessionId = params.get('sessionId');
3 const tabId = params.get('tabId');
4 
5 // remove the query params from the url after we have them in variables
6 const urlWithoutQueryParams = new URL(window.location);
7 urlWithoutQueryParams.delete('sessionId');
8 urlWithoutQueryParams.delete('tabId');
9 window.history.pushState({}, '', urlWithoutQueryParams);
Show more

Initialize the SDK with session and tab IDs

You need to now pass the session ID and tab ID that you have received from the first domain into the plugSDK.init() function of the second domain.

1 // Initialize the SDK
2 window.plugSDK.init({
3   app_id: "my-integration-key",
4   enable_session_recording: true,
5   session_recording_options: {
6     sessionDetails: {
7       sessionId: sessionId,
8       tabId: tabId,
9     },
10   },
11 });
Show more

You can leave the tabId empty if you want to track this domain as a separate tab within the same session.

If the session identifiers passed to the PLuG method correspond to a session which has already ended, or some invalid identifiers, the SDK rejects them and start a complete new session instead.