Setup Redux middleware for analytics tracking

src/analytics/index.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { initialize as initializeRedux } from './redux';
+
+export default () => {
+	initializeRedux();
+};

src/analytics/redux/index.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { use } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { trackedEvents } from './tracked_events';
+
+/**
+ * Initialize the Redux middleware
+ */
+export function initialize() {
+	use( ( registry ) => ( {
+		dispatch: ( namespace ) => {
+			const namespaceName =
+				typeof namespace === 'object' ? namespace.name : namespace;
+			const actions = { ...registry.dispatch( namespaceName ) };
+			const trackers = trackedEvents[ namespaceName ];
+
+			if ( trackers ) {
+				Object.keys( trackers ).forEach( ( actionName ) => {
+					const originalAction = actions[ actionName ];
+					const tracker = trackers[ actionName ];
+					actions[ actionName ] = ( ...args ) => {
+						try {
+							tracker( ...args );
+						} catch ( err ) {
+							// eslint-disable-next-line no-console
+							console.error( err );
+						}
+						return originalAction( ...args );
+					};
+				} );
+			}
+
+			return actions;
+		},
+	} ) );
+}

src/analytics/redux/tracked_events.js

@@ -0,0 +1,84 @@
+/* eslint-disable camelcase */
+/**
+ * WordPress dependencies
+ */
+import { select } from '@wordpress/data';
+import { sendEventToHost } from '@wordpress/react-native-bridge';
+
+/**
+ * Retrieves a block object. If the block is not an object,
+ * it tries to retrieve the block from the store.
+ *
+ * @param {string|Object} block Block objectg or string identifier.
+ * @return {Object} block object or an empty object if not found.
+ */
+function getBlockObject( block ) {
+	if ( typeof block === 'object' ) {
+		return block;
+	}
+	return select( 'core/block-editor' ).getBlock( block ) || {};
+}
+
+/**
+ * Helper function to recursively track block events.
+ * Each inner block will be tracked as a separate event if block contains inner blocks.
+ *
+ * @param {Array|Object} blocks            A single or collection of block objects or block identifiers.
+ * @param {string}       eventName         Event name used to track.
+ * @param {Function}     propertiesHandler Callback to transform properties.
+ * @param {Object}       parentBlock       Parent block. optional
+ * @return {void}
+ */
+function trackBlocksHandler(
+	blocks,
+	eventName,
+	propertiesHandler = () => {},
+	parentBlock
+) {
+	const blockArray = [ blocks ].flat();
+	if ( ! blocks || ! blockArray.length ) {
+		return;
+	}
+
+	blockArray.forEach( ( block ) => {
+		const blockObject = getBlockObject( block );
+		const eventProperties = {
+			...propertiesHandler( blockObject ),
+			inner_block: !! parentBlock,
+		};
+
+		if ( parentBlock ) {
+			eventProperties.parent_block_name = parentBlock.name;
+		}
+
+		sendEventToHost( eventName, eventProperties );
+
+		if ( blockObject.innerBlocks ) {
+			trackBlocksHandler(
+				blockObject.innerBlocks,
+				eventName,
+				propertiesHandler,
+				blockObject
+			);
+		}
+	} );
+}
+
+export const trackedEvents = {
+	'core/block-editor': {
+		insertBlock( blocks ) {
+			trackBlocksHandler(
+				blocks,
+				'editor_block_inserted',
+				( { name } ) => ( { block_name: name } )
+			);
+		},
+		insertBlocks( blocks ) {
+			trackBlocksHandler(
+				blocks,
+				'editor_block_inserted',
+				( { name } ) => ( { block_name: name } )
+			);
+		},
+	},
+};

src/index.js

@@ -18,6 +18,7 @@ import {
 } from './jetpack-editor-setup';
 import setupBlockExperiments from './block-experiments-setup';
 import initialHtml from './initial-html';
+import initAnalytics from './analytics';
 
 addAction( 'native.pre-render', 'gutenberg-mobile', ( props ) => {
 	require( './strings-overrides' );
@@ -60,4 +61,5 @@ addFilter( 'native.block_editor_props', 'gutenberg-mobile', ( editorProps ) => {
 	return editorProps;
 } );
 
+initAnalytics();
 doGutenbergNativeSetup();