Nuxt•2mo ago

Add gtm with nuxt

Hi guys I am currently using https://scripts.nuxt.com/scripts/tracking/google-tag-manager nuxt scripts to add my Google tag into my project, although when testing using Google tag assistant it can detect the tag on the main page but the Google tag assistant would not be able to detect the tag when navigate to other pages in the site. But it would be able to detect the tag when I refresh the page

Nuxt Scripts

%s %separator %siteName

Use Google Tag Manager in your Nuxt app.

27 Replies

kapa.ai•2mo ago

Hi @Koizumi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're having an issue with Google Tag Manager (GTM) not being detected by Google Tag Assistant when navigating between pages in your Nuxt application, though it works on the initial page load and after refreshing. This is a common issue with single-page applications (SPAs) like those built with Nuxt. When you navigate between pages in a SPA, the page doesn't fully reload, which can cause issues with tools like Google Tag Assistant that expect traditional page loads. Based on the knowledge sources, there are a couple of approaches you might consider: 1. Add a noscript tag for GTM: You might need to add the noscript part of the GTM implementation. As mentioned in one of the issues:

   <ClientOnly>
     <noscript>
       <iframe :src="`<https://www.googletagmanager.com/ns.html?id=${_gtmId}`"> height="0" width="0" style="display:none;visibility:hidden" />
     </noscript>
   </ClientOnly>

   <ClientOnly>
     <noscript>
       <iframe :src="`<https://www.googletagmanager.com/ns.html?id=${_gtmId}`"> height="0" width="0" style="display:none;visibility:hidden" />
     </noscript>
   </ClientOnly>

GitHub Issue #13848 2. Router events: Make sure your GTM implementation is properly tracking router changes. The Nuxt Scripts module should handle this, but you might need to check your configuration. 3. Check for recent updates: The knowledge sources show several recent updates to the @nuxt/scripts package, including versions 0.7.1, 0.8.2, 0.8.4, 0.9.3, and 0.9.4. Make sure you're using the latest version as it might include fixes for your issue. If you're still experiencing issues, you might want to: 1. Check if there are any console errors when navigating between pages 2. Verify your GTM configuration in the Nuxt Scripts module 3. Consider using the browser's network tab to see if GTM requests are being made during navigation Remember that Google Tag Assistant might not always accurately detect tags in SPAs, so you might also want to verify tracking directly in your Google Analytics or GTM dashboard to see if events are being recorded properly during navigation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@321589587745046529> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KoizumiOP•2mo ago

@kapa.ai do i still need to use noscript if i have already installed the plugin Nuxt Scripts for google tag manager ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, if you're using the Nuxt Scripts module for Google Tag Manager, you shouldn't need to manually add the noscript tag yourself. The Nuxt Scripts module is designed to handle third-party scripts properly, including Google Tag Manager. Looking at the available information, the module should be handling both the script and noscript parts of the GTM implementation. However, the issue you're experiencing with Google Tag Assistant not detecting the tag during navigation is likely related to how single-page applications work rather than missing the noscript tag. When you navigate between pages in a Nuxt app, there isn't a full page reload, which can confuse tools like Google Tag Assistant. If you want to verify that your GTM is working correctly across page navigations: 1. Check your actual GTM/Google Analytics dashboard to see if events and pageviews are being recorded during navigation 2. Use browser developer tools to monitor network requests to see if GTM is firing during navigation 3. Make sure you're using the latest version of @nuxt/scripts as there have been several recent updates that might address your issue The noscript solution I mentioned in my previous response was a workaround from an older GitHub issue, but with the dedicated Nuxt Scripts module, you should be able to rely on its implementation. If you continue to have issues, you might want to check the specific configuration options for Google Tag Manager in the Nuxt Scripts documentation to ensure everything is set up correctly. YouTube: Nuxt 3: Loading Third Party Assets with Nuxt Scripts might also provide additional insights on how the module handles scripts like GTM. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@321589587745046529> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KoizumiOP•2mo ago

