Feature Description

This issue will implement the rendering of the new widget area and navigation chip if conversion events are detected on a site.

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

Acceptance criteria

• When any of the five conversion events (purchase, add_to_cart, submit_lead_form, contact, generate_lead) are "detected" on a site, then a new Site Goals widget area should be rendered between the Traffic and Content areas.
• If any of purchase or add_to_cart events are detected, then an empty "Online store performance" widget should be rendered within the new widget area.
• If any of submit_lead_form, contact or generate_lead events are detected, then an empty "Lead generation performance" widget should be rendered within the new widget area.
• Both of the above widgets should be rendered simultaneously if their respective conditions are met.
• A new "Site goals" navigations chip should also be rendered and clicking on it should navigate the user to the new Site Goals widget area.
• The title should be "Site Goals" and sub title should be "See how your site is helping you reach your business objectives".

Implementation Brief

New selector for determining type of events (ecommerce or lead)

• In assets/js/modules/analytics-4/datastore/constants.js: Create a new enum array for CONVERSION_REPORTING_ECOMMERCE_EVENTS with purchase and add_to_cart events.
• In assets/js/modules/analytics-4/datastore/conversion-reporting.js: Create two new selectors that return if there are any ecommerce or lead events detected respectively. Use the getDetectedEvents from the modules/analytics-4 datastore partial and check if they include any of the events within the two enums CONVERSION_REPORTING_ECOMMERCE_EVENTS and CONVERSION_REPORTING_LEAD_EVENTS respectively.

Registering the context, area and widgets

• In assets/js/googlesitekit/widgets/default-contexts.js: define and add a new CONTEXT_MAIN_DASHBOARD_GOALS.
• In assets/js/googlesitekit/widgets/default-areas.js: define and add a new AREA_MAIN_DASHBOARD_GOALS_PRIMARY.
• In assets/js/googlesitekit/widgets/register-defaults.js: register a new Widget Area with the context and area created above. Add the title and subtitle should be as per the AC.
• In assets/js/modules/analytics-4/components/: Create a new folder for site-goals.
  • Create another folder for widgets.
  • Add two new components, OnlineStorePerformanceWidget and LeadGenerationPerformanceWidget: In each, use the new selectors to check if their respective events are returned. If yes, return just a title as per the AC for the widget using the Widget (WidgetHeaderTitle) component, otherwise return WidgetNull.
• In assets/js/modules/analytics-4/widgets/index.js: Register the two new widgets using the area and components above.

Navigation chip

• In assets/js/components/DashboardNavigation/Navigation/index.js:
  • Add the goals navigation chip following existing patterns.
  • Update the assets/js/components/DashboardNavigation/Navigation/hooks/useVisibleSections.js hook to check if any events are detected or else, hide the new Goals chip.

Test Coverage

• Add JSUnit tests to test the conditional rendering of Site Goals widgets.

QA Brief

• Without the siteGoals feature flag enabled, verify the new Site Goals area and chip DO NOT appear.
• In the tester plugin, keep the flag disabled but go to Analytics -> Conversion Reporting and select the Force detected events menu. And select any of the detected events there. Verify the area and chip still DO NOT appear.
• Now enable the feature flag, and verify the area and chip does appear.
• Test the combination of the Lead and Ecommerce events in the tester plugin and verify that the appropriate widget titles appear as mentioned in the ACs.

Changelog entry

• Add the new Site Goals section.