butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Implement support for multiple analytics engines

Browse source
This commit is contained in:
N Pex 2022-06-30 08:38:58 +00:00 • committed by n8fr8
parent 4f6238bc59
commit bfe1fb26e1
5 changed files with 130 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/services/analytics.service.js Normal file
View file

@ -0,0 +1,65 @@
import cleaninsights from './cleaninsights.service'
import matomo from './matomo.service'
export default {
install(Vue) {
const analyticsService = new Vue({
data() {
return {
engines: [],
cachedEvents: [],
initialized: false
}
},
created() {
this.$config.promise.then((config) => {
var analytics = config.analytics || {};
if (!Array.isArray(analytics)) {
analytics = [analytics];
}
for (const engineConfig of analytics) {
if (engineConfig.enabled) {
let type = engineConfig.type || "ci";
switch (type) {
case "ci":
{
let engine = cleaninsights.install(Vue, engineConfig.config);
this.engines.push(engine);
}
break;
case "matomo":
{
let engine = matomo.install(Vue, engineConfig.config);
this.engines.push(engine);
}
break;
}
}
}
this.initialized = true;
// Handle cached events
this.cachedEvents.forEach(([category, action]) => {
this.event(category, action);
})
this.cachedEvents = [];
});
},
methods: {
event(category, action) {
if (!this.initialized) {
this.cachedEvents.push([category, action]);
return
}
// Send the event to each configured analytics engine.
this.engines.forEach((engine) => {
engine.event(category, action);
});
}
}
});
Vue.prototype.$analytics = analyticsService;
}
}

20
src/services/cleaninsights.service.js
View file

@ -1,7 +1,7 @@
import { CleanInsights, ConsentRequestUi } from 'clean-insights-sdk';
export default {
install(Vue) {
install(Vue, config) {
class RequestUi extends ConsentRequestUi {
showForCampaign(campaignId, campaign, complete) {
@ -18,6 +18,7 @@ export default {
}
const cleanInsightsService = new Vue({
config: config,
data() {
return {
ci: null,
@ -26,17 +27,14 @@ export default {
}
},
created() {
const self = this;
this.$config.promise.then(function (config) {
const analytics = config.analytics || {};
if (analytics.enabled && analytics.config) {
self.ci = new CleanInsights(analytics.config);
if (this.$options.config) {
const config = this.$options.config;
this.ci = new CleanInsights(config);
// Get name of first campaign in the config.
self.campaignId = Object.keys(analytics.config.campaigns || { invalid: {} })[0];
}
// Get name of first campaign in the config.
this.campaignId = Object.keys(config.campaigns || { invalid: {} })[0];
});
}
},
methods: {
event(category, action) {
@ -55,6 +53,6 @@ export default {
}
}
});
Vue.prototype.$ci = cleanInsightsService;
return cleanInsightsService;
}
}

51
src/services/matomo.service.js Normal file
View file

@ -0,0 +1,51 @@
export default {
install(Vue, config) {
const matomoService = new Vue({
config: config,
data() {
return {
initialized: false
}
},
created() {
if (this.$options.config) {
const config = this.$options.config;
let server = config.server;
let siteId = config.siteId;
if (server && siteId) {
if (!server.endsWith("/")) {
server = server + "/";
}
let script = `
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="${server}";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '${siteId}']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
`;
var s = document.createElement('script');
s.innerHTML = script;
document.body.appendChild(s);
this.initialized = true;
}
}
},
methods: {
event(category, action) {
if (this.initialized) {
window._paq.push(['trackEvent', category, action]);
}
}
}
});
return matomoService;
}
}