Docs/Tracking Setup

Install & Verify Tracking Script

Metrivo uses a lightweight, privacy-friendly script to log pageviews, sessions, UTM campaigns, and custom events. Install the snippet once to start capturing traffic data and correlating it with downstream revenue.

How Metrivo Tracking Works

The Metrivo tracker loads asynchronously (`defer`), ensuring zero impact on your website's load speed or Google Lighthouse scores. It stores anonymous visitor (`__rp_vid`) and session (`__rp_sid`) identifiers in local storage to tie acquisition channels to purchases.

By default, the script respects browser Do Not Track (DNT) headers and does not capture raw IP addresses, track mouse movements, record screens, or store cookies. It only posts structured event payloads back to the Metrivo collector.

1. Copy the tracking snippet

Locate your unique public key in the Metrivo dashboard under Websites → Settings and replace the <PUBLIC_KEY> placeholder:

HTML Code SnippetCanonical tag

<script defer src="https://metrivo.co/tracker.js" data-site="<PUBLIC_KEY>"></script>

2. Installation by framework

Plain HTML / Any CMS (WordPress, Webflow, Shopify)

Paste the tracking code tag directly into the global template files of your site, positioning it inside the <head> block.

Next.js (App Router layout)

Integrate using Next.js's native Script component to ensure efficient, asynchronous loading. Add this to your root app/layout.tsx file:

import Script from "next/script"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head />
      <body>
        {children}
        <Script
          src="https://metrivo.co/tracker.js"
          data-site="<PUBLIC_KEY>"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

React Single Page App (Vite / CRA)

Insert the canonical HTML snippet directly inside the head section of your main entry file, located at public/index.html.

Vue.js & Nuxt

For Nuxt 3, append the script config arrays inside your global nuxt.config.ts configuration file:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://metrivo.co/tracker.js",
          "data-site": "<PUBLIC_KEY>",
          defer: true
        }
      ]
    }
  }
})

Svelte / SvelteKit

Add the tracking snippet directly to your HTML template wrapper located at src/app.html, right before the closing </head> element tag.

3. Verify installation

Once you have deployed the tracking code snippet to your website, you can verify that it is properly communicating with the Metrivo analytics server.

In-Dashboard Verification (Automated Check)

Navigate to your Metrivo dashboard under Data Connections and click the Verify installation button. Our system will check our event collector logs for any incoming pageview events originating from your site domain using your key.

Manual Verification via Browser DevTools

To confirm the event is sent immediately:

Open your website in a web browser.
Right-click anywhere and select Inspect (or press F12).
Go to the Network tab.
Search or filter by the keyword track.
Refresh the page. You should see a POST request to https://metrivo.co/api/track returning a successful 200 OK status code.

4. Track key actions (ClickID)

Add a data-click-id attribute to the buttons, links, and forms that matter — pricing CTAs, checkout, signup, setup steps. Metrivo captures those clicks (plus page views and form starts/submits) and feeds them to the Revenue Leak Agent so it can show you exactly where revenue leaks: who reaches pricing but never checks out, who clicks checkout but never pays, and which high-intent CTAs convert. We only record the slug and a short, masked label — never input values.

<!-- Tag the actions you care about -->
<button data-click-id="pricing-growth-checkout">Start Growth</button>
<a data-click-id="homepage-primary-cta" href="/signup">Get started</a>

<!-- Forms: data-click-id captures form_start + form_submit (no field values) -->
<form data-click-id="signup-form"> … </form>

<!-- Or fire a semantic event by hand (e.g. an in-app checkout success) -->
<script>
  window.Metrivo &&
    window.Metrivo.trackClick("checkout-complete", {
      revenueContext: { plan: "growth", amount: 49, currency: "USD" },
    });
</script>

Use stable, descriptive slugs (for example pricing-growth-checkout, connect-stripe-start, install-tracker-copy-snippet). You can also add data-setup-step to onboarding steps. Then open ClickID Journeys in your dashboard to see the conversion path and drop-off points.

Troubleshooting Common Issues

If events do not appear in the dashboard or browser console, review the checklist:

Ad Blockers / Privacy Extensions: Ad-blockers or privacy extensions (e.g. uBlock Origin, Brave Shields) can block tracking requests on local or development domains. Test in an Incognito window or disable shielding for verification.
Content Security Policy (CSP): If your site enforces a strict Content Security Policy, you must explicitly permit the script to load and make requests to Metrivo. Ensure your CSP headers include:
script-src 'self' https://metrivo.co;
connect-src 'self' https://metrivo.co;
Correct API Key Attribute: Ensure the attribute name on the script tag is exactly data-site="<PUBLIC_KEY>" and NOT the legacy attribute key name.

Next Step: Connect Payments

Now that you are tracking pageviews, integrate your payment solution to tie sessions directly to revenue.