Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add event tracking for SendPreviewEmail and KeyboardShortcuts components

Browse Source 
MAILPOET-6365
This commit is contained in:
Oluwaseun Olorunsola
2024-12-19 22:29:28 +01:00
committed by Oluwaseun Olorunsola
parent 6f9211ca57
commit 150403f158
3 changed files with 57 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/email-editor/src/components/keybord-shortcuts/index.tsx
View File

@@ -7,6 +7,7 @@ import {
} from '@wordpress/keyboard-shortcuts';
import { __ } from '@wordpress/i18n';
import { storeName } from '../../store';
import { recordEvent } from '../../events';
// See:
// https://github.com/WordPress/gutenberg/blob/9601a33e30ba41bac98579c8d822af63dd961488/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -78,10 +79,12 @@ export function KeyboardShortcuts(): null {
}, [ registerShortcut ] );
useShortcut( 'mailpoet/email-editor/toggle-fullscreen', () => {
recordEvent( 'keyboard_shortcuts_toggle_fullscreen' );
void toggleFeature( 'fullscreenMode' );
} );
useShortcut( 'mailpoet/email-editor/toggle-sidebar', ( event ) => {
recordEvent( 'keyboard_shortcuts_toggle_sidebar' );
event.preventDefault();
if ( isSidebarOpened ) {
@@ -92,6 +95,7 @@ export function KeyboardShortcuts(): null {
} );
useShortcut( 'mailpoet/email-editor/save', ( event ) => {
recordEvent( 'keyboard_shortcuts_save' );
event.preventDefault();
if ( ! hasEdits || isSaving ) {
return;

55
packages/js/email-editor/src/components/preview/send-preview-email.tsx
View File

@@ -6,6 +6,7 @@ import {
useEffect,
useRef,
createInterpolateElement,
memo,
} from '@wordpress/element';
import { ENTER } from '@wordpress/keycodes';
import { isEmail } from '@wordpress/url';
@@ -15,8 +16,9 @@ import {
SendingPreviewStatus,
storeName,
} from '../../store';
import { recordEvent, recordEventOnce } from '../../events';
export function SendPreviewEmail() {
function RawSendPreviewEmail() {
const sendToRef = useRef( null );
const {
@@ -45,12 +47,16 @@ export function SendPreviewEmail() {
);
};
const closeCallback = () => togglePreviewModal( false );
const closeCallback = () => {
recordEvent( 'send_preview_email_modal_closed' );
void togglePreviewModal( false );
};
// We use this effect to focus on the input field when the modal is opened
useEffect( () => {
if ( isModalOpened ) {
sendToRef.current?.focus();
recordEvent( 'send_preview_email_modal_opened' );
}
}, [ isModalOpened ] );
@@ -85,6 +91,11 @@ export function SendPreviewEmail() {
href="admin.php?page=mailpoet-settings#mta"
target="_blank"
rel="noopener noreferrer"
onClick={ () =>
recordEvent(
'send_preview_email_modal_check_sending_method_configuration_link_clicked'
)
}
/>
),
}
@@ -107,6 +118,11 @@ export function SendPreviewEmail() {
key="sign-up-for-free"
target="_blank"
rel="noopener noreferrer"
onClick={ () =>
recordEvent(
'send_preview_email_modal_sign_up_for_mailpoet_sending_service_link_clicked'
)
}
/>
),
}
@@ -128,6 +144,11 @@ export function SendPreviewEmail() {
href="https://www.mail-tester.com/"
target="_blank"
rel="noopener noreferrer"
onClick={ () =>
recordEvent(
'send_preview_email_modal_send_test_email_to_mail_tester_link_clicked'
)
}
/>
),
link2: (
@@ -136,6 +157,11 @@ export function SendPreviewEmail() {
href="https://kb.mailpoet.com/article/147-test-your-spam-score-with-mail-tester"
target="_blank"
rel="noopener noreferrer"
onClick={ () =>
recordEvent(
'send_preview_email_modal_learn_more_about_mail_tester_link_clicked'
)
}
/>
),
}
@@ -145,12 +171,18 @@ export function SendPreviewEmail() {
label={ __( 'Send to', 'mailpoet' ) }
onChange={ ( email ) => {
void updateSendPreviewEmail( email );
recordEventOnce(
'send_preview_email_modal_send_to_field_updated'
);
} }
onKeyDown={ ( event ) => {
const { keyCode } = event;
if ( keyCode === ENTER ) {
event.preventDefault();
handleSendPreviewEmail();
recordEvent(
'send_preview_email_modal_send_to_field_key_code_enter'
);
}
} }
value={ previewToEmail }
@@ -165,12 +197,25 @@ export function SendPreviewEmail() {
</p>
) : null }
<div className="mailpoet-send-preview-modal-footer">
<Button variant="tertiary" onClick={ closeCallback }>
<Button
variant="tertiary"
onClick={ () => {
recordEvent(
'send_preview_email_modal_close_button_clicked'
);
closeCallback();
} }
>
{ __( 'Close', 'mailpoet' ) }
</Button>
<Button
variant="primary"
onClick={ handleSendPreviewEmail }
onClick={ () => {
handleSendPreviewEmail();
recordEvent(
'send_preview_email_modal_send_test_email_button_clicked'
);
} }
disabled={
isSendingPreviewEmail || ! isEmail( previewToEmail )
}
@@ -183,3 +228,5 @@ export function SendPreviewEmail() {
</Modal>
);
}
export const SendPreviewEmail = memo( RawSendPreviewEmail );

8
packages/js/email-editor/src/store/actions.ts
View File

@@ -67,7 +67,6 @@ export function updateSendPreviewEmail( toEmail: string ) {
export const openSidebar =
( key = mainSidebarDocumentTab ) =>
( { registry } ): unknown => {
recordEvent( 'editor-sidebar-opened' );
return registry
.dispatch( interfaceStore )
.enableComplementaryArea( storeName, key );
@@ -76,8 +75,6 @@ export const openSidebar =
export const closeSidebar =
() =>
( { registry } ): unknown => {
recordEvent( 'editor-sidebar-closed' );
return registry
.dispatch( interfaceStore )
.disableComplementaryArea( storeName );
@@ -148,7 +145,6 @@ export function* updateEmailMailPoetProperty( name: string, value: string ) {
},
}
);
recordEvent( 'updated-mailpoet-email-property', { postId } );
}
export const setTemplateToPost =
@@ -199,9 +195,9 @@ export function* requestSendingNewsletterPreview(
isSendingPreviewEmail: false,
},
};
recordEvent( 'sent-preview-email', { postId, email } );
recordEvent( 'sent_preview_email', { postId, email } );
} catch ( errorResponse ) {
recordEvent( 'error-sent-preview-email', { email } );
recordEvent( 'sent_preview_email_error', { email } );
yield {
type: 'CHANGE_PREVIEW_STATE',
state: {