Track search dropdown usage in Google Analytics

Sarah Germanrequested to merge
461-search-usage-analytics into main

What does this MR do and why?

Adds Google Analytics tracking for search form usage.

See https://gitlab.com/gitlab-org/technical-writing/docs-gitlab-com/-/issues/461.

Screenshots, screen recordings, or links to review app

GA event firing when a query is entered:

image

New markup for tracking dropdown clicks:

image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment.
  2. Check out this branch.
  3. Run the site with analytics enabled: ANALYTICS_ENABLED=true make view
  4. In the console, enter window.dataLayer to view the GA dataLayer object.
  5. Run a search and print window.dataLayer again. Note that the search has registered as an event.
  6. Inspect HTML on the dropdown; you'll see a new data-ga-section="search dropdown" attribute on the result panel.
  7. On the review app (where analytics are not enabled), verify you can run a search without any errors in the console.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports