Nuxt Google Analytics


If you are using Nuxt.js to generate full static pages

Edit layouts/default.vue

<script>export default {  head() {    let productionScripts = []    if (process.env.NODE_ENV === 'production') {      productionScripts = [        { hid: 'analytics', src: '', defer: true },        { hid: 'analytics-script', innerHTML: "window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-3625XXXX-1');", type: 'text/javascript' }      ]    }    return {      title: "Test Analytics",      script: [      ].concat(productionScripts),      // __dangerouslyDisableSanitizers: ['script']      __dangerouslyDisableSanitizersByTagID: {        'analytics-script': ['innerHTML']      }    }  }}</script>


If you are using SSR or SPA, which vue-router is used to change pages dynamically, you can use @nuxtjs/google-analytics.


npm install --save-dev @nuxtjs/google-analytics

Edit nuxt.config.js

export default {
  buildModules: [
  googleAnalytics: {
    id: 'UA-3625XXXX-1'

NOTE: Analytics is disabled in development mode

NOTE: You will notice you will not find google analytics url in the generated html (I assume it is done via JavaScript). You can enable debug mode to check if it is working.

export default {
  googleAnalytics: {
    id: 'UA-3625XXXX-1',
    debug: {
      enabled: true,
      // sendHitTask: true

NOTE: @nuxtjs/google-analytics utilize (vue-analytics), where the size is not tiny.

NOTE: You can also do it manually without using plugins.

Firebase Analytics

If you are using Firebase, you can use Firebase Analytics instead of Google Analytics.

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.