Trying to install Google Analytics. Very confused!



  • Dear Community.

    I am trying to install Google Analytics according to the guide:
    http://quasar-framework.org/guide/managing-google-analytics.html

    1. First I did step 1 - 5 of this guide:
      http://www.multiminds.eu/2016/12/06/google-analytics-tag-manager-ionic-cordova/
    2. Then I followed the Quasar framework guide.

    Question 1
    I’m not sure what to fill in the sessionId. Do I have to use the user ID that is logged into my cordova app?
    Question 2
    Nothing is recorded in my Google Analytics… How can I know if I set up everything correctly? The ajax requests seem to be sent correctly.

    Any ideas??

    Best regards,
    -Luca Ban



  • ** 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/



  • @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?



  • 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.



  • 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/



  • @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



  • @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



  • @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 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



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



  • @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.

    Selection_015.png
    Selection_016.png
    Selection_017.png



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


Log in to reply