MetrikStack

Quickstart

Create a site, add the script tag, and see your first event.

This walks through the fastest path to a working dashboard: the browser script only. For server, edge or log sources, see Sources.

1. Create a site

In the dashboard, create a site for your domain. Every new site gets a script source automatically, so there is no separate step needed.

2. Add the script tag

Add this to the <head> of every page you want to track:

<script
  defer
  src="https://cdn.metrikstack.com/js/script.js"
  data-site="SITE_ID"
></script>
  • defer keeps the script off the critical rendering path.
  • data-site is your site's public id. It's not a secret; ingest is rate-limited per site and per visitor regardless.
  • The script is under 1.5 kB gzipped, has no dependencies, and sends no cookies.

It tracks pageviews automatically, including SPA navigations (it patches history.pushState and listens for popstate), and sends a leave event on tab close / navigation away with time-on-page and scroll depth.

Custom events

<script>
  window.metrikstack.track('signup', { plan: 'pro' });
</script>

Local development

The script no-ops on localhost and file: origins by default so local testing doesn't pollute production data. To track locally anyway (e.g. to verify the integration), add data-allow-local:

<script
  defer
  src="https://cdn.metrikstack.com/js/script.js"
  data-site="SITE_ID"
  data-allow-local
></script>

3. Wait for the first event

Open your site, load a page, then check the site's Sources page in the dashboard. It shows "waiting for first event…" until the script's pageview arrives, which usually takes a few seconds.

Proxying the script through your own domain

Some ad blockers and privacy extensions block requests to known analytics domains. Serving the script from your own domain avoids that. Two common setups:

Next.js

Add a rewrite in next.config.js so /js/script.js on your own domain proxies to the CDN:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/js/script.js',
        destination: 'https://cdn.metrikstack.com/js/script.js',
      },
      {
        source: '/api/analytics/:path*',
        destination: 'https://api.metrikstack.com/v1/:path*',
      },
    ];
  },
};

Then point the script tag at your own path:

<script defer src="/js/script.js" data-site="SITE_ID"></script>

nginx

location = /js/script.js {
    proxy_pass https://cdn.metrikstack.com/js/script.js;
    proxy_set_header Host cdn.metrikstack.com;
    proxy_cache_valid 200 1h;
}

location /api/analytics/ {
    proxy_pass https://api.metrikstack.com/v1/;
    proxy_set_header Host api.metrikstack.com;
}

Proxying the ingest calls too (not just the script) is optional but improves delivery further for the same reason.

Next steps

  • Add a server SDK or edge integration alongside the script to catch traffic the script misses (adblocked visitors, bots, cache hits).
  • Read How merging works to understand how multiple sources for the same site are combined into one pageview count.

Introduction

What MetrikStack is, the multi-source idea, and the privacy model.

Overview

Every way to send MetrikStack data, and when to use each.

On this page

1. Create a site2. Add the script tagCustom eventsLocal development3. Wait for the first eventProxying the script through your own domainNext.jsnginxNext steps