Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add recordTracksEvent for Editor NUX modal #46796

Merged
merged 7 commits into from
Nov 3, 2020
Merged

Add recordTracksEvent for Editor NUX modal #46796

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f3c0e8e
WIP: first attemp at recordTracksEvent for discussion
autumnfjeld Oct 27, 2020
8535be7
NUX modal tracking: add calypso_editor_wpcom_nux_open event
autumnfjeld Oct 30, 2020
d806fa8
NUX modal tracking: add calypso_editor_wpcom_nux_dismiss event
autumnfjeld Oct 30, 2020
f86d098
fire Tracks event on each NuxPage mount with 'slide_number' and 'is_l…
Oct 29, 2020
a5ed74b
Update var pages to nuxPages
autumnfjeld Oct 30, 2020
bb6c67d
Nux page tracking: update track event name to calypso_editor_wpcom_nu…
autumnfjeld Oct 30, 2020
9adc40b
Nux page tracking: pass is_gutenboarding boolean
autumnfjeld Oct 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 33 additions & 5 deletions apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/wpcom-nux.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { recordTracksEvent } from '@automattic/calypso-analytics';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this work on Atomic sites? I have no idea, just thought it would be worth bringing up just in case something is weird there

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hiya @noahtallen Why do you think this wouldn't work on Atomic sites? You probably have some valuable insight that I haven't yet mastered. 😄 Is there a known issue with analytics tracking on Atomic sites?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, I don’t have a specific reason. I’m just used to things not working exactly the same on atomic so it’s always worth checking! I mentioned this because it seems like the sort of library that could theoretically rely on a connection to wpcom or mission control, which is one of the areas that can be different between the two platforms!


/**
* Internal dependencies
Expand Down Expand Up @@ -49,24 +50,43 @@ function WpcomNux() {
isWpcomNuxEnabled && closeGeneralSidebar();
}, [ closeGeneralSidebar, isWpcomNuxEnabled ] );

// Track opening of the NUX Guide
useEffect( () => {
if ( isWpcomNuxEnabled && ! isSPTOpen ) {
recordTracksEvent( 'calypso_editor_wpcom_nux_open', {
is_gutenboarding: window.calypsoifyGutenberg?.isGutenboarding,
} );
}
}, [ isWpcomNuxEnabled, isSPTOpen ] );

if ( ! isWpcomNuxEnabled || isSPTOpen ) {
return null;
}

const dismissWpcomNux = () => setWpcomNuxStatus( { isNuxEnabled: false } );
const dismissWpcomNux = () => {
recordTracksEvent( 'calypso_editor_wpcom_nux_dismiss', {
is_gutenboarding: window.calypsoifyGutenberg?.isGutenboarding,
} );
setWpcomNuxStatus( { isNuxEnabled: false } );
};

/* @TODO: the copy, images, and slides will eventually be the same for all sites. `isGutenboarding` is only needed right now to show the Privacy slide */
const isGutenboarding = !! window.calypsoifyGutenberg?.isGutenboarding;

const nuxPages = getWpcomNuxPages( isGutenboarding );
return (
<Guide
className="wpcom-block-editor-nux"
contentLabel={ __( 'Welcome to your website', 'full-site-editing' ) }
finishButtonText={ __( 'Get started', 'full-site-editing' ) }
onFinish={ dismissWpcomNux }
>
{ getWpcomNuxPages( isGutenboarding ).map( ( nuxPage ) => (
<NuxPage key={ nuxPage.heading } { ...nuxPage } />
{ nuxPages.map( ( nuxPage, index ) => (
<NuxPage
key={ nuxPage.heading }
pageNumber={ index + 1 }
isLastPage={ index === nuxPages.length - 1 }
{ ...nuxPage }
/>
) ) }
</Guide>
);
Expand Down Expand Up @@ -121,7 +141,15 @@ function getWpcomNuxPages( isGutenboarding ) {
].filter( ( nuxPage ) => ! nuxPage.shouldHide );
}

function NuxPage( { alignBottom = false, heading, description, imgSrc } ) {
function NuxPage( { pageNumber, isLastPage, alignBottom = false, heading, description, imgSrc } ) {
useEffect( () => {
recordTracksEvent( 'calypso_editor_wpcom_nux_slide_view', {
slide_number: pageNumber,
is_last_slide: isLastPage,
is_gutenboarding: window.calypsoifyGutenberg?.isGutenboarding,
} );
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [] );
return (
<GuidePage className="wpcom-block-editor-nux__page">
<div className="wpcom-block-editor-nux__text">
Expand Down