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

[techanvil]

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.
• Set up Site Kit and the Analytics module without GA4 so that no GA4 property is available/created.
• Click on Set up now in the displayed 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.

Changelog entry

[eugene-manuilov]

IB ✔️

[techanvil]

Update: I've realised that this issue should be covering the case where an existing property does exist too. The implementation should not need to change for this, but I will hold off merging the PR for this issue until https://github.com/google/site-kit-wp/pull/5793 has been merged so we can confirm that it does indeed work for both cases. Additionally the QAB will need to be updated to cover the "existing property" scenario as well (see the updated QAB for https://github.com/google/site-kit-wp/issues/5276).

[wpdarren]

QA Update: ⚠️

@techanvil I have one observation, which is linked with the #5276 issue.

• To test No GA4 property available:

When I click on Create Property the spinner appears within the button, but I see a flicker of the screen with the GA4 dropdown box for a second or two as you can see in the screencast below. It does create GA4 property and the correct splash screen appears when it has been created. Just wondered your thoughts on the screen flicker.

https://user-images.githubusercontent.com/73545194/188635012-315884ca-b91d-4091-b195-f86a86af4fe1.mp4

[wpdarren]

QA Update: ✅

The flicker issue reported above will be fixed as part of 5276, so moving this to approved as the test pass QAB.

Verified:

No GA4 property available:

• Under the No existing Google Analytics 4 property found heading, if Create Property is clicked, it shows a spinner and creates a new GA4 property and measurement ID.

GA4 properties exist, but not connected:

• Under the Connect the Google Analytics 4 property, selecting a property and clicking on Connect shows a spinner and creates a new GA4 property and measurement ID.

Screencasts

https://user-images.githubusercontent.com/73545194/188635012-315884ca-b91d-4091-b195-f86a86af4fe1.mp4

https://user-images.githubusercontent.com/73545194/188637292-0a812b19-7e99-44a7-9118-b2bd3fd355be.mp4

[felixarntz]

Approval ⚠️

@wpdarren @nfmohit @techanvil Since part of this will only be fixed in #5276, we can only really approve this one once that is through as well. 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.

[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

[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.