added citation button & vis footer tracking

Author: Konstiman

examples/project_website/base.html

@@ -93,4 +93,24 @@
     </script>
 </body>
 
+<!-- Matomo -->
+<script>
+    // set this to true to enable Matomo tracking
+    var enable_tracking = false;
+    if (enable_tracking) {
+        var _paq = window._paq = window._paq || [];
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function () {
+            var u = "//dev.openknowledgemaps.org/piwik_stats/";
+            _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 = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
+        })();
+    }
+</script>
+<!-- End Matomo Code -->
+
 </html>

examples/project_website/pubmed.html

@@ -115,4 +115,24 @@
     </script>
 </body>
 
+<!-- Matomo -->
+<script>
+    // set this to true to enable Matomo tracking
+    var enable_tracking = false;
+    if (enable_tracking) {
+        var _paq = window._paq = window._paq || [];
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function () {
+            var u = "//dev.openknowledgemaps.org/piwik_stats/";
+            _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 = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
+        })();
+    }
+</script>
+<!-- End Matomo Code -->
+
 </html>

vis/js/templates/buttons/CitationButton.jsx

@@ -4,9 +4,16 @@ import { connect } from "react-redux";
 import { openCitationModal } from "../../actions";
 import { useLocalizationContext } from "../../components/LocalizationProvider";
 import { STREAMGRAPH_MODE } from "../../reducers/chartType";
+import useMatomo from "../../utils/useMatomo";
 
 const CitationButton = ({ isStreamgraph, onClick }) => {
   const localization = useLocalizationContext();
+  const { trackEvent } = useMatomo();
+
+  const handleClick = () => {
+    onClick();
+    trackEvent("Added components", "Open cite modal", "Cite button");
+  };
 
   return (
     // html template starts here
@@ -18,7 +25,7 @@ const CitationButton = ({ isStreamgraph, onClick }) => {
             ? localization.cite_title_sg
             : localization.cite_title_km
         }
-        onClick={onClick}
+        onClick={handleClick}
       >
         <span id="citationlink">
           <i className="fa fa-quote-right fa-fw" aria-hidden="true"></i>{" "}

vis/js/templates/footers/CreatedBy.jsx

@@ -3,14 +3,28 @@ import React from "react";
 import okmapsRoundLogo from "../../../images/okmaps-logo-round.svg";
 
 import { getDateTimeFromTimestamp } from "../../utils/dates";
+import useMatomo from "../../utils/useMatomo";
 
 const CreatedBy = ({ timestamp, faqsUrl }) => {
   const dateTime = getDateTimeFromTimestamp(timestamp);
+  const { trackEvent } = useMatomo();
+
+  const trackVisLink = () =>
+    trackEvent(
+      "Added components",
+      "Open this visualization",
+      "Visualization link in footer"
+    );
 
   return (
     <div className="builtwith" id="builtwith">
       <img src={okmapsRoundLogo} alt="OKMaps round logo" />{" "}
-      <a href={window.location.href} target="_blank" rel="noreferrer">
+      <a
+        href={window.location.href}
+        target="_blank"
+        rel="noreferrer"
+        onClick={trackVisLink}
+      >
         This visualization
       </a>{" "}
       was created by{" "}