How the DeepSync SDK works

DeepSync captures behavior through a small JavaScript SDK (built on rrweb) that records DOM mutations, clicks, scrolls, and page views, then batches them to the ingestion API. React Native and Flutter packages ship the same event model for mobile apps.

The loader tag

Every web install is the same one-line tag. The /t/{projectId}.js loader resolves your organization, ingest URL, and SDK config server-side, then pulls the versioned SDK bundle — so you only ever need to know your public project ID, and SDK upgrades reach you without a code change on your side.

<!-- DeepSync tracking snippet -->
<script async src="https://ingest.deepsync.in/t/YOUR_PROJECT_ID.js"></script>

How data leaves the browser

• Events flush every 500ms or once 10 events queue up, whichever comes first.
• A full DOM snapshot forces an immediate flush, since replay can't render without it.
• On page unload, DeepSync uses navigator.sendBeacon so the last batch isn't lost.
• Flushing pauses automatically while the tab is idle, to save the visitor's bandwidth.

Single-page apps

The SDK patches the History API, so client-side route changes in React, Vue, Angular, Svelte, and every router built on them are recorded as page views automatically. You do not need to call anything on navigation.

Calling deepsync() before the loader finishes

The loader is async, so an inline script that fires early (an e-commerce purchase event, for example) may run first. Add the command-queue stub above your loader tag and those calls are buffered and drained once the SDK boots.

<script>
  window.deepsync = window.deepsync || function () {
    (window.deepsync.q = window.deepsync.q || []).push(arguments);
  };
</script>