Installing the Tracking Script

import { Aside, Steps, Tabs, TabItem } from ‘@astrojs/starlight/components’;

This guide covers all installation options for analyze.swiss, from basic script tags to advanced framework integrations.

Basic Installation

The simplest way to install analyze.swiss is with a script tag:

<script
  src="https://analyze-ingest.thismatters.workers.dev/s/a.js"
  data-api-key="YOUR_API_KEY"
  data-auto-capture="true"
  defer>
</script>

Place this in your <head> section, ideally just before </head>.

Script Attributes

Attribute	Required	Default	Description
`data-api-key`	✅ Yes	–	Your workspace API key
`data-auto-capture`	No	`true`	Enable automatic event capture
`data-track-localhost`	No	`false`	Track events on localhost
`data-cross-domain`	No	–	Comma-separated domains for cross-domain tracking
`data-mask-inputs`	No	`true`	Mask sensitive input values
`data-respect-dnt`	No	`true`	Respect Do Not Track header

Installation Methods

Via Script Tag (Recommended)

<script
  src="https://analyze-ingest.thismatters.workers.dev/s/a.js"
  data-api-key="pk_live_xxxxx"
  data-auto-capture="true"
  defer>
</script>

Via npm

npm install @analyze.swiss/sdk

import { Analyze } from '@analyze.swiss/sdk';

const analyze = new Analyze({
  apiKey: 'pk_live_xxxxx',
  autoCapture: true
});

Via Google Tag Manager

Create a new Custom HTML tag

Paste the script code:

<script
  src="https://analyze-ingest.thismatters.workers.dev/s/a.js"
  data-api-key="YOUR_API_KEY"
  data-auto-capture="true">
</script>

Set the trigger to All Pages
Save and publish

Framework Guides

Next.js (App Router)

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://analyze-ingest.thismatters.workers.dev/s/a.js"
          data-api-key="YOUR_API_KEY"
          data-auto-capture="true"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Next.js (Pages Router)

import Script from 'next/script';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://analyze-ingest.thismatters.workers.dev/s/a.js"
        data-api-key="YOUR_API_KEY"
        data-auto-capture="true"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

React (Create React App / Vite)

// src/index.tsx or src/main.tsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://analyze-ingest.thismatters.workers.dev/s/a.js';
    script.dataset.apiKey = 'YOUR_API_KEY';
    script.dataset.autoCapture = 'true';
    script.defer = true;
    document.head.appendChild(script);
  }, []);

  return <YourApp />;
}

Or use our React SDK:

npm install @analyze.swiss/react

import { AnalyzeProvider } from '@analyze.swiss/react';

function App() {
  return (
    <AnalyzeProvider apiKey="YOUR_API_KEY">
      <YourApp />
    </AnalyzeProvider>
  );
}

Vue 3

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://analyze-ingest.thismatters.workers.dev/s/a.js';
  script.dataset.apiKey = 'YOUR_API_KEY';
  script.dataset.autoCapture = 'true';
  script.defer = true;
  document.head.appendChild(script);
});
</script>

Nuxt 3

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://analyze-ingest.thismatters.workers.dev/s/a.js',
          'data-api-key': 'YOUR_API_KEY',
          'data-auto-capture': 'true',
          defer: true
        }
      ]
    }
  }
});

Astro

<html>
  <head>
    <script
      src="https://analyze-ingest.thismatters.workers.dev/s/a.js"
      data-api-key="YOUR_API_KEY"
      data-auto-capture="true"
      defer>
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

WordPress

Add to your theme’s functions.php:

function add_analyze_swiss_script() {
    ?>
    <script
      src="https://analyze-ingest.thismatters.workers.dev/s/a.js"
      data-api-key="YOUR_API_KEY"
      data-auto-capture="true"
      defer>
    </script>
    <?php
}
add_action('wp_head', 'add_analyze_swiss_script');

Shopify

Add to your theme’s theme.liquid:

<!-- In the <head> section -->
<script
  src="https://analyze-ingest.thismatters.workers.dev/s/a.js"
  data-api-key="YOUR_API_KEY"
  data-auto-capture="true"
  defer>
</script>

Verifying Installation

After adding the script:

Open your website in a browser
Open Developer Tools (F12)
Go to the Network tab
Look for requests to analyze-ingest.thismatters.workers.dev
Check your analyze.swiss dashboard for incoming data

Troubleshooting

Script Not Loading

Check if an ad blocker is blocking the request
Verify the API key is correct
Ensure the script tag is properly formatted

Events Not Appearing

Wait up to 30 seconds for data to appear
Check browser console for errors
Verify data-track-localhost="true" if testing locally

CORS Errors

Our script handles CORS automatically. If you see CORS errors:

Clear your browser cache
Try in an incognito window
Contact support if the issue persists