analytics.md

Analytics

The TranscriptEditor component has an optional setup to track some analytics events around the usage of the main functionalities.

As you can see in the demo app at /src/index.js there is an optional handleAnalyticsEvents.

<TranscriptEditor
  transcriptData={this.state.transcriptData}
  mediaUrl={this.state.mediaUrl}
  isEditable={this.state.isTextEditable}
  sttJsonType={this.state.sttType}
  handleAnalyticsEvents={this.handleAnalyticsEvents} //<--
  ref={"transcriptEditor"}
/>

It returns an object, which in the example we are adding to an array. and displaying at the bottom of the demo page in a textarea.

Here's an example of the output

[
  {
    "category": "TimedTextEditor",
    "action": "setEditorContentState",
    "name": "getWordCount",
    "value": 1712
  },
  {
    "category": "MediaPlayer",
    "action": "onLoadedDataGetDuration",
    "name": "durationInSeconds-WithoutOffset",
    "value": "00:11:51:07"
  },
  {
    "category": "WrapperBlock",
    "action": "handleTimecodeClick",
    "name": "onWordClick",
    "value": "00:00:31:20"
  },
  {
    "category": "MediaPlayer",
    "action": "pauseMedia",
    "name": "pauseMedia",
    "value": "00:00:31:20"
  }
]

This data is what you can send to your analytics system/provider. Eg if you are using piwik/matomo with the js sdk then you could setup an handler like this to track individual events with their dashboard.

handleAnalyticsEvents = (event) => {
  if (window.location.hostname !== "localhost") {
    _paq.push([
      "trackEvent",
      event.category,
      event.action,
      event.name,
      event.value,
    ]);
  }
};