How to enable DebugView in Google Analytics for dev and staging environments using @next/third-parties/google in NextJS 14?

Question

I’m using Next 14 with page router to create my app and I integrated Google Analytics (GA).

I’m using the @next/third-parties/google library, so I’m not interacting with the Google Tag (gtag.js) API directly.

The package provides a neat component GoogleAnalytics. Docs: Optimizing: Third Party Libraries.

import { GoogleAnalytics } from "@next/third-parties/google";

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <NavMenuContextProvider>
      <div id="root">
        <Component {...pageProps} />
      </div>
      <GoogleAnalytics gaId="G-XXXXXXXXXX" />
    </NavMenuContextProvider>
  );
};

export default appWithTranslation(MyApp); 

The code above works. However, my app is deployed across 3 environments: dev, staging and prod and I want to track analytics for prod only.

GA provides DebugView (Optimizing: Third Party Libraries), which I want to turn on for dev and staging.

I tried passing debug_mode=true when sending an event as mentioned in tutorials.

return (
  <NextLink
    href={href}
    onClick={() => {
      if (analyticsProps) {
        plausible("link_click", { props: analyticsProps });
        sendGAEvent({
          event: "link_click",
          value: analyticsProps.id,
          debug_mode: true,
        });
      }
    }}
  >
    {children}
  </NextLink>
);

The parameter is being sent. However, I don’t see any data in DebugView and events are being tracked across all environments. How can I configure GA so that it reacts to events which include debug_mode parameter? I want GA to show these in DebugView only, excluding them from the official dashboard.

Most of the articles and posts suggest using low-level techniques, involving interacting with the Google Tag (gtag.js) API. Is it a good solution to use both the package and directly interact with the Google Tag API? Do you know about other neat solutions which may work? Nothing I’ve tried so far seems to be working. Thank you!

Note: I’m now using both Plausible and GA. This is only temporary.