Stats: add stat when add button is clicked for list or tag in Reader …

…sidebar
Automattic · Feb 1, 2016 · b0f18c0 · b0f18c0
1 parent fda5fd5
commit b0f18c0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/client/reader/sidebar/expandable-add-form.jsx b/client/reader/sidebar/expandable-add-form.jsx
@@ -3,6 +3,7 @@
  */
 import React from 'react';
 import classNames from 'classnames';
+import noop from 'lodash/utility/noop';
 
 /**
  * Internal Dependencies
@@ -14,7 +15,8 @@ const ExpandableSidebarAddForm = React.createClass( {
 
 	propTypes: {
 		addPlaceholder: React.PropTypes.string,
-		onAddSubmit: React.PropTypes.func
+		onAddSubmit: React.PropTypes.func,
+		onAddClick: React.PropTypes.func
 	},
 
 	getInitialState() {
@@ -23,9 +25,17 @@ const ExpandableSidebarAddForm = React.createClass( {
 		};
 	},
 
+	getDefaultProps() {
+		return {
+			onAddSubmit: noop,
+			onAddClick: noop
+		}
+	},
+
 	toggleAdd() {
 		if ( ! this.state.isAdding ) {
 			this.refs.menuAddInput.focus();
+			this.props.onAddClick();
 		}
 		this.setState( { isAdding: ! this.state.isAdding } );
 	},

diff --git a/client/reader/sidebar/expandable.jsx b/client/reader/sidebar/expandable.jsx
@@ -18,6 +18,7 @@ const ExpandableSidebarMenu = React.createClass( {
 		count: React.PropTypes.number,
 		addPlaceholder: React.PropTypes.string,
 		onAddSubmit: React.PropTypes.func,
+		onAddClick: React.PropTypes.func,
 		onClick: React.PropTypes.func
 	},
 
@@ -39,7 +40,7 @@ const ExpandableSidebarMenu = React.createClass( {
 		return (
 			<SidebarMenu className={ classes }>
 				<ExpandableSidebarHeading title={ this.props.title } count={ this.props.count } onClick={ this.props.onClick } />
-				<ExpandableSidebarAddForm addPlaceholder={ this.props.addPlaceholder } onAddSubmit={ this.props.onAddSubmit } />
+				<ExpandableSidebarAddForm addPlaceholder={ this.props.addPlaceholder } onAddClick={ this.props.onAddClick } onAddSubmit={ this.props.onAddSubmit } />
 				<ul className="sidebar__menu-list">
 					{ this.props.children }
 				</ul>

diff --git a/client/reader/sidebar/reader-sidebar-lists/index.jsx b/client/reader/sidebar/reader-sidebar-lists/index.jsx
@@ -29,6 +29,11 @@ const ReaderSidebarLists = React.createClass( {
 		ReaderListsActions.create( list );
 	},
 
+	handleAddClick() {
+		stats.recordAction( 'add_list_open_input' );
+		stats.recordGaEvent( 'Clicked Add List to Open Input' );
+	},
+
 	render() {
 		const listCount = this.props.lists ? this.props.lists.length : 0;
 		return (
@@ -37,6 +42,7 @@ const ReaderSidebarLists = React.createClass( {
 				title={ this.translate( 'Lists' ) }
 				count={ listCount }
 				addPlaceholder={ this.translate( 'Give your list a name' ) }
+				onAddClick={ this.handleAddClick }
 				onAddSubmit={ this.createList }
 				onClick={ this.props.onClick }>
 					<ReaderSidebarListsList { ...this.props } />

diff --git a/client/reader/sidebar/reader-sidebar-tags/index.jsx b/client/reader/sidebar/reader-sidebar-tags/index.jsx
@@ -51,7 +51,12 @@ const ReaderSidebarTags = React.createClass( {
 		}
 	},
 
-	render: function() {
+	handleAddClick() {
+		stats.recordAction( 'follow_topic_open_input' );
+		stats.recordGaEvent( 'Clicked Add Topic to Open Input' );
+	},
+
+	render() {
 		const tagCount = this.props.tags ? this.props.tags.length : 0;
 		return (
 			<ExpandableSidebarMenu
@@ -60,6 +65,7 @@ const ReaderSidebarTags = React.createClass( {
 				count={ tagCount }
 				addPlaceholder={ this.translate( 'Add any tag' ) }
 				onAddSubmit={ this.followTag }
+				onAddClick={ this.handleAddClick }
 				onClick={ this.props.onClick }>
 					<ReaderSidebarTagsList { ...this.props } onUnfollow={ this.unfollowTag } />
 			</ExpandableSidebarMenu>