Nuxt•2w ago

useScriptGoogleTagManager no dataLayer push function

Hello, I'm following this : https://scripts.nuxt.com/scripts/tracking/google-tag-manager When I try this :

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
})
// example
proxy.dataLayer.push({ event: 'conversion', value: 1 })

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
})
// example
proxy.dataLayer.push({ event: 'conversion', value: 1 })

dataLayer doesn't exist, it's in proxy.google_tag_manager.dataLayer instead, and it's different. If I try to call push from it : Property 'push' does not exist on type 'AsAsyncFunctionValues<{ gtmDom: boolean; gtmLoad: boolean; subscribers: number; }>' How to get the dataLayer ? Thanks 🙂

7 Replies

OmnislashOP•2w ago

no @kapa.ai anymore :x ?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Je suis désolé, mais je ne peux pas répondre à cette question car elle n'est pas claire et ne semble pas être spécifiquement liée à Nuxt. Je suis un assistant spécialisé pour répondre aux questions sur Nuxt, le framework Vue.js progressif. Si vous avez une question précise sur Nuxt, n'hésitez pas à la poser et je ferai de mon mieux pour y répondre. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

OmnislashOP•2w ago

@kapa.ai Hello, I'm following this : https://scripts.nuxt.com/scripts/tracking/google-tag-manager When I try this :

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
})
// example
proxy.dataLayer.push({ event: 'conversion', value: 1 })

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
})
// example
proxy.dataLayer.push({ event: 'conversion', value: 1 })

dataLayer doesn't exist, it's in proxy.google_tag_manager.dataLayer instead, and it's different. If I try to call push from it : Property 'push' does not exist on type 'AsAsyncFunctionValues<{ gtmDom: boolean; gtmLoad: boolean; subscribers: number; }>' How to get the dataLayer ? Thanks 🙂

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for your question about using Google Tag Manager with Nuxt Scripts. I apologize for the confusion caused by the example in the documentation. Let me clarify this for you based on the information from the knowledge sources. According to the Google Tag Manager documentation, the useScriptGoogleTagManager composable should indeed provide access to the dataLayer. However, it seems there might be a discrepancy between the documentation and the actual implementation. The correct way to access and use the dataLayer should be:

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
})

// Use dataLayer directly from the proxy
proxy.dataLayer.push({ event: 'conversion', value: 1 })

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
})

// Use dataLayer directly from the proxy
proxy.dataLayer.push({ event: 'conversion', value: 1 })

If you're encountering an issue where dataLayer is not directly available on the proxy object, and instead it's nested under google_tag_manager, you might be experiencing a bug or an outdated version of the package. To work around this, you could try:

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID'
})

// Access dataLayer through google_tag_manager if necessary
proxy.google_tag_manager.dataLayer.push({ event: 'conversion', value: 1 })

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID'
})

// Access dataLayer through google_tag_manager if necessary
proxy.google_tag_manager.dataLayer.push({ event: 'conversion', value: 1 })

However, if you're getting a TypeScript error about the push method not existing, it suggests that the types might not be correctly defined for the dataLayer. Given these inconsistencies, I recommend: 1. Double-check that you're using the latest version of Nuxt Scripts. 2. If the issue persists, it would be beneficial to report this as a bug on the Nuxt Scripts GitHub repository. The discrepancy between the documentation and the actual implementation, as well as the TypeScript type issues, should be addressed by the maintainers. In the meantime, if you need a temporary workaround and are certain that the dataLayer object exists and has a push method, you could use a type assertion:

(proxy.google_tag_manager.dataLayer as any[]).push({ event: 'conversion', value: 1 })

(proxy.google_tag_manager.dataLayer as any[]).push({ event: 'conversion', value: 1 })

Please note that this is not an ideal solution and should only be used temporarily until the issue is resolved in the package itself. I apologize that the knowledge sources don't provide a more definitive solution to your specific problem. It would be best to seek further assistance from the Nuxt Scripts maintainers by raising an issue on their GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

OmnislashOP•2w ago

It was a version issue, weird, I basically installed it 2 days ago while reading the documentation Anyway it works fine now ^^

Gaming

Programming

useScriptGoogleTagManager no dataLayer push function

Did you find this page helpful?