dreamonkey / quasar-app-extension-tracking

Provide composables to add multiple tracking scripts via Quasar Meta plugin
MIT License
4 stars 0 forks source link

Explore firing events upon navigation #2

Closed IlCallo closed 2 years ago

IlCallo commented 2 years ago

Currently tracking scripts only fire events when you first land on the website

IlCallo commented 2 years ago

If needed, adding this code into a boot file should suffice, if a customPageView is correctly set on GTM

// See https://fullstack-tutorials.com/quasar-framework/quasar-framework-google-tag-manager-and-analytics-setup-for-an-spa-website
import { uid } from 'quasar';
import { boot } from 'quasar/wrappers';

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

export function logEvent(category, action, label, value) {
  window.dataLayer.push({
    event: 'customEvent',
    category: category,
    action: action,
    label: label,
    value: value,
    cid: getCid(),
  });
}

export function logPage(path) {
  // Here you can preprocess the path, if needed
  window.dataLayer.push({
    event: 'customPageView',
    path: path,
    cid: getCid(),
  });
}

export default boot(({ router }) => {
  router.afterEach(to => {
    logPage(to.path);
  });
});

/*
Use this to log events:

import { logEvent } from 'src/boot/gtm';
...

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

*/

I also saw this could probably be skipped for page views by using GTM History events: https://www.analyticsmania.com/other-posts/single-page-applications-with-universal-analytics-and-google-tag-manager/

IlCallo commented 2 years ago

Example from another library: https://github.com/gtm-support/vue-gtm/blob/2cf0a81b5856715037e49b3a85da2703993b5990/src/index.ts#L107

IlCallo commented 2 years ago

Fixed into https://github.com/dreamonkey/quasar-app-extension-tracking/commit/47f403092a70de1c410d23f1b896729a7e42ab56