Get everything together

i18n/en.yaml

@@ -1,10 +1,18 @@
 trackingStatus:
   other: Tracking Status
-cookieConsentStatus:
+
-  other: Cookie Consent Status
 dismissPopup:
   other: Dismiss
 popupMsg:
   other: By visiting my website, you agree with my
 cookiePolicy:
   other: cookie policy
+
+cookieConsentStatus:
+  other: Cookie Consent Status
+cookieConsentText:
+  other: This site uses cookies to track its usage. A detailed description of the Matomo cookies used, and what they purpose is, could be found
+cookieConsentHere:
+  other: here
+cookieConsentTrack:
+  other: Bare in mind that even if you allow cookies but have your browser set to "Do not track", you won't be tracked.

i18n/pt.yaml

@@ -3,3 +3,16 @@ trackingStatus:
 
 dismissPopup:
   other: Fechar
+popupMsg:
+  other: Ao visitar o meu site, concorda com a minha
+cookiePolicy:
+  other: política de cookies
+
+cookieConsentStatus:
+  other: Estado do consentimento de cookies
+cookieConsentText:
+  other: Este site usa cookies para registar o seu uso. Uma descrição detalhada dos cookies usados pelo Matomo poderá ser verificada
+cookieConsentHere:
+  other: aqui
+cookieConsentTrack:
+  other: No entanto, mesmo que autorize a utilização de cookies, se o seu browser estiver configurado para "Do not track", a sua utilização não será registada.

layouts/partials/matomo_cookie_popup.html

@@ -1,21 +1,8 @@
 {{ if and (isset .Site.Params "matomo") (eq .Site.Params.matomo.enable true) }}
     <script type="text/javascript">
         window.addEventListener("load", function() {
-            t=Matomo.getTracker("{{- .Site.Params.matomo.url -}}", "{{- .Site.Params.matomo.id -}}");
+            shouldShowPopup();
-            when = t.getRememberedCookieConsent();
-
-            banner = document.getElementsByClassName("cookie-banner")[0];
-            if (when == 0) {
-                banner.style.display = 'block';
-            }
         }, false);
-
-        function dismissPopup() {
-            t=Matomo.getTracker("{{- .Site.Params.matomo.url -}}", "{{- .Site.Params.matomo.id -}}");
-            t.rememberCookieConsentGiven()
-            banner = document.getElementsByClassName("cookie-banner")[0];
-            banner.style.display = 'none';
-        }
     </script>
     <div class="cookie-banner" style="display:none">
         <p>{{ i18n "popupMsg" }}<a href="{{- .Site.Params.matomo.policyurl -}}"> <u>{{ i18n "cookiePolicy" }}</u></a>.</p>

layouts/partials/matomo_head.html

@@ -1,7 +1,9 @@
 {{ if and (isset .Site.Params "matomo") (eq .Site.Params.matomo.enable true) }}
-    <link rel="stylesheet" type="text/css" href="{{ "assets/css/hugo-matomo.css" | absURL }}" />
+    <link rel="stylesheet" type="text/css" href="{{ "assets/hugo-matomo.css" | absURL }}" />
     <!-- Matomo -->
     <script type="text/javascript">
+        matomoHostURL = "{{- .Site.Params.matomo.url -}}";
+        matomoSiteId = {{- .Site.Params.matomo.id -}};
         var _paq = window._paq = window._paq || [];
         /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
         {{ if and (isset .Site.Params.matomo "disablecookies") (eq .Site.Params.matomo.disablecookies true) }}
@@ -17,12 +19,14 @@
         _paq.push(['enableLinkTracking']);
         (function() {
             var u="{{- .Site.Params.matomo.url -}}/";
+            var id=
             _paq.push(['setTrackerUrl', u+'matomo.php']);
             _paq.push(['setSiteId', '{{- .Site.Params.matomo.id -}}']);
             var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
             g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
         })();
     </script>
+    <script src="{{ "assets/hugo-matomo.js" | absURL }}"></script>
     {{ if and (isset .Site.Params.matomo "noscript") (eq .Site.Params.matomo.noscript true) }}
         <noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="{{- .Site.Params.matomo.url -}}/matomo.php?idsite={{- .Site.Params.matomo.id -}}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
     {{ end }}

layouts/shortcodes/matomo_privacy.html

@@ -1,4 +1,16 @@
-
+<script type="text/javascript">
+    window.addEventListener("load", function() {
+        updateCookieConsent();
+    }, false);
+</script>
+<p><u>{{ i18n "cookieConsentStatus" }}</u></p>
+<p style="line-height: initial;">
+    {{ i18n "cookieConsentText" }} <a href="https://matomo.org/faq/general/faq_146/" target="_blank">{{ i18n "cookieConsentHere" }}</a>. {{ i18n "cookieConsentTrack" }}
+    <p>
+        <span></span>
+        <button style="visibility: hidden;" id="cookiesaction" class="consentCookieButton"></button>
+    </p>
+</p>
 <p><u>{{ i18n "trackingStatus" }}</u></p>
 <iframe
     style="border: 0; min-width: 100%; min-height: 200px"

static/assets/hugo-matomo.css

@@ -13,3 +13,10 @@
   display: flex;
   text-align: center;
 }
+
+.consentCookieButton {
+  border-style: outset;
+  border-width: unset;
+  padding: 0 10px 0 10px;
+  margin-left: 20px;
+}

static/assets/hugo-matomo.js

@@ -0,0 +1,45 @@
+function shouldShowPopup() {
+    dismissed = localStorage.getItem('popupDismissed');
+
+    banner = document.getElementsByClassName("cookie-banner")[0];
+    if (dismissed == null || dismissed === "no") {
+        banner.style.display = 'block';
+    }
+}
+
+function dismissPopup() {
+    localStorage.setItem('popupDismissed', 'yes');
+    banner = document.getElementsByClassName("cookie-banner")[0];
+    banner.style.display = 'none';
+}
+
+function updateCookieConsent() {
+    t=Matomo.getTracker(matomoHostURL, matomoSiteId);
+    when = t.getRememberedCookieConsent();
+
+    button = document.getElementById("cookiesaction");
+    text = button.parentNode.getElementsByTagName('span')[0]
+    if (when == 0) {
+         text.innerHTML = "You haven't allowed cookies to be used"
+         button.innerHTML = "Allow"
+         button.style.visibility = ""
+         button.onclick = function() { startCookieConsent(); }
+    } else {
+        text.innerHTML = "Using cookies to track your usage of the site"
+        button.innerHTML = "Stop"
+        button.style.visibility = ""
+        button.onclick = function() { stopCookieConsent(); }
+    }
+}
+
+function stopCookieConsent() {
+    t=Matomo.getTracker(matomoHostURL, matomoSiteId);
+    t.forgetCookieConsentGiven();
+    updateCookieConsent();
+}
+
+function startCookieConsent() {
+    t=Matomo.getTracker(matomoHostURL, matomoSiteId);
+    t.rememberCookieConsentGiven();
+    updateCookieConsent();
+}