Select Page

Quasar Framework: Google Tag Manager and Analytics Setup for an SPA Website

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 Tag Manager and Google Analytics to work in an SPA website that is created with Quasar. The tutorial has only basic data that is transmitted to GTM and GA, but once you understand how it works, you can easily modify it for your purposes.

The problem with an SPA website is that standard GTM/GA setup relies on page views which we don’t have in SPA. Instead, we need to track route changes, which need some manual work and tweaking. However, when done properly, the prize is that you will have a full control of what to send to GTM and when. It is also easy to preprocess some parameters, for example, the path /client/1234/posts can be processed to /client/x/posts before the send to avoid Analytics to interpret each clients’ posts page as a separate page.

If you are building Cordova app and need only Google Analytics, you may want to read this instead: Quasar Framework: Google Analytics Setup for Cordova App.

Google Tag Manager Setup

First, we need a container in Google Tag Manager. Sign in to Tag Manager and create a new container of type Web:

Create GTM container that is type of WEB

Add the following variables. Keep default settings except in Google Analytics Settings variable (see screenshot):

Add your own Google Analytics Tracking ID in Google Analytics Settings variable:

Add the following two triggers:

Add the following two separate Google Universal Analytics tags:

Now we have set up the Tag Manager! This configuration basically means that if GTM receives event via dataLayer that name is customEvent, it triggers a tag that sends the event data to Google Analytics with some parameter mapping done first. If the received event is named customPageView, it triggers a tag that sends page view data to Google Analytics.

Quasar Configuration

Next, we need to add the GMT to our project src/index.template.html inside the head section. Replace the GTM id with your own.

<!-- 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 -->

Now we have the dataLayer object available and we can push events into it.

Add a 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;
    },

}

Then create a Quasar plugin src/plugins/gtm-plugin.js

import gtm from 'src/components/gtm';

export default ({ router }) => {

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

Enable that plugin in quasar.conf.js:

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

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 gtm from 'src/components/gtm';
...

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