Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Any plans to support GA4? #122

Open
prodoxx opened this issue Dec 1, 2021 · 12 comments
Open

Any plans to support GA4? #122

prodoxx opened this issue Dec 1, 2021 · 12 comments

Comments

@prodoxx
Copy link

prodoxx commented Dec 1, 2021

No description provided.

@vitorhugosg
Copy link

Please!

@mrleblanc101
Copy link

mrleblanc101 commented Feb 14, 2022

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

@sts-ryan-holton
Copy link

Needed

@mrleblanc101
Copy link

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
Copy link
Author

prodoxx commented Mar 17, 2022

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
Copy link

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

@prodoxx
Copy link
Author

prodoxx commented Mar 17, 2022

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: MatteoGabriele/vue-gtag#87 (comment)

@sts-ryan-holton
Copy link

@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
Copy link

Torone commented Mar 31, 2022

Any news for this dependency to start supporting GA4?

@rahulkumarsingh73690
Copy link

#131

@johannschopplich
Copy link

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

Features

@andreLuis1506
Copy link

andreLuis1506 commented Jan 17, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants