Record Tracks events when CES notice/snackbar and modal is viewed (https://github.com/woocommerce/woocommerce-admin/pull/5648)
This commit is contained in:
parent
be47d9d795
commit
ad78576cf4
|
@ -43,7 +43,7 @@ function CustomerEffortScoreTracks( {
|
|||
updateOptions,
|
||||
createNotice,
|
||||
} ) {
|
||||
const [ shown, setShown ] = useState( false );
|
||||
const [ modalShown, setModalShown ] = useState( false );
|
||||
|
||||
if ( resolving ) {
|
||||
return null;
|
||||
|
@ -54,18 +54,42 @@ function CustomerEffortScoreTracks( {
|
|||
return null;
|
||||
}
|
||||
|
||||
if ( cesShownForActions.indexOf( action ) !== -1 && ! shown ) {
|
||||
// We only want to return null early if the modal was already shown
|
||||
// for this action *before* this component was initially instantiated.
|
||||
//
|
||||
// We want to make sure we still render CustomerEffortScore below
|
||||
// (we don't want to return null early), if the modal was shown for this
|
||||
// instantiation, so that the component doesn't go away while we are
|
||||
// still showing it.
|
||||
if ( cesShownForActions.indexOf( action ) !== -1 && ! modalShown ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const openedCallback = () => {
|
||||
// Use the `shown` state value to only update the shown_for_actions
|
||||
// option once.
|
||||
if ( shown ) {
|
||||
return;
|
||||
}
|
||||
const onNoticeShown = () => {
|
||||
recordEvent( 'ces_snackbar_view', {
|
||||
action,
|
||||
store_age: storeAge,
|
||||
...trackProps,
|
||||
} );
|
||||
};
|
||||
|
||||
const onNoticeDismissed = () => {
|
||||
recordEvent( 'ces_snackbar_dismiss', {
|
||||
action,
|
||||
store_age: storeAge,
|
||||
...trackProps,
|
||||
} );
|
||||
};
|
||||
|
||||
const onModalShown = () => {
|
||||
setModalShown( true );
|
||||
|
||||
recordEvent( 'ces_view', {
|
||||
action,
|
||||
store_age: storeAge,
|
||||
...trackProps,
|
||||
} );
|
||||
|
||||
setShown( true );
|
||||
updateOptions( {
|
||||
[ SHOWN_FOR_ACTIONS_OPTION_NAME ]: [
|
||||
action,
|
||||
|
@ -74,7 +98,7 @@ function CustomerEffortScoreTracks( {
|
|||
} );
|
||||
};
|
||||
|
||||
const trackCallback = ( score ) => {
|
||||
const recordScore = ( score ) => {
|
||||
recordEvent( 'ces_feedback', {
|
||||
action,
|
||||
score,
|
||||
|
@ -86,9 +110,11 @@ function CustomerEffortScoreTracks( {
|
|||
|
||||
return (
|
||||
<CustomerEffortScore
|
||||
trackCallback={ trackCallback }
|
||||
recordScoreCallback={ recordScore }
|
||||
label={ label }
|
||||
openedCallback={ openedCallback }
|
||||
onNoticeShownCallback={ onNoticeShown }
|
||||
onNoticeDismissedCallback={ onNoticeDismissed }
|
||||
onModalShownCallback={ onModalShown }
|
||||
icon={
|
||||
<span
|
||||
style={ { height: 21, width: 21 } }
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { noop } from 'lodash';
|
||||
import { useState } from '@wordpress/element';
|
||||
import PropTypes from 'prop-types';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { withDispatch } from '@wordpress/data';
|
||||
import { noop } from 'lodash';
|
||||
|
||||
/**
|
||||
* Use `CustomerEffortScore` to gather a customer effort score.
|
||||
|
@ -14,18 +14,22 @@ import { noop } from 'lodash';
|
|||
* NOTE: This should live in @woocommerce/customer-effort-score to allow
|
||||
* reuse.
|
||||
*
|
||||
* @param {Object} props Component props.
|
||||
* @param {Function} props.trackCallback Function to call when the results should be tracked.
|
||||
* @param {string} props.label The label displayed in the modal.
|
||||
* @param {Function} props.createNotice Create a notice (snackbar).
|
||||
* @param {Function} props.openedCallback Function to call when the modal is opened.
|
||||
* @param {Object} props.icon Icon (React component) to be shown on the notice.
|
||||
* @param {Object} props Component props.
|
||||
* @param {Function} props.recordScoreCallback Function to call when the score should be recorded.
|
||||
* @param {string} props.label The label displayed in the modal.
|
||||
* @param {Function} props.createNotice Create a notice (snackbar).
|
||||
* @param {Function} props.onNoticeShownCallback Function to call when the notice is shown.
|
||||
* @param {Function} props.onNoticeDismissedCallback Function to call when the notice is dismissed.
|
||||
* @param {Function} props.onModalShownCallback Function to call when the modal is shown.
|
||||
* @param {Object} props.icon Icon (React component) to be shown on the notice.
|
||||
*/
|
||||
function CustomerEffortScore( {
|
||||
trackCallback,
|
||||
recordScoreCallback,
|
||||
label,
|
||||
createNotice,
|
||||
openedCallback = noop,
|
||||
onNoticeShownCallback = noop,
|
||||
onNoticeDismissedCallback = noop,
|
||||
onModalShownCallback = noop,
|
||||
icon,
|
||||
} ) {
|
||||
const [ score, setScore ] = useState( 0 );
|
||||
|
@ -39,18 +43,19 @@ function CustomerEffortScore( {
|
|||
label: __( 'Give feedback', 'woocommerce-admin' ),
|
||||
onClick: () => {
|
||||
setVisible( true );
|
||||
|
||||
openedCallback();
|
||||
onModalShownCallback();
|
||||
},
|
||||
},
|
||||
],
|
||||
icon,
|
||||
explicitDismiss: true,
|
||||
onDismiss: openedCallback,
|
||||
onDismiss: onNoticeDismissedCallback,
|
||||
} );
|
||||
|
||||
setShouldCreateNotice( false );
|
||||
|
||||
onNoticeShownCallback();
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
|
@ -62,7 +67,7 @@ function CustomerEffortScore( {
|
|||
setScore( 3 ); // TODO let this happen in the UI
|
||||
|
||||
setVisible( false );
|
||||
trackCallback( score );
|
||||
recordScoreCallback( score );
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -74,9 +79,9 @@ function CustomerEffortScore( {
|
|||
|
||||
CustomerEffortScore.propTypes = {
|
||||
/**
|
||||
* The function to call when the modal is actioned.
|
||||
* The function to call to record the score.
|
||||
*/
|
||||
trackCallback: PropTypes.func.isRequired,
|
||||
recordScoreCallback: PropTypes.func.isRequired,
|
||||
/**
|
||||
* The label displayed in the modal.
|
||||
*/
|
||||
|
@ -86,9 +91,17 @@ CustomerEffortScore.propTypes = {
|
|||
*/
|
||||
createNotice: PropTypes.func.isRequired,
|
||||
/**
|
||||
* Callback executed when the modal is opened.
|
||||
* The function to call when the notice is shown.
|
||||
*/
|
||||
openedCallback: PropTypes.func,
|
||||
onNoticeShownCallback: PropTypes.func,
|
||||
/**
|
||||
* The function to call when the notice is dismissed.
|
||||
*/
|
||||
onNoticeDismissedCallback: PropTypes.func,
|
||||
/**
|
||||
* The function to call when the modal is shown.
|
||||
*/
|
||||
onModalShownCallback: PropTypes.func,
|
||||
/**
|
||||
* Icon (React component) to be displayed.
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue