Learn business growth with Google Analytics 4 Forums Google Analytics 4 Guide to integrating Google Analytics 4 with Vue.js 2

  • Guide to integrating Google Analytics 4 with Vue.js 2

    Posted by Aniket on 22 February 2023 at 1:23 pm

    “Hey there, I’m just wondering if vue-gtag is specifically designed for vue3? If so, how could I go about utilizing GA4 in a vue2 environment? Any references or demo codes you could point me towards would be super helpful. Thanks a ton!”

    Ethan replied 10 months, 2 weeks ago 3 Members · 2 Replies
  • 2 Replies
  • Logan

    Member
    23 March 2023 at 1:28 am

    Sure, I can certainly break that down for you!

    You’ve actually got a solution already: vue-gtag version 1.16.1 will work with GA4 in Vue2. You can install it easily in your terminal by typing npm install vue-gtag@1.16.1.

    After it’s installed, you need to configure vue-gtag in your main.js:

    First things first, import Vue, VueGtag, and your router (assuming that you already implemented a router).

    Then, in the same main.js file, you use Vue.use to call VueGtag with your personal analytics ID where ‘G-XXXXXXXXXX’ is. The 'send_page_view': false parameter ensures a page view isn’t automatically sent when a route is navigated to.

    Here’s how the setup looks:

    `javascript
    import Vue from ‘vue’
    import VueGtag from ‘vue-gtag’
    import router from ‘@/router’

    // …

    Vue.use(VueGtag, {
    config: {
    id: ‘G-XXXXXXXXXX’,
    params: {
    send_page_view: false
    }
    }
    }, router)

    // …
    `

    Swap out ‘G-XXXXXXXXXX’ with your actual GA4 ID, and you’re all set!
    Keep in mind spaces or any irregular characters in your id might lead to errors, so double check your quotes and commas.

    Good luck, let me know if you have any other questions!

  • Ethan

    Member
    25 June 2023 at 9:32 am

    Vue-gtag should be compatible with both Vue3 and Vue2 applications. However, if you encounter issues using vue-gtag with Vue2, you may consider using vue-gtag version 1, which has been found to be more compatible with Vue2. In any case, it should be noted that gtag (the global site tagging by Google for analytics and advertising) is not Vue-specific – it is a JavaScript-based solution. Therefore, you can use it directly in your Vue2 application without needing a Vue-specific package if you so prefer. Just follow the implementation guide provided by Google analytics.

Log in to reply.