Closed IlCallo closed 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/
Example from another library: https://github.com/gtm-support/vue-gtm/blob/2cf0a81b5856715037e49b3a85da2703993b5990/src/index.ts#L107
Currently tracking scripts only fire events when you first land on the website