Add custom tracking tool to keep using calypso_ and wpcom_ events

Automattic · Jul 16, 2024 · cdb2074 · cdb2074
1 parent ecce328
commit cdb2074
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 37 deletions.
diff --git a/projects/packages/jetpack-mu-wpcom/src/common/tracks.js 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
@@ -1,19 +1,18 @@
 /* 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';
 
 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
@@ -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,20 +118,19 @@ function GlobalStylesEditNotice() {
 		[ canvas ]
 	);
 	const { previewPostWithoutCustomStyles, canPreviewPost } = usePreview();
-	const trackEvent = useTrackEvent();
 
 	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );
 	const { editEntityRecord } = useDispatch( 'core' );
 
 	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/...ts/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/wpcom-global-styles-view.js b/...ts/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
@@ -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 = () => {