google-analytics-module icon indicating copy to clipboard operation
google-analytics-module copied to clipboard

Any plans to support GA4?

Open prodoxx opened this issue 3 years ago • 12 comments

prodoxx avatar Dec 01 '21 22:12 prodoxx

Please!

vitorhugosg avatar Dec 04 '21 00:12 vitorhugosg

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

mrleblanc101 avatar Feb 14 '22 20:02 mrleblanc101

Needed

sts-ryan-holton avatar Mar 16 '22 19:03 sts-ryan-holton

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/

mrleblanc101 avatar Mar 17 '22 02:03 mrleblanc101

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

prodoxx avatar Mar 17 '22 03:03 prodoxx

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

mrleblanc101 avatar Mar 17 '22 03:03 mrleblanc101

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

prodoxx avatar Mar 17 '22 03:03 prodoxx

@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

sts-ryan-holton avatar Mar 17 '22 08:03 sts-ryan-holton

Any news for this dependency to start supporting GA4?

Torone avatar Mar 31 '22 14:03 Torone

#131

rahulkumarsingh73690 avatar May 23 '22 15:05 rahulkumarsingh73690

I've created a seamless GA4 integration for Nuxt 3. 👉 github.com/johannschopplich/nuxt-gtag

Features

johannschopplich avatar Mar 16 '23 09:03 johannschopplich

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.

andreLuis1506 avatar Jan 17 '24 01:01 andreLuis1506