feat(dapp): add Amplitude Session Replay (#1105)

* add Amplitude Session Replay

* update privacy policy

* set samplerate to 100% of sessions

* merge

* add obfuscation

Author: evavirseda

dapp/package.json

@@ -26,6 +26,7 @@
         "@amplitude/analytics-core": "^2.34.1",
         "@amplitude/analytics-types": "^2.11.0",
         "@amplitude/engagement-browser": "^1.0.6",
+        "@amplitude/plugin-session-replay-browser": "^1.25.10",
         "@growthbook/growthbook": "^1.6.1",
         "@growthbook/growthbook-react": "^1.6.1",
         "@iota/apps-ui-icons": "^0.7.0",

dapp/src/components/buttons/ConnectButton.tsx

@@ -9,11 +9,13 @@ import { ampli } from '@/lib/utils/analytics/ampli';
 
 export function ConnectButton() {
     return (
-        <DappConnectButton
-            connectText="Connect"
-            onConnected={(args) => {
-                ampli.connectedWallet({ wallet: args.wallet.name });
-            }}
-        />
+        <div className="amp-obfuscation">
+            <DappConnectButton
+                connectText="Connect"
+                onConnected={(args) => {
+                    ampli.connectedWallet({ wallet: args.wallet.name });
+                }}
+            />
+        </div>
     );
 }

dapp/src/legal/privacyPolicy.mdx

@@ -64,7 +64,17 @@ For more details on how Amplitude processes personal data, please refer to <span
 
 If you access or interact with the IOTA Names Service directly through the blockchain without using the Website interface, no cookies are set, and no analytics data is collected.
 
-### **3.5 Error and Performance Monitoring (Sentry)**
+### **3.5 Session Replay (Amplitude)**
+
+With your consent, we use Amplitude’s Session Replay technology to understand how users interact with the Website and to improve its usability and stability. Session Replay records interaction data such as clicks, scroll behaviour, navigation patterns, and general user interface engagement. All fields that may contain personal or identifying information (such as usernames, wallet details, or free-text inputs) are masked by default in accordance with Amplitude’s privacy settings, and no passwords, payment information, or other sensitive data are collected.
+
+We receive session-level recordings of user interactions; however, due to the applied masking and configuration, the data does not allow us to identify individual users. Any insights derived from these recordings are evaluated exclusively on an aggregated and statistical basis for the purposes of diagnosing usability issues, identifying technical errors, and optimising the Website.
+
+The use of Session Replay is based on your consent pursuant to Article 6(1)(a) GDPR, which you may withdraw at any time via the “Cookie Settings” link on the Website. Data processed via Session Replay is retained for a maximum period of thirty (30) days before being deleted or anonymised.
+
+Where data is processed outside the United Kingdom or the European Economic Area, such transfers are safeguarded through the use of the Standard Contractual Clauses together with the UK Addendum.
+
+### **3.6 Error and Performance Monitoring (Sentry)**
 
 We use Sentry, a monitoring service provided by Functional Software, Inc., to detect and fix technical errors and ensure the stability of the Website. In the event of an error, Sentry records limited technical information such as browser type, operating system, time of occurrence, URL path, and diagnostic details (for example, stack traces).
 

dapp/src/lib/utils/analytics/amplitude.ts

@@ -4,6 +4,7 @@
 import * as amplitude from '@amplitude/analytics-browser';
 import { LogLevel } from '@amplitude/analytics-core';
 import { plugin as engagementPlugin } from '@amplitude/engagement-browser';
+import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser';
 
 import { CONFIG } from '@/config';
 
@@ -70,6 +71,19 @@ export async function initAmplitude() {
         // Add context enrichment plugin to add page context to all events
         if (IS_ENABLED) {
             ampli.client.add(contextEnrichmentPlugin());
+            const sessionReplayTracking = sessionReplayPlugin({
+                sampleRate: 1, // set to 1 to capture all sessions; adjust as needed (e.g., 0.1 for 10%)
+                privacyConfig: {
+                    defaultMaskLevel: 'medium',
+                    maskSelector: [
+                        '.amp-obfuscation', // any element with this class will be masked according to the defaultMaskLevel
+                        // specific selectors for the dropdown menu (comes from @iota/dapp-kit) to ensure it's fully masked
+                        '[data-radix-popper-content-wrapper]',
+                        '[class*="AccountDropdownMenu"]',
+                    ],
+                },
+            });
+            ampli.client.add(sessionReplayTracking);
         }
 
         setNetworkGroup(defaultNetwork);