Adding Google Analytics

petrovicz · Apr 9, 2024 · c6b7c6f · c6b7c6f
1 parent 2a184cf
commit c6b7c6f
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 4 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,9 +1,10 @@
 import { defineConfig } from 'astro/config';
-
 import tailwind from "@astrojs/tailwind";
 
+import partytown from "@astrojs/partytown";
+
 // https://astro.build/config
 export default defineConfig({
-	integrations: [tailwind()],
-	site: 'https://astro-photoswipe.petrovicz.com'
+  integrations: [tailwind(), partytown()],
+  site: 'https://astro-photoswipe.petrovicz.com'
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.5.10",
+    "@astrojs/partytown": "^2.0.4",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.5.15",
     "photoswipe": "^5.4.3",

diff --git a/src/components/GoogleAnalytics.astro b/src/components/GoogleAnalytics.astro
@@ -0,0 +1,18 @@
+---
+
+---
+
+<!-- Google tag (gtag.js) -->
+<script
+	type="text/partytown"
+	async
+	src="https://www.googletagmanager.com/gtag/js?id=G-KVQ6PK5KQK"></script>
+<script type="text/partytown">
+	window.dataLayer = window.dataLayer || [];
+	function gtag() {
+		dataLayer.push(arguments);
+	}
+	gtag("js", new Date());
+
+	gtag("config", "G-KVQ6PK5KQK");
+</script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,14 +1,19 @@
 ---
+import GoogleAnalytics from "../components/GoogleAnalytics.astro";
 import Navbar from "../components/Navbar.astro";
 ---
 
 <html lang="en">
 	<head>
+		<GoogleAnalytics />
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<meta name="description" content="Demonstrating PhotoSwipe inside Astro, with automatic image optimizations." />
+		<meta
+			name="description"
+			content="Demonstrating PhotoSwipe inside Astro, with automatic image optimizations."
+		/>
 		<title>Astro + PhotoSwipe</title>
 	</head>
 	<body>