Enable new session replay capabilies

Use version 0.23.1 or higher and set the recorder attribute to splunk.

Relevant parameters:

recorder: 'splunk'

Complete example:

<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web.js" crossorigin="anonymous"></script>
<script>
    SplunkRum.init({
        realm: "<realm>",
        rumAccessToken: "<token>",
        applicationName: "<appName>",
        deploymentEnvironment: "<env>",
    });
</script>
<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web-session-recorder.js" crossorigin="anonymous"></script>
<script>
SplunkSessionRecorder.init({
  app: "<appName>",
  realm: "<realm>",
  rumAccessToken: "<token>",
  recorder: "splunk",
});
</script>

Enable recording of all text and inputs

Relevant parameters:

maskAllInputs: false,
 maskAllText: false,

Complete example:

<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web.js" crossorigin="anonymous"></script>
<script>
    SplunkRum.init({
        realm: "<realm>",
        rumAccessToken: "<token>",
        applicationName: "<appName>",
        deploymentEnvironment: "<env>",
    });
</script>
<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web-session-recorder.js" crossorigin="anonymous"></script>
<script>
SplunkSessionRecorder.init({
  app: "<appName>",
  realm: "<realm>",
  rumAccessToken: "<token>",
  recorder: "splunk",
  maskAllInputs: false,
  maskAllText: false,
});
</script>

Enable recording of only specific text and inputs

Use version 0.23.1 or higher and set the recorder attribute to splunk.

Relevant parameter is sensitivityRules, which is an array of format:

{ type: 'mask' | 'unmask' | 'exclude', selector: '<css selector>' }

To unmask and see text of all paragraphs, but hide all images, leave maskAllText: true (default) and specify sensitivity rules like this:

sensitivityRules: [
{ type: 'unmask', selector: 'p' }, 
{ type: 'exclude', selector: 'img' },
{ type: 'mask', selector: '.user-class' },
{ type: 'exclude', selector: '#user-detail' },
]

Complete example:

<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web.js" crossorigin="anonymous"></script>
<script>
    SplunkRum.init({
        realm: "<realm>",
        rumAccessToken: "<token>",
        applicationName: "<appName>",
        deploymentEnvironment: "<env>",
    });
</script>
<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web-session-recorder.js" crossorigin="anonymous"></script>
<script>
SplunkSessionRecorder.init({
  app: "<appName>",
  realm: "<realm>",
  rumAccessToken: "<token>",
  recorder: "splunk",
  sensitivityRules: [
    { type: 'unmask', selector: 'p' }, 
    { type: 'exclude', selector: 'img' },
    { type: 'mask', selector: '.user-class' },
    { type: 'exclude', selector: '#user-detail' },
  ]
});
</script>

Missing assets and images from recording (CORS, VPN, Intranet)

Relevant parameters are features.packAssets and features.cacheAssets.

Complete example:

<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web.js" crossorigin="anonymous"></script>
<script>
    SplunkRum.init({
        realm: "<realm>",
        rumAccessToken: "<token>",
        applicationName: "<appName>",
        deploymentEnvironment: "<env>",
    });
</script>
<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web-session-recorder.js" crossorigin="anonymous"></script>
<script>
SplunkSessionRecorder.init({
  app: "<appName>",
  realm: "<realm>",
  rumAccessToken: "<token>",
  recorder: "splunk",
  features: {
    packAssets: true,
    cacheAssets: true,
  }
});
</script>

Canvas is not recorded

Canvas is an optional feature that you can enable.

Relevant parameter is features.canvas.

Complete example:

<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web.js" crossorigin="anonymous"></script>
<script>
    SplunkRum.init({
        realm: "<realm>",
        rumAccessToken: "<token>",
        applicationName: "<appName>",
        deploymentEnvironment: "<env>",
    });
</script>
<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web-session-recorder.js" crossorigin="anonymous"></script>
<script>
SplunkSessionRecorder.init({
  app: "<appName>",
  realm: "<realm>",
  rumAccessToken: "<token>",
  recorder: "splunk",
  features: {
    canvas: true,
  }
});
</script>

Video element is not recorded

Capturing of video element is an optional feature that you can enable.

Relevant parameter is features.video.

Complete example:

<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web.js" crossorigin="anonymous"></script>
<script>
    SplunkRum.init({
        realm: "<realm>",
        rumAccessToken: "<token>",
        applicationName: "<appName>",
        deploymentEnvironment: "<env>",
    });
</script>
<script src="https://cdn.signalfx.com/o11y-gdi-rum/v0.23.1/splunk-otel-web-session-recorder.js" crossorigin="anonymous"></script>
<script>
SplunkSessionRecorder.init({
  app: "<appName>",
  realm: "<realm>",
  rumAccessToken: "<token>",
  recorder: "splunk",
  features: {
    video: true,
  }
});
</script>