Merge pull request #2682 from paulkaplan/improve-analytics

Improve search and tutorial instrumentation for preview

src/components/library/library.jsx

@@ -9,6 +9,7 @@ import Modal from '../../containers/modal.jsx';
 import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
+import analytics from '../../lib/analytics';
 
 import styles from './library.css';
 
@@ -28,6 +29,7 @@ class LibraryComponent extends React.Component {
         super(props);
         bindAll(this, [
             'handleBlur',
+            'handleClose',
             'handleFilterChange',
             'handleFilterClear',
             'handleFocus',
@@ -56,9 +58,17 @@ class LibraryComponent extends React.Component {
         this.handleMouseEnter(id);
     }
     handleSelect (id) {
-        this.props.onRequestClose();
+        this.handleClose();
         this.props.onItemSelected(this.getFilteredData()[id]);
     }
+    handleClose () {
+        analytics.event({
+            category: 'library',
+            action: `${this.props.id}: close with search`,
+            label: this.state.filterQuery || '(empty)'
+        });
+        this.props.onRequestClose();
+    }
     handleTagClick (tag) {
         this.setState({
             filterQuery: '',
@@ -111,7 +121,7 @@ class LibraryComponent extends React.Component {
                 fullScreen
                 contentLabel={this.props.title}
                 id={this.props.id}
-                onRequestClose={this.props.onRequestClose}
+                onRequestClose={this.handleClose}
             >
                 {(this.props.filterable || this.props.tags) && (
                     <div className={styles.filterBar}>

src/containers/tips-library.jsx

@@ -54,6 +54,7 @@ class TipsLibrary extends React.PureComponent {
             <LibraryComponent
                 data={decksLibraryThumbnailData}
                 filterable={false}
+                id="tipsLibrary"
                 title={this.props.intl.formatMessage(messages.tipsLibraryTitle)}
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}

src/reducers/cards.js

+import analytics from '../lib/analytics';
+
 import decks from '../lib/libraries/decks/index.jsx';
 
 const CLOSE_CARDS = 'scratch-gui/cards/CLOSE_CARDS';
@@ -38,6 +40,11 @@ const reducer = function (state, action) {
         });
     case NEXT_STEP:
         if (state.activeDeckId !== null) {
+            analytics.event({
+                category: 'how-to',
+                action: 'next step',
+                label: `${state.activeDeckId} - ${state.step}`
+            });
             return Object.assign({}, state, {
                 step: state.step + 1
             });