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>
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({