A/B Testing with Google Optimize project does not recognize Analytics

[tfcb93]

While trying to use this example, and following the steps on optimize, it does not recognize my Analytics tag

The image says that "We found problems with the Optimize installation on this page" and something like the "Google Analytics tracking code not found".

I also noticed that in the code at components/layout.ts there is a commented part which is

<Page>
      {/* <Script
      src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_TRACKING_ID}`}
      onLoad={() => {
        window.dataLayer = window.dataLayer || []
        function gtag() {
          dataLayer.push(arguments)
        }

        gtag('js', new Date())
        gtag('config', process.env.NEXT_PUBLIC_GOOGLE_TRACKING_ID)
      }}
    /> */}
      <Script
        src={`https://www.googleoptimize.com/optimize.js?id=${process.env.NEXT_PUBLIC_OPTIMIZE_CONTAINER_ID}`}
      />
      <GaProvider value={ga}>{children}</GaProvider>
</Page>

but if I uncomment it

Errors:

• line 30: Property 'dataLayer' does not exist on type 'Window & typeof globalThis'.ts(2339)
• line 32: Cannot find name 'dataLayer'.ts(2304)
• lines 35 and 36: Expected 0 arguments, but got 2.ts(2554)

So I wanted to know how I should include Google Analytics along with Google Optimize in this example.

Oh, and I included both IDs on my .env.local

[rnatto-gempe]

any solution here?

[tfcb93]

Oh yeah! I kinda did a turnaround using the ReactGA library. I register Analytics using it and later use ReactGA.ga('set', 'exp', cookie); to register the cookie set-up by the middleware.

I also did not use the script below since I was having problems getting 2 experience IDs and this can discard your experience (kinda following https://developers.google.com/optimize/devguides/experiments?technology=ga4#implement-experiment).

<Script
        src={`https://www.googleoptimize.com/optimize.js?id=${process.env.NEXT_PUBLIC_OPTIMIZE_CONTAINER_ID}`}
/>

It'll not recognize the Optimize installation, but seems it's not obligatory (like the server-side experiment, it's not necessary as well). I hope you get the idea and go through it 🙏 And sorry for not updating the thread with this answer. If you need something else just post and I'll try my best to help you when I can o/

[DopamineDriven]

I do this in my repos for dealing with the datalayer. Make a Root index.d.ts, set declaration: true in the tsconfig, and --

/// <reference types="google.maps" />
/// <reference types="gtag.js" />

declare module "google.maps";
declare module "gtag.js";

interface Window {
  dataLayer?: object[];
}

now, the dataLayer will be recognized and by declaring the google.maps and gtag.js modules all of their typedefs are available for consumption globally with full Intellisense, no imports required (I only have the @types/* version of either installed)

---

• example of the gtag types being consumed with intellisense

• example using the globally available gtag typedefs in _app.tsx

// real-time GA4 reporting
export function reportGAVitals({
  id,
  name,
  label,
  startTime,
  value
}: NextWebVitalsMetric) {
  if (typeof window !== "undefined")
    window.gtag("event", name, {
      event_category:
        label === "web-vital" ? "Web Vitals" : "Next.js custom metric",
      value: Math.round(name === "CLS" ? value * 1000 : value), // values must be integers
      event_label: id, // id unique to current page load
      non_interaction: true // avoids affecting bounce rate.
    });
}

[lfades]

Our Google Optimize example might disappear in the future as the service will sunset this year, closing the issue for now.