From d599c2bfc64b46b11eb2964b39094b1ce69256e3 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 23 May 2019 12:24:06 +0200 Subject: [PATCH 1/2] Add tracks to checklist CTAs --- .../my-plan/my-plan-header/checklist-cta.js | 8 +- .../checklist-progress-card/index.js | 73 ++++++++++++------- _inc/client/my-plan/my-plan-header/index.js | 22 ++++-- 3 files changed, 68 insertions(+), 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 index 6301be632df16..d020ea0506372 100644 --- 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 (
-
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 index 589c5f097372e..e9cf8e4ef1d27 100644 --- 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,12 +2,13 @@ * 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'; @@ -15,34 +16,52 @@ 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 ( - <> - - { completed && total && ( - -
-
- - { __( '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 ( + <> + + { completed && total && ( + +
+
+ + { __( 'Your Jetpack setup progress', { + comment: 'Onboarding task list progress', + } ) } + + { `${ completed }/${ total }` } +
+ +
+
+
- -
-
- -
- - ) } - - ); + + ) } + + ); + } } 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 index b8466858a4ee5..0119fd79b2e15 100644 --- 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 {

{ __( 'Get started with hassle-free design, stats, and performance tools.' ) }

- +
); @@ -74,7 +84,7 @@ class MyPlanHeader extends React.Component { { __( 'Spam filtering and priority support.' ) }

) } - + ); @@ -99,7 +109,7 @@ class MyPlanHeader extends React.Component { 'Full security suite, marketing and revenue automation tools, unlimited video hosting, and priority support.' ) }

- + ); @@ -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.' ) }

- + ); From 6f9357ed6328bae4bacde919173a912e9a31de6b Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Thu, 23 May 2019 12:37:43 +0200 Subject: [PATCH 2/2] Add plan to second tracks event --- _inc/client/my-plan/my-plan-header/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_inc/client/my-plan/my-plan-header/index.js b/_inc/client/my-plan/my-plan-header/index.js index 0119fd79b2e15..c98f7a4033f3b 100644 --- a/_inc/client/my-plan/my-plan-header/index.js +++ b/_inc/client/my-plan/my-plan-header/index.js @@ -35,9 +35,9 @@ class MyPlanHeader extends React.Component { ); render() { - const { siteSlug } = this.props; + const { plan, siteSlug } = this.props; let planCard = ''; - switch ( getPlanClass( this.props.plan ) ) { + switch ( getPlanClass( plan ) ) { case 'is-free-plan': planCard = (
@@ -155,7 +155,7 @@ class MyPlanHeader extends React.Component { return ( <>
{ planCard }
- + ); }