Create popup for cookie consent

i18n/en.yaml

@@ -1,2 +1,10 @@
 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

i18n/pt.yaml

@@ -1,2 +1,5 @@
 trackingStatus:
   other: Estado da monitorização
+
+dismissPopup:
+  other: Fechar

layouts/partials/matomo_cookie_popup.html

@@ -0,0 +1,24 @@
+{{ 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 -}}");
+            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>
+        <a style="font-size: 12px;" href="javascript:dismissPopup()">({{ i18n "dismissPopup" }})</a>
+    </div>
+{{ end }}

layouts/partials/matomo_head.html

@@ -1,29 +1,30 @@
 {{ if and (isset .Site.Params "matomo") (eq .Site.Params.matomo.enable true) }}
-  <!-- Matomo -->
+    <link rel="stylesheet" type="text/css" href="{{ "assets/css/hugo-matomo.css" | absURL }}" />
-  <script type="text/javascript">
+    <!-- Matomo -->
-    var _paq = window._paq = window._paq || [];
+    <script type="text/javascript">
-    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        var _paq = window._paq = window._paq || [];
-    {{ if and (isset .Site.Params.matomo "disablecookies") (eq .Site.Params.matomo.disablecookies true) }}
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-    _paq.push(['disableCookies']);
+        {{ if and (isset .Site.Params.matomo "disablecookies") (eq .Site.Params.matomo.disablecookies true) }}
+        _paq.push(['disableCookies']);
+        {{ end }}
+        {{ if or (not (isset .Site.Params.matomo "requirecookieconsent")) (eq .Site.Params.matomo.requirecookieconsent true) }}
+        _paq.push(['requireCookieConsent']);
+        {{ end }}
+        {{ if and (isset .Site.Params.matomo "heartbeat") (eq .Site.Params.matomo.heartbeat true) }}
+        _paq.push(['enableHeartBeatTimer']);
+        {{ end }}
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+            var u="{{- .Site.Params.matomo.url -}}/";
+            _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>
+    {{ 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 }}
-    {{ if or (not (isset .Site.Params.matomo "requirecookieconsent")) (eq .Site.Params.matomo.requirecookieconsent true) }}
+    <!-- End Matomo Code -->
-    _paq.push(['requireCookieConsent']);
-    {{ end }}
-    {{ if and (isset .Site.Params.matomo "heartbeat") (eq .Site.Params.matomo.heartbeat true) }}
-    _paq.push(['enableHeartBeatTimer']);
-    {{ end }}
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
-    (function() {
-      var u="{{- .Site.Params.matomo.url -}}/";
-      _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>
-  {{ 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 }}
-  <!-- End Matomo Code -->
 {{ end }}

static/assets/css/hugo-matomo.css

@@ -0,0 +1,15 @@
+.cookie-banner {
+  align-items: center;
+  background: inherit;
+  border-radius: 5px;
+  border-width: 10px;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.7);
+  position: fixed;
+  bottom: 40px;
+  left: 25%;
+  right: 25%;
+  width: 50%;
+  padding: 5px 14px;
+  display: flex;
+  text-align: center;
+}