reworked the matomo tracking feature

Author: Konstiman

examples/local_files/data-config.js

@@ -17,6 +17,11 @@ var data_config = {
 	show_context: false,
 	create_title_from_context: false,
 
+    share_modal: true,
+    embed_modal: false,
+
+    enable_mouseover_evaluation: false,
+
     files: [{
         title: "edu1",
         file: "./data/edu1.csv"

examples/local_files/index.html

@@ -17,11 +17,31 @@
     <link type="text/css" rel="stylesheet" href="../../dist/headstart.css">
     </link>
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="css/font-awesome.min.css" >
+    <link rel="stylesheet" href="css/font-awesome.min.css">
     </link>
     <script type="text/javascript">
         headstart.start();
     </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/components/Backlink.js

@@ -6,18 +6,22 @@ import { STREAMGRAPH_MODE } from "../reducers/chartType";
 import BacklinkTemplate from "../templates/Backlink";
 
 import { createAnimationCallback } from "../utils/eventhandlers";
+import useMatomo from "../utils/useMatomo";
 
 export const Backlink = ({
   hidden = false,
   streamgraph = false,
   onClick,
   localization = {},
 }) => {
+  const { trackEvent } = useMatomo();
+
   if (hidden) {
     return null;
   }
 
   const handleOnClick = () => {
+    trackEvent("Heading", "Zoom out", "Backlink");
     if (onClick && typeof onClick === "function") {
       onClick();
     }

vis/js/components/ContextLine.js

@@ -17,6 +17,7 @@ import SearchLang from "../templates/contextfeatures/SearchLang";
 import Timestamp from "../templates/contextfeatures/Timestamp";
 import MetadataQuality from "../templates/contextfeatures/MetadataQuality";
 import Modifier from "../templates/contextfeatures/Modifier";
+import { trackMatomoEvent } from "../utils/useMatomo";
 
 const defined = (param) => param !== undefined && param !== null;
 
@@ -104,9 +105,16 @@ class ContextLine extends React.Component {
 
     const text = documentTypes.join(", ");
 
+    const trackMouseOver = () =>
+      trackMatomoEvent("Heading", "Hover document types", "Context line");
+
     return (
       <>
-        <span id="document_types" className="context_item">
+        <span
+          id="document_types"
+          className="context_item"
+          onMouseOver={trackMouseOver}
+        >
           <HoverPopover
             id="doctypes-popover"
             container={popoverContainer}

vis/js/components/KnowledgeMap.js

@@ -7,6 +7,7 @@ import Chart from "../templates/Chart";
 import Paper from "../templates/Paper";
 
 import { mapDispatchToMapEntriesProps } from "../utils/eventhandlers";
+import { trackMatomoEvent } from "../utils/useMatomo";
 
 const KnowledgeMap = (props) => {
   const { data, areas, zoom, animation } = props;
@@ -17,31 +18,46 @@ const KnowledgeMap = (props) => {
   const { handleDeselectPaper, handleSelectPaper } = props;
   const { hoveredBubble, bubbleOrder, changeBubbleOrder } = props;
   const { hoveredPaper, paperOrder, changePaperOrder } = props;
+  const { trackMouseOver } = props;
 
   // bubble section
   const handleAreaMouseOver = (area) => {
     if (hoveredBubble === area.area_uri) {
       return;
     }
 
+    if (trackMouseOver) {
+      trackMatomoEvent("Knowledge map", "Hover bubble", "Bubble");
+    }
+
     changeBubbleOrder(area.area_uri);
   };
 
   const handleOtherAreaZoomIn = (bubble) => {
     handleDeselectPaper();
     handleZoomIn(bubble, true);
+    trackMatomoEvent("Knowledge map", "Zoom in", "Bubble");
   };
 
   const getBubbleZoomClickHandler = (bubble) => {
     if (zoomedBubbleUri === bubble.area_uri) {
-      return handleDeselectPaper;
+      if (!selectedPaperId) {
+        return undefined;
+      }
+      return () => {
+        handleDeselectPaper();
+        trackMatomoEvent("Knowledge map", "Deselect paper", "Bubble");
+      };
     }
 
     if (zoom) {
       return () => handleOtherAreaZoomIn(bubble);
     }
 
-    return () => handleZoomIn(bubble);
+    return () => {
+      handleZoomIn(bubble);
+      trackMatomoEvent("Knowledge map", "Zoom in", "Bubble");
+    };
   };
 
   const sortedAreas = sortAreasByIds(areas, bubbleOrder);
@@ -50,7 +66,10 @@ const KnowledgeMap = (props) => {
     let onClick = undefined;
     let onMouseOver = () => changeBubbleOrder(null);
     if (zoom) {
-      onClick = handleZoomOut;
+      onClick = () => {
+        handleZoomOut();
+        trackMatomoEvent("Knowledge map", "Zoom out", "Chart");
+      };
       onMouseOver = undefined;
     }
 
@@ -65,7 +84,10 @@ const KnowledgeMap = (props) => {
     }
     let onDoubleClick = undefined;
     if (zoomedBubbleUri === bubble.area_uri) {
-      onDoubleClick = handleZoomOut;
+      onDoubleClick = () => {
+        handleZoomOut();
+        trackMatomoEvent("Knowledge map", "Zoom out", "Bubble");
+      };
     }
 
     return { onClick, onMouseOver, onDoubleClick };
@@ -79,6 +101,7 @@ const KnowledgeMap = (props) => {
         handleZoomIn(
           areas.find((bubble) => bubble.area_uri === paper.area_uri)
         );
+        trackMatomoEvent("Knowledge map", "Zoom in", "Bubble");
         return;
       }
 
@@ -90,10 +113,15 @@ const KnowledgeMap = (props) => {
       // bubble click event
       event.stopPropagation();
       handleSelectPaper(paper);
+      trackMatomoEvent("Knowledge map", "Select paper", "Paper");
     };
 
     const handlePaperMouseOver = (newEnlargeFactor) => {
       changePaperOrder(paper.safe_id, newEnlargeFactor);
+
+      if (trackMouseOver) {
+        trackMatomoEvent("Knowledge map", "Hover paper", "Paper");
+      }
     };
 
     const handlePaperMouseOut = () => {
@@ -193,6 +221,7 @@ const mapStateToProps = (state) => ({
   hoveredPaper: state.paperOrder.hoveredPaper,
   paperOrder: state.paperOrder.order,
   enlargeFactor: state.paperOrder.enlargeFactor,
+  trackMouseOver: state.tracking.trackMouseOver,
 });
 
 export default connect(

vis/js/headstart.js

@@ -32,6 +32,7 @@ HeadstartFSM.prototype = {
     }
   },
 
+  // TODO delete this completely
   recordAction: function(id, category, action, user, timestamp, additional_params, post_data) {
 
     if(!config.is_evaluation) {
@@ -47,9 +48,6 @@ HeadstartFSM.prototype = {
     if (services.includes("log")) {
         this.recordActionLog(category, action, id, user, timestamp, additional_params, post_data);
     }
-    if (services.includes("matomo")) {
-        this.recordActionMatomo(category, action, id, user, timestamp, additional_params, post_data);
-    }
     if (services.includes("ga")) {
         this.recordActionGA(category, action, id, user, timestamp, additional_params, post_data);
     }
@@ -83,12 +81,6 @@ HeadstartFSM.prototype = {
     });
   },
 
-  recordActionMatomo: function(category, action, id) {
-    if(typeof _paq !== "undefined") {
-        _paq.push(['trackEvent', category, action, id]);
-    }
-  },
-
   recordActionGA: function(category, action, id) {
     //gtag.js
     if(typeof gtag === "function") {

vis/js/intermediate.js

@@ -31,23 +31,17 @@ import { sanitizeInputData } from "./utils/data";
  * This class should ideally only talk to the mediator and redux
  */
 class Intermediate {
-  constructor(rescaleCallback, recordActionCallback) {
+  constructor(rescaleCallback) {
     this.actionQueue = [];
 
-    this.recordActionCallback = recordActionCallback;
-    this.recordActionParams = {};
-
     const middleware = applyMiddleware(
       createFileChangeMiddleware(),
       createActionQueueMiddleware(this),
       createScrollMiddleware(),
       createRepeatedInitializeMiddleware(this),
       createChartTypeMiddleware(),
       createRescaleMiddleware(rescaleCallback),
-      createRecordActionMiddleware(
-        this.recordAction.bind(this),
-        this.recordActionParams
-      )
+      createRecordActionMiddleware()
     );
 
     this.store = createStore(rootReducer, middleware);
@@ -68,14 +62,6 @@ class Intermediate {
     const { size, width, height } = getChartSize(config, context);
     const list = getListSize(config, context, size);
 
-    Object.assign(this.recordActionParams, {
-      title: config.title,
-      user: config.user_id,
-      localization: config.localization[config.language],
-      mouseoverEvaluation: config.enable_mouseover_evaluation,
-      scaleLabel: config.scale_label,
-    });
-
     const sanitizedMapData = sanitizeInputData(mapData);
 
     this.store.dispatch(
@@ -124,38 +110,6 @@ class Intermediate {
       this.forceLayoutParams
     );
   }
-
-  /**
-   * Log an action using the mediator's function.
-   *
-   * @param {string} id usually some title, e.g. paper.title / default is the config.title
-   * @param {string} category some static key, such as "List"
-   * @param {string} action some static key, such as "show"
-   * @param {string} type some static key, such as "open_embed_modal"
-   * @param {object} timestamp optional object / default is null
-   * @param {string} additionalParams optional string / default is null
-   * @param {object} postData optional object / default is null
-   */
-  recordAction(
-    id,
-    category,
-    action,
-    type,
-    timestamp = null,
-    additionalParams = null,
-    postData = null
-  ) {
-    this.recordActionCallback(
-      id,
-      category,
-      action,
-      this.recordActionParams.user,
-      type,
-      timestamp,
-      additionalParams,
-      postData
-    );
-  }
 }
 
 /**
@@ -309,11 +263,11 @@ function createFileChangeMiddleware() {
   };
 }
 
-function createRecordActionMiddleware(callback, params) {
+function createRecordActionMiddleware() {
   return function ({ getState }) {
     return (next) => (action) => {
       const state = getState();
-      logAction(action, state, callback, params);
+      logAction(action, state);
       return next(action);
     };
   };

vis/js/reducers/index.js

@@ -28,6 +28,7 @@ import service from "./service";
 import streamgraph from "./streamgraph";
 import timespan from "./timespan";
 import toolbar from "./toolbar";
+import tracking from "./tracking";
 import zoom from "./zoom";
 
 export default combineReducers({
@@ -61,5 +62,6 @@ export default combineReducers({
   streamgraph,
   timespan,
   toolbar,
+  tracking,
   zoom,
 });

vis/js/reducers/tracking.js

@@ -0,0 +1,17 @@
+const tracking = (state = {}, action) => {
+  if (action.canceled) {
+    return state;
+  }
+
+  switch (action.type) {
+    case "INITIALIZE":
+      return {
+        ...state,
+        trackMouseOver: action.configObject.enable_mouseover_evaluation,
+      };
+    default:
+      return state;
+  }
+};
+
+export default tracking;

vis/js/templates/ListToggle.jsx

@@ -1,13 +1,24 @@
 import React from "react";
 
 import { useLocalizationContext } from "../components/LocalizationProvider";
+import useMatomo from "../utils/useMatomo";
 
 const ListToggle = ({ show, docsNumber, onClick }) => {
   const localization = useLocalizationContext();
+  const { trackEvent } = useMatomo();
+
+  const handleClick = () => {
+    onClick();
+    if (show) {
+      trackEvent("List controls", "Hide list", "List toggle");
+    } else {
+      trackEvent("List controls", "Show list", "List toggle");
+    }
+  };
 
   return (
     // html template starts here
-    <div id="show_hide_button" className="row" onClick={onClick}>
+    <div id="show_hide_button" className="row" onClick={handleClick}>
       <div className="col-xs-2">▼</div>
       <div className="col-xs-8" id="show_hide_button_label">
         <span id="show_hide_label">