Trying to install Google Analytics. Very confused!

a47ae

** Question 1 **
If you have a user id you could use this with the benefit that you can link that id to real world users.
But you can use everything you want to, as long as it is unique per user.

** Question 2 **
Use your Quasar app in web mode and try to check the links with a tool like http://www.gachecker.com/

mesqueeb

@a47ae Thanks!! I tried the link you gave me. It seems nothing is working… : D

0_1504829279466_スクリーンショット 2017-09-08 09.03.31.png

Any ideas?

here’s my code:
src/index.html

	<!-- 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-5RFM833');</script>
	<!-- End Google Tag Manager -→

main.js

// G.A. Google Analytics
import ga from './config/analytics.js'
router.afterEach((to, from) => {
    ga.logPage(to.path, to.name, store.getters['user/id'])
})

Is there anything else I need to add?

a47ae

That’s really strange. have a look at the rendered page in the browser and inspect the source if the script part for the Google Tag Manager is still there.

jannerantala

This might be late for you but I hope this helps someone. I have written two tutorials for both SPA website and for Cordova how to set up Google Tag Manager / Google Analytics:
https://jannerantala.com/tutorials/quasar-framework-google-tag-manager-and-analytics-setup-for-an-spa-website/
https://jannerantala.com/tutorials/quasar-framework-google-analytics-setup-for-cordova-app/

gvorster

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

This might be late for you but I hope this helps someone. I have written two tutorials for both SPA website and for Cordova how to set up Google Tag Manager / Google Analytics:
https://jannerantala.com/tutorials/quasar-framework-google-tag-manager-and-analytics-setup-for-an-spa-website/
https://jannerantala.com/tutorials/quasar-framework-google-analytics-setup-for-cordova-app/

Thanks, I got it working using these instructions.
Some remarks:

In newer Quasar version ‘plugins’ are now called ‘boot’ files

And you need to publish GTM version first otherwise you get a 404 when

https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX

is called

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!