Add Matomo tracking for file downloads

Signed-off-by: Jussi Steenari <[email protected]> Co-signed-off by: Harri Hirvonsalo <[email protected]>
EUDAT-B2SHARE · Feb 15, 2021 · d846068 · d846068
1 parent 2c49941
commit d846068
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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({