How to add analytics to Docusaurus

Docusaurus's scripts option accepts plain objects whose keys become attributes on the generated <script> tag — the only required key is src, and any other attribute is allowed. That's exactly what the tracker needs: an external script with a data-site attribute.

How to install VisitTrack on Docusaurus

1. 1

   Step 1: Copy your site id

   Use your product site's id if the docs are on a subdomain of the same domain (shared visitors), or create a separate site. Replace SITE_ID.

2. 2

   Step 2: Add the script to docusaurus.config.ts

   Add it next to your existing config keys.

   docusaurus.config.tsCopy

   import type { Config } from "@docusaurus/types";
   
   const config: Config = {
     title: "My Docs",
     url: "https://docs.example.com",
     baseUrl: "/",
     scripts: [
       {
         src: "https://visitrack.app/tracker.js",
         defer: true,
         "data-site": "SITE_ID",
       },
     ],
     // …presets, themeConfig
   };
   
   export default config;

3. 3

   Step 3: Build and deploy

   Run npm run build and deploy the build folder (or let your host build it). Then open the live docs.

How to check VisitTrack is working on Docusaurus

1. View source on a deployed page: the head contains a script tag loading visitrack.app/tracker.js with your data-site attribute.
2. Click through a few sidebar pages; each shows up in the Pages tab and the live view.
3. DevTools → Network: one POST to visitrack.app/api/collect per page change, without full reloads.

Does VisitTrack track Docusaurus page navigation?

Docusaurus is a React single-page app after the first load: sidebar and navbar links change the URL with the History API, which the tracker follows. Each page change is one pageview; heading anchors (#installation) don't change the path and aren't counted again.

Versioned docs use different paths (/docs/next/intro vs /docs/intro), so you can see how much traffic still lands on old versions. The search page keeps its path when the query changes.

How to track custom events and goals in Docusaurus

Docs pages are MDX, which accepts plain JSX attributes — so a data-vt-goal on a link or button works anywhere in your content. Links from the docs to your app on another subdomain are tracked as outbound clicks automatically.

<a className="button button--primary" href="https://app.example.com/signup" data-vt-goal="docs_signup_click">
  Get an API key
</a>

Make the event a goal in Settings → Goals, and if the docs share a site id with your app, build a funnel from a docs page to signup to see which guides convert.

Script options you might need on Docusaurus

All optional — add them to the same tag. Full reference: script configuration.

Docusaurus troubleshooting

Not on Docusaurus? See all 29 integration guides.