diff --git a/src/services/analytics.service.js b/src/services/analytics.service.js index 060a2b7..ea644d6 100644 --- a/src/services/analytics.service.js +++ b/src/services/analytics.service.js @@ -20,13 +20,13 @@ export default { switch (type) { case "ci": { - let engine = cleaninsights.install(Vue, engineConfig.config); + let engine = cleaninsights.install(app, engineConfig.config); this.engines.push(engine); } break; case "matomo": { - let engine = matomo.install(Vue, engineConfig.config); + let engine = matomo.install(app, engineConfig.config); this.engines.push(engine); } break; diff --git a/src/services/cleaninsights.service.js b/src/services/cleaninsights.service.js index ba0fe60..fa6b929 100644 --- a/src/services/cleaninsights.service.js +++ b/src/services/cleaninsights.service.js @@ -1,58 +1,55 @@ -import { CleanInsights, ConsentRequestUi } from 'clean-insights-sdk'; +import { CleanInsights, ConsentRequestUi } from "clean-insights-sdk"; export default { - install(Vue, config) { - - class RequestUi extends ConsentRequestUi { - showForCampaign(campaignId, campaign, complete) { - const period = campaign.nextTotalMeasurementPeriod - if (!period) { - return '' - } - let message = 'Help us improve!\n\n' - + `We would like to collect anonymous usage data between ${period.start.format('LLL')} and ${period.end.format('LLL')} to improve the quality of the product.\n\nYour help would be highly appreciated.` - - complete(window.confirm(message)) - return '' - } + install(app, config) { + class RequestUi extends ConsentRequestUi { + showForCampaign(campaignId, campaign, complete) { + const period = campaign.nextTotalMeasurementPeriod; + if (!period) { + return ""; } + let message = + "Help us improve!\n\n" + + `We would like to collect anonymous usage data between ${period.start.format("LLL")} and ${period.end.format( + "LLL" + )} to improve the quality of the product.\n\nYour help would be highly appreciated.`; - const cleanInsightsService = new Vue({ - config: config, - data() { - return { - ci: null, - campaignId: null, - requestUi: null, - } - }, - created() { - if (this.$options.config) { - const config = this.$options.config; - this.ci = new CleanInsights(config); - - // Get name of first campaign in the config. - this.campaignId = Object.keys(config.campaigns || { invalid: {} })[0]; - - } - }, - methods: { - event(category, action) { - if (!this.ci) { - return; - } - if (!this.requestUi) { - this.requestUi = new RequestUi(); - } - this.ci.requestConsentForCampaign(this.campaignId, this.requestUi, (granted) => { - if (!granted) { - return - } - this.ci.measureEvent(category, action, this.campaignId); - }) - } - } - }); - return cleanInsightsService; + complete(window.confirm(message)); + return ""; + } } -} + + class CleanInsightsServiceClass { + constructor() { + this.config = config; + this.ci = null; + this.campaignId = null; + this.requestUi = null; + if (config) { + this.ci = new CleanInsights(config); + + // Get name of first campaign in the config. + this.campaignId = Object.keys(config.campaigns || { invalid: {} })[0]; + } + } + + event(category, action) { + if (!this.ci) { + return; + } + if (!this.requestUi) { + this.requestUi = new RequestUi(); + } + this.ci.requestConsentForCampaign(this.campaignId, this.requestUi, (granted) => { + if (!granted) { + return; + } + this.ci.measureEvent(category, action, this.campaignId); + }); + } + } + + const cleanInsightsService = new CleanInsightsServiceClass(); + return cleanInsightsService; + }, +}; diff --git a/src/services/matomo.service.js b/src/services/matomo.service.js index 834e689..9fe687b 100644 --- a/src/services/matomo.service.js +++ b/src/services/matomo.service.js @@ -1,24 +1,17 @@ - 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 = ` + install(app, config) { + class MatomoServiceClass { + constructor() { + this.config = config; + this.initialized = false; + if (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', ' ', window.location.hostname]); @@ -31,21 +24,22 @@ export default { 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; + var s = document.createElement("script"); + s.innerHTML = script; + document.body.appendChild(s); + this.initialized = true; + } + } + } + + event(category, action) { + if (this.initialized) { + window._paq.push(["trackEvent", category, action]); + } + } } -} + + const matomoService = new MatomoServiceClass(); + return matomoService; + }, +};