Get started5 min read

Install Mrkr

Mrkr tracks with a single <script> tag. There's no config file, no build step, and nothing else to install.

The script tag

Your dashboard's Install page has this pre-filled with your own site id. It looks like this:

html
<script defer src="https://mrkr.app/tracker.js" data-site="YOUR_SITE_ID"></script>
Note

If you've set up the managed proxy on a subdomain of your own domain, the snippet points at that subdomain instead (/js/app.js and /api/data in place of tracker.js and /api/collect) so ad blockers have no third-party host to match against. Copy the tag from your dashboard rather than retyping it: the two forms aren't interchangeable.

  1. 1

    Copy the snippet

    From the Install page in your dashboard: it already has your site id filled in.

  2. 2

    Paste it into <head>

    Just before the closing </head> tag, on every page you want tracked. The defer attribute means it won't block rendering.

  3. 3

    Deploy

    Once the tag is live on your site, Mrkr starts receiving pageviews immediately: no waiting period, no propagation delay.

  4. 4

    Confirm it's working

    Head to Verify your install: the dashboard auto-detects your first pageview within a minute.

Framework and platform instructions

The tag is the same everywhere. What changes is where you paste it.

Two settings do change the tag

Almost everything about how a site is tracked lives in your dashboard settings, so flipping a toggle there never means re-pasting the snippet. The exceptions are cookie mode, which adds data-cookies="on", and the managed proxy, which changes the host and paths. Both are baked into the snippet shown on your Install page, so copy it from there rather than retyping the example above. See Script tag reference.

Next.js (App Router)

Render it from your root app/layout.tsx with next/script. Because it lives in the root layout, every route gets it automatically, with no per-page setup:

app/layout.tsxtsx
import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://mrkr.app/tracker.js" data-site="YOUR_SITE_ID" />
      </body>
    </html>
  );
}

No strategy is needed. next/script defaults to afterInteractive, which loads the tracker early but after hydration begins, and that is the right setting for analytics. A plain <script defer> tag in the layout works too if you would rather not use the component.

Nuxt

Add it to app.head.script in nuxt.config.ts, or call useHead() from your root app.vue:

ts
// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: "https://mrkr.app/tracker.js", defer: true, "data-site": "YOUR_SITE_ID" },
      ],
    },
  },
});

Plain HTML

  1. Open the HTML file (or template) for your site.
  2. Paste the snippet just before the closing </head> tag.
  3. Deploy. Every page that includes that <head> is now tracked.

WordPress

  1. Install a header-snippet plugin (WPCode, or "Insert Headers and Footers").
  2. Paste the snippet into the Header / <head> box.
  3. Save. No theme edits needed: it loads site-wide.

Webflow

  1. Project Settings → Custom Code → Head Code.
  2. Paste the snippet into the Head box and save.
  3. Publish your site to push the change live.

Shopify

  1. Admin → Online Store → Themes → … → Edit code.
  2. Open layout/theme.liquid and paste the snippet right before </head>.
  3. Save. It loads on every storefront page.

Google Tag Manager

  1. Create a new Custom HTML tag in your GTM container.
  2. Paste the snippet, then set the trigger to All Pages.
  3. Submit and publish the container.
One tag per site

Don't paste the snippet twice on the same page (once directly, once through GTM, for example): you'll double-count every pageview.