Make the plugin activation banner a simple CTA link instead of replicating the splash screen

[felixarntz]

We've recently re-evaluated the behavior of the plugin activation banner: Somewhat of a problem with that is that it is a duplicated version of the plugin splash screen, however with simplified UI. This comes with problems like the following:

• duplicated engineering maintenance with whatever changes are made to the splash screen
• duplicated UX efforts because every UI component added to the splash screen has to somehow fit into the plugin activation banner too
• we're adding more and more UI elements to the splash screen, which translated into the plugin activation banner make it look overloaded and increases its height so that it takes way too much vertical space for a banner

The only benefit of what the activation banner currently does is that it avoids a single extra click for the case that an admin activates the plugin and immediately wants to set it up. However, you could still argue that even in that case leading the user to the splash screen instead will eventually provide better UX since there is a central place to start the setup.

Related is #4343 (comment), which led us to make a decision here more promptly - before we had already been thinking about this at a high level, but that issue shows it's already becoming a problem.

---

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

Acceptance criteria

• The plugin activation banner content should be drastically reduced so that going forward it will only contain the basic UI with header and CTA button. Specifics below.
• The "CTA button" in the banner should going forward always be a link (a link that still looks like a button though).
  • If the user is already authenticated, the button should link to the dashboard (googlesitekit-dashboard).
  • Otherwise, the button should link to the splash screen (googlesitekit-splash).
• The tracking checkbox and compatibility checks should be removed. The user will now always have to go to the splash screen where those things will be available already.
• All GA events for the plugin activation banner except view_notification and confirm_notification should be removed (since they are no longer relevant with the new behavior).
• The confirm_notification GA event should still fire whenever the button-like link is clicked, and it should be updated to include an event label: If the link is to the dashboard, the label should be dashboard, otherwise it should be splash.

Implementation Brief

Within assets/js/components/activation/activation-app.js:

• Set buttonURL to dashboardURL or splashURL, depending on the value of canViewDashboard.
• In the onButtonClick callback:
  • Update the call to track event confirm_notification to include the label dashboard or splash, depending on the value of canViewDashboard.
  • Remove the other trackEvent calls.
• Remove the rendered <Fragment> and <NotificationCounter /> from the returned JSX.
• Remove all unused variables and related code, tidy up as appropriate.

Within assets/js/components/activation/activation-main.js:

• Strip the unneeded markup:
  • Move the rendered <Button> directly below the <h3>.
  • Remove the disabled prop from the <Button>.
  • Remove the rendered <CompatibilityChecks> component including all descendants.
• The divs with classes mdc-layout-grid, mdc-layout-grid__inner and mdc-layout-grid__cell can be replaced with Grid, Row and Cell components.

Merge the above two files:

• The resulting files should be small and simple enough to merge, so feel free to merge them by replacing the JSX returned by activation-app.js with that of activation-main.js, and deleting activation-main.js.

Within assets/sass/components/activation/_googlesitekit-activation.scss:

• Within the scope of .googlesitekit-activation:
  • Update .googlesitekit-activation__title, setting the bottom margin to 20px to add space between the header and CTA.
  • Remove unused classes googlesitekit-activation__text and googlesitekit-opt-in.

Test Coverage

• Fix any failing tests.

QA Brief

• Reset site kit and deactivate sitekit plugin on an old site or use a new site.
• Install/Activate site kit plugin.
• You should see reduced UI for plugin activation banner with just heading and Blue CTA Button.
• Clicking on it will take you to splash screen.

Changelog entry

• Update the plugin activation banner to be a simple CTA link instead of replicating the splash screen.

[eugene-manuilov]

The divs with classes mdc-layout-grid__inner and mdc-layout-grid__cell can be removed.

@techanvil we shouldn't delete those divs because they create the layout for the banner. Let's leave it but replace them with the appropriate Grid, Row, and Cell components.

[techanvil]

The divs with classes mdc-layout-grid__inner and mdc-layout-grid__cell can be removed.

@techanvil we shouldn't delete those divs because they create the layout for the banner. Let's leave it but replace them with the appropriate Grid, Row, and Cell components.

@eugene-manuilov, I do believe these divs are redundant in practical terms, i.e. they don't actually add any useful layout in this particular case (if you look into it, it's just creating a single spanned grid cell, which is essentially redundant). Nevertheless it seems reasonable to leave the logical grid structure in place, and I've updated the IB accordingly to replace with Grid, Row and Cell as you suggest.

[eugene-manuilov]

Thanks, @techanvil! IB ✔️

[eugene-manuilov]

@kuasha420 could you please add QAB?

[wpdarren]

QA Update: ✅

Verified:

• The plugin activation banner content is reduced and only contains the basic UI with header and CTA button.
• If the user is already authenticated, the button links to the dashboard.
• If the user isn't authenticated, the button links to the splash screen.
• The tracking checkbox and compatibility checks are removed.
• The plugin activation banner only has view_notification on load and confirm_notification.
• The confirm_notification event is fired when the button-like link is clicked, and includes an event label: splash.
• Checked the behaviour with Unified Dashboard enabled.
• Checked the new activation banner on desktop and small screen sizes.

Screenshots