How to add custom code to body?

[spokospace]

Hello, I'm trying to configure gtag (https://webreaper.dev/posts/astro-google-tag-manager-ga4/) on my test page, there is any other way to add custom code to body instead of using custom Page component?

Regards!

[delucis]

Hi @spokospace — you can add code using Starlight’s head configuration option in astro.config.mjs.

Based on the blog post you linked, this might look something like this:

starlight({
  // ...
  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', 'YOUR-GA-ID');
      `,
    },
  ],
})

[spokospace]

Thx, but for fallback it requires noscript iframe inside body, can I add it similar to head?

[delucis]

In that case you might need a component override, but doesn’t need to override the full page, you can choose to override something smaller. And follow the “Reuse a built-in component” guide to avoid needing to reimplement anything.

[HiDeoo]

If it can help, also linking to this small example I have for Google Tag Manager using an override for the <noscript> element.

[spokospace]

Great, thanks!

BTW. if someone want to overwrite whole Page component, then we need to add below alias to astro.config.mjs:

  vite: {
    resolve: {
      alias: {
        '@astrojs/starlight': resolve('./node_modules/@astrojs/starlight'),
      }
    },
    // rest of config...
  },

because in Page.astro there are some imports with virtual:starlight

[delucis]

Perhaps, but as I stressed above, this generally shouldn’t be needed! Overriding the whole <Page> is pretty radical. I’d only recommend it for situations where you want to entirely replace all of Starlight’s functionality.

[spokospace]

Yeap, this is why I asked about other solution ;-)

With overwriting SkipLink component like in HiDeoo's example I managed to complete the implementation of the gtag on the page with the Polish VW Polo 6R manual (about 70 pages with images). Build time after pull request on free netlify package is less than 3 minutes (locally much faster), so for now I'm happy with Starlight! :)