Merge pull request #1292 from tilburgsciencehub/matomo-implementation

Implement Matomo functionality

content/blog/disclaimer.md

@@ -0,0 +1,29 @@
+---
+title: "Disclaimer"
+date: 2020-11-11T22:01:14+05:30
+draft: false
+---
+
+**Tilburg Science Hub is part of Tilburg University**.
+**The information on this Tilburg Science Hub internet site has been formulated carefully. This information may nevertheless contain deficiencies**.
+
+Should this be the case, we would appreciate your critical remarks at [[email protected]](mailto:[email protected]).
+Tilburg Science Hub is not responsible for any information supplied on its website or for the consequences of the use thereof. No rights can be derived based on the data on the Tilburg Science Hub website.
+
+# Privacy Statement
+Tilburg Science Hub takes the protection of all personal information that it receives via its website extremely seriously. Read more on the [Tilburg University Privacy Statement website](https://www.tilburguniversity.edu/disclaimer/privacy-statement).
+
+# Cookie disclaimer
+The website of the Tilburg Science Hub uses cookies, which are small files that are stored locally on your computer. Since the Dutch telecom law came into force on 1 June 2012, all websites hosted in The Netherlands are legally obliged to inform users about the nature of the delivered cookies.
+
+## Matomo
+This website collects and processes data to improve your user experience. We use Matomo, an open-source analytics platform, to analyze how visitors interact with our site. Matomo respects your privacy by anonymizing data and giving you control over your personal information. By continuing to browse, you consent to this analysis. You can opt out of tracking by adjusting your browser settings or through our cookie consent options. [Read more about Matomo](https://matomo.org/)
+
+## Facebook, LinkedIn, and Twitter
+Buttons are included on this website so users can promote or share pages via the social media networks Facebook, LinkedIn, and Twitter. These social media buttons work with third-party cookies (Facebook, LinkedIn, Twitter). Only when you click these buttons these cookies are sent.
+
+## Enabling, disabling, and removing cookies
+You have the power to control cookies on our website. If you want to disable or enable all or specific cookies, go to the section manage cookies in the footer of the page.
+
+
+Just so you know, if you don't and/or delete cookies, you can't always use all the website's features. In addition, the refusing or deleting cookies only affects the computer and browser with which you perform this operation. If you use multiple computers, public computers, and/or browsers, you must repeat the above operation(s) as many times as necessary. 

templates/partials/cookies.html

@@ -109,15 +109,6 @@
 </div>
 <div id="consent-overlay" class="consent-overlay">
     <div>
-        <div class="d-block">
-            <div class="d-flex align-items-center">
-                <input class="mr-3" type="checkbox" id="analytics" value="1" name="analytics" />
-                <h4 class="mb-0" style="font-weight: 700;font-size: 18px;">Analytics</h4>
-            </div>
-            <div>
-                <p class="text-secondary" style="font-weight: 200;">Analytics Content</p>
-            </div>
-        </div>
         <div class="d-block">
             <div class="d-flex align-items-center">
                 <input class="mr-3" type="checkbox" id="personalized" value="1" name="personalized" />
@@ -128,7 +119,7 @@ <h4 class="mb-0" style="font-weight: 700;font-size: 18px;">Personalized Cookies<
             </div>
         </div>
         <div>
-            <p>Want to know more? Check our <a href="/disclaimer">Disclaimer</a>.</p>
+            <p>Want to know more? Check our <a href="/blog/disclaimer">Disclaimer</a>.</p>
         </div>
         <div>
             <button id="save-consent" class="btn btn-primary save-consent">Save preferences</button>
@@ -137,53 +128,100 @@ <h4 class="mb-0" style="font-weight: 700;font-size: 18px;">Personalized Cookies<
     </div>
 </div>
 <script>
-    function addScript(src) {
+
+       function matomoFunc(accepted) {
+    return `
+        (function() {
+            var _paq = window._paq = window._paq || [];
+            
+            // require user cookie consent before storing any cookies
+            _paq.push(['requireCookieConsent']);
+
+            if (${accepted} !== null){
+                if (!${accepted}) {
+                    // revoke cookie consent
+                    _paq.push(['forgetCookieConsentGiven']); 
+                    _paq.push(['deleteCookies']);
+                } else {
+                    // remember cookie consent was given for all subsequent page views and visits
+                    _paq.push(['rememberCookieConsentGiven']);
+                    _paq.push(['setConsentGiven']);           
+                }     
+            } 
+            _paq.push(['trackPageView']);
+            _paq.push(['enableLinkTracking']);
+            var u = "https://tilburgsciencehub.matomo.cloud/";
+            _paq.push(['setTrackerUrl', u + 'matomo.php']);
+            _paq.push(['setSiteId', '1']);
+            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+            g.async = true; 
+            g.src = 'https://cdn.matomo.cloud/tilburgsciencehub.matomo.cloud/matomo.js'; 
+            s.parentNode.insertBefore(g, s);
+        })();
+    `;
+}
+
+    function addScript(scriptContent) {
         var script = document.createElement('script');
         script.type = 'text/javascript';
         script.async = true;
-        script.src = src;
-        // (document.head.appendChild(script);) ALLEEN AANZETTEN WANNEER ONLINE!
+        script.text = scriptContent;  // Insert the script content directly
+        document.head.appendChild(script);
     }
 
     // JavaScript voor cookiebeheer
     document.addEventListener('DOMContentLoaded', function () {
+
         const consentNotice = document.getElementById('consent-notice');
         const denyConsentButton = document.querySelector('.deny-consent');
         const approveConsentButton = document.querySelector('.approve-consent');
         const approveConsentButtonPref = document.querySelector('.approve-consent-preferences');
         const manageConsentButton = document.querySelector('.manage-consent');
         const consentOverlay = document.querySelector('.consent-overlay');
         const saveConsentButton = document.getElementById('save-consent');
+        const checkbox = document.getElementById('personalized'); // Get the checkbox element
 
         // Controleer of de gebruiker de banner eerder heeft gesloten of cookies heeft geaccepteerd
         const cookiesAccepted = localStorage.getItem('tshCookies');
-        if (cookiesAccepted === 'false' || cookiesAccepted === 'true' || cookiesAccepted === 'analytics') {
+        if (cookiesAccepted === 'false' || cookiesAccepted === 'true') {
             consentNotice.style.display = 'none';
             if (cookiesAccepted === 'true') {
                 // Add Scripts
-                addScript('https://www.googletagmanager.com/gtag/js?id=G-6K27JFP2RV&l=dataLayer&cx=c');
-                addScript('https://www.google-analytics.com/analytics.js');
-                addScript('https://www.googletagmanager.com/gtm.js?id=GTM-TBJ77ND');
+                var scriptContent = matomoFunc(true);                
+                addScript(scriptContent);
+                checkbox.checked = true; // Check the checkbox
+            }
+            if (cookiesAccepted === 'false') {
+                // Add Scripts
+                var scriptContent = matomoFunc(false);                
+                addScript(scriptContent);
+                checkbox.checked = false; // Uncheck the checkbox
             }
         } else {
             consentNotice.style.display = 'block';
+            // Null is because the user did not specify anything yet 
+            var scriptContent = matomoFunc(null);                
+            addScript(scriptContent);
+            checkbox.checked = false; // Uncheck the checkbox
         }
 
         denyConsentButton.addEventListener('click', function () {
             // Local Cookie
             localStorage.setItem('tshCookies', 'false');
             consentNotice.style.display = 'none';
+            checkbox.checked = false; // Uncheck the checkbox
+            var scriptContent = matomoFunc(false);
+            addScript(scriptContent);
         });
 
         approveConsentButton.addEventListener('click', function () {
             // Local Cookie
             localStorage.setItem('tshCookies', 'true');
             consentNotice.style.display = 'none';
+            checkbox.checked = true; // Check the checkbox
 
-            // Add Scripts
-            addScript('https://www.googletagmanager.com/gtag/js?id=G-6K27JFP2RV&l=dataLayer&cx=c');
-            addScript('https://www.google-analytics.com/analytics.js');
-            addScript('https://www.googletagmanager.com/gtm.js?id=GTM-TBJ77ND');
+            var scriptContent = matomoFunc(true);
+            addScript(scriptContent);
         });
 
         approveConsentButtonPref.addEventListener('click', function () {
@@ -194,9 +232,9 @@ <h4 class="mb-0" style="font-weight: 700;font-size: 18px;">Personalized Cookies<
             consentNotice.style.display = 'none';
 
             // Add Scripts
-            addScript('https://www.googletagmanager.com/gtag/js?id=G-6K27JFP2RV&l=dataLayer&cx=c');
-            addScript('https://www.google-analytics.com/analytics.js');
-            addScript('https://www.googletagmanager.com/gtm.js?id=GTM-TBJ77ND');
+            var scriptContent = matomoFunc(true);
+            checkbox.checked = true; // Check the checkbox
+            addScript(scriptContent);
         });
 
         var elements = document.querySelectorAll('.manage-consent');
@@ -208,28 +246,26 @@ <h4 class="mb-0" style="font-weight: 700;font-size: 18px;">Personalized Cookies<
 
         saveConsentButton.addEventListener('click', function () {
             // Verwerk de voorkeuren van de gebruiker en sla deze op
-            const analyticsCheckbox = document.getElementById('analytics');
+            // const analyticsCheckbox = document.getElementById('analytics');
             const personalizedCheckbox = document.getElementById('personalized');
 
-            if (analyticsCheckbox.checked && !personalizedCheckbox.checked) {
-                localStorage.setItem('tshCookies', 'analytics');
-                console.log('Analytics')
-            }
-            else if (!analyticsCheckbox.checked && !personalizedCheckbox.checked) {
+            if (!personalizedCheckbox.checked) {
                 localStorage.setItem('tshCookies', 'false');
-                console.log('False')
-            }
-            else if (!analyticsCheckbox.checked && personalizedCheckbox.checked) {
-                localStorage.setItem('tshCookies', 'true');
-                console.log('True')
+                var scriptContent = matomoFunc(false);                
+                addScript(scriptContent);
+                checkbox.checked = false; // Uncheck the checkbox
             }
-            else if (analyticsCheckbox.checked && personalizedCheckbox.checked) {
+            else if (personalizedCheckbox.checked) {
                 localStorage.setItem('tshCookies', 'true');
-                console.log('True')
+                var scriptContent = matomoFunc(true);                
+                addScript(scriptContent);
+                checkbox.checked = true; // Check the checkbox
             }
             else {
                 localStorage.setItem('tshCookies', 'false');
-                console.log('False')
+                var scriptContent = matomoFunc(false);                
+                addScript(scriptContent);
+                checkbox.checked = false; // Check the checkbox
             }
 
             document.getElementById('consent-overlay').classList.toggle('active');

templates/partials/footer.html

@@ -79,7 +79,7 @@
 				Supported by <a  class="d-inline-block"href="https://tilburguniversity.edu"><img src="{{ url_for('static', filename='img/tiu-white.png') }}" alt="" height="50px"/> </a>
 				<div class="d-flex flex-column flex-lg-row justify-content-md-between">
 					<div class="order-2 order-lg-1">© 2020-2024 Tilburg Science Hub. All rights reserved. |
-						<a class="d-inline-block text-white" href="/disclaimer">Disclaimer</a>
+						<a class="d-inline-block text-white" href="/blog/disclaimer">Disclaimer</a>
 						<div class="order-2 order-lg-1">Latest deploy hash: {{ git_commit_hash }}</div>
 						<!--<a class="d-inline-block" href="https://www.netlify.com"> | <img
 								src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg"