Implement the logic for showing, postponing and dismissing the GA4 Activation Banner

[techanvil]

Feature Description

Implement the necessary logic to ensure the banner is shown when the following criteria are met:

• While the Analytics module is setup with a UA property but no GA4 property:
  • Once a month until June 2023 ("initial notice" variant).
  • Once every other day during the month of June 2023 ("last month" variant).
  • Once every other day post-June 2023 ("post-cutoff" variant, this is a separate case as a different message will be shown compared to June).

For each of the variants above, pass an appropriate prop to the Reminder Component. which should display a placeholder message.

Ensure the banner will still be shown at the next interval when pressing Remind me later on the Reminder Component or Cancel on the Setup Component.

The banner should be dismissed completely on pressing Ok, got it on the Success Component.

From the Design Doc:

It’s envisaged that the logic to display, postpone and dismiss notifications will leverage the existing BannerNotification component’s ability to set a dismissal expiration date. The idea is to use BannerNotification to implement the Reminder, Setup and Success components, ensuring that a common notification ID is shared between them (effectively treating them as a single notification), and making use of the dismissExpires prop to specify that the notification dismissal should expire at the next interval for showing the banner. The BannerNotification component will need a new prop, say dismissOnCTAClick with a default of true, to be able to prevent the current behaviour of dismissing the notification when clicking on the CTA, as the CTA buttons will be used to progress through the different stages of the banner.

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

---

Acceptance criteria

• The GA4 Activity Banner should show the banner under the conditions as described above:
  • While the Analytics module is setup with a UA property but no GA4 property:
    • Once a month until June 2023.
    • Once every other day during the month of June 2023.
    • Once every other day post-June 2023.
• A placeholder message should be displayed in the Reminder Component for each of the cases listed above.
• CTA and dismiss button labels should be as follows:
  • Reminder Component:
    • CTA: Set up now
    • Dismiss button: Remind me later
  • Setup Component:
    • CTA: Create property
      • Note, the Connect variant of the CTA will be implemented later.
    • Dismiss button: Cancel
  • Success Component:
    • Dismiss button: OK, got it
• The banner should be shown at the next interval when pressing Remind me later on the Reminder Component or Cancel on the Setup Component.
• The banner should be dismissed completely on pressing OK, got it on the Success Component. It should never appear after this as GA4 is now setup.

Implementation Brief

• Within the new assets/js/modules/analytics-4/components/dashboard/ActivationBanner/index.js (ActivationBanner) component scaffolded in #5270:
  • Use the isModuleConnected selector from the core/modules store to check if analytics is active but not analytics-4. If that is not the case, return null.
• Within ReminderBanner, SetupBanner and SuccessBanner, pass the following props to the BannerNotification component being rendered:
  • onCTAClick = modify this callback to return dismissOnCTAClick: false (after setStep is called). This flag is used internally by BannerNotification to prevent the Notification from being dismissed. See ModuleRecoveryAlert. https://github.com/google/site-kit-wp/blob/cc86db8f12665a5badf9a5bbbe48d20cce087d8b/assets/js/components/dashboard-sharing/ModuleRecoveryAlert/index.js#L124
  • ctaLabel = translated CTA strings as mentioned in the AC.
  • dismiss = translated dismiss button strings as mentioned in the AC.
  • dismissExpires = For ReminderBanner and SetupBanner only, this prop should be:
    • 30 days if current date is before 1 May 2023,
    • 30 - dayOfMonth days or 48 hours (whichever is greater) - if current date is in May 2023,
    • otherwise every 48 hours. See ModuleRecoveryAlert. This prop should not be passed for SuccessBanner. https://github.com/google/site-kit-wp/blob/cc86db8f12665a5badf9a5bbbe48d20cce087d8b/assets/js/components/dashboard-sharing/ModuleRecoveryAlert/index.js#L255

Test Coverage

• Tests can be in the form of StoryBook stories / Backstop VRTs but otherwise no JS tests required.

QA Brief

• Verify the Banner is not shown when Analytics (UA) is not connected.
• Within Settings, setup Universal Analytics only using oi.ie's account without setting up / enabling the GA4 switch. Verify that the banner appears correctly on the dashboard. As part of QA:Eng, inspect the BannerNotification component in React Dev Tools to verify the dismissExpires prop is set to 2592000 (30 days in seconds).
• Now set a reference date in the future and check the dismissExpires prop changes appropriately, verifying the different edge case dates in the ACs.

Changelog entry

• Add logic for GA4 Activation banner timing.

[techanvil]

Hi @jimmymadon, this IB is looking good. A couple of details:

• isModuleConnected should be used, rather than isModuleActive, for Analytics this ensures the check is made for the property being set up, and for Analytics-4, avoids a potential (edge?) case where the module is active but not set up.
• The setting of dismissExpires needs a bit more logic. Say for example the date is May 31st 2023, setting dismissExpires to 30 days means the banner will next be shown on June 30th - skipping the 48 hour checks for the whole of June. So, the dismissExpires value during May needs to take this into account and be set for the start of June instead of 30 days.

[jimmymadon]

Ah of course - thanks @techanvil - nice one! I've updated the IB!

[techanvil]

Nice one @jimmymadon!

IB :white_check_mark:

[wpdarren]

QA Update: ✅

Verified:

• The Banner is not shown when Analytics is not connected.

• When UA is set up but no GA4 property is connected, the dismissExpires prop is set to 2592000 (30 days in seconds).

• When UA is set up but no GA4 property is connected and the future date is in June 2023, the dismissExpires prop is set to 172800 (2 days in seconds).

• When UA is set but no GA property is connected and the future data is set in July 2023, the dismissExpires prop is set to 172800 (2 days in seconds).

QA Note: When testing this, I had to run a command in Terminal to disable the SSL certificate. Otherwise, I was unable to change to a future date and load the site in Chrome. open -a Google\ Chrome --args --ignore-certificate-errors --ignore-urlfetcher-cert-requests