google-analytics-module
google-analytics-module copied to clipboard
Any plans to support GA4?
Please!
@pi0 @Atinux @ricardogobbosouza Any plan on updating @nuxtjs/ga
to support GA4, before upgrading the module to Nuxt 3 ?
Needed
Google announced plan to kill UA by July 2023. A little over a year from now.
Any works on updating the plugin for GA4.
https://blog.google/products/marketingplatform/analytics/prepare-for-future-with-google-analytics-4/
I can probably try to create a PR for this but I'm not sure how worth it, it is. I used vue-gtag which supports GA4 in my NuxtJs app by npm installing the package and creating a plugin like this (you can also use the Vue3 way of passing environment variables through context.config
I believe):
import Vue from 'vue';
import VueGtag from 'vue-gtag';
export default (context, inject) => {
Vue.use(
VueGtag,
{
config: { id: process.env.NUXT_ENV_GOOGLE_ANALYTICS_TRACKING_ID },
appName: 'NFT+ Studio App',
pageTrackerScreenviewEnabled: true,
},
context.app.router
);
context.$gtag = Vue.$gtag;
inject('gtag', Vue.$gtag);
};
and you can find some examples how I used it to track some events in the app here: https://github.com/NFT-Plus-Studio/web-app/blob/73a44edbf1f678b7331f3fb345320f99ffea787f/pages/collection/_collectionId.vue#L368
Won't that cause issue on SSR as the plugin is client only and doesn't use Nuxt-meta to inject the script
Won't that cause issue on SSR as the plugin is client only and doesn't use Nuxt-meta to inject the script
Yeah, that would only work if the app is static and not SSR. There was a discussion with a SSR solution here: https://github.com/MatteoGabriele/vue-gtag/issues/87#issuecomment-594133548
@mrleblanc101 i opened a new issue that's worth upvoting here
I rely on Google Analytic events in my project, so we need to ensure that any changes to this module make them work, and that it's backwards compatible with Nuxt 2 since Nuxt 3 is coming out
Any news for this dependency to start supporting GA4?
#131
I've created a seamless GA4 integration for Nuxt 3. 👉 github.com/johannschopplich/nuxt-gtag
Features
- 🌻 No dependencies except Google's
gtag.js
- 🦾 SSR-ready
- 📯 Track events manually with composables
- 📂
.env
file support
If anyone needs a library for gtag in nuxt 2, I recommend adding the script link "src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX" in the head of nuxt.config.js and then create middleware with the code:
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());
gtag('config', 'G-XXXXXX');
And create some event in middleware gtag('event', 'event_name', {...option})
That way you don't need any libs. The nuxt 2 ones are outdated and don't work.