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.

Tracker Script Installation | Hyperguard Docs