Add meganav Google Analytics tracking for user interactions on mobile

[Onibenjo]

For us to be able to track how people use the navigation reliably, we need that information to be supplied by the web app into the dataLayer.

The goal is to send information into the dataLayer if a user interacts with the navigation on mobile.

Done

• Add event data to dataLayer for navigation items interactions for mobile navigation

QA

• Check out the demo
• Check the devtools console and log dataLayer
• Interact with the navigation items on mobile (do not click on a link that navigates to another page)
• Log dataLayer and see that events are appended to the array as you interact
• Switch to desktop and see that both events log separately per breakpoints
• Run through the following QA steps

Issue / Card

Fixes # https://warthogs.atlassian.net/browse/WD-30163

Screenshots

[if relevant, include a screenshot]

[webteam-app]

Demo

Jenkins

demos.haus

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.70%. Comparing base (6af5ca4) to head (2bd724c).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2022   +/-   ##
=======================================
  Coverage   76.70%   76.70%           
=======================================
  Files          16       16           
  Lines        1588     1588           
=======================================
  Hits         1218     1218           
  Misses        370      370           

Flag	Coverage Δ
python	76.70% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull Request Overview

This PR adds Google Analytics tracking for mobile navigation interactions by introducing a new mobile-specific tracking module that mirrors the existing desktop tracking functionality. The implementation captures user interactions with the mobile navigation menu, including menu opens/closes, back button clicks, section toggles, and external link clicks.

Key Changes:

• Extracted common tracking utilities into a shared module to eliminate code duplication
• Implemented comprehensive mobile navigation tracking with event data pushed to Google Analytics dataLayer
• Integrated mobile tracking initialization into the main GA tracking entry point

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
static/js/navigation/utils.js	New shared utility module containing common functions for both desktop and mobile tracking
static/js/navigation/meganav-tracking.js	Refactored to import shared utilities instead of duplicating code
static/js/navigation/meganav-tracking-mobile.js	New module implementing mobile-specific navigation tracking handlers and event builders
static/js/navigation/ga-tracking.js	Updated to initialize mobile tracking alongside desktop tracking

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[muhammad-ali-pk]

Nice PR @Onibenjo! LGTM!
I only got one code suggestion, and one potential testing suggestion.

[muhammad-ali-pk]

Given the fact this entire work revolves around using selectors (including heavily relying on class names), if any element is changed or modified as a result of copy updates, page refreshes or nav revamps, some parts of the tracking will start failing silently. I believe this makes it a good candidate of our testing stories, and should be automated with tests (maybe playwright) to perform actions, and compare datalayer results with expected outcomes.

[Onibenjo]

if any element is changed or modified as a result of copy updates, page refreshes or nav revamps, some parts of the tracking will start failing silently

@muhammad-ali-pk
Yes, I will add that to the Playwright stories as changes in the navbar structure will cause the tracking to fail

Edit:
Added them here #WD-30459