Astroes

Integrating Silktide and Google Analytics with Astro Starlight

Overview

Integrate Silktide Consent Manager and Google Analytics into an Astro Starlight project by configuring the astro.config.mjs file to inject necessary scripts and stylesheets into the document head.

Silktide Consent Manager is a lightweight cookie consent solution that helps websites comply with privacy regulations like GDPR by managing user consent for analytics and advertising scripts.

Key Insights

Centralized Configuration: All external scripts and stylesheets are managed within the head array of the starlight integration in astro.config.mjs.
Local Asset Management: Silktide Consent Manager assets (.css and .js) are referenced locally, requiring path updates to match your project’s public directory structure.
Google Analytics ID: Replace YOUR-ID placeholders with your specific Google Analytics Measurement ID for proper tracking.
Silktide Manager Code: The code here for silktideCookieBannerManager placeholder requires replacement with the actual Silktide initialization script.

Technical Details

To embed Silktide Consent Manager and Google Analytics, modify your astro.config.mjs file. This configuration injects the required <link> and <script> tags directly into the <head> of your Starlight application.

Cloudflare Web Analytics on Astro Starlight

To integrate Cloudflare Web Analytics into your Astro Starlight documentation site, you must insert the beacon script into the <head> of all pages via the astro.config.mjs file.

Retrieve Token: Get your unique analytics token (e.g., 9692482312d8a417…) from the Cloudflare Web Analytics dashboard.
Update Configuration: Open astro.config.mjs and add the following configuration block within the starlight integration. Replace “YOUR_TOKEN_HERE” with your actual token.

export default defineConfig({
  ...
  integrations: [
    starlight({
      head: [
        {
          tag: "script",
          attrs: {
            defer: true,
            src: "https://static.cloudflareinsights.com/beacon.min.js",
            "data-cf-beacon": '{"token": "YOUR_TOKEN_HERE"}',
          },
        },
      ],
    }),
  ],
});