Select Page

Quasar Framework: Google Analytics Setup for a Cordova App

Quasar Framework is a fantastic framework to build both websites and Cordova apps by using the same code base. This tutorial covers the setup of Google Analytics to work in a Cordova app that is created with Quasar. For an SPA website, you may want to read this tutorial: Quasar Framework: Google Tag Manager and Analytics Setup for an SPA Website

In general, the most preferred way to set up Google Analytics is to use Google Tag Manager, but unfortunately, there are many limitations when working with Cordova wrapper. Getting Tag Manager to work is tricky without going into Cordova plugins that use native Tag Manager SDK. In this case, you also need to create app-compatible Tag Manager container, which means a lot of extra tweaking for iOS and Android. Here I will show you a simple way to get this done without the Tag Manager.

Solution: Google Analytics Measurement Protocol

Measurement Protocol is a straight-forward way to import page views and events into Google Analytics. Please note that the Measurement Protocol is not a full replacement for standard installation but most of the cases, it will do the work. Here we also assume that you are using Vue Router and Axios, but with little adaption, you can use your favourite router and HTTP client.

Create a file src/components/ga.js and replace the tid, an, aid and av with your Analytics tracking ID and app details. For a full list of parameters, see Measurement Protocol Parameter Reference.


import { uid } from 'quasar'
import axios from 'axios'

export default {

    logEvent (category, action, label, value) {

        axios.get('https://www.google-analytics.com/collect', { params: {
            v: 1,
            tid: 'UA-XXXXXXXX-X',
            ds: 'app', // If this is a website, use 'website'
            t: 'event',
            cid: this.getCid(),
            ec: category,
            ea: action,
            el: label,
            ev: value,
            an: 'My App', // If not given, this event is not shown in Real-Time view
            aid: 'com.jannerantala.my-app',
            av: 'v1.0',
        }});
    },

    logPage (path, name) {

        axios.get('https://www.google-analytics.com/collect', { params: {
            v: 1,
            tid: 'UA-XXXXXXXX-X',
            ds: 'app',
            t: 'pageview',
            cid: this.getCid(),
            dl: path,
            an: 'My App', // If not given, this event is not shown in Real-Time view
            aid: 'com.jannerantala.my-app',
            av: 'v1.0',
        }});
    },

    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;
    }

}

Then create a Quasar plugin src/plugins/analytics.js

import ga from 'src/components/ga';

export default ({ router }) => {

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

Enable that plugin in quasar.conf.js:

plugins: [
    ...
    'analytics',
],

To collect pageviews (route changes, to be precise), we are done! You can now test it by opening the Google Analytics and see the Real-Time view. You should see 1 active user.

To collect events, you can do like this when something amazing happens:

import ga from 'src/components/ga';
...

ga.logEvent('conversions', 'PurchaseDoneEvent', 'Purchase Done', '99.90');

Note: remember to add Goals and Conversions in Analytics account.

Did you find this tutorial helpful? Please share:

Subscribe to newsletter

We will never send you any marketing material