Docs/Tracking

Install on your platform

Where to paste the snippet on Webflow, WordPress, Tag Manager, Shopify, Squarespace, Wix, Next.js and bundled apps.

There are three ways to install, and the key travels differently in each: on the script tag for a site whose head you can edit, on window.localWrangler for Google Tag Manager, and in your own code for a bundled app. Each section below shows the snippet for its platform. Copy the live version from Tracking, then Tracking Script so the key is yours, then follow your platform.

Generic HTML site

For any hand-built or static HTML site, paste the snippet directly into the page head.

1
Open your site template or each HTML file and find the closing </head> tag.
2
Paste the snippet just before it.
3
Deploy and verify a pageview appears in Analytics.

Tracking snippet

<script src="https://localwrangler.com/track.js" data-key="lw_xxxxxxxx" async></script>

If your pages share a common header include, add the snippet there once so every page is covered.

Webflow

Webflow lets you add custom code to the site head without touching individual pages.

1
In the Webflow Designer, open Site settings, Custom code.
2
Paste the snippet into the Head code field.
3
Save, then publish your site.

Tracking snippet

<script src="https://localwrangler.com/track.js" data-key="lw_xxxxxxxx" async></script>

Webflow submits forms over AJAX. The tracking script handles that automatically, capturing field values as they are typed so nothing is lost on submit.

WordPress

On WordPress, the cleanest path is a header-injection plugin so updates to your theme do not wipe the snippet.

1
Install a header snippet plugin such as WPCode or Insert Headers and Footers.
2
Open its settings and find the Header section.
3
Paste the snippet and save.

Tracking snippet

<script src="https://localwrangler.com/track.js" data-key="lw_xxxxxxxx" async></script>

Prefer not to use a plugin? Add the snippet to your theme header.php just before the closing head tag, ideally in a child theme.

Google Tag Manager

If you manage tags through Google Tag Manager, add the tracker as a Custom HTML tag. Tag Manager injects the tag itself, so the key is set on the page instead of on the script tag.

1
In Tag Manager, create a new tag of type Custom HTML.
2
Paste the code below into the HTML field.
3
Set the trigger to All Pages, then save and publish the container.

Tag Manager snippet

<script>
  window.localWrangler = { key: "lw_xxxxxxxx" };
</script>
<script src="https://localwrangler.com/track.js" async></script>

Make sure the container fires on every page so the tracker is present site-wide.

Shopify

Shopify themes expose the layout file where the head is defined.

1
From your admin, open Online Store, Themes.
2
Click the three dots on your live theme and choose Edit code.
3
Open layout/theme.liquid and paste the snippet just before the closing head tag.

Tracking snippet

<script src="https://localwrangler.com/track.js" data-key="lw_xxxxxxxx" async></script>

Squarespace

Squarespace has a built-in code injection panel for the site head.

1
Open Settings, Advanced, Code Injection.
2
Paste the snippet into the Header field.
3
Save.

Tracking snippet

<script src="https://localwrangler.com/track.js" data-key="lw_xxxxxxxx" async></script>

Wix

Wix supports custom code through its settings, applied to all pages.

1
Open Settings, then Custom code under Advanced.
2
Add a new code snippet and paste it in.
3
Set it to load on All pages, in the Head, then apply.

Tracking snippet

<script src="https://localwrangler.com/track.js" data-key="lw_xxxxxxxx" async></script>

Next.js

In Next.js the root layout renders on the server, so the tracker is loaded through the framework's Script component, which runs the code in the browser once the page is interactive.

1
In app/layout.tsx, import Script from next/script.
2
Add the block below to your root layout. The id is required for an inline script, and afterInteractive runs it client-side after hydration.
3
Rebuild, open your site, and verify a pageview appears in Analytics.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script id="local-wrangler" strategy="afterInteractive">{`
        // Run this once in the browser, before the tracker loads.
        window.localWrangler = { key: "lw_xxxxxxxx" };

        const s = document.createElement("script");
        s.src = "https://localwrangler.com/track.js";
        s.async = true;
        document.head.appendChild(s);
      `}</Script>
    </html>
  );
}

The details are in the Next.js documentation on loading scripts. Do not paste the JavaScript-app snippet into the layout as plain code: it uses the browser's window, which does not exist on the server.

JavaScript app (React, Vue and other bundled apps)

For an app bundled for the browser where there is no static head to edit, load the tracker once at startup.

1
Copy the code below.
2
Run it once when your app starts, in code that runs in the browser, such as your app's entry file. If your framework renders on the server, use its client-side script component instead, as in the Next.js section above.
3
Rebuild, open your site, and verify a pageview appears in Analytics.

JavaScript

// Run this once in the browser, before the tracker loads.
window.localWrangler = { key: "lw_xxxxxxxx" };

const s = document.createElement("script");
s.src = "https://localwrangler.com/track.js";
s.async = true;
document.head.appendChild(s);

The script loads asynchronously, so it does not block your page render.

PreviousAdd a domain Next Check that it works