@kapa.ai i do notice the page doesnt do a full reload therefore i was only able to see tag firing in google tag assistant when i manual reload the page

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're absolutely right about what's happening. In Nuxt applications, when you navigate between pages using Nuxt's built-in routing system, the application doesn't perform a full page reload. This is a core feature of single-page applications (SPAs) that makes them feel faster and more responsive. This behavior explains why Google Tag Assistant only detects your GTM tag when you first load the page or manually refresh it. Google Tag Assistant is designed to work with traditional multi-page websites where each navigation triggers a full page reload. This is expected behavior in Nuxt applications due to their client-side navigation. When you navigate between pages in Nuxt: 1. Only the content changes, not the entire page 2. The browser doesn't perform a full reload 3. The JavaScript context persists between page navigations Despite Google Tag Assistant not showing the tag firing during navigation, your GTM implementation is likely still working correctly. The data should still be sent to Google Analytics or other connected services. To verify this is working properly: 1. Check your actual GTM/GA dashboard for events and pageviews during navigation 2. Use the browser's network tab to monitor requests to Google's servers during navigation 3. Consider implementing debug mode in GTM to get more detailed information If you absolutely need to see the tag firing in Google Tag Assistant for testing purposes, you could temporarily modify your Nuxt configuration to disable client-side navigation with:

export default defineNuxtConfig({
  ssr: false
})

export default defineNuxtConfig({
  ssr: false
})

As mentioned in the Nuxt documentation on rendering modes, this would make your application behave more like a traditional website, but it would lose the performance benefits of client-side navigation. Remember that Google Tag Assistant's limitations with SPAs don't necessarily mean your tracking isn't working properly. Is there anything specific you're trying to verify with Google Tag Assistant that I might help with? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@321589587745046529> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KoizumiOP•2mo ago

@kapa.ai I noticed that i need to have the google tag assistant browser extension open for google tag assistant to be able to detect the tag on the page when i refresh

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, that's correct and expected behavior. Google Tag Assistant is a browser extension tool designed to help debug and verify Google tags (like Google Tag Manager, Google Analytics, etc.) on your website. It needs to be installed and active in your browser to detect and analyze these tags. When you refresh a page in your Nuxt application, a full page load occurs, which allows Google Tag Assistant to detect and analyze all the tags that are loaded during that process. This is why you're seeing the tag being detected after a refresh. However, as we discussed earlier, during client-side navigation in a Nuxt application (when moving between pages without refreshing), there isn't a full page reload. The Google Tag Assistant extension has limitations in detecting tags during these client-side navigations in single-page applications like Nuxt. This doesn't mean your GTM implementation isn't working - it's just a limitation of the Tag Assistant tool itself. Your actual tracking data should still be collected properly and sent to Google's servers during these navigations, even if Tag Assistant doesn't show it happening. For the most accurate verification of your tracking implementation, I'd recommend: 1. Looking at the real-time reports in Google Analytics 2. Using the browser's network tab to monitor requests to Google's servers 3. Using GTM's preview mode, which is better suited for debugging tags in single-page applications Is there a specific concern you have about your tracking implementation that's making you rely on Google Tag Assistant? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@321589587745046529> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KoizumiOP•2mo ago

@kapa.ai Also i added the ssr:false to my nuxt.config.ts and when navigate to other page the tag does not firing without a refresh

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that you've added ssr: false to your Nuxt configuration, but you're still experiencing issues with Google Tag Manager not firing when navigating between pages without a refresh. Setting ssr: false in your Nuxt configuration changes your application to client-side rendering only, which means the initial HTML is minimal and all content is rendered in the browser after JavaScript loads. However, this doesn't automatically solve the issue with tag firing during navigation. In Nuxt applications, even with ssr: false, page navigation still happens through client-side routing without a full page reload. According to the documentation:

When working entirely on the client-side, we don't have to worry about the server compatibility of the code, for example, by using browser-only APIs like the window object.

