From 51e59617277b0dbe7d2d05b7a51583b1006187c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gergely=20M=C3=A1rk=20Juh=C3=A1sz?= <36671565+gmjuhasz@users.noreply.github.com> Date: Mon, 5 Aug 2024 17:03:23 +0200 Subject: [PATCH] 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 * Update projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx Co-authored-by: Manzoor Wani --------- Co-authored-by: Manzoor Wani --- .../add-social-preview-modal-analytics | 4 +++ .../src/components/form/connections-list.tsx | 19 +++++++++++-- .../src/components/form/index.tsx | 4 ++- .../src/components/form/share-post-form.tsx | 21 ++++++++++++--- .../src/components/media-section/index.js | 8 +++++- .../components/message-box-control/index.js | 27 +++++++++++++++++-- .../components/social-post-modal/modal.tsx | 13 +++++++-- .../social-post-modal/preview-section.tsx | 14 +++++++--- .../social-post-modal/settings-section.tsx | 2 +- 9 files changed, 97 insertions(+), 15 deletions(-) create mode 100644 projects/js-packages/publicize-components/changelog/add-social-preview-modal-analytics 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 new file mode 100644 index 0000000000000..2c1ea2e553038 --- /dev/null +++ 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 index 6ef92f1bf8c7e..dc9f1fc87232b 100644 --- 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 (
    @@ -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 index b4688cab028a3..8ffba7416b4c2 100644 --- 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 && ( - { isPublicizeEnabled && hasEnabledConnections && } + { isPublicizeEnabled && hasEnabledConnections && ( + + ) } ) } 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 index da3d06a800a15..668c9bc33e9d5 100644 --- 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 ( <> - - { isEnhancedPublishingEnabled && } + + { isEnhancedPublishingEnabled && } ); }; 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 index 779d3f49ff502..46e9b70495acc 100644 --- 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 index 14d18b7e68d2f..ebffb6dd954e8 100644 --- 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 ( ! state, false ); + const { recordEvent } = useAnalytics(); + + const handleOpenModal = useCallback( () => { + if ( ! isModalOpen ) { + recordEvent( 'jetpack_social_preview_modal_opened' ); + } + toggleModal(); + }, [ isModalOpen, recordEvent ] ); return ( @@ -35,7 +44,7 @@ export function SocialPostModal() { /> ) } - diff --git a/projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx b/projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx index 5d0c73c1dae2f..f1c964dbea293 100644 --- a/projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx +++ b/projects/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 ) } />
) } diff --git a/projects/js-packages/publicize-components/src/components/social-post-modal/settings-section.tsx b/projects/js-packages/publicize-components/src/components/social-post-modal/settings-section.tsx index 66d3ecbe2a5f2..b27fcbdcc0adf 100644 --- a/projects/js-packages/publicize-components/src/components/social-post-modal/settings-section.tsx +++ b/projects/js-packages/publicize-components/src/components/social-post-modal/settings-section.tsx @@ -14,7 +14,7 @@ export function SettingsSection() {

{ __( 'Social Preview', 'jetpack' ) }

- +
);