From d846068c71853221ac53239c9efc56e3e795e6c3 Mon Sep 17 00:00:00 2001
From: Jussi Steenari <jsteenar@csc.fi>
Date: Mon, 15 Feb 2021 15:00:50 +0200
Subject: [PATCH] Add Matomo tracking for file downloads

Signed-off-by: Jussi Steenari <jussi.steenari@csc.fi>
Co-signed-off by: Harri Hirvonsalo <harri.hirvonsalo@csc.fi>
---
 webui/src/components/editfiles.jsx | 10 +++++++++-
 webui/src/components/record.jsx    | 22 +++++++++++++---------
 webui/src/main.jsx                 |  2 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/webui/src/components/editfiles.jsx b/webui/src/components/editfiles.jsx
index 2037f86b4f..535cc35a25 100644
--- a/webui/src/components/editfiles.jsx
+++ b/webui/src/components/editfiles.jsx
@@ -683,6 +683,7 @@ export const FileRecordRow = React.createClass({
         file: PT.object.isRequired,
         remove: PT.func,
         b2noteWidget: PT.oneOfType([PT.object, PT.bool]),
+        catchMatomoEvent: PT.func,
     },
 
     getInitialState() {
@@ -697,6 +698,9 @@ export const FileRecordRow = React.createClass({
         alert(msg + ' copied to clipboard!');
     },
 
+
+
+
     render() {
         let file = this.props.file;
         file = file.toJS ? file.toJS() : file;
@@ -711,7 +715,11 @@ export const FileRecordRow = React.createClass({
                             style={{fontSize:10}} aria-hidden="true"/>
                         <span className={"glyphicon glyphicon-file"}
                             style={{marginLeft:'0.5em', fontSize:10}} aria-hidden="true"/>
-                        <a style={{display:'inline-block', marginLeft:'0.5em'}} onClick={e => e.stopPropagation()}
+                        <a style={{display:'inline-block', marginLeft:'0.5em'}} 
+                            onClick={e => {
+                                this.props.catchMatomoEvent(new Event('filedownload'));
+                                e.stopPropagation();
+                            }}
                             href={file.url}>{file.key || file.name}</a>
                         { this.props.showDownloads && file.downloads >= 0 ?
                             <span className="fileDownloadBadge" style={{marginLeft:'1em', fontSize:11, color: '#888'}}>
diff --git a/webui/src/components/record.jsx b/webui/src/components/record.jsx
index 4ed72737fc..cdde95b324 100644
--- a/webui/src/components/record.jsx
+++ b/webui/src/components/record.jsx
@@ -131,6 +131,16 @@ const Record = React.createClass({
         return state;
     },
 
+    catchMatomoEvent(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (window._paq) {
+            const metadata = this.props.record.get('metadata') || Map();
+            const doi = metadata.get('DOI').replace("http://doi.org/", "");
+            window._paq.push(['trackEvent', 'b2share', event.type, doi]);
+        }
+    },
+
     getB2Notes(host, target, pids, sources) {
         var self = this;
 
@@ -158,11 +168,12 @@ const Record = React.createClass({
     },
 
     componentDidMount() {
+        this.catchMatomoEvent(new Event("recordview"));
+
         // this is set async in parent
         if (this.state.b2noteUrl == "") {
             return;
         }
-
         window.addEventListener('message', this.catchB2NoteEvent);
 
         this.updateNotes();
@@ -353,7 +364,7 @@ const Record = React.createClass({
                 if (b2noteUrl) {
                     b2noteWidget = <B2NoteWidget file={f} record={this.props.record} notes={this.state.files_notes} showB2NoteWindow={this.showB2NoteWindow} b2noteUrl={b2noteUrl} smallButton={true} style={{display: 'inline-block'}}/>;
                 }
-                return <FileRecordRow key={f.get('key')} file={f} b2noteWidget={b2noteWidget} showDownloads={showDownloads} />
+                return <FileRecordRow key={f.get('key')} file={f} b2noteWidget={b2noteWidget} showDownloads={showDownloads} catchMatomoEvent={this.catchMatomoEvent} />
             }
             fileComponent =
                 <div className='fileList'>
@@ -501,13 +512,6 @@ const Record = React.createClass({
         );
     },
 
-    componentDidMount() {
-        const record = this.props.record;
-        const metadata = record.get('metadata') || Map();
-        const doi = metadata.get('DOI').replace("http://doi.org/", "");
-        window._paq.push(['trackEvent', 'b2share', 'recordview', doi]);
-    },
-
     render() {
         const rootSchema = this.props.rootSchema;
         const blockSchemas = this.props.blockSchemas;
diff --git a/webui/src/main.jsx b/webui/src/main.jsx
index 5f60db7f0e..c216769e2f 100644
--- a/webui/src/main.jsx
+++ b/webui/src/main.jsx
@@ -34,7 +34,7 @@ import { CommunityAdmin } from './components/community_admin.jsx'
 const piwik = process.env.B2SHARE_WEBUI_MATOMO_URL && process.env.B2SHARE_WEBUI_MATOMO_SITEID ?
     PiwikReactRouter({
         url: process.env.B2SHARE_WEBUI_MATOMO_URL,
-        siteId: process.env.B2SHARE_WEBUI_MATOMO_SITEID
+        siteId: process.env.B2SHARE_WEBUI_MATOMO_SITEID,
     }) : false;
 
 const AppFrame = React.createClass({