Hook up the Setup Component CTA to create/connect the property and measurement ID

Feature Description

Call the GA4 submitChanges function when the Setup Component CTA is clicked. This function will create the property and/or measurement ID and connect them.

For the “no existing GA4 property” variants, i.e when the CTA is Create property, ensure the GA4 propertyID is set to PROPERTY_CREATE prior to calling submitChanges.

Modify the BannerNotification component to allow the Button with Spinner to be used for the CTA button and show the spinner while the API calls made by submitChanges are in progress.

If an error occurs, display the error message in the banner.

• Design Doc: https://docs.google.com/document/d/1DeWo38lcV7lvLFfcmt-mQ0iaxzB4qfiPArs_yZzYkIM/edit#heading=h.2g0r7ejoqctz
• Figma: https://www.figma.com/file/vMaCWwr6lpk4PrJWb7jIpz/GA4-Banner-Input?node-id=1082%3A1549

---

Acceptance criteria

• When the Setup Component CTA is clicked:
  • The property and measurement ID should be connected.
  • For the “no existing GA4 property”, or when Set up a new property is selected from the dropdown, the property and measurement ID should first be created.
  • When there is otherwise no measurement ID it should be created.
  • The “use snippet” setting should be persisted (i.e. save the GA4 settings).
  • Implementation note: all the above is taken care of by the existing GA4 submitChanges function.
• The spinner should be displayed in the button while the above activity is in progress.
• Any error that occurs should be displayed in the banner according to the design.

Implementation Brief

In assets/js/components/notifications/BannerNotification/index.js:

• Add a new prop, ctaButton, that composes the CTA button.
• Render the ctaButton as children if it’s available. It renders whatever the element is passed. In this case, it would be a Button with a Spinner reusable component, which is being implemented in #5271.
• Otherwise, render the Button and the Spinner components as it is today. https://github.com/google/site-kit-wp/blob/989112d08bcd9fa77067770af94799d4c6d7b754/assets/js/components/notifications/BannerNotification/index.js#L399-L411

The Setup Component is being Implemented in #5270 and #5275. Add the following logic to the Setup Component:

• Create a local state error to store the error object.
• Create a handleSubmitChanges async callback using the useCallback hook with the following:
  • It should submit the changes by dispatching the submitChanges() action of the MODULES_ANALYTICS_4 store.
  • Get the error object from the submitChanges action result.
  • If there is an error, set the error object to the error state.
• If there is an error, display the error message in the banner by rendering the ErrorNotice component and pass the error state to the error prop.
• Compose the “Button with Spinner” component, which is being implemented in #5271, and pass the handleSubmitChanges callback to the onClick prop.
• Pass the above to the ctaButton prop of the BannerNotification component. This will be rendered as the CTA button.

Test Coverage

• No new tests are to be added.

QA Brief

• Ensure that the ga4ActivationBanner feature flag is activated.
• We need to check two different scenarios:
  • No GA4 property available.
  • GA4 properties exist, but not connected.
• To test No GA4 property available:
  • Configure the Analytics module in Site Kit - use an account which does not have GA4 properties associated with it.
  • Go to the Site Kit Dashboard.
  • Click on Set up now in the displayed GA4 Activation Banner.
  • Under the No existing Google Analytics 4 property found heading, if Create Property is clicked, it should show a spinner and create a new GA4 property and measurement ID.
• To test GA4 properties exist, but not connected:
  • Configure the Analytics module in Site Kit - use an account which does have GA4 properties associated with it.
  • Go to the Site Kit Dashboard.
  • Click on Set up now in the displayed GA4 Activation Banner.
  • Under the Connect the Google Analytics 4 property that’s associated with your existing Universal Analytics property heading, selecting a property and clicking on Connect should show a spinner and create a new GA4 property and measurement ID.

Changelog entry

• Enable the GA4 Activation Banner create/connect a property and measurement ID.

[felixarntz]

Approval ✅

@wpdarren Tested this again on my side, UI looks good to me now. There no longer is the progress bar together with the button spinner when creating a new GA4 property.

[wpdarren]

@felixarntz

Something we have already noticed and consider problematic is that there is a progress bar showing up after clicking the button. This should not really need to be there, as the button itself already has the loading indicator, so we don’t need another loading indicator.

The initial issue was that the screen flickers when the button is created, so this progress bar was introduced because of that. Since 5276 is in QA, should both of these tickets but looked at because the progress bar does appear on screen after clicking on the button in the different states.

c.c. @nfmohit @techanvil