Conditional matomo tracking

src/assets/js/cookieConsent.js

@@ -14,11 +14,33 @@ const cookieStorage = {
 };
 
 const storageType = cookieStorage;
-const consentPropertyName = "Audacity_consent";
+const consentPropertyName = "audacity_consent";
 
 const showShowPopup = () => !storageType.getItem(consentPropertyName);
-const saveAcceptToStorage = () => storageType.setItem(consentPropertyName, true);
-const saveRejectToStorage = () => storageType.setItem(consentPropertyName, false);
+const saveAcceptToStorage = () =>
+  storageType.setItem(consentPropertyName, true);
+const saveRejectToStorage = () =>
+  storageType.setItem(consentPropertyName, false);
+const applyMatomoTrackingCode = () => {
+  console.log(
+    "audacity-consent cookie created, running Matomo tracking code..."
+  );
+  var _paq = (window._paq = window._paq || []);
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+  (function () {
+    var u = "https://matomo.audacityteam.org/";
+    _paq.push(["setTrackerUrl", u + "matomo.php"]);
+    _paq.push(["setSiteId", "19"]);
+    var d = document,
+      g = d.createElement("script"),
+      s = d.getElementsByTagName("script")[0];
+    g.async = true;
+    g.src = u + "matomo.js";
+    s.parentNode.insertBefore(g, s);
+  })();
+};
 
 window.onload = () => {
   const consentPopup = document.getElementById("consent-popup");
@@ -28,15 +50,16 @@ window.onload = () => {
   const acceptCookie = (event) => {
     saveAcceptToStorage(storageType);
     consentPopup.classList.add("hide");
+    applyMatomoTrackingCode();
   };
 
   const rejectCookie = (event) => {
     saveRejectToStorage(storageType);
-    consentPopup.classList.add("hide")
-  }
+    consentPopup.classList.add("hide");
+  };
 
   acceptBtn.addEventListener("click", acceptCookie);
-  rejectBtn.addEventListener("click", rejectCookie)
+  rejectBtn.addEventListener("click", rejectCookie);
 
   if (showShowPopup(storageType)) {
     setTimeout(() => {

src/assets/js/matomoTracking.js

@@ -0,0 +1,26 @@
+const getCookie = (name) => {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(";").shift();
+  }
+
+  if (getCookie("audacity_consent") === "true") {
+    console.log(
+      "audacity_consent cookie found, loading Matomo tracking code..."
+    );
+    var _paq = (window._paq = window._paq || []);
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(["trackPageView"]);
+    _paq.push(["enableLinkTracking"]);
+    (function () {
+      var u = "https://matomo.audacityteam.org/";
+      _paq.push(["setTrackerUrl", u + "matomo.php"]);
+      _paq.push(["setSiteId", "19"]);
+      var d = document,
+        g = d.createElement("script"),
+        s = d.getElementsByTagName("script")[0];
+      g.async = true;
+      g.src = u + "matomo.js";
+      s.parentNode.insertBefore(g, s);
+    })();
+  }

src/components/banner/CookieConsent.jsx

@@ -4,7 +4,7 @@ function CookieConsent() {
   return (
     <div
       id="consent-popup"
-      className="bg-white sticky bottom-0 w-full border-t-2"
+      className="bg-white sticky bottom-0 w-full border-t-2 hide"
     >
       <div className="flex flex-col  bg-white  hide max-w-screen-lg xl:max-w-screen-xl mx-auto">
         <h4>We value your piracy</h4>

src/layouts/BaseLayout.astro

@@ -28,6 +28,7 @@ const { title } = Astro.props;
     <Footer />
     <CookieConsent />
 
-    <script src="../assets/js/cookieConsent.js"></script>
+    <script src="../assets/js/matomoTracking.js"/>
+    <script src="../assets/js/cookieConsent.js"/>
   </body>
 </html>