Docs · Trace

After purchase, open Trace → Install and copy your snippet. Replace tr_live_xxxxx with your live key from Trace on Mac.

HTML

Paste immediately before </body>.

<!-- Trace — paste in <head> -->
<script
  defer
  src="https://gettrace.uk/trace.js"
  data-key="tr_live_xxxxx"
></script>

React / Vite

Open index.html in your project root and paste before </body>.

<!-- Trace — in <head> of index.html -->
<script
  defer
  src="https://gettrace.uk/trace.js"
  data-key="tr_live_xxxxx"
></script>

Next.js App Router

Add to app/layout.tsx inside <body>, after {children}.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <script
          defer
          src="https://gettrace.uk/trace.js"
          data-key="tr_live_xxxxx"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Next.js Pages (_app)

Add to pages/_app.tsx — one file is enough for most sites.

import type { AppProps } from 'next/app'
import Script from 'next/script'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        defer
        src="https://gettrace.uk/trace.js"
        data-key="tr_live_xxxxx"
        strategy="afterInteractive"
      />
    </>
  )
}

Next.js Pages (_document)

Alternative: paste in pages/_document.tsx before </body>.

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script
          defer
          src="https://gettrace.uk/trace.js"
          data-key="tr_live_xxxxx"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

WordPress

Paste before </body> in footer.php or use a footer code plugin.

<?php // Trace — in <head> ?>
<script
  defer
  src="https://gettrace.uk/trace.js"
  data-key="tr_live_xxxxx"
></script>

Shopify

Add to theme.liquid before </body>.

{% comment %} Trace — in <head> {% endcomment %}
<script
  defer
  src="https://gettrace.uk/trace.js"
  data-key="tr_live_xxxxx"
></script>

Webflow

Project Settings → Custom Code → Footer, before </body>.

<!-- Trace — Head custom code -->
<script
  defer
  src="https://gettrace.uk/trace.js"
  data-key="tr_live_xxxxx"
></script>

Troubleshooting

No events appearing

Confirm https://gettrace.uk/trace.js loads in the Network tab. Your data-key must match the live key in Trace on Mac (tr_live_xxxxx is a placeholder). Visit the live site and interact — events batch every few seconds.

Single-page apps

Trace tracks page_url on each event and listens for route changes (pushState, popstate).

Local development

Use the live key from your site in Trace. Test events from the Mac app stay separate from real script events.

Need help? hello@gettrace.uk