Support Tracking

[codingwithmanny]

Context

In order to make documentation better, it would be great to track where people are doing and understand what actions they are taking.

Solutions

Integrate the following via configuration for:

• Google Analytics
• UseFathom

Proposal

Support the following convention for the tracking to allow for multiple forms of tracking to occur.

Change 1/2

File: vocs.config.ts

import { defineConfig } from 'vocs'

export default defineConfig({
  title: 'Docs',
  sidebar: [
    {
      text: 'Getting Started',
      link: '/getting-started',
    },
    {
      text: 'Example',
      link: '/example',
    },
  ],
+ analytics: {
+   google: 'G-XXXXX ',
+   fathom: 'SITE-ID'
+ }
})

Change 2/2

TBD - Need to config where in the templates this would exist, ideally just before closing </body> with conditionals for each,

[tmm]

Maybe we'll add this in the future, but seems better for now to use head for this. This way we don't need to hardcode URLs, etc. for a bunch of analytics providers.

For example, we use Fathom for the Viem docs.

import { defineConfig } from 'vocs'

export default defineConfig({
  head: (
    <>
      <script
        src="https://cdn.usefathom.com/script.js"
        data-site="BYCJMNBD"
        defer
      />
    </>
  ),
})

[codingwithmanny]

Thanks for insight on this @tmm