Production analytics

Configure analytics to add analytics scripts only to files generated by makit build. They are not loaded by makit dev, which keeps local development out of your analytics data.

Configure only the providers you need. When using Google Analytics through Google Tag Manager, configure the GA4 tag in GTM and normally omit googleAnalytics.

import { defineConfig } from "@natsuneko-laboratory/makit";

export default defineConfig({
  title: "My Documentation",
  analytics: {
    googleAnalytics: { measurementId: "G-XXXXXXXXXX" },
    googleTagManager: { containerId: "GTM-XXXXXXX" },
    posthog: { apiKey: "phc_…" },
    umami: { websiteId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" },
    vercel: {},
  },
});

Google Analytics

Set googleAnalytics.measurementId to your GA4 measurement ID (the value beginning with G-). Makit injects gtag.js and its initialization code.

analytics: {
  googleAnalytics: { measurementId: "G-XXXXXXXXXX" },
},

Google Tag Manager

Set googleTagManager.containerId to your GTM container ID. Makit adds the standard GTM script and its noscript iframe fallback.

analytics: {
  googleTagManager: { containerId: "GTM-XXXXXXX" },
},

PostHog

apiKey is your project key. When apiHost is omitted, Makit uses PostHog Cloud US (https://us.i.posthog.com). Set it for EU Cloud or a self-hosted instance.

analytics: {
  posthog: {
    apiKey: "phc_…",
    apiHost: "https://eu.i.posthog.com",
  },
},

Umami

Set websiteId. Makit uses the Umami Cloud script by default; for a self-hosted installation, set its script URL with scriptUrl.

analytics: {
  umami: {
    websiteId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    scriptUrl: "https://stats.example.com/script.js",
  },
},

Vercel Web Analytics

Enable Analytics for the Vercel project, then add vercel: {}. The default URL is /_vercel/insights/script.js. Behind a proxy, set scriptUrl to the URL forwarded to Vercel Analytics.

analytics: {
  vercel: {},
  // Behind a proxy: vercel: { scriptUrl: "https://app.example.com/_vercel/insights/script.js" },
},

Custom scripts

scripts is an array of additional external scripts. strategy defaults to afterInteractive; beforeInteractive, lazyOnload, and worker are also available. Use string attributes for values such as data-*, crossOrigin, and integrity.

analytics: {
  scripts: [
    {
      src: "https://analytics.example.com/script.js",
      strategy: "afterInteractive",
      attributes: {
        "data-site": "docs",
        crossOrigin: "anonymous",
      },
    },
  ],
},