Wp-calypso: Add tracking to Editing Toolkit NUX

[ramonjd]

Let's add the following tracking to the NUX modal:

• When it loads and appears to the user (include the current flow, e.g. isGutenboarding)
• When it's dismissed
• When a user interacts with it, sending some information about the requested slide as well.

We can important recordTracksEvent into the module (I think)

import { recordTracksEvent } from '@automattic/calypso-analytics';

Context p1603408699056900-slack-CRNF6A9DX

[ramonjd]

When a user interacts with it, sending some information about the requested slide as well.

This might require an extension to the <Guide /> component, so maybe it can be a nice to have for now.

https://github.com/WordPress/gutenberg/tree/master/packages/components/src/guide

[autumnfjeld]

When a user interacts with it, sending some information about the requested slide as well.

@ramonjd Do you mean the "Next" and "Previous" buttons? Those two buttons and the final "Ge Started" button are the only UI elements the user can interact with, as far as I can tell.
Screenshot here: https://d.pr/i/2ejA1c

[ramonjd]

Do you mean the "Next" and "Previous" buttons? Those two buttons and the final "Ge Started" button are the only UI elements the user can interact with, as far as I can tell.

Thanks! Looks to be the case. As far as I can tell we can't track them without some hook into the core package (Guide), so it's something we can think about for the new Onboarding Experience. It might be helpful to know which content slides the user sees. 👍

[razvanpapadopol]

When a user interacts with it, sending some information about the requested slide as well.

What about recording an event when mounting NuxPage component so we track if the user got to slide 1/2/3/4 ?

[ramonjd]

What about recording an event when mounting NuxPage component so we track if the user got to slide 1/2/3/4 ?

Thanks for the idea @razvanpapadopol!

Do you know if there is an obvious way to do that?

I see that we're mapping over the array of nux pages .

We'll test, but do you think it's a matter of adding something like:

function NuxPage( { alignBottom = false, heading, description, imgSrc } ) {
      useEffect(() => {
          recordTracksEvent( 'calypso_ha_ha_ha', {title: heading } );
      }, []);
    return (
....

[razvanpapadopol]

Do you know if there is an obvious way to do that?

I see that we're mapping over the array of nux pages .

We'll test, but do you think it's a matter of adding something like:

function NuxPage( { alignBottom = false, heading, description, imgSrc } ) {
useEffect(() => {
recordTracksEvent( 'calypso_ha_ha_ha', {title: heading } );
}, []);
return (
....

Yup! Exactly that is what I had in mind 👍

Here is a fully-working draft PR: https://github.com/Automattic/wp-calypso/pull/46898
Please note that we're interested to see especially if the user got to the last slide.

@autumnfjeld feel free to bring it in https://github.com/Automattic/wp-calypso/pull/46796 or take over and merge separately since it's adding a different event (tracking each individual page and not the entire NUX modal).

[autumnfjeld]

@razvanpapadopol Thanks for the draft PR and the input!! Finally got a working version with everyone's efforts. :). https://github.com/Automattic/wp-calypso/pull/46796

[autumnfjeld]

Fixed in https://github.com/Automattic/wp-calypso/pull/46796
Just need Editing Toolkit backend deploy