Comments (4)
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/
from examples.
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 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.
});
}
from examples.
any solution here?
from examples.
Our Google Optimize example might disappear in the future as the service will sunset this year, closing the issue for now.
from examples.
Related Issues (20)
- Microfrontends example: Module not found: Can't resolve './example.module.css'
- feat(storybook): introduce to `/solution/monorepo`
- Bug: Wrong header in `https://app-dir-i18n.vercel.app/` HOT 1
- nextjs-flask: The flask api endpoint is not working. HOT 2
- Your location is undefined HOT 5
- PostgreSQL on docker and Next.js locally Error: connect ECONNREFUSED ::1:443 HOT 1
- Node.js Serverless Function template doesn't work (gives a 404) HOT 2
- Update deployment GitHub workflows
- bug
- Domain API Example broken
- Flask3 example doesn't work with additional dependencies
- Sonic example doesn't work
- https://flask2-python-template.vercel.app/ HOT 2
- postgres-drizzle got slow
- How to run Flask WSGI in Multithreaded Mode
- Micro-frontend example -module not found
- bot-protection-botd example no longer working
- Django deployment - pip3 not supported (?) impossible to install custom dependencies
- Cannot run the FLASK NEXTJS example 😭 HOT 1
- The PDF text bounds are not being retrieved properly when using the Next.js sample on Vercel in the client-side.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from examples.