I have an existing javascript code, which tracks page views and fires correctly on page load. however, i want to now add the ability to allow event tracking, eg onclick, scrollto etc.
The issue is after the page is loaded and the trackPageView has fired i am no longer able to push any more events i get _viq.push is not a function as it converts to an object. I have tried for over 12 hours, googled many articles, but to of no avail.
Here is the script that i embed on the page:
var _viq = window._viq = window._viq || [];
_viq.push(['trackPageView']);
(function() {
var u="https://visitor-inisghts.local:1443/";
_viq.push(['setAccount', 'dev']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'tracking.js'; s.parentNode.insertBefore(g,s);
})();
Below is the code for the tracking script:
'use strict'
/*! js-cookie v3.0.1 | MIT */
!function (e, t) { "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : (e = e || self, function () { var n = e.Cookies, o = e.Cookies = t(); o.noConflict = function () { return e.Cookies = n, o } }()) }(this, (function () { "use strict"; function e(e) { for (var t = 1; t < arguments.length; t++) { var n = arguments[t]; for (var o in n) e[o] = n[o] } return e } return function t(n, o) { function r(t, r, i) { if ("undefined" != typeof document) { "number" == typeof (i = e({}, o, i)).expires && (i.expires = new Date(Date.now() + 864e5 * i.expires)), i.expires && (i.expires = i.expires.toUTCString()), t = encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent).replace(/[()]/g, escape); var c = ""; for (var u in i) i[u] && (c += "; " + u, !0 !== i[u] && (c += "=" + i[u].split(";")[0])); return document.cookie = t + "=" + n.write(r, t) + c } } return Object.create({ set: r, get: function (e) { if ("undefined" != typeof document && (!arguments.length || e)) { for (var t = document.cookie ? document.cookie.split("; ") : [], o = {}, r = 0; r < t.length; r++) { var i = t[r].split("="), c = i.slice(1).join("="); try { var u = decodeURIComponent(i[0]); if (o[u] = n.read(c, u), e === u) break } catch (e) { } } return e ? o[e] : o } }, remove: function (t, n) { r(t, "", e({}, n, { expires: - 1 })) }, withAttributes: function (n) { return t(this.converter, e({}, this.attributes, n)) }, withConverter: function (n) { return t(e({}, this.converter, n), this.attributes) } }, { attributes: { value: Object.freeze(o) }, converter: { value: Object.freeze(n) } }) }({ read: function (e) { return '"' === e[0] && (e = e.slice(1, - 1)), e.replace(/(%[dA-F]{2})+/gi, decodeURIComponent) }, write: function (e) { return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g, decodeURIComponent) } }, { path: "/" }) }));
/*!
* generateUUID function
* http://stackoverflow.com/a/8809472
*/
function generateUUID() { var x = (new Date).getTime(), e = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (e) { var r = (x + 16 * Math.random()) % 16 | 0; return x = Math.floor(x / 16), ("x" == e ? r : 3 & r | 8).toString(16) }); return e }
/*!
* Visitor insight tracking library
*/
(function (context) {
var API_LOC = "https://api.visitor-insights.local:1443/",
VI_QUEUE = "_viq",
VI_SESSION_LENGTH = 60 * 60 * 24 * 365; // in seconds
var vInsight = vInsight || {};
vInsight = function (queue) {
this.queue = new vInsight.Queue(queue);
}
vInsight.Queue = function (queue) {
this.executeAll(queue);
}
vInsight.Queue.prototype = {
executeAll: function (queue) {
for (var i in queue) {
var method = this[queue[i][0]];
method.apply(this, queue[i].slice(1));
}
},
setAccount: function (accountId) {
this._accountId = accountId;
},
trackPageView: function () {
const urlSearchParams = new URLSearchParams(context.location.href);
const params = Object.fromEntries(urlSearchParams.entries());
var sessionId = Cookies.get('session_id');
if (!sessionId) {
sessionId = generateUUID();
}
var data = {
tenant: this._accountId,
userAgent: navigator.userAgent ? navigator.userAgent : null,
date: new Date().getTime(),
session_id: sessionId,
current_page: context.location.href,
referer: context.document.referrer,
};
//var apiLocation = API_LOC.replace('{accountId}', this._accountId);
var apiLocation = API_LOC;
var response = fetch(apiLocation, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-Tenant': this._accountId
},
})
.then((response) => response.json())
.then((data) => {
Cookies.set('last_viewed_page_id', data.current_viewed_page_id, { expires: VI_SESSION_LENGTH })
Cookies.set('last_viewed_page_at', data.current_viewed_page_at, { expires: VI_SESSION_LENGTH })
});
},
trackEvent: function () {
alert('Enable click tracking');
},
scrollToEvent: function () {
alert('scroll to event');
},
}
context[VI_QUEUE] = new vInsight(context[VI_QUEUE]);
})(window);
What i want to be able to do is on a button click:
<button onclick="_viq.push(['trackEvent',{download:'has been clicked'}])">click</button>
and then capture that on the tracking script so its picked up by the trackEvent function.