javascript - vuejs - google tag manager

I have a vuejs project with various pages:

study.vue
result.vue

My client want me to add in the Google Tag Manager code so that they can use google analytic to track. Where should I add the code in my .vue file? Or should I just add it in the index.html?

Update01

This is what I do so far:

I add the Google Tag Manager code to the index.html.
I installed vue-gtm.
I have app.js and bootstrap.js. basically, bootstrap.js will have all my other js frameworks added. Like lodash.js or 'jquery.js'. I add the sample code from vue-gtm into bootstrap.js:

window._ = require('lodash'); window.moment = require('moment');

window.Vue = require('vue');

import VueRouter from 'vue-router'; Vue.use(VueRouter)

import VueGtm from 'vue-gtm'; Vue.use(VueGtm, { debug: true })
In all the vue file, I add this code:

this.$ua.trackView('Sample', 'samplepath');

However I got error:

TypeError: Cannot read property 'trackView' of undefined

What seems to be the error?

I have a vuejs project with various pages:

study.vue
result.vue

My client want me to add in the Google Tag Manager code so that they can use google analytic to track. Where should I add the code in my .vue file? Or should I just add it in the index.html?

Update01

This is what I do so far:

I add the Google Tag Manager code to the index.html.
I installed vue-gtm.
I have app.js and bootstrap.js. basically, bootstrap.js will have all my other js frameworks added. Like lodash.js or 'jquery.js'. I add the sample code from vue-gtm into bootstrap.js:

window._ = require('lodash'); window.moment = require('moment');

window.Vue = require('vue');

import VueRouter from 'vue-router'; Vue.use(VueRouter)

import VueGtm from 'vue-gtm'; Vue.use(VueGtm, { debug: true })
In all the vue file, I add this code:

this.$ua.trackView('Sample', 'samplepath');

However I got error:

TypeError: Cannot read property 'trackView' of undefined

What seems to be the error?

Share Improve this question edited Feb 22, 2018 at 14:54 Michael W. Czechowski 3,4452 gold badges25 silver badges52 bronze badges asked Nov 1, 2017 at 0:03 sooon 4,8988 gold badges74 silver badges125 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

I assume you are talking about the script that you get when you create an account?

There should be two scripts to include in your HTML, one that has ments around it that include (noscript) and one that doesn't. Both should probably go in your index.html file (whichever file has the <head> and <body> tags). The one that has the noscript should go immediately after the <body> tag, the one that doesn't have the noscript should go near the top of the <head> section.

If you are asking how to fire an event, such as when the user interacts with one of those Vue elements, then yes the code for firing the event should go in the Vue ponent.

UPDATE 1: I looked into it and setup my own Laravel installation to test (since that seems to be what you're using) and tested it. The problem is that $ua is part of the Vue Analytics, so if you want to use $ua you need to install the vue-ua module as well and add that to Vue. I don't know why the documentation for the Tag Manager module shows how to use the Analytics module without making reference to it, maybe you should file an issue on the Tag Manager GitHub to make the documentation more clear!

So in summary, you should replace $ua with $gtm instead. I tested it and $gtm has a trackView function so it will probably achieve what you want, but I don't know how to use Google Tag Manager so you'll have to test it out yourself.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - vuejs - google tag manager - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)