Add instrumentation for connecting and connected events for extensions

src/containers/connection-modal.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import ConnectionModalComponent, {PHASES} from '../components/connection-modal/connection-modal.jsx';
 import VM from 'scratch-vm';
+import analytics from '../lib/analytics';
 
 class ConnectionModal extends React.Component {
     constructor (props) {
@@ -43,6 +44,11 @@ class ConnectionModal extends React.Component {
         this.setState({
             phase: PHASES.connecting
         });
+        analytics.event({
+            category: 'extensions',
+            action: 'connecting',
+            label: this.props.extensionId
+        });
     }
     handleDisconnect () {
         this.props.onStatusButtonUpdate(this.props.extensionId, 'not ready');
@@ -68,6 +74,11 @@ class ConnectionModal extends React.Component {
             this.setState({
                 phase: PHASES.error
             });
+            analytics.event({
+                category: 'extensions',
+                action: 'connecting error',
+                label: this.props.extensionId
+            });
         }
     }
     handleConnected () {
@@ -75,9 +86,19 @@ class ConnectionModal extends React.Component {
         this.setState({
             phase: PHASES.connected
         });
+        analytics.event({
+            category: 'extensions',
+            action: 'connected',
+            label: this.props.extensionId
+        });
     }
     handleHelp () {
         window.open(this.props.helpLink, '_blank');
+        analytics.event({
+            category: 'extensions',
+            action: 'help',
+            label: this.props.extensionId
+        });
     }
     render () {
         return (