Trying to install Google Analytics. Very confused!

nobilik

@gvorster Hi! And where you put gtm.js component? It gives me an error that “dataLayer” is not defined. I’ve already post my question about, but nobody wants to speak with me
However, I’m already solved this with vue-gtm module, but just want to understand. Thanks

gvorster

@nobilik said in Trying to install Google Analytics. Very confused!:

@gvorster Hi! And where you put gtm.js component?

I put gtm-plugin.js it in src/boot folder but renamed it to src/boot/gtm.js and enabled it in quasar.conf.js

boot: [
     'gtm',
     'init',
     'settings',
     'firebase',
     'i18n',
     'axios',
     'vuelidate',
   ],

and put the other gtm.js in src/components/gtm.js

But I have only verified if Google Analytics dashboard is picking up the page views which is working.
I have not checked out the Google Tag Manager yet, so maybe I will come across your issue with the “dataLayer” too

I’m using Quasar 1.4.1

gvorster

@gvorster said in Trying to install Google Analytics. Very confused!:

I have not checked out the Google Tag Manager yet, so maybe I will come across your issue with the “dataLayer” too

I’m using Quasar 1.4.1

I just did a quick test adding a logEvent and it works for me

gtm.logEvent('test', 'test', 'Viewed home page', 0);

And I see it back in the GA dashboard Events page

nobilik

@gvorster could you please write step-by-step instruction? I can’t understand what I’m doing wrong…

gvorster

@nobilik said in Trying to install Google Analytics. Very confused!:

@gvorster could you please write step-by-step instruction? I can’t understand what I’m doing wrong…

Here you go, created with the newest Qusar version 1.5.3

quasar new ga_test

save this into file ./src/components/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;
    },

}

Save this into file ./src/boot/gtm.js

import gtm from 'src/components/gtm';

export default ({ router }) => {

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

Add this to quasar.conf.js

    boot: [
      'gtm'
    ],

I commented this in quasar.conf.js otherwise a lot of syntax errors are shown

/*       extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        })
      } */

Add a test to ./src/pages/Index.vue

<template>
  <q-page class="flex flex-center">
    <img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
  </q-page>
</template>

<script>
import gtm from "../components/gtm";

export default {
  name: 'PageIndex',

  created() {
    gtm.logEvent("myCat", "myAction", "myLabel", 0);
    
  }
}
</script>

Add the Google scripts to ./src/index.template.html and change UA-XXXXXXXXX-X
and GTM-XXXXXXX with your own keys

<!DOCTYPE html>
<html>

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-XXXXXXXXX-X');
  </script>


  <!-- Google Tag Manager -->
  <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-XXXXXXX');</script>
  <!-- End Google Tag Manager -->

  <title><%= htmlWebpackPlugin.options.productName %></title>

  <meta charset="utf-8">
  <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

  <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
  <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
  <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
</head>

<body>
  <!-- DO NOT touch the following DIV -->
  <div id="q-app"></div>![alt text](image url)
</body>

</html>

quasar dev

When loading the app this is what I see in Google Analytics Dashboard real-time view.

nobilik

@gvorster Thanks for help! Will try it after while.

dikutandi

@gvorster thanks for help, I’ve followed your instructions but my GA result does not update to current path. Any sugesstion? Looks like my boot afterEach() doesnot update the GA

jrhopkins83

@gvorster & @dikutandi I’ve followed the steps above and Firebase or Google Analytics are showing nothing .

Where is firebase.analytics invoked? I tried adding firebase.analytics() to my firebase.js boot file but get the error:
firebase.js?fc1b:29 Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.analytics is not a function

I’m just trying to get basic app usage information like users by date. Then I can drill into specific application usage but right now I don’t even have the basics working.

Any suggestions?

dobbel

This post is deleted!

cynderkromi

I’m also trying to get Google Analytics to work. Followed the tutorials in the links in this thread and when I try to add the file to the plugin section of the quasar.conf file I get an error. :(. Anyone have a fully complete tutorial that works?

No More Posting New Topics!

Trying to install Google Analytics. Very confused!