How to integrate plausible analytics?

[vitonsky]

Hey, i just found Starlight, i want to use it as docs site and i need to know how users interact with my product, so I have to track some custom events.

How i can integrate plausible analytics?

I've found this answer https://stackoverflow.com/a/78601347 with code

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      head: [
        // Example: add Fathom analytics script tag.
        {
          tag: 'script',
          attrs: {
            src: 'https://cdn.usefathom.com/script.js',
            'data-site': 'MY-FATHOM-ID',
            defer: true,
          },
        },
      ],
    }),
  ],
});

And it may works for trivial cases, but i want to integrate my own code written in typescript + https://github.com/vitonsky/plausible-client

How i can include my typescript code to every starlight page?

I do it on many Astro sites, i just import file in layout component that use everywhere. But in starlight there are no components provided.

[HiDeoo]

👋

I haven't personally use the package you linked, but you should be able to use the same approach you're using in an Astro layout component by relying on Starlight component overrides which allow you to extend or override (completely replace) its default components by your own. The overrides reference page list all the components you can override, so you should be able to pick one that fits your needs and included in every page, e.g. PageFrame.

When overriding a component, you can choose to entirely replace it by your own component, but you can also reuse a built-in component so you can keep the default Starlight version and just add some markup around it, add you own styles or script, etc. Porting the code you have and use in an Astro layout component should be straightforward, as you can use the same approach.

For example, your custom override for the PageFrame component could look like this:

---
import Default from '@astrojs/starlight/components/PageFrame.astro';
---

{/* Render the default Starlight <PageFrame> component. */}
<Default>
  <slot />
  <slot name="header" slot="header" />
  <slot name="sidebar" slot="sidebar" />
</Default>

<script>
  import { Plausible } from 'plausible-client';

  // Do something with `plausible-client`...
</script>

[vitonsky]

Thank you, it works for me