@automattic/jetpack-shared-extension-utils 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.8.0] - 2023-01-02
+### Added
+- Add additional methods to useAnalytics hook, allow for view event by passing initial props [#28072]
+
 ## [0.7.0] - 2022-12-19
 ### Added
 - Add new Analytics wrapper hook. [#27937]
@@ -149,6 +153,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.8.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.7.0...0.8.0
 [0.7.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.6.10...0.7.0
 [0.6.10]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.6.9...0.6.10
 [0.6.9]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.6.8...0.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"description": "Utility functions used by the block editor extensions",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/shared-extension-utils/#readme",
 	"bugs": {

package/src/hooks/readme.md

@@ -21,3 +21,25 @@ tracks.recordEvent( 'jetpack_editor_block_upgrade_click', {
 	context,
 } );
 ```
+
+The hook function also accepts parameters to record a "page view" event when the component renders.
+You can also import a wrapped version of `recordEvent` that checks for a Jetpack connected user before actually recording the event.  
+
+```es6
+const Component = () => {
+	const { recordEvent } = useAnalytics( {
+			pageViewEventName: 'view_event_name',
+			pageViewNamespace: 'jetpack',
+			pageViewSuffix: '',
+		} );
+	const recordClick = useCallback( () => { recordEvent( 'event_name', {} ) }, [] );
+	
+	return (
+		<Button
+			onClick={ recordClick }
+		>
+			{ __( 'Action Button', 'jetpack' ) }
+		</Button>
+	)
+}
+```

package/src/hooks/use-analytics.js

@@ -1,11 +1,35 @@
 import jetpackAnalytics from '@automattic/jetpack-analytics';
 import { useConnection } from '@automattic/jetpack-connection';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 
-const useAnalytics = () => {
-	const { isUserConnected, userConnectionData = {} } = useConnection();
+const { tracks } = jetpackAnalytics;
+const { recordEvent } = tracks;
+
+const useAnalytics = ( {
+	pageViewEventName = null,
+	pageViewNamespace = 'jetpack',
+	pageViewSuffix = 'page_view',
+	pageViewEventProperties = {},
+} = {} ) => {
+	const [ pageViewRecorded, setPageViewRecorded ] = useState( false );
+	const { isUserConnected, isRegistered, userConnectionData = {} } = useConnection();
 	const { wpcomUser: { login, ID } = {}, blogId } = userConnectionData.currentUser || {};
 
+	/**
+	 * Record an event async
+	 * Check to ensure there is a connected user first
+	 */
+	const recordEventAsync = useCallback(
+		async ( event, properties = {} ) => {
+			// Do nothing if there is not a connected user.
+			if ( ! ( isUserConnected && ID && login ) ) {
+				return;
+			}
+			recordEvent( event, properties );
+		},
+		[ isUserConnected, ID, login ]
+	);
+
 	/**
 	 * Initialize tracks with user and blog data.
 	 * This will only work if the user is connected.
@@ -20,7 +44,43 @@ const useAnalytics = () => {
 		} );
 	}, [ blogId, ID, login, isUserConnected ] );
 
-	return jetpackAnalytics;
+	/**
+	 * Track a page-view type event.
+	 * It's considered a page view event when the component is mounted.
+	 */
+	useEffect( () => {
+		const pageViewEvent = pageViewEventName
+			? `${ pageViewNamespace }_${ pageViewEventName }_${ pageViewSuffix }`
+			: null;
+
+		// Also, only run if the site is registered.
+		if ( ! isRegistered ) {
+			return;
+		}
+
+		if ( ! pageViewEvent ) {
+			return;
+		}
+
+		// Ensuring we only record the view event once
+		if ( ! pageViewRecorded ) {
+			recordEventAsync( pageViewEvent, pageViewEventProperties );
+			setPageViewRecorded( true );
+		}
+	}, [
+		pageViewRecorded,
+		pageViewNamespace,
+		pageViewEventName,
+		pageViewSuffix,
+		isRegistered,
+		pageViewEventProperties,
+		recordEventAsync,
+	] );
+
+	return {
+		recordEvent: recordEventAsync,
+		tracks: tracks,
+	};
 };
 
 export default useAnalytics;