From a6f8a6289eea06f1e51dfb0edebda22a5268ac6c Mon Sep 17 00:00:00 2001 From: FrankRua Date: Thu, 28 Apr 2022 16:25:32 -0400 Subject: [PATCH] GA events --- .../button-question/button-question.vue | 3 +- src/constants/analytics-events.js | 22 ++++++++ src/constants/analytics-page-events.js | 6 --- src/global-methods.js | 28 +++++----- src/layouts/vehicle-damage/vehicle-damage.vue | 3 +- src/mixins/analytics-mixin.js | 52 +++++++++++++------ src/router/index.js | 1 - 7 files changed, 79 insertions(+), 36 deletions(-) create mode 100644 src/constants/analytics-events.js delete mode 100644 src/constants/analytics-page-events.js diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 5c625a690..cae4744e9 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -134,7 +134,8 @@ export default { return answer.Name ? answer.Name : answer; }, handleCheckedChanged(val) { - this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], 'Clicked', val.value, undefined, this.$route.query[queryStrings.FMG_PAGE]); + + this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.analyticsActions.CLICKED, val.value, true); if(this.isMultiSelect && this.selectedValues) { // Add or remove item to array of data to emit diff --git a/src/constants/analytics-events.js b/src/constants/analytics-events.js new file mode 100644 index 000000000..c1b1e5594 --- /dev/null +++ b/src/constants/analytics-events.js @@ -0,0 +1,22 @@ +const analyticsPageEvents = { + ENTRY: "ENTRY", + EVENT: "EVENT" +}; + +const analyticsCategories = { + API_RESPONSE: 'Api_Response', + EVOX: 'Evox' +}; + +const analyticsActions = { + RESULT: 'Result', + CLICKED: 'Clicked', + VIF: 'vif' +}; + +const analyticsLabels = { + SUCCESS: 'Success', + ERROR: 'Error' +}; + +export { analyticsPageEvents, analyticsCategories, analyticsActions, analyticsLabels}; diff --git a/src/constants/analytics-page-events.js b/src/constants/analytics-page-events.js deleted file mode 100644 index 74ff7cc2f..000000000 --- a/src/constants/analytics-page-events.js +++ /dev/null @@ -1,6 +0,0 @@ -const analyticsPageEvents = { - ENTRY: "ENTRY", - EVENT: "EVENT" -}; - -export { analyticsPageEvents }; diff --git a/src/global-methods.js b/src/global-methods.js index 2d5310e73..2cc50c6dc 100644 --- a/src/global-methods.js +++ b/src/global-methods.js @@ -1,16 +1,13 @@ import axios from "axios"; import { applicationConfig } from "@/constants/application-config.js"; +import { analyticsCategories, analyticsActions,analyticsLabels} from "@/constants/analytics-events"; +import analyticsMixIn from "@/mixins/analytics-mixin.js"; import httpStatusCodes from "http-status-codes"; export default { callHttpClient({ method, endpoint, payload }) { return new Promise((resolve, reject) => { - var apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL; - - if(endpoint.includes('analytics')){ - apiGatewayUrl = 'https://localhost:44324'; - } - + const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL; const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass", }); @@ -24,17 +21,24 @@ export default { }).then( (response) => { if (response.status == httpStatusCodes.OK) { - if(response.data == undefined) { - reject(response); - }else{ - resolve(response); + if (response.data == undefined) { + analyticsMixIn.methods.pushEventToGA(analyticsCategories.API_RESPONSE, analyticsActions.RESULT, + `${analyticsLabels.ERROR}_${endpoint}`, true); + + return reject(response); + } else { + analyticsMixIn.methods.pushEventToGA(analyticsCategories.API_RESPONSE, analyticsActions.RESULT, + `${analyticsLabels.SUCCESS}_${endpoint}`, true); + + return resolve(response); } - } else { - reject(response); } }, (error) => { console.error(error); + analyticsMixIn.methods.pushEventToGA(analyticsCategories.API_RESPONSE, analyticsActions.RESULT, + `${analyticsLabels.ERROR}_${endpoint}`, true); + return reject(error.response); } ); diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 305336184..53417bcae 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -143,7 +143,8 @@ export default { }, mounted(){ if(this.$store.getters.vehicle.imageVifNumber){ - this.pushEventToGA("Evox", `vif_${this.$store.getters.vehicle.imageVifNumber}`, this.$store.getters.vehicle.carId, undefined, this.$route.query[queryStrings.FMG_PAGE]); + this.pushEventToGA(this.analyticsCategories.EVOX, `${this.analyticsActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`, + this.$store.getters.vehicle.carId, true); } }, methods: { diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index f61ebb378..e18c167f4 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -1,11 +1,14 @@ import { storeActions } from "@/constants/store-actions"; -import baseMixin from "@/mixins/base-mixin"; -import { settleAllPromises } from "@/helpers/layout-helper"; import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper"; import { queryStrings } from "@/constants/query-strings"; -import { analyticsPageEvents } from "@/constants/analytics-page-events"; +import { analyticsPageEvents, analyticsCategories, analyticsActions, analyticsLabels } from "@/constants/analytics-events"; import { experimentSettings } from "@/constants/experiments"; +import baseMixin from "@/mixins/base-mixin"; + +// We will need current page name for multiple methods, define it once to re-use. +const currentPageName = getPageNameByQueryString(); + export default { methods: { logEvent(destinationFmgPageValue, pageEvent, category, action, label, value){ @@ -28,31 +31,33 @@ export default { baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_ACTIVITY, payload, false); }, - pushEventToGA(category, action, label, value, pageName, pushToLogApp) { + pushEventToGA(category, action, label, pushToLogApp = false) { const eventToBePushed = { 'event': 'ga_event', 'category': category, 'action': action, 'label': label, - 'value': value, - 'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}` + 'value': undefined, + 'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}` } pushToDataLayerIfDefined(eventToBePushed); if (pushToLogApp) { - this.logEvent(pageName, null, category, action, label, value); + this.logEvent(currentPageName, undefined, category, action, label, undefined); } }, - pushPageViewToGA(pageName) { + pushPageViewToGA() { const pageViewEvent = { 'event': 'logPageview', - 'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`, - 'pageTitle': pageName + 'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`, + 'pageTitle': currentPageName }; pushToDataLayerIfDefined(pageViewEvent); + + this.logEvent(currentPageName, analyticsPageEvents.ENTRY); }, pushExperimentsToDataLayer(experiments){ @@ -75,19 +80,36 @@ export default { // Push to the data layer with the Google Custom Dimension Index. pushToDataLayerIfDefined(experimentWithDimension); }); - }, - this.logEvent(pageName, analyticsPageEvents.ENTRY); } }, computed: { - storeActions() { - return storeActions; + analyticsPageEvents() { + return analyticsPageEvents; }, - }, + analyticsCategories() { + return analyticsCategories; + }, + analyticsActions() { + return analyticsActions; + }, + analyticsLabels() { + return analyticsLabels; + } + } }; function pushToDataLayerIfDefined(data) { if (window.dataLayer !== undefined) { window.dataLayer.push(data); } +} + +function getPageNameByQueryString() { + const params = new URLSearchParams(location.search); + + if(params.has(queryStrings.FMG_PAGE)) { + return params.get(queryStrings.FMG_PAGE); + }else{ + return ''; + } } \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index f175f7cc2..f88d803ef 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -5,7 +5,6 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js" import { routingTable } from "@/router/router-constants/routing-table.js"; import { globalEvents, globalEventTypes } from "@/constants/events"; import { queryStrings } from "@/constants/query-strings"; -import { analyticsPageEvents } from "./router-constants/analytics-page-events"; import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper"; // Heritage integration