Any plans to support GA4?

[vitorhugosg]

Please!

[mrleblanc101]

@pi0 @Atinux @ricardogobbosouza Any plan on updating @nuxtjs/ga to support GA4, before upgrading the module to Nuxt 3 ?

[sts-ryan-holton]

Needed

[mrleblanc101]

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/

[prodoxx]

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

[mrleblanc101]

Won't that cause issue on SSR as the plugin is client only and doesn't use Nuxt-meta to inject the script

[prodoxx]

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

[sts-ryan-holton]

@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

[Torone]

Any news for this dependency to start supporting GA4?

[rahulkumarsingh73690]

131

[johannschopplich]

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

[andreLuis1506]

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.