Record a tracks event when merchant toggles cart shipping calculator: (https://github.com/woocommerce/woocommerce-blocks/pull/1975)

* record a tracks event when merchant toggles cart shipping calculator:
- add tracks utility func for blocks
  - adds standard event name prefix
  - supplies post id & type params (an example)
- hook this up to UI when user toggles shipping calc
- pass enabled as boolean prop

* fix typo - call isTracksAvailable() !

* remove unnecessary temporary boolean

* update event name based on best practice guidelines

* remove isTracksAvailable preflight check:
- if site opts out, recordEvent is an empty function
- add in standard fallback boilerplate to ensure function exists
Note: currently no mechanism to detect if tracks is available on front end.
This commit is contained in:
Rua Haszard 2020-03-26 10:12:34 +13:00 committed by GitHub
parent e61a098d84
commit 7921c3e5ba
3 changed files with 34 additions and 3 deletions

View File

@ -1,3 +1,4 @@
export * from './errors'; export * from './errors';
export * from './price'; export * from './price';
export * from './address'; export * from './address';
export * from './tracks';

View File

@ -0,0 +1,23 @@
/**
* External dependencies
*/
import { select } from '@wordpress/data';
// Stand-in wcTracks.recordEvent in case tracks is not available (for any reason).
window.wcTracks = window.wcTracks || {};
window.wcTracks.recordEvent = window.wcTracks.recordEvent || function() {};
export const recordEditorEvent = function( event, props ) {
// Force prefix - our editor events will be 'wcadmin_blocks_*'.
const blocksPrefix = 'blocks_';
const postData = select( 'core/editor' );
// If tracks is not available (e.g. opt-out), recordEvent is a no-op.
window.wcTracks.recordEvent( blocksPrefix + event, {
// Automatically include post id and post type props.
post_id: postData.getCurrentPostId(),
post_type: postData.getCurrentPostType(),
...props,
} );
};

View File

@ -19,6 +19,7 @@ import { EditorProvider, useEditorContext } from '@woocommerce/base-context';
import { useSelect } from '@wordpress/data'; import { useSelect } from '@wordpress/data';
import { __experimentalCreateInterpolateElement } from 'wordpress-element'; import { __experimentalCreateInterpolateElement } from 'wordpress-element';
import { getAdminLink } from '@woocommerce/settings'; import { getAdminLink } from '@woocommerce/settings';
import { recordEditorEvent } from '@woocommerce/base-utils';
/** /**
* Internal dependencies * Internal dependencies
@ -85,11 +86,17 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
'woo-gutenberg-products-block' 'woo-gutenberg-products-block'
) } ) }
checked={ isShippingCalculatorEnabled } checked={ isShippingCalculatorEnabled }
onChange={ () => onChange={ () => {
recordEditorEvent(
'cart_settings_shipping_calculator_toggle',
{
enabled: ! isShippingCalculatorEnabled,
}
);
setAttributes( { setAttributes( {
isShippingCalculatorEnabled: ! isShippingCalculatorEnabled, isShippingCalculatorEnabled: ! isShippingCalculatorEnabled,
} ) } );
} } }
/> />
<ToggleControl <ToggleControl
label={ __( label={ __(