Add GA event tracking for the "Top content" metric area of an Audience Tile

[techanvil]

Feature Description

GA events should be added to keep track of interaction with the "Top content" metric area of an Audience Tile.

---

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

Acceptance criteria

The following GA events should be tracked for the given actions. See the GA events sheet.

Event Name	Category	Trigger	Condition
view_cta	{viewContext}_audiences-top-content-cta	Element visibility	User views the "Update" CTA for creating the custom dimension for "Top content" on a tile
create_custom_dimension	{viewContext}_audiences-top-content-cta	Click	User clicks the "Update" CTA
auth_error	{viewContext}_audiences-top-content-cta	Element visibility	User views the OAuth error modal on the dashboard when an error occurs in response to clicking the CTA
auth_error_retry	{viewContext}_audiences-top-content-cta	Click	User clicks "Retry" on the modal
auth_error_cancel	{viewContext}_audiences-top-content-cta	Click	User clicks "Cancel" on the modal
insufficient_permissions_error	{viewContext}_audiences-top-content-cta	Element visibility	User views the insufficient permissions error modal on the dashboard when an error occurs in response to clicking the CTA
insufficient_permissions_error_request_access	{viewContext}_audiences-top-content-cta	Click	User clicks "Request access" on the modal
insufficient_permissions_error_cancel	{viewContext}_audiences-top-content-cta	Click	User clicks "Cancel" on the modal
setup_error	{viewContext}_audiences-top-content-cta	Element visibility	User views the generic error modal on the dashboard when an error occurs in response to clicking the CTA
setup_error_retry	{viewContext}_audiences-top-content-cta	Click	User clicks "Retry" on the modal
setup_error_cancel	{viewContext}_audiences-top-content-cta	Click	User clicks "Cancel" on the modal

Implementation Brief

• Extract the conditional JSX block containing the Update CTA from the AudienceTilePagesMetricContent component to a new component e.g. CreateCustomDimensionCTA.
  • Wrap the CreateCustomDimensionCTA component in forwardRef() so a ref can be passed to it, and add the ref to its top-level rendered element.
• In the AudienceTilePagesMetricContent component:
  • Create a version of CreateCustomDimensionCTA wrapped by the withIntersectionObserver() HOC, e.g. CreateCustomDimensionCTAWithIntersectionObserver. Render this in place of the existing CreateCustomDimensionCTA instance.
  • Add an onInView callback prop to CreateCustomDimensionCTAWithIntersectionObserver. In the callback, call trackEvent( '${viewContext}_audiences-top-content-cta', 'view_cta' ).
  • Create a handleCreateCustomDimension() callback:
    • Call trackEvent( '${viewContext}_audiences-top-content-cta', 'create_custom_dimension' ), followed by onCreateCustomDimension(). Chain the two calls using .finally().
  • Pass handleCreateCustomDimension to CreateCustomDimensionCTAWithIntersectionObserver instead of onCreateCustomDimension.
• In the ModalDialog component:
  • Add an optional onOpen prop of type PropTypes.func, and pass the prop to the rendered Dialog component.
  • Pass the existing handleConfirm prop through to the Button instance that is rendered when buttonLink is provided.
• In the AudienceErrorModal component:
  • Add a trackEventCategory prop of type PropTypes.string.
  • Add an onOpen callback prop to ModalDialog:
    • Determine the action for the GA event: auth_error for an OAuth error, insufficient_permissions_error for an insufficient permissions error, or setup_error for any other error.
    • In the callback, call trackEvent( trackEventCategory, action ).
  • Create a handleConfirm callback:
    • Determine the action for the GA event: auth_error_retry for an OAuth error, insufficient_permissions_error_request_access for an insufficient permissions error, or setup_error_retry for any other error.
    • Call trackEvent( trackEventCategory, action ), followed by onRetry() unless the error is an insufficient permissions error. Chain the two calls using .finally().
  • Replace onRetry with handleConfirm as the value for the handleConfirm prop that is passed to ModalDialog.
  • Create a handleDialog callback:
    • Determine the action for the GA event: auth_error_cancel for an OAuth error, insufficient_permissions_error_cancel for an insufficient permissions error, or setup_error_cancel for any other error.
    • Call trackEvent( trackEventCategory, action ), followed by onCancel(). Chain the two calls using .finally().
  • Replace onCancel with handleDialog as the value for the handleDialog prop that is passed to ModalDialog.
