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 }` }
+
+
+
+
+
+ { __( 'Complete Jetpack Setup', {
+ comment: 'Text on link to list of onboarding tasks',
} ) }
-
- { `${ completed }/${ total }` }
+
-
-
-
-
- { __( 'Complete Jetpack Setup', {
- comment: 'Text on link to list of onboarding tasks',
- } ) }
-
-
-
- ) }
- >
- );
+
+ ) }
+ >
+ );
+ }
}
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 }
-
+
>
);
}