Web SDK Integration

The latest version of the Web SDK: 3.0

Please see the changelog if you are using an outdated version.

Integration

Installation via NPM package

npm install @dev-2-dev/websdk

CDN installation

To integrate SDK, add the following line to the tag of your page:

<script src="https://cdn.devtodev.com/sdk/web/v3/devtodevsdk.js"></script>

The SDK will be available globally as window.devtodev.

Initialization

Add the application to the Space using the wizard for adding applications.

In order for SDK for WEB to start working, it is necessary to perform initialization right after the page is loaded and you have a basic user identifier at your disposal.

Using NPM package

import DTDAnalytics from '@dev-2-dev/websdk';

// Create an instance
const analytics = new DTDAnalytics();

// Initialize with your app ID
analytics.initialize('App ID', config);

Using CDN

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.devtodev.com/sdk/web/v3/devtodevsdk.js"></script>
  </head>
  <body>
    <script>
      const analytics = window.devtodev;

      // Initialize with your app ID
      analytics.initialize('App ID', config);
    </script>
  </body>
</html>

You can find the App ID in the settings of the respective app in devtodev (Settings → SDK → Integration → Credentials).

For Cross-platform type projects use App ID + Platform ID .

config – is an object that is used for specifying additional properties during initialization.

Since there’s no option to get any consistent identifier in web browsers, we recommend using as a User ID either a social network ID with your app or an ID that your server assigns to a user. It’s best to assign a User ID and specify it in the config object during the SDK initialization instead of using a setUserId method after the initialization.

If you have a game app, we recommend specifying the current player’s level either in the config or at the earliest possible moment after the initialization via the setCurrentLevel method.

`Config`

Parameter

Type

Description

userId

string

Unique user identifier. For example, user’s ID in a social network, or a unique account name used for user identification on your server. If at the time of initialization this identifier is not yet available, specify the identifier later using

the setUserId method.

currentLevel

integer

The player level at the moment of devtodev SDK initialization. Must be greater than 0. It’s optional but we recommend using it for improving data accuracy.

trackingAvailability

boolean

The property allows or disallows devtodev tracking of the user. By default, it is set to true. SDK stores the previously assigned value. Pass false if the user opted out of tracking in line with GDPR.

logLevel

string

The level of logging the SDK activity. The "No" value is used by default. For troubleshooting during integration, it is recommended to set it to "Debug", and either switch it "No" or use it only for error handling "Error" in the release version.

applicationVersion

String

The app version. Cannot be empty.

Example:

const config = {};
config.userId = "Unique user identifier";
config.currentLevel = 2;
config.trackingAvailability = true;
config.logLevel = "Error";
config.applicationVersion = "1";
analytics.initialize("App ID", config);

Session recording

A powerful session recording plugin that automatically captures user interactions on your website using advanced screen recording technology. This plugin integrates seamlessly with the DevToDev WebSDK to provide comprehensive session replay capabilities.

Session replays

Installation

NPM

npm install @dev-2-dev/websdk-plugin-session-tracker

Yarn

yarn add @dev-2-dev/websdk-plugin-session-tracker

Enabling the plugin

NPM

import DTDAnalytics from '@dev-2-dev/websdk';
import DTDWebSessionTracker from '@dev-2-dev/websdk-plugin-session-tracker';

const sessionTracker = new DTDWebSessionTracker();
const analytics = new DTDAnalytics();

analytics.initialize('App ID');
analytics.registerPlugin(sessionTracker);

CDN

<script src="https://cdn.devtodev.com/sdk/web/v3/devtodevsdk.js"></script>
<script src="https://cdn.devtodev.com/sdk/web/v3/plugins/session-tracker/websdk-plugin-session-tracker.js"></script>

<script>
  const analytics = window.devtodev;
  const sessionTracker = new DTDWebSessionTracker();

  // Initialize with your app ID
  analytics.initialize('App ID', config);
  analytics.registerPlugin(sessionTracker);
</script>

Disabling from SDK Config

You can disable session recording through the SDK's webSessions configuration:

import { DTDAnalytics } from '@dev-2-dev/websdk';

const analytics = new DTDAnalytics({
  appId: 'App ID',
  webSessions: {
    enabled: false, // Disable session recording
  },
});

Session recording configuration

Recording Options (Constructor Config)

Configure privacy and recording behavior when creating the tracker instance:

import { DTDWebSessionTracker } from '@dev-2-dev/websdk-plugin-session-tracker';

const sessionRecordingConfig = {
  recordCanvas: true, // Record canvas elements
  maskAllInputs: false, // Mask all input fields
  maskInputOptions: {
    password: true, // Always mask password fields (default: true)
    email: true, // Mask email fields (default: true)
    text: false, // Don't mask text inputs (default: false)
  },
  blockClass: 'sensitive-field', // Block elements with this class
};

const sessionTracker = new DTDWebSessionTracker(sessionRecordingConfig);

Configuration Options

These options are passed to the DTDWebSessionTracker constructor:

Option

Type

Default

Description

recordCanvas

boolean

true

Record canvas elements

maskAllInputs

boolean

false

Mask all input fields

maskInputOptions

object

See below

Selective input masking options

blockClass

string

'sensitive-field'

CSS class name to block elements from recording

Mask Input Options:

Option

Type

Default

Description

password

boolean

true

Always mask password fields

email

boolean

true

Mask email fields

text

boolean

false

Mask text inputs

Privacy configuration examples

Mask all inputs:

const sessionTracker = new DTDWebSessionTracker({
  maskAllInputs: true,
});

Selective masking:

const sessionTracker = new DTDWebSessionTracker({
  maskAllInputs: false,
  maskInputOptions: {
    password: true,  // Mask passwords
    email: true,     // Mask emails
    text: false,     // Don't mask text inputs
  },
});

Block specific elements. Add the 'sensitive-field' class to exclude elements from recording:

<div class="sensitive-field">
  <p>This content will not be recorded</p>
</div>

<input type="password" class="sensitive-field" />
<input type="email" class="sensitive-field" />

PreviousWeb

NextWeb SDK Releases

Last updated 7 months ago

Was this helpful?