Introduce dashboard tour tooltips

Feature Description

Add tooltips introducing the new features for the generic dashboard.

---

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

Acceptance criteria

Tooltip 1

• Position: highlighting the tabs
• Heading: New! Navigate your dashboard easily with the dashboard tabs
• Text: Jump straight to the relevant section in your dashboard with just one click - no more scrolling.
• Show four dots with the first one highlighted to indicate this is 1 out of 3
• Navigation: “Next” and “x” in top right corner to dismiss

Tooltip 2

• Position: highlighting the single URL search
• Heading: Check stats for a specific post
• Text: Search by URL or by post title and your dashboard will be filtered to show stats just for that URL.
• Show four dots with the second one highlighted to indicate this is 2 out of 3
• Navigation: “Next”, “Back” and “x” in top right corner to dismiss

Tooltip 3

• Position: highlighting the updated Search Funnel widget
• Heading: See trends over time for your site’s Search metrics
• Text: The updated Search Funnel shows you a more comprehensive view of how traffic from Search is changing.
• Show four dots with the third one highlighted to indicate this is 3 out of 3
• Navigation: “Got it”, “Back” and “x” in top right corner to dismiss

Implementation Brief

• Create assets/js/feature-tours/unified-dashboard.js which exports the unifiedDashboard variable (object having the same structure as other files in the same folder, for e.g assets/js/feature-tours/help-visibility.js)
  • The slug should be unifiedDashboard
  • context set to VIEW_CONTEXT_DASHBOARD
  • version set to 1.50.0
  • checkRequirements should be a function that checks whether the unifiedDashboard feature flag is enabled, via the isFeatureEnabled function.
  • steps should be an array of objects, each of which has the following properties for each tooltip:
    • Tooltip 1
      • target set to .googlesitekit-navigation
    • Tooltip 2
      • target set to .googlesitekit-entity-search
    • Tooltip 3
      • target set to .googlesitekit-widget--searchFunnel
      • placement set to top
    • The title and content properties should be set to the corresponding strings in the AC.
  • For tracking purposes, the gaEventCategory property should be set to { viewContext }_unified-dashboard.

Test Coverage

• No new tests to be added.

Visual Regression Changes

QA Brief

• Delete the wp_googlesitekitpersistent_dismissed_tours user option. wp user meta delete 1 wp_googlesitekitpersistent_dismissed_tours where 1 is the user id.
• Enable the unifiedDashboard feature flag.
• Go to the main dashboard.
• Ensure the unified dashboard feature tour shows up and tooltips content are displayed as per the AC.

Changelog entry

• Add a new feature tour for the unified dashboard.

[wpdarren]

@asvinb I agree with you that this can be a new ticket. I’ll make a note to create one.

QA Update: ✅

• Verified that the tooltip and widget now appear in view on different screen sizes.
• Ran through the tooltips and they all load in the correct placements.

[asvinb]

Ah I see. Unless @felixarntz disagrees I think we can create another issue for that @wpdarren