DigitalConsumer.FixMyGlass/src/mixins/analytics-mixin.js
2022-05-02 09:14:06 -04:00

116 lines
No EOL
3.3 KiB
JavaScript

import { storeActions } from "@/constants/store-actions";
import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
import { queryStrings } from "@/constants/query-strings";
import { experimentSettings } from "@/constants/experiments";
import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
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(pageEvent, category, action, label, value) {
var payload = {
userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),
pageName: currentPageName,
sessionId: getSessionIdValue(),
shouldUseSessionId: true,
};
if (pageEvent) {
payload.pageEvent = { action: '', event: pageEvent };
}
if (category) {
payload.customEvent = { category: category, action: action, label: label, value: value };
}
baseMixin.methods.dispatchStoreAction(storeActions.LOG_ACTIVITY, payload, false);
},
pushEventToGA(category, action, label, pushToLogApp = false) {
const eventToBePushed = {
'event': GaEvents.GENERIC_EVENT,
'category': category,
'action': action,
'label': label,
'value': undefined,
'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
}
pushToDataLayerIfDefined(eventToBePushed);
if (pushToLogApp) {
this.logEvent(undefined, category, action, label, undefined);
}
},
pushPageViewToGA() {
const pageViewEvent = {
'event': GaEvents.PAGE_VIEW_EVENT,
'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
'pageTitle': currentPageName
};
pushToDataLayerIfDefined(pageViewEvent);
this.logEvent(currentPageName, analyticsPageEvents.ENTRY);
},
pushExperimentsToDataLayer(experiments) {
experiments?.data?.forEach(exp => {
// Set Google Dimension Index based on experiment settings.
let googleDimensionIndex = 99;
if (exp.settings[experimentSettings.GOOGLE_CUSTOM_DIMENSION_INDEX] !== undefined) {
googleDimensionIndex = exp.settings[experimentSettings.GOOGLE_CUSTOM_DIMENSION_INDEX];
}
// Create object with dimension index and value.
const experimentWithDimension = {};
Object.keys(exp).forEach(key => {
experimentWithDimension[`${key}_${googleDimensionIndex}`] = exp[key];
});
// Push to the data layer with the Google Custom Dimension Index.
pushToDataLayerIfDefined(experimentWithDimension);
});
}
},
computed: {
analyticsPageEvents() {
return analyticsPageEvents;
},
GaCategories() {
return GaCategories;
},
GaActions() {
return GaActions;
},
GaLabels() {
return GaLabels;
}
}
};
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 '';
}
}