Visit Replay & Real User Monitoring (RUM)

How recording works

Rather than streaming heavy video files (like MP4 or WebM), Visit Replay captures DOM mutations, user input events, and scroll positions as lightweight structured streams.

┌───────────────────────────────────────────────────────────┐
│                   Customer Browser / App                  │
├───────────────────────────────────────────────────────────┤
│ 1. Initial Snapshot  --> Full DOM structure & CSS snapshot│
│ 2. Incremental Diffs --> Mouse moves, clicks, scroll      │
│ 3. Privacy Masking   --> Passwords & sensitive data (***) │
│ 4. Diagnostics       --> JS errors, network latency, logs │
│ 5. Custom Events     --> VTO opened, GLB loaded, cart     │
└─────────────────────────────┬─────────────────────────────┘
                              │ (Gzip batches every 5s / beacon)
                              ▼
                POST /v1/ingest (replay-ingestion)

• Initial Structural Snapshot: Takes a full DOM tree snapshot once on initial page load.
• Incremental Delta Diffs: Only records small mutation changes, mouse coordinates, and clicks.
• Zero Client Latency: Events buffer in memory and flush asynchronously every 5 seconds or on page unload via navigator.sendBeacon.

Supported platforms

Privacy & security by default

Protecting customer Personally Identifiable Information (PII) is our top priority. Data masking is executed entirely on the client side before event payloads leave the browser.

Shopify setup

Follow these steps to enable Visit Replay on your Shopify store using the Theme App Extension.

1. Install the Visit Replay Session Recorder app from the Shopify App Store.
2. Open your Shopify Admin > Online Store > Themes and click Customize.
3. Navigate to App embeds in the left sidebar and enable VisitReplay Recorder.
4. Adjust optional settings:
   • Sampling Rate: 10% to 100% of store sessions (default: 100%).
   • Mask Form Inputs: Enabled by default for strict PII protection.
   • Exclude URL Paths: Comma-separated paths like /checkout, /cart/checkout.
   • Record Network & Errors: Enable DevTools diagnostics.
5. Click Save in the theme editor. Sessions will begin appearing in TrynShop Studio immediately.

Web SDK & CDN script setup

For custom web applications, React, Vue, Next.js, or headless Shopify (Hydrogen), integrate via script tag or npm package:

Option A: Single-Line Script Tag

Option B: NPM Package (@trynshop/replay-sdk)

import { TrynReplay } from '@trynshop/replay-sdk';

TrynReplay.init({
  projectKey: 'pk_live_your_store_key',
  samplingRate: 1.0,
  maskAllInputs: true,
  recordNetwork: true,
  recordConsoleErrors: true,
  excludePaths: ['/checkout', '/admin'],
});

Custom event telemetry

Track custom user actions and Virtual Try-On interactions on your timeline to diagnose drop-offs and feature engagement:

// Track Virtual Try-On events
TrynReplay.track('vto_opened', { productId: 'frame_123', mode: '3d_live' });
TrynReplay.track('camera_permission_granted', { platform: 'ios_safari' });
TrynReplay.track('glb_loaded', { durationMs: 420, modelSizeKb: 1250 });

// Identify logged-in customer (optional)
TrynReplay.identify('usr_99882', {
  tier: 'VIP',
  prescriptionsCount: 2,
});

Diagnostics & replay player

The TrynShop Studio Replay Player provides a unified session intelligence workspace to inspect sessions:

• Interactive Timeline Scrubber: Clickable timeline markers for clicks, route changes, errors, and custom events.
• Variable Speed & Skip Inactive: Playback at 1x, 2x, 4x, or 8x speed while automatically fast-forwarding through idle time.
• DevTools Console Drawer: Inspect exact console errors, stack traces, and network API responses side-by-side with the replay.