# Web SDK Integration {% hint style="success" %} The latest version of the Web SDK: **3.0** Please see the [**changelog**](https://docs.devtodev.com/integration/integration-of-sdk-v2/sdk-integration/web/web-sdk-releases) if you are using an outdated version. {% endhint %} ## Integration ### Installation via NPM package ```bash npm install @dev-2-dev/websdk ``` ### CDN installation To integrate SDK, add the following line to the tag of your page: ```html ``` The SDK will be available globally as `window.devtodev`. ## Initialization [Add the application](https://docs.devtodev.com/getting-started/adding-an-app-to-the-space) 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 ```javascript 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 ```html ``` You can find the `App ID` in the settings of the respective app in devtodev (Settings → SDK → Integration → [Credentials](https://docs.devtodev.com/reports-and-functionality/project-related-reports-and-fuctionality/settings#integration)). For [Cross-platform type projects](https://docs.devtodev.com/getting-started/cross-platform-application) use `App ID + Platform ID` . **`config`** – is an object that is used for specifying additional properties during initialization. {% hint style="info" %} 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`**](https://docs.devtodev.com/integration/setting-up-events/user-profile#user-id) 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`**](https://docs.devtodev.com/integration/setting-up-events/user-profile#current-user-level) method. {% endhint %} ### **`Config`**
ParameterTypeDescription
userIdstring

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.

currentLevelintegerThe 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.
trackingAvailabilitybooleanThe 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.
logLevelstringThe 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.
applicationVersionStringThe app version. Cannot be empty.
Example: ```javascript 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. {% content-ref url="../../../../reports-and-functionality/project-related-reports-and-fuctionality/users/session-replays" %} [session-replays](https://docs.devtodev.com/reports-and-functionality/project-related-reports-and-fuctionality/users/session-replays) {% endcontent-ref %} ### Installation #### NPM ```bash npm install @dev-2-dev/websdk-plugin-session-tracker ``` #### Yarn ```bash yarn add @dev-2-dev/websdk-plugin-session-tracker ``` ### Enabling the plugin #### NPM ```javascript 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 ```html ``` #### Disabling from SDK Config You can disable session recording through the SDK's `webSessions` configuration: ```javascript 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: ```javascript 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 1. Mask all inputs: ```javascript const sessionTracker = new DTDWebSessionTracker({ maskAllInputs: true, }); ``` 2. Selective masking: ```javascript const sessionTracker = new DTDWebSessionTracker({ maskAllInputs: false, maskInputOptions: { password: true, // Mask passwords email: true, // Mask emails text: false, // Don't mask text inputs }, }); ``` 3. Block specific elements. Add the `'sensitive-field'` class to exclude elements from recording: ```html

This content will not be recorded

```