src/components/Analytics.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---
import { analytics } from "../config/analytics";

const GOOGLE_ANALYTICS_ID = analytics.googleAnalyticsId;
const FATHOM_ANALYTICS_ID = analytics.fathomAnalyticsId;
const isProduction = import.meta.env.PROD;
---

{
    isProduction && GOOGLE_ANALYTICS_ID && (
        <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`}
        />
        <script define:vars={{ GOOGLE_ANALYTICS_ID }} is:inline>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag("js", new Date());
            gtag("config", GOOGLE_ANALYTICS_ID);
        </script>
    )
}
{
    isProduction && FATHOM_ANALYTICS_ID && (
        <script
            src="https://cdn.usefathom.com/script.js"
            data-site={FATHOM_ANALYTICS_ID}
            defer
        />
    )
}