Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement splash UI for initially activating Analytics #4341

Closed
felixarntz opened this issue Nov 10, 2021 · 2 comments
Closed

Implement splash UI for initially activating Analytics #4341

felixarntz opened this issue Nov 10, 2021 · 2 comments
Labels
P0 High priority PHP Type: Enhancement Improvement of an existing feature

Comments

@felixarntz
Copy link
Member

felixarntz commented Nov 10, 2021

As part of the onboarding flow enhancements work, it should be possible to set up the Analytics module from the very beginning.

While this is technically its own enhancement, it should be tied into the serviceSetupV2 epic which it'll launch together with.


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

Acceptance criteria

  • There should be a new component assets/js/components/setup/ActivateAnalyticsNotice.js.
    • It should implement the UI from this Figma design (specifically the gray box with the checkbox inside).
    • It should rely on the core/forms store to manage the state of the checkbox.
  • The above component should be incorporated into SetupUsingProxy as follows:
    • It should only show if the serviceSetupV2 feature is enabled.
    • It should only show if the analytics module is not active. (This is for example relevant for subsequent admins connecting.)
    • When shown, it should be displayed below the description text but above the tracking checkbox (see the above Figma file).
    • When shown, the side kick graphic on the right should be the green side kick from the above Figma file instead of the regular welcome graphic. (This differentiation is intended, since in case this notice is displayed, we want to show a less "attention-catching" side kick graphic.)
    • When the user clicks the CTA button to sign in, if the above checkbox is enabled (see core/forms store), the following tweaks should be made:
      • A new GA tracking event start_setup_with_analytics should be fired in addition to the existing GA events on that button click. The category should be the current view context (i.e. VIEW_CONTEXT_DASHBOARD_SPLASH).
      • Before forwarding to the proxy setup URL, a request to activate the analytics module should be made. (This will ensure that the Analytics OAuth scopes will be immediately requested as part of the setup.)
      • The existing request to the proxy setup URL should have an additional query parameter redirect which should be the URL to the Analytics setup UI. (With the changes below, this will ensure that the user gets redirected to the Analytics setup instead of the dashboard after returning from the proxy.)
  • On the server-side, the handler for the Google_Proxy::ACTION_SETUP action should be enhanced so that it supports a potential query parameter redirect. If provided, it should set that URL in the OAuth_Client::OPTION_REDIRECT_URL user option.
    • This logic can be copied from Authentication::handle_connect() and OAuth_Client::get_authentication_url() where it is already present. Essentially the same support should now be added to the overall setup URL.

