Social: Add preview modal analytics (#38714)

* Add tracking for the modal opening * Add tracking for connection toggles * Add tracking for attaching media and custom message * changelog * Switch to useRef * Add other data * Update projects/js-packages/publicize-components/src/components/form/connections-list.tsx Co-authored-by: Manzoor Wani <[email protected]> * Update projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx Co-authored-by: Manzoor Wani <[email protected]> --------- Co-authored-by: Manzoor Wani <[email protected]>
Automattic · Aug 5, 2024 · 51e5961 · 51e5961
1 parent ae00a4b
commit 51e5961
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 15 deletions.
diff --git a/projects/js-packages/publicize-components/changelog/add-social-preview-modal-analytics b/projects/js-packages/publicize-components/changelog/add-social-preview-modal-analytics
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added tracking for the publicize settings changes
diff --git a/projects/js-packages/publicize-components/src/components/form/connections-list.tsx b/projects/js-packages/publicize-components/src/components/form/connections-list.tsx
@@ -1,3 +1,5 @@
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { useCallback } from 'react';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import PublicizeConnection from '../connection';
@@ -7,12 +9,25 @@ import styles from './styles.module.scss';
 import { useConnectionState } from './use-connection-state';
 
 export const ConnectionsList: React.FC = () => {
-	const { connections, toggleById } = useSocialMediaConnections();
+	const { recordEvent } = useAnalytics();
 
+	const { connections, toggleById } = useSocialMediaConnections();
 	const { canBeTurnedOn, shouldBeDisabled } = useConnectionState();
 
 	const { needsUserConnection } = usePublicizeConfig();
 
+	const toggleConnection = useCallback(
+		( connectionId: string, connection ) => () => {
+			toggleById( connectionId );
+			recordEvent( 'jetpack_social_connection_toggled', {
+				location: 'editor',
+				enabled: ! connection.enabled,
+				service_name: connection.service_name,
+			} );
+		},
+		[ recordEvent, toggleById ]
+	);
+
 	return (
 		<div>
 			<ul className={ styles[ 'connections-list' ] }>
@@ -28,7 +43,7 @@ export const ConnectionsList: React.FC = () => {
 							id={ currentId }
 							label={ display_name }
 							name={ service_name }
-							toggleConnection={ toggleById }
+							toggleConnection={ toggleConnection( currentId, conn ) }
 							profilePicture={ profile_picture }
 						/>
 					);

diff --git a/projects/js-packages/publicize-components/src/components/form/index.tsx b/projects/js-packages/publicize-components/src/components/form/index.tsx
@@ -105,7 +105,9 @@ export default function PublicizeForm() {
 
 			{ ! isPublicizeDisabledBySitePlan && (
 				<Fragment>
-					{ isPublicizeEnabled && hasEnabledConnections && <SharePostForm /> }
+					{ isPublicizeEnabled && hasEnabledConnections && (
+						<SharePostForm analyticsData={ { location: 'editor' } } />
+					) }
 					<AdvancedPlanNudge />
 				</Fragment>
 			) }

diff --git a/projects/js-packages/publicize-components/src/components/form/share-post-form.tsx b/projects/js-packages/publicize-components/src/components/form/share-post-form.tsx
@@ -3,15 +3,30 @@ import useSocialMediaMessage from '../../hooks/use-social-media-message';
 import MediaSection from '../media-section';
 import MessageBoxControl from '../message-box-control';
 
-export const SharePostForm: React.FC = () => {
+type SharePostFormProps = {
+	analyticsData?: object;
+};
+
+/**
+ * The SharePostForm component.
+ * @param {object} props - The component props.
+ * @param {object} [props.analyticsData] - Data for tracking analytics.
+ * @returns {object} The SharePostForm component.
+ */
+export const SharePostForm: React.FC< SharePostFormProps > = ( { analyticsData = null } ) => {
 	const { message, updateMessage, maxLength } = useSocialMediaMessage();
 
 	const { isEnhancedPublishingEnabled } = usePublicizeConfig();
 
 	return (
 		<>
-			<MessageBoxControl maxLength={ maxLength } onChange={ updateMessage } message={ message } />
-			{ isEnhancedPublishingEnabled && <MediaSection /> }
+			<MessageBoxControl
+				maxLength={ maxLength }
+				onChange={ updateMessage }
+				message={ message }
+				analyticsData={ analyticsData }
+			/>
+			{ isEnhancedPublishingEnabled && <MediaSection analyticsData={ analyticsData } /> }
 		</>
 	);
 };
diff --git a/projects/js-packages/publicize-components/src/components/media-section/index.js b/projects/js-packages/publicize-components/src/components/media-section/index.js
@@ -1,4 +1,5 @@
 import { ThemeProvider, getRedirectUrl } from '@automattic/jetpack-components';
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Disabled, ExternalLink, Notice, BaseControl } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -16,14 +17,17 @@ const ADD_MEDIA_LABEL = __( 'Choose Media', 'jetpack' );
  * @param {boolean} [props.disabled=false] - Indicates whether the MediaSection is disabled or not.
  * @param {string} [props.disabledNoticeMessage=''] - An optional notice that's displayed when the section is disabled.
  * @param {import('react').ReactNode} [props.CustomNotice=null] - An optional custom notice that's displayed.
+ * @param {object} [props.analyticsData] - Data for tracking analytics.
  * @returns {object} The media section.
  */
 export default function MediaSection( {
 	disabled = false,
 	disabledNoticeMessage = '',
 	CustomNotice = null,
+	analyticsData,
 } ) {
 	const { attachedMedia, updateAttachedMedia } = useAttachedMedia();
+	const { recordEvent } = useAnalytics();
 
 	const [ mediaDetails ] = useMediaDetails( attachedMedia[ 0 ]?.id );
 
@@ -32,11 +36,13 @@ export default function MediaSection( {
 			if ( ! media ) {
 				updateAttachedMedia( [] );
 			} else {
+				recordEvent( 'jetpack_social_media_attached', analyticsData );
+
 				const { id, url, mime: type } = media;
 				updateAttachedMedia( [ { id, url, type } ] );
 			}
 		},
-		[ updateAttachedMedia ]
+		[ analyticsData, recordEvent, updateAttachedMedia ]
 	);
 
 	const MediaWrapper = disabled ? Disabled : Fragment;

diff --git a/projects/js-packages/publicize-components/src/components/message-box-control/index.js b/projects/js-packages/publicize-components/src/components/message-box-control/index.js
@@ -1,5 +1,7 @@
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { TextareaControl } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { useCallback, useRef } from 'react';
 
 /**
  * Wrapper around a textbox to restrict the number of characters and
@@ -10,16 +12,37 @@ import { __, _n, sprintf } from '@wordpress/i18n';
  * @param {Function} props.onChange  - Callback to invoke as the message changes.
  * @param {boolean}  [props.disabled]  - Whether the control is disabled.
  * @param {number}   props.maxLength - The maximum character length of the message.
+ * @param {object}   props.analyticsData - Data for tracking analytics.
  * @returns {object} The message box component.
  */
-export default function MessageBoxControl( { message = '', onChange, disabled, maxLength } ) {
+export default function MessageBoxControl( {
+	message = '',
+	onChange,
+	disabled,
+	maxLength,
+	analyticsData = null,
+} ) {
+	const { recordEvent } = useAnalytics();
+	const isFirstChange = useRef( true );
+
 	const charactersRemaining = maxLength - message.length;
 
+	const handleChange = useCallback(
+		newMessage => {
+			onChange( newMessage );
+			if ( isFirstChange.current ) {
+				recordEvent( 'jetpack_social_custom_message_changed', analyticsData );
+				isFirstChange.current = false;
+			}
+		},
+		[ analyticsData, isFirstChange, onChange, recordEvent ]
+	);
+
 	return (
 		<TextareaControl
 			value={ message }
 			label={ __( 'Message', 'jetpack' ) }
-			onChange={ onChange }
+			onChange={ handleChange }
 			disabled={ disabled }
 			maxLength={ maxLength }
 			placeholder={ __( 'Write a message for your audience here.', 'jetpack' ) }

diff --git a/projects/js-packages/publicize-components/src/components/social-post-modal/modal.tsx b/projects/js-packages/publicize-components/src/components/social-post-modal/modal.tsx
@@ -1,5 +1,6 @@
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Modal, PanelRow, Button } from '@wordpress/components';
-import { useReducer } from '@wordpress/element';
+import { useCallback, useReducer } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import { PreviewSection } from './preview-section';
@@ -13,6 +14,14 @@ import styles from './styles.module.scss';
  */
 export function SocialPostModal() {
 	const [ isModalOpen, toggleModal ] = useReducer( state => ! state, false );
+	const { recordEvent } = useAnalytics();
+
+	const handleOpenModal = useCallback( () => {
+		if ( ! isModalOpen ) {
+			recordEvent( 'jetpack_social_preview_modal_opened' );
+		}
+		toggleModal();
+	}, [ isModalOpen, recordEvent ] );
 
 	return (
 		<PanelRow className={ styles.panel }>
@@ -35,7 +44,7 @@ export function SocialPostModal() {
 					/>
 				</Modal>
 			) }
-			<Button variant="secondary" onClick={ toggleModal }>
+			<Button variant="secondary" onClick={ handleOpenModal }>
 				{ __( 'Preview social posts', 'jetpack' ) }
 			</Button>
 		</PanelRow>

diff --git a/...cts/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx b/...cts/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { TabPanel } from '@wordpress/components';
 import { ToggleControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -16,6 +17,8 @@ import styles from './styles.module.scss';
  * @returns {import('react').ReactNode} - Preview section of the social post modal.
  */
 export function PreviewSection() {
+	const { recordEvent } = useAnalytics();
+
 	const getService = useService();
 
 	const { canBeTurnedOn, shouldBeDisabled } = useConnectionState();
@@ -62,10 +65,15 @@ export function PreviewSection() {
 	const { toggleConnectionById } = useDispatch( socialStore );
 
 	const toggleConnection = useCallback(
-		( connectionId: string ) => () => {
+		( connectionId: string, connection ) => () => {
 			toggleConnectionById( connectionId );
+			recordEvent( 'jetpack_social_connection_toggled', {
+				location: 'preview-modal',
+				enabled: ! connection.enabled,
+				service_name: connection.service_name,
+			} );
 		},
-		[ toggleConnectionById ]
+		[ recordEvent, toggleConnectionById ]
 	);
 
 	return (
@@ -78,7 +86,7 @@ export function PreviewSection() {
 							label={ __( 'Share to this account', 'jetpack' ) }
 							disabled={ shouldBeDisabled( tab ) }
 							checked={ canBeTurnedOn( tab ) && tab.enabled }
-							onChange={ toggleConnection( tab.connection_id ) }
+							onChange={ toggleConnection( tab.connection_id, tab ) }
 						/>
 					</div>
 				) }

diff --git a/...ts/js-packages/publicize-components/src/components/social-post-modal/settings-section.tsx b/...ts/js-packages/publicize-components/src/components/social-post-modal/settings-section.tsx
@@ -14,7 +14,7 @@ export function SettingsSection() {
 				<h2>{ __( 'Social Preview', 'jetpack' ) }</h2>
 			</div>
 			<div className={ styles[ 'settings-content' ] }>
-				<SharePostForm />
+				<SharePostForm analyticsData={ { location: 'preview-modal' } } />
 			</div>
 		</div>
 	);