Features Why us Docs Pricing Sign in
Docs / Platform guides

Platform Installation Guides

Step-by-step instructions for adding Tallytics to every major platform. Same script tag, different locations.

Universal snippet. Every guide below uses the same script tag. Get yours from the dashboard after adding your website:
<script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>

WordPress

Theme header or plugin

Next.js

App Router or Pages Router

Nuxt / Vue

nuxt.config or index.html

Shopify

theme.liquid

Gatsby

gatsby-ssr / html.js

Squarespace

Code Injection

Google Tag Manager

Custom HTML tag
</>

Static HTML

Direct <head> paste

WordPress

Two options depending on whether you want to edit theme files or use a plugin.

Option A: Theme header (recommended)

  1. Open the Theme Editor

    Go to Appearance → Theme File Editor in your WordPress admin.

  2. Open header.php

    Select header.php from the file list on the right.

  3. Paste the script

    Add the Tallytics snippet just before the closing </head> tag:

    header.php 
        <!-- Tallytics Analytics -->
    <script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>
</head>

  4. Save

    Click Update File. Tracking starts immediately.

Option B: Plugin

If you'd rather not edit theme files, install a "Header Scripts" plugin like Insert Headers and Footers or WPCode:

  1. Install and activate the plugin
  2. Go to the plugin's settings page
  3. Paste the Tallytics script in the Header Scripts section
  4. Save — done
Child themes: If you're using a child theme, edit the child theme's header.php instead. Changes to the parent theme will be lost on updates.

Next.js

Works with both the App Router (Next.js 13+) and Pages Router.

App Router (recommended)

Add the script to your root layout:

app/layout.tsx 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script
          defer
          src="https://tallycdn.com/t.js"
          data-site="your-site-id"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Pages Router

Add to pages/_document.tsx:

pages/_document.tsx 
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          defer
          src="https://tallycdn.com/t.js"
          data-site="your-site-id"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
SPA navigation: Tallytics automatically tracks route changes via the History API. No additional setup needed for client-side navigation.

Nuxt / Vue

Nuxt 3

Add the script in nuxt.config.ts:

nuxt.config.ts 
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://tallycdn.com/t.js',
          defer: true,
          'data-site': 'your-site-id',
        },
      ],
    },
  },
})

Vue (Vite)

Add the script tag to index.html in your project root:

index.html 
<head>
  <!-- ... other tags ... -->
  <script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>
</head>

Gatsby

Use the gatsby-ssr.js file to inject the script server-side:

gatsby-ssr.js 
export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="tallytics"
      defer
      src="https://tallycdn.com/t.js"
      data-site="your-site-id"
    />,
  ])
}

Remix

Add the script in your root route's <head>:

app/root.tsx 
export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
        <script
          defer
          src="https://tallycdn.com/t.js"
          data-site="your-site-id"
        />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  )
}

Astro

Add to your base layout component:

src/layouts/Base.astro 
<html lang="en">
  <head>
    <!-- ... other tags ... -->
    <script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>
  </head>
  <body>
    <slot />
  </body>
</html>
Note: Use a plain <script> tag, not Astro's <script> component — Astro would try to bundle it. The is:inline directive also works if you prefer Astro syntax.

SvelteKit

Add to your root app.html:

src/app.html 
<head>
  %sveltekit.head%
  <script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>
</head>

Hugo

Add to your base template's <head> partial:

layouts/partials/head.html 
<!-- Tallytics Analytics -->
{{ if not .Site.IsServer }}
<script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>
{{ end }}

The {{ if not .Site.IsServer }} conditional skips tracking during local development with hugo server.

Jekyll

Add to your default layout or head include:

_includes/head.html 
{% if jekyll.environment == "production" %}
<script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>
{% endif %}

Use JEKYLL_ENV=production jekyll build to enable tracking only in production.

Shopify

  1. Open the theme editor

    Go to Online Store → Themes → Actions → Edit code.

  2. Open theme.liquid

    In the Layout folder, click theme.liquid.

  3. Paste the script

    Add the Tallytics snippet just before </head>:

    theme.liquid 
        <script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>
  </head>

  4. Save

    Click Save. Tracking is live on all pages including checkout.

WooCommerce

WooCommerce runs on WordPress, so follow the WordPress guide above. The script tag in header.php will automatically cover all WooCommerce pages — shop, product, cart, and checkout.

To track purchases as custom events, add this to your Thank You page template or via a plugin:

Order confirmation page 
<script>
  tallytics.track('purchase_completed', {
    order_total: '{{ order.total }}',
    items: '{{ order.item_count }}'
  })
</script>

Squarespace

  1. Open Code Injection

    Go to Settings → Advanced → Code Injection.

  2. Paste in Header

    Add the Tallytics script in the Header field:

    <script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>

  3. Save

    Click Save. Tracking covers all pages on your Squarespace site.

Business plan required. Code Injection is only available on Squarespace Business plan or higher.

Webflow

  1. Open Project Settings

    In the Webflow Designer, go to Project Settings → Custom Code.

  2. Paste in Head Code

    Add the Tallytics script in the Head Code section:

    <script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>

  3. Publish

    Save and publish your site. Tracking starts on the next deploy.

Wix

  1. Open Custom Code

    Go to Settings → Custom Code (under Advanced).

  2. Add code

    Click + Add Code and paste the Tallytics script.

  3. Configure placement

    Set placement to Head, apply to All pages, and load on All pages.

  4. Apply

    Click Apply. The code goes live with your next publish.

Google Tag Manager

If you're already using GTM and want to manage the Tallytics script through it:

  1. Create a new tag

    In GTM, click Tags → New. Choose Custom HTML as the tag type.

  2. Paste the script

    <script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>

  3. Set the trigger

    Choose All Pages as the trigger (fires on every page load).

  4. Publish

    Save the tag and click Submit to publish your container.

Direct installation preferred. Adding the script tag directly to your HTML is faster (no GTM overhead) and more reliable. Use GTM only if you need centralized tag management.

Static HTML

For plain HTML sites, paste the script in the <head> of every page:

Any .html file 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <script defer src="https://tallycdn.com/t.js" data-site="your-site-id"></script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

If you have many pages, consider using a static site generator or a shared header include to avoid repeating the tag.