Platforms

The tag goes in the head of every page. Here’s where that is on the platforms sites are most often built with.

Each platform has a place for code that goes in the head of every page: a theme file, a site setting, a layout or a tag manager. Put the tag there once and every page is counted, those you add later included. On most it’s paste, save, publish.

<script async data-domain="example.com" src="https://fiveb.ar/js/tally.js"></script>

This is the tag from Getting started, with your domain in place of example.com. However a platform adds it, keep its src, its data-domain and any other attributes you give it: the script sends what it counts to the address it was loaded from, and counts it under the site data-domain names.

If your site sends a Content Security Policy, allow fiveb.ar in it too. Once the tag is on, check it works.

Site builders

Each has a place for code that goes in the head of every page. Paste the tag there, and publish if the platform asks you to.

WordPress

The simplest way is a plugin that adds code to every page’s head, such as WPCode: under Code Snippets, then Header & Footer, paste the tag into Header and save. On WordPress.com, plugins need a paid plan.

Or add it from your theme’s functions.php, which works for block and classic themes alike. Use a child theme’s, so that updating the theme doesn’t remove the tag:

add_action('wp_head', function () {
  echo '<script async data-domain="example.com" src="https://fiveb.ar/js/tally.js"></script>';
});

If a plugin delays scripts until the visitor scrolls or clicks, to speed pages up, exclude tally.js from it. Otherwise a visitor who leaves without touching the page isn’t counted.

Shopify

In your Shopify admin, go to Online Store, then Themes, open the menu (…) beside your theme and choose Edit code. Open theme.liquid under Layout, paste the tag just before </head>, and save. See Shopify’s help on editing theme code.

The tag belongs to that theme, so add it again if you switch themes, and check it’s still there after an update. Shopify’s checkout doesn’t use your theme, so its pages aren’t counted.

Webflow

In your site’s settings, open the Custom code tab, paste the tag into Head code, save, and publish: the tag isn’t live until you do. Custom code needs a paid Site or Workspace plan. See Webflow’s help on custom code.

Squarespace

Paste the tag into the Header box under Code injection, and save. Code injection needs the Core plan or above. Squarespace’s help on code injection shows where to find it in the site editor.

Wix

In your site’s dashboard, go to Settings, then Custom Code under Development & integrations, and click Add Custom Code. Paste the tag, choose All pages and Load code once, place it in Head, and apply. Custom code needs a Premium plan and a connected domain. See Wix’s help on custom code.

Wix moves between pages without loading them, and the script counts each one as a single-page app’s, so loading it once is enough.

Frameworks and static sites

Put the tag in the layout every page shares. Where the framework moves between pages without loading them, each page is counted as a single-page app’s, with nothing more to add.

Next.js

With the App Router, add the tag with Next.js’s Script in the root layout, app/layout.js or app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script data-domain="example.com" src="https://fiveb.ar/js/tally.js" />
    </html>
  );
}

With the Pages Router, put the same Script in pages/_app.js. Script passes data-domain through to the tag it adds, and loads the script once however many pages the visitor moves through. Keep its default strategy, afterInteractive: lazyOnload waits until the browser is idle, and misses visitors who leave before then. See Next.js’s guide to scripts.

Astro

Put the tag in the <head> of the layout every page uses, such as src/layouts/Layout.astro, with is:inline so that Astro leaves it as written rather than bundling it:

<script is:inline async data-domain="example.com" src="https://fiveb.ar/js/tally.js"></script>

With view transitions, Astro’s <ClientRouter />, each page a visitor moves to is still counted. See Astro’s guide to scripts.

Other frameworks

The tag goes wherever the framework writes the <head> every page shares:

• Vite, and the React, Vue and Svelte apps built with it: index.html.
• Nuxt: app.head.script in nuxt.config, with async, src and 'data-domain'.
• SvelteKit: src/app.html.
• Remix and React Router: the <head> in app/root.tsx.
• Django, Rails, Laravel and other server frameworks: the base template every page extends.

Hugo

Put the tag in the <head> of your base template, layouts/baseof.html (layouts/_default/baseof.html on sites made before Hugo 0.146), or of the partial it includes for the head.

With a theme, copy the file that writes the head from the theme into your own layouts folder, at the same path, and add the tag to your copy: Hugo uses yours in place of the theme’s. Many themes have a partial for extra head tags, which their README names.

Other static site generators

Eleventy, Jekyll and the rest work the same way: the tag goes in the <head> of the base layout, such as a layout in Eleventy’s _includes folder or Jekyll’s _layouts/default.html. Override a Jekyll theme’s file as you would Hugo’s, with a copy at the same path in your site, such as _includes/head.html.

Tag managers

A tag manager can add the tag for you, on every page it runs on. Not every tag manager keeps a script tag’s attributes as you wrote them (Google Tag Manager strips the data- ones), so build the tag with a few lines of script instead, which works in any of them. Put your domain in place of example.com:

<script>
(function () {
  var tag = document.createElement('script');
  tag.async = true;
  tag.setAttribute('data-domain', 'example.com');
  tag.src = 'https://fiveb.ar/js/tally.js';
  document.head.appendChild(tag);
})();
</script>

Add it as a tag of custom HTML or, in a tag manager that takes JavaScript rather than HTML, without its first and last lines, the <script> and </script>. Have it run when each page loads, then publish it, as most tag managers keep changes as a draft until you do. On a single-page app, the script counts each page it moves to itself, and if the tag manager runs it again, it adds nothing.

The tag only runs where the tag manager does, so a visitor whose browser blocks the tag manager isn’t counted. A tag written into the page itself doesn’t have that problem.

Here’s where it goes in the tag managers used most. Any other works the same way.

Google Tag Manager

In your container, add a Custom HTML tag holding the script, set it to fire on All Pages, save, then submit and publish the container. See Tag Manager’s help on custom tags.

Adobe Experience Platform Tags

In your tag property, add a rule whose event is the Core extension’s Library Loaded (Page Top), and whose action is its Custom Code. Choose JavaScript as the language, paste the script without its first and last lines, and save the rule. Then add it to a library and publish that to production. See Adobe’s help on the Core extension.

Tealium iQ

Add a JavaScript Code extension, from the Advanced tab of the Extensions Marketplace, with its scope set to Pre Loader, which runs once on each page. Paste the script without its first and last lines, then save and publish to your production environment. See Tealium’s help on the JavaScript Code extension.

Matomo Tag Manager

In your container, go to Tags, choose Create New Tag and pick Custom HTML. Paste the script into it and have it fire on a Pageview trigger, adding one if the container hasn’t got one. Then, under Publish, create a new version and publish it. See Matomo’s help on managing tags.

Piwik PRO

Go to Tag Manager, then Tags, and add a tag of the Custom code type. Paste the script into Tag code, give it a Page view trigger that fires on every page, save, and publish. See Piwik PRO’s help on custom code tags.

Cloudflare Zaraz

In the Cloudflare dashboard, go to Tag setup, then Third-party tools, and add a Custom HTML tool. Paste the script as its HTML, keep the Pageview trigger it fires on, and save. See Cloudflare’s help on adding a tool.