Google Analytics not showing current page, only showing "/"

JSONK

I am working on adding Google Analytics to my Quasar site. I followed @gvorster’s response to this question. Google Analytics recognizes when I am on any of the pages, but it does not actually show the current page that I am on. It always just shows “/” for every page.

I currently have the Global Site tag in the <head> tag of index.template.html.

In boot, I have this gtm.js code:

import gtm from 'src/components/gtm';

export default ({ router }) => {

    router.afterEach((to, from) => {
        gtm.logPage(to.path);
    })
}

In components, I have gtm.js:

import { uid } from 'quasar'

export default {

    logEvent(category, action, label, value) {

        dataLayer.push({
            'event': 'customEvent',
            'category': category,
            'action': action,
            'label': label,
            'value': value,
            'cid': this.getCid()
        });

    },

    logPage(path) {
        // Here you can preprocess the path, if needed
        dataLayer.push({
            'event': 'customPageView',
            'path': path,
            'cid': this.getCid()
        });

    },

    getCid() {
        // We need an unique identifier for this session
        // We store it in a localStorage, but you may use cookies, too
        if (!localStorage.cid) {
            localStorage.cid = uid();
        }
        return localStorage.cid;
    },

}

In my quasar.conf.js file, I have gtm included in boot:

boot: [
      'axios',
      "gtm"
    ],

It still notifies Google Analytics when I am on any page, but the active page is always “/”

dobbel

@JSONK

https://fullstack-tutorials.com/quasar-framework/quasar-framework-google-tag-manager-and-analytics-setup-for-an-spa-website

JSONK

@dobbel I almost made it through the tutorial and then ran into a very strange error. There was no plugin folder, so I created one and put the file in. Then, on the step where I need to change the plugins in quasar.conf.js to

plugins: [
    ...
    'gtm-plugin',
],

I get the following error:

.quasar  /import-quasar.js: Unexpected token, expected "," (20:33)
    18 | import Vue from 'vue'
    19 | 
  > 20 | import {Quasar[33  m,QExpansionItem,gtm-plugin} from 'qua  sar'
       |                                  ^    21 | 
    22 | 
    23 | Vue.use(Quasar, {   config: {},lang: lang,iconSet:[  39m iconSet,components: {QExpansionItem},[  39mplugins: {gtm-plugin} })

Any idea what this is? Also, thanks again for the help. That link was helpful, just ran into this issue at the end. I appreciate the help

JSONK

@dobbel Update: even though that plugin method didn’t work, I ended up following @gvorster’s step by step for the GTM part and it worked with boot! Not sure what was wrong when trying to use the plugin but happy to have it working now. Appreciate the help. Have a nice week!

dobbel

@JSONK I remember I had to combining the 2 ‘guides’ to get it working too, including the boot file part.