SDK Installation

QuickMonitoring crawls your site externally — no code required for QA scanning, uptime monitoring, or visual testing. But to unlock analytics, session recordings, real user monitoring, feature flags, and A/B experiments, you need the SDK installed on your client's site.

Without the SDK, Phases 5 and 6 are not available.

---

Install the SDK

HTML Snippet

Add this before the closing </head> tag on every page. Replace YOUR_SITE_ID with your actual Site ID.

<!-- QuickMonitoring Tracker -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'qm.start': new Date().getTime(),event:'qm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://cdn.quickmonitoring.com/tracker.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','_qm','YOUR_SITE_ID');
</script>

This is the fastest installation method. Works on any static site, WordPress, Webflow, or custom HTML.

NPM

Install the package:

npm install @quickmonitoring/sdk

Initialize it at your app's entry point:

import { QMTracker } from '@quickmonitoring/sdk';

QMTracker.init({ siteId: 'YOUR_SITE_ID' });

Call init() once, as early as possible in your app lifecycle. The tracker is a singleton — calling it multiple times has no effect.

React

Create a utility file to handle initialization safely (avoids SSR issues):

// src/lib/qm.ts
import { QMTracker } from '@quickmonitoring/sdk';

export function initQM() {
  if (typeof window !== 'undefined') {
    QMTracker.init({ siteId: 'YOUR_SITE_ID' });
  }
}

Then call initQM() in your app root — typically src/App.tsx or src/index.tsx:

// src/App.tsx
import { useEffect } from 'react';
import { initQM } from './lib/qm';

export default function App() {
  useEffect(() => {
    initQM();
  }, []);

  return <YourApp />;
}

Next.js

For Next.js App Router, load the tracker script using the built-in <Script> component with strategy="afterInteractive". This defers loading until the page is interactive, which avoids blocking the initial render.

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://cdn.quickmonitoring.com/tracker.js?id=YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Replace YOUR_SITE_ID with your actual Site ID. The afterInteractive strategy ensures the tracker loads without affecting your Core Web Vitals.

---

Finding your Site ID

Your Site ID is unique to each site you've added in QuickMonitoring.

1. Go to app.quickmonitoring.com
2. Click Sites in the sidebar
3. Click on your site
4. Go to Settings
5. Copy the Site ID from the top of the settings page

It looks like a UUID: a1b2c3d4-e5f6-7890-abcd-ef1234567890. Use this exact string — don't wrap it in quotes when using the HTML snippet (it's already a string in the JS closure).

---

Verifying installation

After deploying the SDK, confirm it's loading correctly:

1. Open your site in a browser
2. Open DevTools → Network tab
3. Filter by cdn.quickmonitoring.com
4. Reload the page
5. You should see a request to tracker.js with a 200 status

If the request shows up, you're good. Data will start appearing in your QuickMonitoring dashboard within a few minutes of real user traffic.

You can also check the Network tab for requests to api.quickmonitoring.com — these are the event submissions from the tracker.

---

What the SDK enables

Installing the SDK unlocks the following features:

Phase 5 — Analytics

• Custom event tracking (clicks, form submissions, conversions)
• Funnel analysis — see where users drop off
• Cohort analysis — group users by behavior or date
• Retention curves — measure how often users return
• Heatmaps — visualize clicks, taps, and scroll depth
• Custom SQL dashboards — query your raw event data

Phase 6 — Feature Flags & Experiments

• Feature flags — roll out features to specific users or percentages
• A/B experiments — test variants and measure statistical significance
• Session recordings — replay real user sessions to debug UX issues
• Real User Monitoring (RUM) — Core Web Vitals from real browsers, not lab conditions
• LLM event tracking — if your app uses AI, track prompts, completions, latency, and cost

None of these require any backend changes. The SDK handles collection; QuickMonitoring handles storage, analysis, and display.