Add tracks to checklist CTAs

Automattic · May 23, 2019 · d599c2b · d599c2b
1 parent 8457915
commit d599c2b
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 35 deletions.
diff --git a/_inc/client/my-plan/my-plan-header/checklist-cta.js b/_inc/client/my-plan/my-plan-header/checklist-cta.js
@@ -9,10 +9,14 @@ import { translate as __ } from 'i18n-calypso';
  */
 import Button from 'components/button';
 
-export default function ChecklistCta( { siteSlug } ) {
+export default function ChecklistCta( { onClick, siteSlug } ) {
 	return (
 		<div className="jp-landing__plan-features-header-checklist-cta-container">
-			<Button primary href={ `https://wordpress.com/plans/my-plan/${ siteSlug }` }>
+			<Button
+				href={ `https://wordpress.com/plans/my-plan/${ siteSlug }` }
+				onClick={ onClick }
+				primary
+			>
 				{ __( 'View your setup checklist' ) }
 			</Button>
 		</div>

diff --git a/_inc/client/my-plan/my-plan-header/checklist-progress-card/index.js b/_inc/client/my-plan/my-plan-header/checklist-progress-card/index.js
@@ -2,47 +2,66 @@
  * External dependencies
  */
 import { translate as __ } from 'i18n-calypso';
-import React from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 /**
  * Internal dependencies
  */
+import analytics from 'lib/analytics';
 import Button from 'components/button';
 import Card from 'components/card';
 import ProgressBar from './progress-bar';
 import QueryChecklistProgress from 'components/data/query-checklist-progress';
 import { getSiteRawUrl } from 'state/initial-state';
 import { getChecklistCompletion } from 'state/checklist/selectors';
 
-function ChecklistProgressCard( { completed, total, siteSlug } ) {
-	return (
-		<>
-			<QueryChecklistProgress />
-			{ completed && total && (
-				<Card compact className="checklist__header">
-					<div className="checklist__header-main">
-						<div className="checklist__header-progress">
-							<span className="checklist__header-progress-text">
-								{ __( 'Your Jetpack setup progress', {
-									comment: 'Onboarding task list progress',
+class ChecklistProgressCard extends Component {
+	trackCtaClick = () =>
+		void analytics.tracks.recordEvent(
+			'jetpack_myplan_progresschecklistcta_click',
+			this.props.plan
+				? {
+						plan: this.props.plan,
+				  }
+				: undefined
+		);
+
+	render() {
+		const { completed, total, siteSlug } = this.props;
+		return (
+			<>
+				<QueryChecklistProgress />
+				{ completed && total && (
+					<Card compact className="checklist__header">
+						<div className="checklist__header-main">
+							<div className="checklist__header-progress">
+								<span className="checklist__header-progress-text">
+									{ __( 'Your Jetpack setup progress', {
+										comment: 'Onboarding task list progress',
+									} ) }
+								</span>
+								<span className="checklist__header-progress-number">{ `${ completed }/${ total }` }</span>
+							</div>
+							<ProgressBar total={ total } value={ completed } />
+						</div>
+						<div className="checklist__header-secondary">
+							<Button
+								compact
+								href={ `https://wordpress.com/plans/my-plan/${ siteSlug }` }
+								onClick={ this.trackCtaClick }
+								primary
+							>
+								{ __( 'Complete Jetpack Setup', {
+									comment: 'Text on link to list of onboarding tasks',
 								} ) }
-							</span>
-							<span className="checklist__header-progress-number">{ `${ completed }/${ total }` }</span>
+							</Button>
 						</div>
-						<ProgressBar total={ total } value={ completed } />
-					</div>
-					<div className="checklist__header-secondary">
-						<Button compact primary href={ `https://wordpress.com/plans/my-plan/${ siteSlug }` }>
-							{ __( 'Complete Jetpack Setup', {
-								comment: 'Text on link to list of onboarding tasks',
-							} ) }
-						</Button>
-					</div>
-				</Card>
-			) }
-		</>
-	);
+					</Card>
+				) }
+			</>
+		);
+	}
 }
 
 export default connect( state => {

diff --git a/_inc/client/my-plan/my-plan-header/index.js b/_inc/client/my-plan/my-plan-header/index.js
@@ -3,15 +3,15 @@
  */
 import React from 'react';
 import { translate as __ } from 'i18n-calypso';
-import analytics from 'lib/analytics';
-import { getPlanClass } from 'lib/plans/constants';
 import { connect } from 'react-redux';
 
 /**
  * Internal dependencies
  */
+import analytics from 'lib/analytics';
 import ChecklistCta from './checklist-cta';
 import ChecklistProgress from './checklist-progress-card';
+import { getPlanClass } from 'lib/plans/constants';
 import { getUpgradeUrl, getSiteRawUrl, showBackups } from 'state/initial-state';
 import { imagePath } from 'constants/urls';
 
@@ -24,6 +24,16 @@ class MyPlanHeader extends React.Component {
 		} );
 	};
 
+	trackChecklistCtaClick = () =>
+		void analytics.tracks.recordEvent(
+			'jetpack_myplan_headerchecklistcta_click',
+			this.props.plan
+				? {
+						plan: this.props.plan,
+				  }
+				: undefined
+		);
+
 	render() {
 		const { siteSlug } = this.props;
 		let planCard = '';
@@ -45,7 +55,7 @@ class MyPlanHeader extends React.Component {
 							<p className="jp-landing__plan-features-text">
 								{ __( 'Get started with hassle-free design, stats, and performance tools.' ) }
 							</p>
-							<ChecklistCta siteSlug={ siteSlug } />
+							<ChecklistCta onClick={ this.trackChecklistCtaClick } siteSlug={ siteSlug } />
 						</div>
 					</div>
 				);
@@ -74,7 +84,7 @@ class MyPlanHeader extends React.Component {
 									{ __( 'Spam filtering and priority support.' ) }
 								</p>
 							) }
-							<ChecklistCta siteSlug={ siteSlug } />
+							<ChecklistCta onClick={ this.trackChecklistCtaClick } siteSlug={ siteSlug } />
 						</div>
 					</div>
 				);
@@ -99,7 +109,7 @@ class MyPlanHeader extends React.Component {
 									'Full security suite, marketing and revenue automation tools, unlimited video hosting, and priority support.'
 								) }
 							</p>
-							<ChecklistCta siteSlug={ siteSlug } />
+							<ChecklistCta onClick={ this.trackChecklistCtaClick } siteSlug={ siteSlug } />
 						</div>
 					</div>
 				);
@@ -124,7 +134,7 @@ class MyPlanHeader extends React.Component {
 									'Full security suite, marketing and revenue automation tools, unlimited video hosting, unlimited themes, enhanced search, and priority support.'
 								) }
 							</p>
-							<ChecklistCta siteSlug={ siteSlug } />
+							<ChecklistCta onClick={ this.trackChecklistCtaClick } siteSlug={ siteSlug } />
 						</div>
 					</div>
 				);