diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx index c58d3608c94b7f74ca2573c0857e18267f7fe88a..2da09f2720deed4e72e02943665175af3cdbe46b 100644 --- a/src/components/library/library.jsx +++ b/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}> diff --git a/src/containers/tips-library.jsx b/src/containers/tips-library.jsx index ebbee3f3022175f797e021e1e0253a0821f5258c..009c8c2fae9f3c9e0f3fd9f0cd3bcac04ca44acc 100644 --- a/src/containers/tips-library.jsx +++ b/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} diff --git a/src/reducers/cards.js b/src/reducers/cards.js index 6f4add89d20b6936e55646f46771072d8d0904f9..ba1c50d8e28af9d3e7a3c234417ccdc09e0b3f07 100644 --- a/src/reducers/cards.js +++ b/src/reducers/cards.js @@ -1,3 +1,5 @@ +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 });