feat(analytics): "My Account" dashboard interactions by miguelpeixe · Pull Request #3949 · Automattic/newspack-plugin

miguelpeixe · 2025-04-23T21:01:22Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Dispatch reader data activities and GA4 events on My Account interactions:

Activity	Params	Interaction
`subscription_cancelled`	`subscription_id`	Click and confirm the "Cancel" button on an active subscription page.
`subscription_reactivated`	`subscription_id`	Click the "Reactivate" button on a subscription pending cancellation.
`subscription_switched`	--	Complete the checkout after clicking "Upgrade or Downgrade" on an active variable subscription
`payment_method_deleted`	--	Click "Delete" on a payment method in the "Payment methods" page
`payment_method_added`	`payment_method`: the method gateway (stripe, woocommerce_payments, etc)	Submit a new payment method via the "Payment methods" page
`payment_method_changed`	`subscription_id`, `update_all_subscriptions`	Submit a new payment method for an active subscription.
~~`address_updated`~~*	~~`address_type`: Either `billing` or `shipping`~~	~~Submit an address update via the "Addresses" page~~
`product_reordered`	--	Complete the checkout after clicking "Order again" on a past order from the "Orders" page

The GA event for each activity above is np_{activity}

Update*: The address_updated was removed in favor of GA's native form_submit. For accuracy, the form_name should be billing_address, shipping_address, and edit_account.

This PR also refactors the analytics approach to introduce a few utility functions and reduce repetition.

How to test the changes in this Pull Request:

Confirm the reader_registered and reader_logged_in events continue to work as proposed in fix(analytics): migrate back-end GA4 events to front-end #3895
Test each event described above, following the "Interaction" column of the table, and confirm the activities are dispatched and the GA4 events are pushed

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

dkoo

@miguelpeixe I really like the abstractions you've put in place like registerElementActivity, registerCheckoutActivity, and registerActivityEvent which should make the Reader Data API even more robust and extensible. Thanks for making these changes.

Feedback is inline. I think you mentioned that we should do a review of the event params we want to collect in a separate PR, so I marked a couple of my items as non-blocking.

dkoo · 2025-04-25T23:40:52Z

Also, I neglected to include this interaction in the original proposal, but should we add an activity/event for updating account details?

miguelpeixe · 2025-05-07T19:34:47Z

Also, I neglected to include this interaction in the original proposal, but should we add an activity/event for updating account details?

We could, and that reminds me that this and the address updates are already trackable via GA's form_submit:

Would it be worth looking into enhancing the existing event by populating form_id and form_name instead of a custom event?

dkoo · 2025-05-08T17:16:39Z

Would it be worth looking into enhancing the existing event by populating form_id and form_name instead of a custom event?

That sounds like a solid idea to me, and this could help us cover other form submissions throughout My Account even if we don't write custom events for them.

… edit_account form

miguelpeixe · 2025-05-08T18:31:10Z

Switched the address update strategy to use form_submit with the form_name as billing_address and shipping_address. Also added a form_name for edit_account. 48552e3

Also updated the PR description

dkoo

@miguelpeixe this is working great, and the use of form_submit to capture edit account and address updates is an excellent idea. A couple of minor things I saw and one thing that I think we need to refactor (below, inline).

Not sure if this is related to this changeset, but when submitting updates to Edit Account and Address forms, I see a PHP warning: PHP Warning: Undefined variable $field_values in /var/www/html/wp-content/plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFieldsFrontend.php on line 312. This doesn't seem to affect anything functionally, AFAICT.
Renewing an active subscription from the My Account > My Subscription page fires the same np_product_reordered event as if clicking "Order again" on a past order from the "Orders" page. Should we consider a separate event for subscription renewals, or is it okay to conflate these two actions?

miguelpeixe · 2025-05-08T20:57:27Z

Not sure if this is related to this changeset, but when submitting updates to Edit Account and Address forms, I see a PHP warning: PHP Warning: Undefined variable $field_values in /var/www/html/wp-content/plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFieldsFrontend.php on line 312. This doesn't seem to affect anything functionally, AFAICT.

This seems unrelated to this PR and I'm unable to reproduce (on either trunk or this branch). I think this should be looked at separately.

Renewing an active subscription from the My Account > My Subscription page fires the same np_product_reordered event as if clicking "Order again" on a past order from the "Orders" page. Should we consider a separate event for subscription renewals, or is it okay to conflate these two actions?

Oh, that's unexpected. Great find! I guess we can track that as well then 😄
Added the subscription_renewal_early activity/event containing the subscription_id in 21306c8

