Merge pull request #265 from bbc/analytics-howDoesThisWork

analytics for how does this work hover

Author: sarahrainbow

packages/components/transcript-editor/index.js

@@ -463,7 +463,7 @@ class TranscriptEditor extends React.Component {
         settings={settings}
         shortcuts={shortcuts}
         exportOptions={exportOptions}
-        tooltip={HowDoesThisWork}
+        tooltip={HowDoesThisWork(this.props.handleAnalyticsEvents)}
         mediaUrl={this.props.mediaUrl}
         mediaControls={this.videoRef.current ? mediaControls : null}
         handleSettingsToggle={this.handleSettingsToggle}

packages/components/transcript-editor/src/HowDoesThisWork.js

@@ -37,7 +37,7 @@ const helpMessage = (
   </div>
 );
 
-const HowDoesThisWork = (
+const HowDoesThisWork = (handleAnalyticsEvents) => (
   <Tooltip
     className={ style.help }
     content={ helpMessage }
@@ -48,6 +48,15 @@ const HowDoesThisWork = (
     border={ '#ffffff' }
     background={ '#f2f2f2' }
     color={ '#000000' }
+    onMouseOver={ () => {
+      if (handleAnalyticsEvents) {
+        handleAnalyticsEvents({
+          category: "TranscriptEditor",
+          action: "hover",
+          name: "howDoesThisWork"
+        });
+      }
+    } }
   >
     <FontAwesomeIcon className={ style.icon } icon={ faQuestionCircle } />
       How does this work?