Nuxt Documentation on Client-Side Rendering The issue you're experiencing is likely related to how Nuxt handles page navigation. When you navigate between pages in a Nuxt application, the pages are rendered twice due to how Nuxt's router works with <Suspense>. This is actually intentional behavior as confirmed in a GitHub issue:

Yes this is intended. It's actually a side-effect of using a forked router due to <Suspense>

GitHub Issue #31279 To make your Google Tag Manager work properly with navigation in a Nuxt application, you might need to: 1. Make sure your GTM configuration is set up to track route changes in single-page applications 2. Consider using Nuxt's router hooks to manually trigger GTM events on page navigation If you're using the Nuxt Scripts module for GTM, check if there are specific configuration options for handling SPA navigation. The module should ideally be handling this for you, but you might need to adjust some settings. Would you like me to provide more specific guidance on how to configure GTM to work with Nuxt's client-side navigation? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@321589587745046529> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KoizumiOP•2mo ago

@kapa.ai how can i manually trigger GTM events on page navigation ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To manually trigger GTM events on page navigation in Nuxt, you can use Nuxt's lifecycle hooks to detect when page navigation occurs and then trigger your GTM events. Here's how you can do it: Using Nuxt App Hooks Nuxt provides several hooks that fire during navigation events. The most relevant ones for your case would be page:finish or page:transition:finish:

<script setup>
const nuxtApp = useNuxtApp();

// Called on Suspense resolved event (when page content is fully loaded)
nuxtApp.hook('page:finish', () => {
  // Trigger your GTM event here
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: window.location.pathname,
        title: document.title
      }
    });
  }
});

// Alternative: After page transition onAfterLeave event
nuxtApp.hook('page:transition:finish', () => {
  // Trigger your GTM event here
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: window.location.pathname,
        title: document.title
      }
    });
  }
});
</script>

<script setup>
const nuxtApp = useNuxtApp();

// Called on Suspense resolved event (when page content is fully loaded)
nuxtApp.hook('page:finish', () => {
  // Trigger your GTM event here
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: window.location.pathname,
        title: document.title
      }
    });
  }
});

// Alternative: After page transition onAfterLeave event
nuxtApp.hook('page:transition:finish', () => {
  // Trigger your GTM event here
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: window.location.pathname,
        title: document.title
      }
    });
  }
});
</script>

Nuxt Hooks Documentation Using Route Watcher Another approach is to watch for route changes:

<script setup>
const route = useRoute();

watch(() => route.fullPath, (newPath) => {
  // Trigger GTM event when route changes
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: newPath,
        title: document.title
      }
    });
  }
});
</script>

<script setup>
const route = useRoute();

watch(() => route.fullPath, (newPath) => {
  // Trigger GTM event when route changes
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: newPath,
        title: document.title
      }
    });
  }
});
</script>

Nuxt Migration Documentation Best Practices 1. Place this code in a plugin or in your app.vue file to ensure it runs on every page navigation 2. Make sure to check if window.dataLayer exists before pushing to it 3. Consider using callOnce for initialization code that should only run once:

await callOnce(() => {
  // Initialize GTM here if needed
  console.log('GTM initialization code runs once');
}, { mode: 'navigation' });

await callOnce(() => {
  // Initialize GTM here if needed
  console.log('GTM initialization code runs once');
}, { mode: 'navigation' });

Nuxt callOnce Documentation These approaches should help you manually trigger GTM events during Nuxt's client-side navigation, ensuring your analytics continue to work even without full page reloads. Would you like more specific guidance on structuring the GTM events or implementing this in a particular part of your application? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@321589587745046529> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KoizumiOP•2mo ago

