Skip to main content

Web SDK - One-page setup

This guide matches the Web Quickstart shown in your TesterNest dashboard.

What you need from the dashboard​

Open SDK Setup in TesterNest and copy:

  • Public Key
  • Base URL
  • Web Quickstart snippet

You will use the same values below.

1) Add the SDK script tag​

Paste this into your site's HTML (recommended: inside <head> so it loads early):

<script defer src="{BASE_URL}/api/sdk.js" data-public-key="{PUBLIC_KEY}"></script>

Example​

<script
  defer
  src="https://myappcrew-tw.pages.dev/api/sdk.js"
  data-public-key="REPLACE_WITH_YOUR_PUBLIC_KEY">
</script>

Notes

  • Keep defer so it doesn't block page rendering.
  • {BASE_URL} must be the exact value from your dashboard.
  • {PUBLIC_KEY} must be the exact value from your dashboard.

2) Track an event (quick test)​

After the script loads, you can track events like this:

window.myappcrew.track('cta_click', { cta: 'primary' });

Example: track on button click​

<button onclick="window.myappcrew.track('cta_click', { cta: 'primary' })">
  Get Started
</button>

3) Verify in dashboard​

  1. Open your website and perform the action (page load / button click).
  2. Go back to TesterNest > Events / Overview for that app.
  3. Confirm you see the event name cta_click with payload { cta: "primary" }.

SPA support (React / Next.js / Vue / Angular)​

Single-page apps change the URL without a full page reload, so normal "page load" tracking will not fire automatically. To track navigation, send a page_view event on each route change.

Framework-neutral (works for most SPAs)​

function trackPageView() {
  window.myappcrew?.track?.('page_view', {
    path: location.pathname + location.search + location.hash,
  });
}

try {
  const notify = () => window.dispatchEvent(new Event('myappcrew:navigation'));
  const pushState = history.pushState.bind(history);
  const replaceState = history.replaceState.bind(history);
  history.pushState = (...args) => {
    const result = pushState(...args);
    notify();
    return result;
  };
  history.replaceState = (...args) => {
    const result = replaceState(...args);
    notify();
    return result;
  };
  window.addEventListener('popstate', notify);
  window.addEventListener('hashchange', notify);
  window.addEventListener('myappcrew:navigation', trackPageView);
} catch {
  // If history is not writable, fall back to popstate/hashchange only.
  window.addEventListener('popstate', trackPageView);
  window.addEventListener('hashchange', trackPageView);
}

trackPageView();

React (react-router)​

import {useEffect} from 'react';
import {useLocation} from 'react-router-dom';

const location = useLocation();
useEffect(() => {
  window.myappcrew?.track?.('page_view', {
    path: location.pathname + location.search,
  });
}, [location]);

Next.js (App Router)​

import {useEffect} from 'react';
import {usePathname, useSearchParams} from 'next/navigation';

const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
  window.myappcrew?.track?.('page_view', {
    path: pathname + (searchParams?.toString() ? `?${searchParams}` : ''),
  });
}, [pathname, searchParams]);

Vue Router​

router.afterEach((to) => {
  window.myappcrew?.track?.('page_view', {path: to.fullPath});
});

Angular​

import {NavigationEnd} from '@angular/router';
import {filter} from 'rxjs/operators';

this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((e) => {
  window.myappcrew?.track?.('page_view', {path: e.urlAfterRedirects});
});

Note

  • Only do one approach: either the framework-neutral snippet OR the framework-specific hook.
  • If you already have your own analytics router hooks, just call page_view there.

Troubleshooting​

window.myappcrew is undefined​

  • Ensure the <script ...> tag is present and points to {BASE_URL}/api/sdk.js.
  • Check DevTools > Network: sdk.js should load with status 200.
  • If you call track() too early, wrap it in a small delay or trigger it after user interaction (button click).

Events not showing in dashboard​

  • Double-check the Public Key and Base URL match your app's SDK Setup page.
  • Verify you're looking at the correct app in the dashboard.