VueJS 2 GTM working but nothing visible in Analytics

I use the following package in my Vue2 project: https://github.com/mib200/vue-gtm

I have the debug option enabled, when I change my view i.e. go to a new page it does log in my console:

VueGtm : Dispatching TrackView Object { screenName: “Account”, path:
“/my-account” }

I filled in my Google Tag manager code as below:

Vue.use(VueGtm, {
	id: 'GTM-XXXXXXX',
});

In Google tag manager I created a new tag of the type Google Analytics - Universal Analytics. At the Google Analytics-settings I entered my Google Analytics ID i.e. UA-XXXXXXXXX-XX.

Then I added a “trigger” to this of the type “History change”.

When I check back, after visiting different pages, in Google Analytics, I see that nothing has been added, in other words nothing is being tracked.

Can anyone please tell me what I am doing wrong? been browsing the internet for hours but I do nut understand what I am doing wrong.

My complete GTM code in Vue:

Vue.use(VueGtm, {
	id: 'GTM-XXXXXXX',
	defer: false,
	enabled: true,
	debug: true,
	loadScript: true,
	vueRouter: router,
	trackOnNextTick: false,
});

Note: Edited from my original response.

The trackView event (which fires automatically when you sync the plugin with your router) in vue-gtm under the hood fires an event called content-view to the data layer. You can see it here. You don’t want to try to mix-and-match that along with having GTM trigger GA with History Changes. Additionally, in my experience, GTM isn’t very reliable with history change with Vue apps.

You will need to do some extra work in GTM to actually respond to and fire your page view events to Google Analytics. In general, I prefer to just manually send my page view events to GTM via a router guard. GTM and GA don’t play well out of the box with SPAs, unfortunately. However, if you want to use vue-gtm’s built-in router support, read on:

To get GTM with Google Analytics to work with vue-gtm w/ router syncing:

  1. Start by creating a custom trigger in GTM called “Page View” (or whatever you’d like to call it). It should be of type “Custom Event”. Set the eventName to be “content-view”. (As see in the link to GitHub above, this is what the GTM Vue plugin pushes to the data layer every time a route change occurs).
  2. Next, configure your Google Analytics tag to trigger based on this Page View custom event trigger you just made (instead of on history change).
  3. You can optionally map content-name, which is your URL path, and content-view-name which is your screen name, to Google Analytics as well, if you don’t want GA to try to infer it automatically.
1 Like

Thank you so much for your answer vanpyrzericj, that explains a lot :slight_smile:
I did exactly what you said but unfortunately it still is not working.

I tried loading GTM in preview mode and then I see the pane popup and with each page I load it does increase the number of “events send” so this part should be good :slight_smile:

But nothing shows up in Google Analytics. The only thing I can see at the moment is “1 visitor on the website” but nothing about which pages where opened. Maybe I am looking in the wrong section in Google Analytics?

Just to make sure… do I still need to add the GTM JS code in my head and body? cause I have this NPM package now plus I added the GTM Javascript code to my head and body in index.html

You do not still need to manually add GTM. The plugin takes care of that for you.

What is omnibug telling you related to Google Analytics (not GTM). You should see an entry for Page View Google Analytics.

If GA is saying 1 visitor on the site, that at least means it is being properly loaded. The easiest way to see pages in GA (not an Apps + Web property type) is going to Behavior > Behavior Flow.