dkoo

This seems unrelated to this PR and I'm unable to reproduce (on either trunk or this branch). I think this should be looked at separately.

👍

Added the subscription_renewal_early activity/event containing the subscription_id in 21306c8

Really close now! I'm seeing multiple instances of the np_subscription_renewal_early event when I click "Renew now", load the checkout page with the early renewal, and then finally complete the renewal. I think we should maybe fire only one event when you click the button to complete the renewal transaction, right?

miguelpeixe · 2025-05-09T12:43:00Z

Hm... that's strange, it should be the case because it's implemented via registerCheckoutActivity(), just like the other ones. Taking a closer look.

miguelpeixe · 2025-05-09T13:32:34Z

I'm unable to reproduce the issue. There's no activity attached to the "Renew Now" button, only the checkout. Can you log something at the sendEvent() so we can see exactly at which point multiple events are fired at once?

dkoo

@miguelpeixe I think I see what's happening. If passing element as a string to registerElementActivity(), element becomes an array due to the querySelectorAll, but then the condition for defining the event to listen for assumes element is a single item. What's happening for me is that event is being redefined as click, so every time I click on an input inside the form[name="checkout"] element, it's firing the checkout activity. I think the suggested changes should solve this.

dkoo

Looking good, now! Thanks for the changes!

github-actions · 2025-05-09T19:37:30Z

Hey @miguelpeixe, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

# [6.7.0-alpha.1](v6.6.2...v6.7.0-alpha.1) (2025-05-23) ### Bug Fixes * **404-images:** use JS without modifying content ([#3963](#3963)) ([9f5646b](9f5646b)) * add missing namespace ([#3980](#3980)) ([6d58793](6d58793)) * **emails:** add missing HTML markup in the change-email-cancel template ([#3981](#3981)) ([040ae30](040ae30)) * **ga4:** fire login/registration activities via SSO ([#3965](#3965)) ([8c97515](8c97515)) * hide modal content gate when modal checkout is opened ([#3953](#3953)) ([a503973](a503973)) * **jetpack:** handle the related posts max age option ([#3964](#3964)) ([8aad2b8](8aad2b8)) * make sure fix duplcate fields apply filters ([#3971](#3971)) ([f361a4e](f361a4e)) * namespace Lite Site ([#3975](#3975)) ([e4665ae](e4665ae)) * sync correction status with parent post status ([#3978](#3978)) ([dcd5a12](dcd5a12)) ### Features * add compatibility to network in custom bylines ([#3972](#3972)) ([199a993](199a993)) * add icons repository and remove custom icons ([#3883](#3883)) ([e56d2e0](e56d2e0)) * **analytics:** "My Account" dashboard interactions ([#3949](#3949)) ([22e9590](22e9590)) * **donations:** update notice style and type ([#3962](#3962)) ([3f60ef3](3f60ef3)) * **email-change:** remove env constant requirement ([#3943](#3943)) ([4158bf1](4158bf1)) * **my-account:** apply Newspack UI styles to My Account w/ env constant ([#3951](#3951)) ([e4aa5a2](e4aa5a2)) * **my-account:** full-site takeover template and custom nav menu ([#3974](#3974)) ([5cf8403](5cf8403)) * **woocommerce:** log error notices ([#3952](#3952)) ([1654007](1654007))

matticbot · 2025-05-23T15:46:13Z

🎉 This PR is included in version 6.7.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.7.0](v6.6.4...v6.7.0) (2025-06-02) ### Bug Fixes * **404-images:** use JS without modifying content ([#3963](#3963)) ([9f5646b](9f5646b)) * add missing namespace ([#3980](#3980)) ([6d58793](6d58793)) * **emails:** add missing HTML markup in the change-email-cancel template ([#3981](#3981)) ([040ae30](040ae30)) * **ga4:** fire login/registration activities via SSO ([#3965](#3965)) ([8c97515](8c97515)) * hide modal content gate when modal checkout is opened ([#3953](#3953)) ([a503973](a503973)) * **jetpack:** handle the related posts max age option ([#3964](#3964)) ([8aad2b8](8aad2b8)) * make sure fix duplcate fields apply filters ([#3971](#3971)) ([f361a4e](f361a4e)) * namespace Lite Site ([#3975](#3975)) ([e4665ae](e4665ae)) * prevent auto-publishing corrections when scheduling posts ([#4006](#4006)) ([7531832](7531832)) * sync correction status with parent post status ([#3978](#3978)) ([dcd5a12](dcd5a12)) ### Features * add compatibility to network in custom bylines ([#3972](#3972)) ([199a993](199a993)) * add icons repository and remove custom icons ([#3883](#3883)) ([e56d2e0](e56d2e0)) * **analytics:** "My Account" dashboard interactions ([#3949](#3949)) ([22e9590](22e9590)) * **donations:** update notice style and type ([#3962](#3962)) ([3f60ef3](3f60ef3)) * **email-change:** remove env constant requirement ([#3943](#3943)) ([4158bf1](4158bf1)) * **my-account:** apply Newspack UI styles to My Account w/ env constant ([#3951](#3951)) ([e4aa5a2](e4aa5a2)) * **my-account:** full-site takeover template and custom nav menu ([#3974](#3974)) ([5cf8403](5cf8403)) * **woocommerce:** log error notices ([#3952](#3952)) ([1654007](1654007))