• In the AudienceTilePagesMetric component:
  • Pass the trackEventCategory prop to AudienceErrorModal with the value ${viewContext}_audiences-top-content-cta.

Test Coverage

• Add JS test coverage for the above changes where tests exist for the affected components.

QA Brief

CTA events

• Set up Site Kit with the audienceSegmentation feature flag enabled, tracking enabled, and Analytics connected using a property which is out of the gathering data state.
• Click on Enable groups to set up Audience Segmentation.
• Archive the googlesitekit_post_type custom dimension in Analytics.
• Back on Site Kit, clear session storage and refresh the page. Verify the Update CTA appears in the "Top content" metric area for the audience tile(s).
• Using a mechanism for checking tracked Analytics events, e.g. Tag Assistant or the Google Analytics Debugger Chrome extension, verify the view_cta event is tracked as per the AC.
• Click on an Update CTA and verify the create_custom_dimension event is tracked as per the AC.

Error Modal events

OAuth error

• Follow the steps above to show the Update CTA for the audiences tile(s).
• Delete the {db_prefix}_googlesitekit_additional_auth_scopes entry from the {db_prefix}_usermeta table and refresh the page to ensure the edit scope is needed.
• Click on an Update CTA to enter the OAuth flow. Cancel out of the OAuth flow to return to Site Kit with an OAuth error.
• Verify the auth_error event is tracked as per the AC.
• Click Retry on the error modal and verify the auth_error_retry event is tracked as per the AC.
• Cancel the OAuth flow again to re-show the error modal. Click Cancel on the modal and verify the auth_error_cancel event is tracked as per the AC.

Insufficient permissions error

• Either use a connected GA property which you only have view access to, or simulate the insufficient permissions error using the following Tweak Chrome extension configuration:
  • URL: .*/wp-json/google-site-kit/v1/modules/analytics-4/data/create-custom-dimension.*
  • Enable the use of regular expression (.*)
  • HTTP Method: POST
  • Status code: 403
  • Response payload:

    {
      "code": 403,
      "message": "Insufficient Permissions Test Error",
      "data": {
        "status": 403,
        "reason": "insufficientPermissions"
      }
    }

• Follow the steps above to show the Update CTA for the audiences tile(s).
• Click on an Update CTA. Proceed through the OAuth flow if necessary. Upon returning to Site Kit the error modal should appear showing the insufficient permissions error message.
• Verify the insufficient_permissions_error event is tracked as per the AC.
• Click Request access on the modal and verify the insufficient_permissions_error_request_access event is tracked as per the AC.
• Click Cancel on the modal and verify the insufficient_permissions_error_request_cancel event is tracked as per the AC.

Generic error

• Simulate an API error other than the insufficient permissions error, for example a 500 error using the following Tweak configuration:
  • URL: .*/wp-json/google-site-kit/v1/modules/analytics-4/data/create-custom-dimension.*
  • Enable the use of regular expression (.*)
  • HTTP Method: POST
  • Status code: 500
  • Response payload:

    {
      "code": "internal_server_error",
      "message": "Internal server error",
      "data": {
        "status": 500
      }
    }

• Follow the steps above to show the Update CTA for the audiences tile(s).
• Click on an Update CTA. Proceed through the OAuth flow if necessary. Upon returning to Site Kit the error modal should appear showing the generic error message.
• Verify the setup_error event is tracked as per the AC.
• Click Retry on the modal and verify the setup_error_retry event is tracked as per the AC.
• Click Cancel on the modal and verify the setup_error_request_cancel event is tracked as per the AC.

Changelog entry

[nfmohit]

Thank you for drafting the IB, @techanvil !

In the AudienceTilePagesMetric component:

• Pass the trackEventProperty prop AudienceErrorModal with the value ${viewContext}_audiences-top-content-cta.

Just to confirm, did you mean trackEventCategory instead of trackEventProperty?

Also, do you think it might be worth bumping up the estimate for this one by a notch considering the slightly wider surface area?

Thanks!

[techanvil]

I certainly did, thanks for another catch! I've fixed the typo, and bumped the estimate too, that SGTM. Back over to you, cheers!

[nfmohit]

Thank you Tom! IB ✅