use mapping for classes and element types

PHOTO EMBED

Thu Jan 15 2026 03:58:28 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #preventdefault #testing

 function navigationTracking() {
        const mainNav = document.querySelector(".main-navigation__main");
        if (!mainNav) return;

        const navItems = [
            {
                selector: ".main-navigation__control-link",
                type: "nav-links",
                handler: (e, el) => {
                    const btnTextRaw = el.textContent || "";
                    const btnText = btnTextRaw.replace(/\s+/g, " ").trim();
                    const isPressed =
                        el.getAttribute("aria-pressed") === "true";
                    const navState = isPressed ? "closed" : "open";

                    navigationClickTracking(btnText, null, 1, navState);
                },
            },
            {
                selector: "#main-nav-bookmarks",
                type: "nav-bookmark",
                handler: (e, el) => {
                    const btnText = el.innerText.trim();
                    navigationClickTracking(btnText, "/sruh/bookmarks", 1);
                },
            },
            {
                selector: "#main-nav-close",
                type: "nav-search",
                handler: (e, el) => {
                    const btnText = el.outerText.trim();
                    navigationClickTracking(btnText, null, 1);
                },
            },
            {
                selector: "#main-nav-quiz",
                type: "nav-quiz",
                handler: () => {
                    navigationClickTracking(
                        "Senior Road User Quiz",
                        "/sruh/quiz",
                        1,
                    );
                },
            },
        ];

        navItems.forEach((item) => {
            const elements = mainNav.querySelectorAll(item.selector);

            elements.forEach((el) => {
                if (el.dataset.navTracked) return;
                el.dataset.navTracked = "true";

                el.addEventListener("click", (e) => {
                    item.handler(e, el);
                });
            });
        });

        /*  SUB MENU LINK TRACKING */

        const subNavWrapper = document.querySelector(".main-navigation__aside");
        if (!subNavWrapper) return;

        // Use event delegation to catch all subnav link clicks
        // This works regardless of when the subnav is opened
        if (subNavWrapper.dataset.subNavTrackingSetup) return;
        subNavWrapper.dataset.subNavTrackingSetup = "true";

        subNavWrapper.addEventListener("click", (e) => {
            // Find the clicked link
            const link = e.target.closest(
                ".main-navigation__content-list li a",
            );
            if (!link) return;

            // Only track if the link is within an active menu
            const activeMenu = link.closest(".main-navigation__content.active");
            if (!activeMenu) return;

            const linkText = link.textContent.replace(/\s+/g, " ").trim();
            const linkUrl = link.getAttribute("href") || "";

            navigationClickTracking(linkText, linkUrl, 2);
        });
    }
content_copyCOPY