fix(analytics): migrate back-end GA4 events to front-end

[dkoo]

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:

Deprecates back-end GA4 events, which we've found to be too inaccurate to be useful, possibly due to various caching layers readers might encounter in production sites.

Migrates reader_registered and reader_logged_in events to the front-end, although not with all params that were included on back-end equivalents.

Also fixes a bug where registering via a Registration block directly inside a content gate (as opposed to an auth modal triggered by a link in the content gate) fails to trigger an auto page reload after successful registration.

Also migrates all content gate GA events to the front-end. Note that the parameters passed to these events and some of the values for these parameters differ from the back-end events they replace, notably:

• action_type=paid_membership - This will now be action_type=checkout_button, which matches the parameter value given by modal checkout interaction events. This should make it easier to track conversion rates by filtering events by action_type=checkout_button.
• Donation interactions from within content gates are now tracked with their own parameters.

All events and their parameters are documented in a new README file.

Requires Automattic/newspack-blocks#2103, Automattic/newspack-newsletters#1800, and Automattic/newspack-popups#1424

Supersedes #3805. Closes 1200550061930446/as/1209870698187233.

How to test the changes in this Pull Request:

Content gate events

1. Check out this branch, fix(content-gating): account for block visibility in GA4 params newspack-blocks#2103, feat(reader-data): dispatch reader data activity when reader registered newspack-newsletters#1800, and fix: pass popup ID param through order newspack-popups#1424.
2. Set up a site with Google Analytics + RAS + Woo Memberships with a metered regwall + paywall setup (DM me for instructions on how). The important thing is that the Non-Member Content block shown to anonymous readers contains one or more of the Donate, Registration, or Checkout Button blocks, and the Member Content block shown to registered readers contains the others of those blocks.
3. As an anonymous reader, visit a post that will show the regwall part of the content gate. In Dev Tools > Network look for a collect XHR request that contains a payload that looks like this:

Note the highlighted part of the payload, and confirm that the gate_has_donation_block, gate_has_registration_block, and gate_has_checkout_button params are accurately set to yes or no based on which of those blocks are visible within the content gate. Also note other parameters as described in the README and confirm they're accurate.

4. Register (or log in) via the Registration block inside the content gate to pass the regwall. Confirm that after a couple of seconds, the page reloads automatically to show the full article content.
5. In Dev Tools > Network look for the collect XHR requests with event name reader_registered or reader_logged_in, and confirm their parameters are accurate.
6. View more posts until you see the paywall content gate. In Dev Tools > Network look for the collect XHR requests and confirm that their parameters are accurate.
7. Start modal checkouts from Donation and Checkout Blocks inside the content gate. Again, look for the collect requests and confirm their parameters are accurate.
8. Dismiss the modal checkouts and complete them, and confirm that np_modal_checkout_interaction events are fired for these interactions, and that all events contain a gate_post_id with the content gate's post ID, indicating these checkouts originated from the content gate.
9. Review the src/memberships-gate/README.md file and confirm that it accurately describes the events and their params.

registered & logged_in events

1. Register new reader accounts via the Registration block, Newsletter Subscription Form block, and the auth modal. For the blocks, register accounts via block instances both inside and not inside Campaigns prompts and content gates (note: for the latter you may need to stop the auto-refresh from happening or watch real-time reports in Google Analytics to see this event). Confirm that all registrations result in reader_registered GA events being fired, and that the ones from inside prompts include a popup_id param.
2. Log into an existing account via the auth modal and confirm that it fires a reader_logged_in GA event.
3. Log into an existing account via a magic link and confirm that a GA event fires on the first page view after authenticating.
4. Review the src/reader-activation/README.md file and confirm that it accurately describes the events and their params.

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?

[leogermani]

Almost everything works, the only event I couldn't see was the "action=dismiss". Is it a thing?

Other than that left a comment and let's see if we can align how this and popups measurements work as much as possible

[dkoo]

@leogermani 6f50aa5 and c1abda3 add front-end GA events for reader registrations and logins, as well as a README file describing their params. These events are named the same as the equivalent deprecated back-end events, but don't contain as much data in their params. We can explore adding more data in a separate PR, if needed.

[dkoo]

Almost everything works, the only event I couldn't see was the "action=dismiss". Is it a thing?

For np_gate_interaction events, action=dismissed events are only fired when dismissing the auth modal if it was opened from a page containing a content gate. If dismissing a modal checkout, a np_modal_checkout_interaction event with action=dismissed is fired, and it will include the gate_id param if the checkout started from a content gate.

[leogermani]

A few comments questions from my lates tests:

• the modal_checkout_interaction form_submission_success event doesn't include the gate id. I can only see the gate_id up until form_submission
• I only see the additional params like is_logged_in, is_reader etc, for the np_gate_interaction, but not for the modal_checkout_interaction. Is this expected?
• The refresh after registration worked well, but it didn't refresh the page after a subscription purchase that unlocked the membership.

FInally, I didin't see the reader_registered event being fired after a registration from within the content gate. I thought it could be because of the page redirect, but reading the PR description maybe this is expected?

I'd say that if we can't make sure that we capture ALL reader registrations from all the possible methods, maybe we shouldn't add this event just yet. Same for logged_in... it will generate incomplete stats

[dkoo]

@leogermani this is ready for another review based on the latest discussion:

• No more form_submission_success actions for np_gate_interaction events—the form_submission actions will represent a successful conversion intent
• Improved logic for the auto-reload: the page will auto-reload on gated content only when:
  • Successfully registering a new account, logging into an existing account, or completing a modal checkout transaction
  • Only once all modal overlays have been closed

[github-actions]

Hey @dkoo, 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! ❤️

[matticbot]

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 6.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