Implementation Brief

  • Create assets/js/components/setup/ActivateAnalyticsNotice.js which exports the ActivateAnalyticsNotice functional component.
  • It should be styled as per the Figma designs.
    • The side graphics (Unique visitors from search, Most popular content, Traffic) can be exported as a single SVG file instead of having 3 different graphics and positioning them via CSS.
    • On small screens, the content is stacked, with the graphics on top of the text content and medium and up screens, the content is side by side, with the graphics to the right.
  • It should rely on the core/forms store to manage the state of the checkbox.
    • setValues action to set values.
    • getValue selector to get values.
    • The form name can be: connect-analytics-setup-splash
  • Using assets/js/components/setup/SetupUsingProxy.js,
    • If serviceSetupV2 feature flag is enabled and the analytics module is not active,
      • Render ActivateAnalyticsNotice below the description text but above the tracking checkbox.
        • Use existing variable serviceSetupV2Enabled which checks if the serviceSetupV2 feature flag is enabled.
        • Query the core/modules data store bia the isModuleActive selector, passing analytics as parameter to see if the module is active.
      • Instead of rendering WelcomeSVG, render the green sidekick graphic from the Figma files.
    • Check if the checkbox from ActivateAnalyticsNotice is checked by querying the core/forms data store via the getValue selector.
    • Update the onButtonClick function:
      • If the checkbox is checked,
        • call the trackEvent function with the parameters as per the AC.
        • dispatch the activateModule action from the core/modules store, with analytics as parameter and grab the moduleReauthURL property from the response object as a result of the activateModule action.
        • Update the proxySetupURL to append the redirect parameter, with the value set to moduleReauthURL obtained previously.
  • Using includes/Core/Authentication/Authentication.php,
    • Update the callback for Google_Proxy::ACTION_SETUP to check for the redirect URL parameter, similar to how we check for $code and $site_code but using the FILTER_VALIDATE_URL filter.
    • If the redirect URL parameter is present, set that URL in the OAuth_Client::OPTION_REDIRECT_URL user option.
  • Using includes/Core/Authentication/Clients/OAuth_Client.php,
    • Update the get_proxy_setup_url function to check whether we have a value for the OAuth_Client::OPTION_REDIRECT_URL user option. If this is the case, then add the redirect key to the $query_params, with the value set to the value of the OAuth_Client::OPTION_REDIRECT_URL user option.
    • Delete the OAuth_Client::OPTION_REDIRECT_URL user option.
  • Using assets/sass/components/setup/_googlesitekit-setup.scss,
    • tweak the styles for googlesitekit-setup__icon to include align-self: center so that the graphic is always centered.
    • add styles for ActivateAnalyticsNotice.
  • Add stories for ActivateAnalyticsNotice in assets/js/components/setup/ActivateAnalyticsNotice.stories.js
  • Create assets/js/components/setup/SetupUsingProxy.stories.js which include stories for SetupUsingProxy where ActivateAnalyticsNotice is rendered.

Test Coverage

  • No new tests to be added.

QA Brief

  • Reset Site Kit
  • Enable the serviceSetupV2 feature flag via the tester plugin.
  • Proceed to set up Site Kit using the Google Staging Proxy.
  • The UI should be similar to the Figma designs but not pixel to pixel or colors. Existing colors in the codebase have been used and to be consistent with the current styles.
  • If the option to setup Analytics is checked, after authentication, the user should be redirected to the Analytics setup.

Changelog entry

  • Implement splash UI for activating Analytics as part of the initial setup flow.
@eugene-manuilov
Copy link
Collaborator

Awesome work, @asvinb! IB ✔️

@eugene-manuilov eugene-manuilov removed their assignment Nov 16, 2021
@asvinb asvinb self-assigned this Nov 22, 2021
@asvinb asvinb assigned eugene-manuilov and unassigned asvinb Nov 23, 2021
@eugene-manuilov eugene-manuilov removed their assignment Nov 23, 2021
@wpdarren wpdarren self-assigned this Nov 23, 2021
@wpdarren
Copy link
Collaborator

QA Update: ✅

Verified:

The new splash screen for activating analytics:

  • It implements the UI from this Figma design (the grey box with the checkbox inside).
  • It is only shown when the serviceSetupV2 feature is enabled.
  • It is only shown if the analytics module is not active.
  • The side kick graphic is the green side kick as per the Figma design

image

When the user clicks the CTA button to sign in:

  • A new GA tracking event start_setup_with_analytics is fired in addition to the existing GA events on that button click. The category is splash - Screenshot
  • When the option to setup Analytics is checked, after authentication, the user is redirected to the Analytics setup.

QA note: For clarification here are the initial steps:

  1. New Splash UI. Tick Analytics and tracking tick boxes.
  2. Welcome to Site Kit and click Sign in with Google CTA
  3. Login to Google account and give authorisation.
  4. Set up in Search Console. Click go to dashboard CTA
  5. Redirected to Connect Analytics where you can select account or create a new one.
  6. Analytics connected.
  • Checked that when Analytics checkbox is not ticked then the setup completes without Analytics setup.

Note: there are a few small styling differences between the FE and Figma but according to the QAB, this is expected.

@wpdarren wpdarren removed their assignment Nov 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
P0 High priority PHP Type: Enhancement Improvement of an existing feature
Projects
None yet
Development

No branches or pull requests

4 participants