--- title: Analytics | Stainless description: 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 `` 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](https://analytics.google.com/). The measurement ID starts with `G-` (for example, `G-XXXXXXXXXX`). Add the GA4 scripts to your `astro.config.ts`: 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 }), ], }); ``` Replace `G-XXXXXXXXXX` with your actual measurement ID. ## Google Tag Manager [Google Tag Manager](https://tagmanager.google.com/) 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`: 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 }), ], }); ``` Replace `GTM-XXXXXXX` with your actual container ID. ## Plausible Analytics [Plausible](https://plausible.io/) is a privacy-focused analytics alternative. Add the Plausible script to your `astro.config.ts`: 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 }), ], }); ``` Replace `yourdomain.com` with your actual domain. ## Fathom Analytics [Fathom](https://usefathom.com/) is another privacy-focused analytics option. Add the Fathom script to your `astro.config.ts`: 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 }), ], }); ``` Replace `ABCDEFGH` with your Fathom site ID. ## Clicky [Clicky](https://clicky.com/) provides real-time web analytics. Add the Clicky script to your `astro.config.ts`: 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': '', async: true, }, }, ], // ... other options }), ], }); ``` Replace `` with your Clicky site ID. ## Matomo [Matomo](https://matomo.org/) is an open-source analytics platform that you can self-host. Add the Matomo script to your `astro.config.ts`: 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://.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/.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s); })(); `, }, ], // ... other options }), ], }); ``` Replace `` with your Matomo server instance and `1` with your site ID. ## 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.