matticbot · 2025-06-02T19:34:46Z

🎉 This PR is included in version 6.7.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

miguelpeixe added 7 commits April 23, 2025 18:01

feat(analytics): "My Account" dashboard interactions

8c44b53

feat: register element activity abstraction

c892465

feat: add more activities

9558a92

feat: address_updated

2d65008

chore: readability tweaks

596e502

feat: product_reordered

38ad05b

fix: register product reordered ga event

5874b4a

miguelpeixe self-assigned this Apr 24, 2025

miguelpeixe added the [Status] Needs Review The issue or pull request needs to be reviewed label Apr 24, 2025

miguelpeixe marked this pull request as ready for review April 24, 2025 19:14

miguelpeixe requested a review from a team as a code owner April 24, 2025 19:14

miguelpeixe requested a review from dkoo April 24, 2025 19:14

miguelpeixe added 2 commits April 24, 2025 17:07

chore: cleanup

9e17595

chore: fix docblock

b49c6e4

dkoo requested changes Apr 25, 2025

View reviewed changes

miguelpeixe added 2 commits May 6, 2025 16:07

fix: prevent empty parameters and remove referrer

ac05a08

fix: prevent payment method being interpreted as switch sub page

674ac1b

miguelpeixe added 3 commits May 7, 2025 17:48

feat: add order_id and product_id to product_reordered

fd0697a

feat: add subscription_id to subscription switch

1027bfe

feat: add upgraded_or_downgraded to subscription switch

cc5e0ec

miguelpeixe requested a review from dkoo May 7, 2025 21:16

feat: switch address submit to native form_submit event and support…

48552e3

… edit_account form

dkoo requested changes May 8, 2025

View reviewed changes

Comment thread src/utils/index.js Outdated

miguelpeixe added 2 commits May 8, 2025 17:42

fix: select all elements for element activity

69df8db

feat: subscription_renewal_early

21306c8

miguelpeixe requested a review from dkoo May 8, 2025 22:12

dkoo requested changes May 8, 2025

View reviewed changes

dkoo reviewed May 9, 2025

View reviewed changes

Comment thread src/utils/index.js Outdated

fix: event detection

39625d5

miguelpeixe requested a review from dkoo May 9, 2025 18:49

dkoo approved these changes May 9, 2025

View reviewed changes

github-actions Bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels May 9, 2025

miguelpeixe merged commit 22e9590 into trunk May 9, 2025
10 checks passed

miguelpeixe deleted the feat/analytics-my-account-interactions branch May 9, 2025 19:37

github-actions Bot added the needs-changelog label May 9, 2025

miguelpeixe removed the needs-changelog label May 12, 2025

matticbot added the released on @alpha label May 23, 2025

matticbot added the released label Jun 2, 2025

Conversation

miguelpeixe commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

dkoo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dkoo commented Apr 25, 2025

Uh oh!

miguelpeixe commented May 7, 2025

Uh oh!

dkoo commented May 8, 2025

Uh oh!

miguelpeixe commented May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dkoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

miguelpeixe commented May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dkoo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

miguelpeixe commented May 9, 2025

Uh oh!

miguelpeixe commented May 9, 2025

Uh oh!

dkoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dkoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 9, 2025

Uh oh!

matticbot commented May 23, 2025

Uh oh!

matticbot commented Jun 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

miguelpeixe commented Apr 23, 2025 •

edited

Loading

dkoo left a comment •

edited

Loading

miguelpeixe commented May 8, 2025 •

edited

Loading

miguelpeixe commented May 8, 2025 •

edited

Loading

dkoo left a comment •

edited

Loading