How to install the Hyperguard tracking script on your website, including SPA mode.

Tracker Script Installation

The Hyperguard tracker is a lightweight JavaScript snippet that collects browser signals from your website visitors. It runs asynchronously and doesn't block page rendering.

Standard Installation

Add the following code to the <head> section of your website. You can find your property-specific snippet in the Properties → Installation tab.

<script>
  window.HG_CONFIG = {
    "clientId": "hg_your_client_id",
    "apiKey": "hg_live_your_api_key",
    "apiEndpoint": "https://api.hyperguard.app/v1/events"
  };
</script>
<script src="https://api.hyperguard.app/hg-tracker.min.js" async></script>

💡 Copy from Console

The easiest way to get your snippet is to click the Copy button in the Installation tab. It includes your property's specific client ID and API key.

SPA Mode

For Single Page Applications (React, Vue, Angular, Next.js, etc.), enable SPA Mode in the Installation tab. This adds navigation tracking for client-side route changes.

When SPA mode is enabled, the tracker automatically detects pushState and popstate events, so each page transition is tracked as a new pageview without requiring a full page reload.

Google Tag Manager

If you use GTM, you can add the tracker as a Custom HTML tag:

  1. Create a new tag in GTM
  2. Choose Custom HTML as the tag type
  3. Paste your tracking snippet
  4. Set the trigger to All Pages
  5. Publish your container

Verifying Installation

After installing the tracker:

  1. Visit your website in a browser
  2. Open the Network tab in Developer Tools
  3. Look for requests to api.hyperguard.app/v1/events
  4. A 200 response confirms the tracker is working

You should see data appear in your Hyperguard dashboard within 1-2 minutes.

Performance Impact

  • Script size: ~15KB gzipped
  • Load behavior: Fully asynchronous (async attribute)
  • Detection modules: Load on-demand after page load
  • Network: Single POST request per session (additional events batched)

The tracker is designed to have zero impact on your Core Web Vitals scores.

Browser Support

The tracker is built for modern evergreen browsers. Supported targets:

  • Chrome (last 2 versions)
  • Edge (Chromium-based, version 79 or newer)
  • Firefox (last 2 versions)
  • Safari (last 2 versions)
  • Mobile Safari and mobile Chrome on iOS and Android

The following browsers are not supported:

  • Internet Explorer 11 (end of life June 2022)
  • Microsoft Edge versions before 79 (the pre-Chromium "EdgeHTML" build, end of life 2021)
  • Legacy Android browsers from before 2018

The tracker uses standard Web APIs (TextEncoder, crypto.subtle, AbortController) that are not available in those older targets. If you need to support a browser outside this list, please contact us.

Cache Strategy and Subresource Integrity (SRI)

The tracker is served from a stable URL (hg-tracker.min.js) with the HTTP cache headers Cache-Control: public, max-age=3600, stale-while-revalidate=86400. This means:

  • Customer browsers cache the tracker for 1 hour after the initial fetch.
  • For up to 24 hours after that expiry, browsers serve the cached copy while fetching the new version in the background.
  • Updates to the tracker propagate to customer browsers within roughly 1 hour of each release.

The bytes at this URL change with each tracker release. As a result, Subresource Integrity (SRI) is not currently supported for the production tracker URL. A customer pinning an SRI hash like <script integrity="sha384-..."> would see their script tag stop loading the moment we ship a new tracker version.

If your security policy requires SRI on all external scripts, please contact us to discuss a versioned, immutable URL.