From cdb2074e30b9f04d72a0738acc3470e9f5bbd06d Mon Sep 17 00:00:00 2001 From: mmtr <1233880+mmtr@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:55:37 +0200 Subject: [PATCH] Add custom tracking tool to keep using calypso_ and wpcom_ events --- .../jetpack-mu-wpcom/src/common/tracks.js | 27 +++++++++++++++++ .../src/features/wpcom-global-styles/modal.js | 11 ++++--- .../features/wpcom-global-styles/notices.js | 30 ++++++++----------- .../wpcom-global-styles-view.js | 11 +++---- .../wpcom-sidebar-notice.js | 12 ++++---- 5 files changed, 54 insertions(+), 37 deletions(-) create mode 100644 projects/packages/jetpack-mu-wpcom/src/common/tracks.js diff --git a/projects/packages/jetpack-mu-wpcom/src/common/tracks.js b/projects/packages/jetpack-mu-wpcom/src/common/tracks.js new file mode 100644 index 0000000000000..4647982b8e2b4 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/common/tracks.js @@ -0,0 +1,27 @@ +/* global JP_CONNECTION_INITIAL_STATE */ + +export const wpcomTrackEvent = ( + eventName, + eventProperties = {}, + eventUserId = null, + eventUsername = null +) => { + const currentUser = JP_CONNECTION_INITIAL_STATE?.userConnectionData?.currentUser ?? {}; + + const userId = eventUserId ?? currentUser.id; + const username = eventUsername ?? currentUser.username; + const blogId = eventProperties.blogId ?? currentUser.blogId; + + window._tkq = window._tkq || []; + if ( username && userId ) { + window._tkq.push( [ 'identifyUser', userId, username ] ); + } + window._tkq.push( [ + 'recordEvent', + eventName, + { + ...eventProperties, + blog_id: blogId, + }, + ] ); +}; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/modal.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/modal.js index d2078322d8b38..478d7f927b7a7 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/modal.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/modal.js @@ -1,11 +1,11 @@ /* global wpcomGlobalStyles */ -import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; import { Button, Modal } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import React from 'react'; +import { wpcomTrackEvent } from '../../common/tracks'; import { useCanvas } from './use-canvas'; import './modal.scss'; @@ -13,7 +13,6 @@ import './modal.scss'; const GlobalStylesModal = () => { const isSiteEditor = useSelect( select => !! select( 'core/edit-site' ), [] ); const { viewCanvasPath } = useCanvas(); - const { tracks } = useAnalytics(); const isVisible = useSelect( select => { @@ -44,15 +43,15 @@ const GlobalStylesModal = () => { useEffect( () => { if ( isVisible ) { - tracks.recordEvent( 'calypso_global_styles_gating_modal_show', { + wpcomTrackEvent( 'calypso_global_styles_gating_modal_show', { context: 'site-editor', } ); } - }, [ isVisible, tracks ] ); + }, [ isVisible ] ); const closeModal = () => { dismissModal(); - tracks.recordEvent( 'calypso_global_styles_gating_modal_dismiss', { + wpcomTrackEvent( 'calypso_global_styles_gating_modal_dismiss', { context: 'site-editor', } ); }; @@ -93,7 +92,7 @@ const GlobalStylesModal = () => { href={ wpcomGlobalStyles.upgradeUrl } target="_top" onClick={ () => - tracks.recordEvent( 'calypso_global_styles_gating_modal_upgrade_click', { + wpcomTrackEvent( 'calypso_global_styles_gating_modal_upgrade_click', { context: 'site-editor', } ) } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/notices.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/notices.js index 1c1cb63489e5b..b818d90d24881 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/notices.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/notices.js @@ -1,5 +1,4 @@ /* global wpcomGlobalStyles */ -import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ExternalLink, Notice } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -12,31 +11,28 @@ import { } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import clsx from 'clsx'; +import { wpcomTrackEvent } from '../../common/tracks'; import { useCanvas } from './use-canvas'; import { useGlobalStylesConfig } from './use-global-styles-config'; import { usePreview } from './use-preview'; + import './notice.scss'; const GLOBAL_STYLES_VIEW_NOTICE_SELECTOR = 'wpcom-global-styles-notice-container'; -const useTrackEvent = () => { - const { tracks } = useAnalytics(); - return ( eventName, isSiteEditor = true ) => - tracks.recordEvent( eventName, { - context: isSiteEditor ? 'site-editor' : 'post-editor', - blog_id: wpcomGlobalStyles.wpcomBlogId, - } ); -}; +const trackEvent = ( eventName, isSiteEditor = true ) => + wpcomTrackEvent( eventName, { + context: isSiteEditor ? 'site-editor' : 'post-editor', + blog_id: wpcomGlobalStyles.wpcomBlogId, + } ); /** * Limited GS notice for the view canvas of the site editor. */ function GlobalStylesWarningNotice() { - const trackEvent = useTrackEvent(); - useEffect( () => { trackEvent( 'calypso_global_styles_gating_notice_view_canvas_show' ); - }, [ trackEvent ] ); + }, [] ); const planName = wpcomGlobalStyles.planName; @@ -122,7 +118,6 @@ function GlobalStylesEditNotice() { [ canvas ] ); const { previewPostWithoutCustomStyles, canPreviewPost } = usePreview(); - const trackEvent = useTrackEvent(); const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' ); const { editEntityRecord } = useDispatch( 'core' ); @@ -130,12 +125,12 @@ function GlobalStylesEditNotice() { const upgradePlan = useCallback( () => { window.open( wpcomGlobalStyles.upgradeUrl, '_blank' ).focus(); trackEvent( 'calypso_global_styles_gating_notice_upgrade_click', isSiteEditor ); - }, [ isSiteEditor, trackEvent ] ); + }, [ isSiteEditor ] ); const previewPost = useCallback( () => { previewPostWithoutCustomStyles(); trackEvent( 'calypso_global_styles_gating_notice_preview_click', isSiteEditor ); - }, [ isSiteEditor, previewPostWithoutCustomStyles, trackEvent ] ); + }, [ isSiteEditor, previewPostWithoutCustomStyles ] ); const resetGlobalStyles = useCallback( () => { if ( ! globalStylesId ) { @@ -148,12 +143,12 @@ function GlobalStylesEditNotice() { } ); trackEvent( 'calypso_global_styles_gating_notice_reset_click', isSiteEditor ); - }, [ editEntityRecord, globalStylesId, isSiteEditor, trackEvent ] ); + }, [ editEntityRecord, globalStylesId, isSiteEditor ] ); const openResetGlobalStylesSupport = useCallback( () => { window.open( wpcomGlobalStyles.resetGlobalStylesSupportUrl, '_blank' ).focus(); trackEvent( 'calypso_global_styles_gating_notice_reset_support_click', isSiteEditor ); - }, [ isSiteEditor, trackEvent ] ); + }, [ isSiteEditor ] ); const showNotice = useCallback( () => { const actions = [ @@ -216,7 +211,6 @@ function GlobalStylesEditNotice() { previewPost, resetGlobalStyles, upgradePlan, - trackEvent, ] ); useEffect( () => { diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/wpcom-global-styles-view.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/wpcom-global-styles-view.js index 34265b77fb2cd..cd1f47cb5d357 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/wpcom-global-styles-view.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/wpcom-global-styles-view.js @@ -1,5 +1,6 @@ -/* global launchBarUserData, JP_CONNECTION_INITIAL_STATE */ -import jetpackAnalytics from '@automattic/jetpack-analytics'; +/* global launchBarUserData */ +import { wpcomTrackEvent } from '../../common/tracks'; + import './wpcom-global-styles-view.scss'; /** @@ -8,11 +9,7 @@ import './wpcom-global-styles-view.scss'; * @param props - {object} Additional props to track. */ function recordEvent( button, props = {} ) { - const { username, id, blogId } = JP_CONNECTION_INITIAL_STATE.userConnectionData.currentUser || {}; - jetpackAnalytics.initialize( id, username, { - blog_id: blogId, - } ); - jetpackAnalytics.tracks.recordEvent( 'wpcom_launchbar_button_click', { + wpcomTrackEvent( 'wpcom_launchbar_button_click', { button, blog_id: launchBarUserData?.blogId, ...props, diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js index b71e6a09cdf71..e1cedc015dceb 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js @@ -1,16 +1,16 @@ /* global wp, wpcomSidebarNotice */ +import { wpcomTrackEvent } from '../../common/tracks'; const wpcomSidebarNoticeRecordEvent = event => { if ( ! event ) { return; } - window._tkq = window._tkq || []; - window._tkq.push( [ - 'identifyUser', + wpcomTrackEvent( + event.name, + event.props, wpcomSidebarNotice.user.ID, - wpcomSidebarNotice.user.username, - ] ); - window._tkq.push( [ 'recordEvent', event.name, event.props ] ); + wpcomSidebarNotice.user.username + ); }; const wpcomShowSidebarNotice = () => {