Analytics

Customization

Add analytics tracking to your Stainless Docs Platform site to measure page views and user behavior.

Add analytics to your documentation site to track page views, user engagement, and other metrics.

How analytics works

To add analytics, use the head configuration option in your stainlessDocs integration to inject tracking scripts into every page. The head option accepts an array of elements to add to the <head> section. Each element requires:

tag: The HTML tag name (such as script, link, or meta)
attrs: An object of HTML attributes for the tag (optional)
content: The inner content of the tag (optional, for inline scripts)

Google Analytics 4 (GA4)

To add Google Analytics 4, first get your measurement ID from your Google Analytics dashboard. The measurement ID starts with G- (for example, G-XXXXXXXXXX).

Add the GA4 scripts to your astro.config.ts:

import { defineConfig } from "astro/config";
import { stainlessDocs } from "@stainless-api/docs";

export default defineConfig({
  integrations: [
    stainlessDocs({
      title: "My API Docs",
      head: [
        {
          tag: "script",
          attrs: {
            src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX",
            async: true,
          },
        },
        {
          tag: "script",
          content: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXXXXX');
          `,
        },
      ],
      // ... other options
    }),
  ],
});

Google Tag Manager

Google Tag Manager allows you to manage multiple tracking scripts from a single interface. To add Google Tag Manager, get your container ID from your GTM dashboard. The container ID starts with GTM- (for example, GTM-XXXXXXX).

Add the GTM script to your astro.config.ts:

import { defineConfig } from "astro/config";
import { stainlessDocs } from "@stainless-api/docs";

export default defineConfig({
  integrations: [
    stainlessDocs({
      title: "My API Docs",
      head: [
        {
          tag: "script",
          content: `
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXXX');
          `,
        },
      ],
      // ... other options
    }),
  ],
});

Plausible Analytics

Plausible is a privacy-focused analytics alternative. Add the Plausible script to your astro.config.ts:

import { defineConfig } from "astro/config";
import { stainlessDocs } from "@stainless-api/docs";

export default defineConfig({
  integrations: [
    stainlessDocs({
      title: "My API Docs",
      head: [
        {
          tag: "script",
          attrs: {
            src: "https://plausible.io/js/script.js",
            defer: true,
            "data-domain": "yourdomain.com",
          },
        },
      ],
      // ... other options
    }),
  ],
});

Fathom Analytics

Fathom is another privacy-focused analytics option. Add the Fathom script to your astro.config.ts:

import { defineConfig } from "astro/config";
import { stainlessDocs } from "@stainless-api/docs";

export default defineConfig({
  integrations: [
    stainlessDocs({
      title: "My API Docs",
      head: [
        {
          tag: "script",
          attrs: {
            src: "https://cdn.usefathom.com/script.js",
            "data-site": "ABCDEFGH",
            defer: true,
          },
        },
      ],
      // ... other options
    }),
  ],
});

Clicky

Clicky provides real-time web analytics. Add the Clicky script to your astro.config.ts:

import { defineConfig } from "astro/config";
import { stainlessDocs } from "@stainless-api/docs";

export default defineConfig({
  integrations: [
    stainlessDocs({
      title: "My API Docs",
      head: [
        {
          tag: "script",
          attrs: {
            src: '//static.getclicky.com/js',
            'data-id': '<your Clicky ID>',
            async: true,
          },
        },
      ],
      // ... other options
    }),
  ],
});

Matomo

Matomo is an open-source analytics platform that you can self-host. Add the Matomo script to your astro.config.ts:

import { defineConfig } from "astro/config";
import { stainlessDocs } from "@stainless-api/docs";

export default defineConfig({
  integrations: [
    stainlessDocs({
      title: "My API Docs",
      head: [
        {
          tag: "script",
          content: `
            var _paq = window._paq = window._paq || [];
            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
            _paq.push(['trackPageView']);
            _paq.push(['enableLinkTracking']);
            (function() {
              var u="https://<your matomo instance>.matomo.cloud/";
              _paq.push(['setTrackerUrl', u+'matomo.php']);
              _paq.push(['setSiteId', '1']);
              var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
              g.async=true; g.src='https://cdn.matomo.cloud/<your matomo instance>.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
            })();
          `,
        },
      ],
      // ... other options
    }),
  ],
});

Other analytics providers

You can use the same head configuration to add scripts for any analytics provider. Consult your provider’s documentation for the required script tags, then add them using the format shown above.