Add GA events for "Top Earning Pages" widget

[tofumatt]

Feature Description

GA events (eg. trackEvent calls) should be added to the new GA4-powered "Top Earning Pages" widget in its "setup"/CTA version. There should be one when a user views the widget, and one when they click the "Learn more" link in the widget, which serves as the CTA button.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• When the "Top Earning Pages" widget is showing a CTA to connect AdSense (see screenshot below), the following trackEvent calls should be made:
  • trackEvent( `${viewContext}_top-earning-pages-widget`, 'view_notification' ) when the widget is scrolled into view/is seen by the user (not when the component is mounted, but when it is seen)
  • trackEvent( `${viewContext}_top-earning-pages-widget`, 'click_learn_more_link' ) when the user clicks the "Learn more" link
• When the "Top Earning Pages" widget is setup, the following trackEvent calls should be made:
  • trackEvent( `${viewContext}_top-earning-pages-widget`, 'view_widget' ) when the widget is scrolled into view/is seen by the user (not when the component is mounted, but when it is seen)

CTA widget screenshot:

Implementation Brief

• [x] In assets/js/googlesitekit/widgets/components/Widget.js:
  • [x] Extend the Widget component using forwardRef and pass the received ref to the div.googlesitekit-widget element.
• [x] In assets/js/modules/analytics-4/components/common/AdSenseLinkCTA.js:
  • [x] Add a new function prop named onClick with an empty function as default.
  • [x] Pass this onClick function to a new onClick prop in the rendered CTA component.
• [x] In assets/js/modules/adsense/components/dashboard/DashboardTopEarningPagesWidgetGA4.js:
  • [x] Using the useRef hook, add a ref to the rendered Widget components (for both Widget components that renders AdSenseLinkCTA and the unconditionally rendered widget content).
  • [x] Use the useEffect hook similar to the assets/js/components/KeyMetrics/KeyMetricsCTAContent.js component and find out if the component is in view (for the first time). See: https://github.com/google/site-kit-wp/blob/5913a7fde140271d2ad64b02a5c34505d97e59a2/assets/js/components/KeyMetrics/KeyMetricsCTAContent.js#L69-L91.
    • [x] If the widget is in view (for the first time):
      • [x] If AdSense is not linked and it is not a view-only user, track the view_notification event in the ${viewContext}_top-earning-pages-widget category.
      • [x] If AdSense is linked, track the view_widget event in the ${viewContext}_top-earning-pages-widget category.
  • [x] In the rendered AdSenseLinkCTA component, add an onClick prop. In the onClick prop function, track the click_learn_more_link event in the ${viewContext}_top-earning-pages-widget category.

Test Coverage

• No tests need to be added/updated.

QA Brief

• Install the Google Analytics Debugger extension for your browser.
• Enable the ga4AdSenseIntegration feature flag.
• Enable tracking in the plugin admin settings.
• Verify that events mentioned in AC are triggered correctly when AdSense is not linked to Analytics and when it's linked.

To QA the linked state before #8049 is merged you can run googlesitekit.data.dispatch('modules/analytics-4').setAdSenseLinked(true) in the developer console and you will see the widgets load the report data if there are earnings for your test site and you can test the tracking events in this state.

Changelog entry

• Add tracking events for "Top Earning Pages" widget.

[ivonac4]

@tofumatt do you mind adding an estimate to this ticket if possible?

[eugene-manuilov]

• [ ] Using the useRef hook, add a ref to the rendered Widget components (for both Widget components that renders AdSenseLinkCTA and the unconditionally rendered widget content).

@nfmohit, why not to implement event tracking in the CTA itself? The same way how we do it in the KeyMetricsCTAContent component. In this case, we won't need to change the Widget component.

In assets/js/googlesitekit/widgets/components/Widget.js:

• [ ] Accept additional (spread) props in the Widget component and pass any additional props passed into Widget to the div.googlesitekit-widget element.

If we really need this, then the component should be updated using the forwardRef approach. https://react.dev/reference/react/forwardRef

• In the rendered AdSenseLinkCTA component, add an onClick prop and track the click_learn_more_link event according to the ACs.

Let's expand this a little bit more and add more details to make sure that we have an agreement as to what we mean by "according to the ACs".

[nfmohit]

Hi @eugene-manuilov. As discussed, I have mentioned the usage of forwardRef, and addressed other feedback. IB updated, thank you!

[eugene-manuilov]

Ok, thanks. IB ✔️

[benbowler]

I have been working on this today and have implemented it with one small addition to the IB; updating assets/js/googlesitekit/widgets/util/get-widget-component-props.js to forward the ref through to the underlaying Widget component.

However while testing this I found that if I scrolled down on the dashboard slowly the event would not trigger. It would only trigger if I scrolled to this section quickly, or clicked on "Monetization" then scrolled down from there. (I have a video I can share of this occurring I will share directly).

Debugging this a little, it seems the DashboardTopEarningPagesWidgetGA4 component does not get the updated node reference to the underlaying Widget in this case as it's not rendered immediately and useRef does not trigger re-rendering when the underlaying node is created.

I could not repeat this bug with the /DashboardPageSpeed widget.

---

I began looking at using useCallback instead of useRef, as in this React doc, to get the updated node, however this would not work with the useIntersection hook so would required much additional work.

The simplest solution would instead to wrap the components with <div ref={ trackingRef }></div>, within the DashboardTopEarningPagesWidgetGA4, avoiding the use of forwardRef entirely.

---

@tofumatt @eugene-manuilov, what is the best approach in your view?

[tofumatt]

Huh, good catch!

The simplest solution would instead to wrap the components with <div ref={ trackingRef }></div>, within the DashboardTopEarningPagesWidgetGA4, avoiding the use of forwardRef entirely.

Which components would need wrapping exactly? We need Widget/WidgetNull to be the top-level components that are returned for the widget layout code to work, but if you need to wrap anything insight I don't have a problem with that. 👍🏻

[benbowler]

I've tried wrapping the internals of both of the Widgets with <div ref={ trackingRef }></div>, however the same bug occurs. trackingRef does not pass the correct dom element to IntersectionObserver.

The way I could resolve this was to intercept the ref function and force the DashboardTopEarningPagesWidgetGA4 component to re-render when it received the DOM element:

https://github.com/google/site-kit-wp/blob/034818eb3c27089d23bcf6a17eaa1b0568de8765/assets/js/modules/adsense/components/dashboard/DashboardTopEarningPagesWidgetGA4.js#L125-L135

Over to CR now.

[mohitwp]

QA Update ⚠️

• Tested on dev environment.
• Verified that View_notification and 'click_learn_more_link' events are getting trigger as per AC.

@benbowler Since https://github.com/google/site-kit-wp/issues/8049 has not been merged yet we are using the code snippet provided under QAB to load the widget. However, I have noticed that when users view the 'Top earning pages' widget then event 'view_widget' is not being triggered. . Could you please investigate whether the event is not being triggered because we are forcibly displaying it through the code snippet, or if it is actually an issue with the event not being triggered under any circumstances?

`View_notification`   `'click_learn_more_link'`  

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified that View_notification and 'click_learn_more_link' and 'view_widget' events are getting trigger as per AC.

`View_notification`   `'click_learn_more_link'`   `'view_widget'`