Add Google Analytics

package.json

@@ -19,6 +19,7 @@
     "@astrojs/rss": "^1.0.0",
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^1.0.0",
+    "@astrolib/google-analytics": "^0.2.1",
     "@astrolib/seo": "^0.2.0",
     "@fontsource/inter": "^4.5.12",
     "@tailwindcss/typography": "^0.5.4",

src/components/core/GoogleAnalytics.astro

@@ -1,16 +0,0 @@
----
-const { id = 'G-XXXXXXXXXX', partytown = false } = Astro.props;
-
-const attrs = partytown ? { type: 'text/partytown' } : {};
----
-
-<script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${id}`} {...attrs}></script>
-
-<script is:inline define:vars={{ id }} {...attrs}>
-	window.dataLayer = window.dataLayer || [];
-	function gtag() {
-		window.dataLayer.push(arguments);
-	}
-	gtag('js', new Date());
-	gtag('config', id);
-</script>

src/components/core/MetaTags.astro

@@ -1,9 +1,9 @@
 ---
 import { AstroSeo } from "@astrolib/seo"
+import { GoogleAnalytics } from "@astrolib/google-analytics"
 import { getImage } from '@astrojs/image';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 
-import GoogleAnalytics from '~/components/core/GoogleAnalytics.astro';
 import defaultImageSrc from '~/assets/images/default.png';
 
 import { SITE } from '~/config.mjs';
@@ -74,6 +74,6 @@ const image =
 {SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}
 
 <!-- Google Analytics -->
-{SITE.googleAnalyticsId && <GoogleAnalytics id={SITE.googleAnalyticsId} partytown={true} />}
+{SITE.googleAnalyticsId && <GoogleAnalytics id={String(SITE.googleAnalyticsId)} partytown={true} />}
 
 <ExtraMetaTags />