Fix tripple GA on blog pages

Grathium-Industries · Apr 20, 2024 · aae6d8e · aae6d8e
1 parent f308721
commit aae6d8e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 10 deletions.
diff --git a/src/components/BlogFooter.astro b/src/components/BlogFooter.astro
@@ -1,7 +1,6 @@
 ---
 import SocialsContainer from "./SocialsContainer.astro";
 import SuggestedArticles from "./SuggestedArticles.astro";
-import CookieConsent from "./CookieConsent.astro";
 ---
 
 <div>
@@ -10,6 +9,4 @@ import CookieConsent from "./CookieConsent.astro";
   <hr />
 
   <SuggestedArticles />
-
-  <CookieConsent />
 </div>
diff --git a/src/components/CookieConsent.astro b/src/components/CookieConsent.astro
@@ -18,9 +18,9 @@
 
       <div class="cookie-consent-banner__actions">
         <a
+          id="cookie-consent-btn"
           href="#"
           class="cookie-consent-banner__cta"
-          onclick="createConsentCookie()"
         >
           OK
         </a>
@@ -62,6 +62,21 @@ function removeCookieConsentBanner() {
     }
 }
 
+function createConsentCookie() {
+    // get the current date in the format "day month (in text) year"
+    let date = new Date();
+
+    let day = date.getDate();
+    let month = date.getMonth();
+    let year = date.getFullYear() + 1;
+    let monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    let dateString = day + " " + monthNames[month] + " " + year;
+    // create the cookie
+    document.cookie = "consent=1; expires=" + dateString + "; path=/";
+
+    removeCookieConsentBanner();
+}
+
 function checkConsentCookie() {
     // get the cookie
     let consentCookie = document.cookie;
@@ -71,6 +86,10 @@ function checkConsentCookie() {
     }
 }
 
+document.getElementById("cookie-consent-btn")?.addEventListener("click", () => {
+    createConsentCookie();
+});
+
 const inEu = Intl.DateTimeFormat().resolvedOptions().timeZone.startsWith("Europe");
 
 if (inEu) {

diff --git a/src/layouts/BlogArticle.astro b/src/layouts/BlogArticle.astro
@@ -1,13 +1,39 @@
 ---
-import Blog from "./Blog.astro";
+import BlogHeader from "../components/BlogHeader.astro";
+import CookieConsent from "../components/CookieConsent.astro";
 import BlogFooter from "../components/BlogFooter.astro";
 
+import "../css/global.css";
+import "../css/blog.css";
+
 const { title } = Astro.props;
 ---
 
-<Blog title={title}>
-  <h1>{title}</h1>
-  <slot />
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="author" content="Grathium Industries" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#000000" />
+    <meta name="author" content="Grathium Industries" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
+    <script is:inline async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1219405924277504"
+      crossorigin="anonymous"></script>
+    <meta name="generator" content={Astro.generator} />
+    <title>Grathium Industries - {title ?? 'Blog'}</title>
+  </head>
+
+  <body>
+    <BlogHeader></BlogHeader>
+
+    <h1>{title}</h1>
+
+    <slot />
+
+    <BlogFooter />
 
-  <BlogFooter />
-<Blog />
+    <CookieConsent />
+  </body>
+</html>