From 61dbd2fc038115d9bf9911dbdfa509b8d604bbd5 Mon Sep 17 00:00:00 2001 From: CarlNation Date: Tue, 26 Apr 2022 09:17:21 -0400 Subject: [PATCH] CSR-18 refactors --- src/mixins/analytics-mixin.js | 66 ++++++++++++++++++++++++++++++ src/mixins/analytics-mixin.spec.js | 21 ++++++++++ src/mixins/base-mixin.js | 29 ------------- src/router/index.js | 35 ++-------------- 4 files changed, 90 insertions(+), 61 deletions(-) create mode 100644 src/mixins/analytics-mixin.js create mode 100644 src/mixins/analytics-mixin.spec.js diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js new file mode 100644 index 000000000..a62a0bd1a --- /dev/null +++ b/src/mixins/analytics-mixin.js @@ -0,0 +1,66 @@ +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"; + +export default { + methods: { + async logPageEvent(destinationFmgPageValue, pageEvent){ + const logActivityPromise = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_ACTIVITY, + { + userId: getDeviceIdValue(), + sessionKey: getSessionKeyValue(), + pageName: destinationFmgPageValue, + sessionId: getSessionIdValue(), + shouldUseSessionId: true, + pageEvent: { + action: '', + event: pageEvent, + } + }, false); + + // Settle promises and get results + const promiseResultMap = [ + { + resultKey: "logActivity", + promise: logActivityPromise, + }, + ]; + + let resultMap = await settleAllPromises(promiseResultMap); + }, + + pushEventToGA(category, action, label, value, pageName) { + const eventToBePushed = { + 'event': 'ga_event', + 'category': category, + 'action': action, + 'label': label, + 'value': value, + 'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}` + } + pushToDataLayerIfDefined(eventToBePushed); + }, + + pushPageViewToGA(pageName) { + const pageViewEvent = { + 'event': 'logPageview', + 'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`, + 'pageTitle': pageName + }; + pushToDataLayerIfDefined(pageViewEvent); + } + }, + computed: { + storeActions() { + return storeActions; + }, + }, +}; + +function pushToDataLayerIfDefined(data) { + if (window.dataLayer !== undefined) { + window.dataLayer.push(data); + } +} \ No newline at end of file diff --git a/src/mixins/analytics-mixin.spec.js b/src/mixins/analytics-mixin.spec.js new file mode 100644 index 000000000..c85a637fc --- /dev/null +++ b/src/mixins/analytics-mixin.spec.js @@ -0,0 +1,21 @@ +import analyticsMixin from "@/mixins/analytics-mixin"; +import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js"; +import { storeActions } from "@/constants/store-actions"; + +describe("analyticsMixin.js", () => { + test("logPageEvent: calls dispatch with type and payload", () => { + const type = ""; + const payload = {}; + + const mockData = { + actionList: [{ + actionName: storeActions.LOG_ACTIVITY + }], + } + var mocks = setupMocksForJsFiles(mockData); + + analyticsMixin.methods.logPageEvent(type, payload); + + expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toBeCalled(); + }); +}); \ No newline at end of file diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 11947f26a..43ce3f6f0 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -3,7 +3,6 @@ import { storeActions } from "@/constants/store-actions.js"; import { storeMutations } from "@/constants/store-mutations.js"; import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; import { vehicleCategories } from "@/constants/vehicle-categories.js"; -import { queryStrings } from "@/constants/query-strings"; export default { data() { @@ -41,28 +40,6 @@ export default { el && el.focus(); } }, - - pushEventToGA(category, action, label, value, pageName) { - const eventToBePushed = { - 'event': 'ga_event', - 'category': category, - 'action': action, - 'label': label, - 'value': value, - 'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}` - } - pushToDataLayerIfDefined(eventToBePushed); - }, - - pushPageViewToGA(pageName) { - const pageViewEvent = { - 'event': 'logPageview', - 'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`, - 'pageTitle': pageName - }; - pushToDataLayerIfDefined(pageViewEvent); - } - }, computed: { storeActions() { @@ -88,9 +65,3 @@ function encodeUriData(payload) { }); } } - -function pushToDataLayerIfDefined(data) { - if (window.dataLayer !== undefined) { - window.dataLayer.push(data); - } -} diff --git a/src/router/index.js b/src/router/index.js index 985d90e11..1d46eec5f 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -15,12 +15,11 @@ import { getPageToRouteExistingOrderTo, navigateToHeritageFunnel } from "@/helpe import baseMixin from "@/mixins/base-mixin"; import eventBus from "@/helpers/event-bus/event-bus"; import store from "@/store"; +import analyticsMixin from "@/mixins/analytics-mixin"; // Components import ComponentTest from "@/layouts/component-test/component-test.vue"; import FormTest from "@/layouts/form-test/form-test.vue"; -import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper"; -import { settleAllPromises } from "@/helpers/layout-helper"; import { analyticsPageEvents } from "./router-constants/analytics-page-events"; const routes = [ @@ -79,7 +78,6 @@ const routes = [ await GoToFunnelStartOn404(next); } - // logPageEvent(to.query.fmgPage, analyticsPageEvents.ENTRY); return next({ name: to.query.fmgPage, query: to.query, params: to.params }); } @@ -101,8 +99,6 @@ const routes = [ await GoToFunnelStartOn404(next); } - // logPageEvent(to.query.fmgPage, analyticsPageEvents.ENTRY); - // Assign current query string parameters, as well as our fmgPage one. next({ name: routeData[0].name, @@ -127,8 +123,8 @@ const router = createRouter({ //---------------------------------------------------------- Router Functions ---------------------------------------------------------- router.afterEach((to, from) => { - baseMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]); - logPageEvent(to.query[queryStrings.FMG_PAGE], analyticsPageEvents.ENTRY); + analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]); + analyticsMixin.methods.logPageEvent(to.query[queryStrings.FMG_PAGE], analyticsPageEvents.ENTRY); }); router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => { @@ -275,29 +271,4 @@ function resetDependentState(component) { return component.default.methods.resetDependentState(); } -async function logPageEvent(destinationFmgPageValue, pageEvent){ - const logActivityPromise = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_ACTIVITY, - { - userId: getDeviceIdValue(), - sessionKey: getSessionKeyValue(), - pageName: destinationFmgPageValue, - sessionId: getSessionIdValue(), - shouldUseSessionId: true, - pageEvent: { - action: '', - event: pageEvent, - } - }, false); - - // Settle promises and get results - const promiseResultMap = [ - { - resultKey: "logActivity", - promise: logActivityPromise, - }, - ]; - - let resultMap = await settleAllPromises(promiseResultMap); -} - export default router; \ No newline at end of file