@kapa.ai but would it trigger like gtm.init and etc ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- No, manually triggering events as I described in the previous answer would not automatically trigger the gtm.init event. The gtm.init event is a special event that's fired when Google Tag Manager is first initialized on a page. When you're manually pushing events to the dataLayer during navigation, you're only sending custom events (like pageviews), not reinitializing the entire GTM container. In a Nuxt single-page application: 1. The gtm.init event happens only once when the page first loads and GTM is initialized 2. During client-side navigation, GTM remains initialized in memory 3. You need to manually push new events to track page changes This is why Google Tag Assistant doesn't show the tag "firing" during navigation - because GTM is already initialized and doesn't need to reinitialize. If you specifically need to see the gtm.init event for testing purposes, you would need to force a full page reload. However, for normal tracking purposes, you only need to push new pageview events to the dataLayer during navigation, which is what the code in my previous answer demonstrates. The Nuxt Scripts module should be handling these pageview events automatically, but if it's not working as expected, the manual approach can help ensure your analytics are tracking properly during navigation. Is there a specific GTM event you're trying to trigger during navigation? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@321589587745046529> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KoizumiOP•2mo ago

@kapa.ai is that mean as long as i see there's event:page view in my google analytic whenever i switch page that mean the google tag is working ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, that's exactly right! If you're seeing "event: page view" entries in your Google Analytics when you navigate between pages in your Nuxt application, that means your Google Tag Manager implementation is working correctly. This confirms that: 1. Your GTM container is properly initialized when the site first loads 2. The page navigation events are being successfully tracked 3. Data is being sent to Google Analytics through GTM Even though Google Tag Assistant might not show the tag "firing" during client-side navigation (since there's no full page reload), the actual tracking is still functioning as intended. Google Analytics receiving the pageview events is the most reliable indicator that your tracking setup is working properly. This behavior is expected in single-page applications like those built with Nuxt, where page transitions happen without full page reloads. As mentioned in a GitHub issue, pages in Nuxt are actually rendered twice during navigation due to how Nuxt's router works with <Suspense>, which is "intended behavior" GitHub Issue #31279. So if you're seeing those pageview events in Google Analytics, you can be confident that your GTM implementation is working correctly despite what Google Tag Assistant might indicate. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@321589587745046529> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KoizumiOP•2mo ago

@kapa.ai is there anyway like trigger the page view event with every page navigation ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can trigger pageview events with every page navigation in Nuxt using lifecycle hooks. Here are a few approaches: Using Nuxt App Hooks The most reliable way is to use Nuxt's built-in hooks that fire during navigation:

<script setup>
const nuxtApp = useNuxtApp();

// Called on Suspense resolved event
nuxtApp.hook('page:finish', () => {
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: window.location.pathname,
        title: document.title
      }
    });
  }
});

// After page transition onAfterLeave event
nuxtApp.hook('page:transition:finish', () => {
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: window.location.pathname,
        title: document.title
      }
    });
  }
});
</script>

<script setup>
const nuxtApp = useNuxtApp();

// Called on Suspense resolved event
nuxtApp.hook('page:finish', () => {
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: window.location.pathname,
        title: document.title
      }
    });
  }
});

// After page transition onAfterLeave event
nuxtApp.hook('page:transition:finish', () => {
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: window.location.pathname,
        title: document.title
      }
    });
  }
});
</script>

Nuxt Hooks Documentation Using Route Watcher Another approach is to watch for route changes:

<script setup>
const route = useRoute();

watch(() => route.fullPath, (newPath) => {
  // Trigger GTM event when route changes
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: newPath,
        title: document.title
      }
    });
  }
});
</script>

<script setup>
const route = useRoute();

watch(() => route.fullPath, (newPath) => {
  // Trigger GTM event when route changes
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'pageView',
      page: {
        path: newPath,
        title: document.title
      }
    });
  }
});
</script>

Implementation Location For this to work on every page navigation, you should place this code in: 1. A plugin file (in the plugins directory) 2. Your app.vue file 3. A layout file that's used by all your pages This ensures the code runs for every page navigation in your Nuxt application, triggering the pageview event each time a user navigates to a different page, even without a full page reload. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@321589587745046529> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

dwol•2mo ago

https://nuxt.com/modules/nuxt-gtm

Nuxt

Nuxt-gtm · Nuxt Modules

A Nuxt module for Google Tag Manager

Gaming

Programming

Add gtm with nuxt

Did you find this page helpful?