From 6cdc021efef4bc35b97cdcd0df4e40244d4dc559 Mon Sep 17 00:00:00 2001 From: Ans Date: Thu, 7 Nov 2024 15:08:26 -0500 Subject: [PATCH 1/2] Delete unused analytics scripts --- .../apps/analytics-gtm/js/bah-explainers.js | 140 ------------ .../js/tab-navigation-tracking.js | 212 ------------------ 2 files changed, 352 deletions(-) delete mode 100644 cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js delete mode 100644 cfgov/unprocessed/apps/analytics-gtm/js/tab-navigation-tracking.js diff --git a/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js b/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js deleted file mode 100644 index 891c734d1fe..00000000000 --- a/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js +++ /dev/null @@ -1,140 +0,0 @@ -import { analyticsSendEvent } from '@cfpb/cfpb-analytics'; -import { addEventListenerToSelector } from './util/analytics-util'; - -/* -Buying a House /owning-a-home/loan-estimate/ -Buying a House /owning-a-home/closing-disclosure/ -*/ - -/** - * @param {string} label - The label to pass off to analytics. - */ -export default function (label) { - const trackingLabel = `${label} Interaction`; - - const expandableStates = {}; - let lastExpandable; - - /** - * Record state (expanded or collapsed) of expandables. - * @param {string} id - The unique HTML ID of an expandable. - */ - function recordExpandableState(id) { - if (!expandableStates[id]) { - expandableStates[id] = true; - } else if (lastExpandable === id) { - expandableStates[id] = !expandableStates[id]; - } - lastExpandable = id; - } - - /** - * Record state (expanded or collapsed) of expandables. - * @param {HTMLElement} expandable - An expandable HTML element. - * @returns {boolean} True if the expandable is animating, false otherwise. - */ - function isAnimatingExpandable(expandable) { - let isAnimating = false; - - if ( - expandable.classList.contains('o-expandable__expanding') || - expandable.classList.contains('o-expandable__collapsing') - ) { - isAnimating = true; - } - - return isAnimating; - } - - /** - * @param {MouseEvent} event - Mouse event from the click. - */ - function trackFormExplainerPageLinkClick(event) { - const target = event.target; - const pageNumber = 'Page ' + target.getAttribute('data-page'); - analyticsSendEvent({ - event: trackingLabel, - action: 'Page link click', - label: pageNumber, - }); - } - - /** - * @param {MouseEvent} event - Mouse event from the click. - */ - function trackFormExplainerPageButtonClick(event) { - const target = event.currentTarget; - const currentPageDom = document.querySelector( - '.form-explainer__page-link.current-page', - ); - const currentPage = 'Page ' + currentPageDom.getAttribute('data-page'); - let action = 'Next Page button clicked'; - if (target.classList.contains('prev')) { - action = 'Previous Page button clicked'; - } - analyticsSendEvent({ event: trackingLabel, action, label: currentPage }); - } - - /** - * @param {MouseEvent} event - Mouse event from the click. - */ - function trackExpandableTargetsClick(event) { - const elem = event.currentTarget; - const expandable = elem.parentNode; - const expandableID = expandable.id; - if (isAnimatingExpandable(expandable)) { - return; - } - recordExpandableState(expandableID); - - let action = 'Expandable collapsed'; - const label = elem.querySelector('.o-expandable__label'); - const text = label.textContent.trim(); - if (expandableStates[expandableID] === true) { - action = 'Expandable expanded'; - } - analyticsSendEvent({ event: trackingLabel, action, label: text }); - } - - /** - * @param {MouseEvent} event - Mouse event from the click. - */ - function trackImageMapOverlayClick(event) { - const target = event.target; - const href = target.getAttribute('href'); - const text = target.textContent.trim(); - - let action = 'Image Overlay click - expandable collapsed'; - const expandable = document.querySelector(href); - const expandableID = expandable.id; - if (isAnimatingExpandable(expandable)) { - return; - } - recordExpandableState(expandableID); - if (expandableStates[expandableID] === true) { - action = 'Image Overlay click - expandable expanded'; - } - analyticsSendEvent({ event: trackingLabel, action, label: text }); - } - - addEventListenerToSelector( - '.form-explainer__page-link', - 'click', - trackFormExplainerPageLinkClick, - ); - addEventListenerToSelector( - '.form-explainer__page-buttons button', - 'click', - trackFormExplainerPageButtonClick, - ); - addEventListenerToSelector( - '.o-expandable__header', - 'mouseup', - trackExpandableTargetsClick, - ); - addEventListenerToSelector( - '.image-map__overlay', - 'click', - trackImageMapOverlayClick, - ); -} diff --git a/cfgov/unprocessed/apps/analytics-gtm/js/tab-navigation-tracking.js b/cfgov/unprocessed/apps/analytics-gtm/js/tab-navigation-tracking.js deleted file mode 100644 index 5876c0926c4..00000000000 --- a/cfgov/unprocessed/apps/analytics-gtm/js/tab-navigation-tracking.js +++ /dev/null @@ -1,212 +0,0 @@ -import webStorageProxy from '../../../js/modules/util/web-storage-proxy'; - -// If cookies are turned off, we set localStorage variables to null. -let _localStorage; -let _sessionStorage; - -try { - _localStorage = window.localStorage; - _sessionStorage = window.sessionStorage; -} catch { - _localStorage = null; - _sessionStorage = null; -} - -/** - * Adapted from - * https://www.simoahava.com/analytics/track-browsing-behavior-in-google-analytics/#1-the-why-and-how-theory - * for tracking tab navigation of the site. - */ - -(() => { - // Bail out if localStorage is not supported or is blocked. - if (!window.Storage || _localStorage === null || _sessionStorage === null) { - return; - } - - /* Set to false if you only want to register "BACK/FORWARD" - if either button was pressed. */ - const detailedBackForward = true; - - let openTabs = JSON.parse(webStorageProxy.getItem('_tab_ids', _localStorage)); - let tabId = webStorageProxy.getItem('_tab_id', _sessionStorage); - let navPath = JSON.parse( - webStorageProxy.getItem('_nav_path', _sessionStorage), - ); - const curPage = document.location.href; - let newTab = false; - const origin = document.location.origin; - - let redirectCount; - let navigationType; - let prevInStack; - let lastInStack; - - /** - * Get the navigation path to a tab. - * @returns {string} The navigation type. - */ - function getBackForwardNavigation() { - if (detailedBackForward === false) { - return 'BACK/FORWARD'; - } - - if (navPath.length < 2) { - return 'FORWARD'; - } - - prevInStack = navPath[navPath.length - 2]; - lastInStack = navPath[navPath.length - 1]; - - if (prevInStack === curPage || lastInStack === curPage) { - return 'BACK'; - } - return 'FORWARD'; - } - - /** - * Remove the tracked tab. - */ - function removeTabOnUnload() { - let index; - - // Get the most recent values from storage - openTabs = JSON.parse(webStorageProxy.getItem('_tab_ids', _localStorage)); - tabId = webStorageProxy.getItem('_tab_id', _sessionStorage); - - if (openTabs !== null && tabId !== null) { - index = openTabs.indexOf(tabId); - if (index > -1) { - openTabs.splice(index, 1); - } - webStorageProxy.setItem( - '_tab_ids', - JSON.stringify(openTabs), - _localStorage, - ); - } - } - - /** - * @returns {string} A unique ID for the tab. - */ - function generateTabId() { - // From https://stackoverflow.com/a/8809472/2367037 - let d = new Date().getTime(); - if ( - typeof performance !== 'undefined' && - typeof performance.now === 'function' - ) { - // Use high-precision timer if available. - d += performance.now(); - } - return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { - const r = (d + Math.random() * 16) % 16 | 0; - d = Math.floor(d / 16); - return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16); - }); - } - - /** - * - * @param {number} type - Describes how the navigation to this page was done. - * @param {boolean} isNewTab - Whether we're validating a new tab or not. - * @returns {boolean} Return false if new tab and any other navigation type than - * NAVIGATE or OTHER. Otherwise return true. - */ - function validNavigation(type, isNewTab) { - return !(isNewTab === true && type !== 0 && type !== 255); - } - - if (tabId === null) { - tabId = generateTabId(); - newTab = true; - webStorageProxy.setItem('_tab_id', tabId, _sessionStorage); - } - - openTabs = openTabs || []; - - if (openTabs.indexOf(tabId) === -1) { - openTabs.push(tabId); - webStorageProxy.setItem( - '_tab_ids', - JSON.stringify(openTabs), - _localStorage, - ); - } - - const tabCount = openTabs.length; - - if (window.PerformanceNavigation) { - navPath = navPath || []; - redirectCount = window.performance.navigation.redirectCount; - // Only track new tabs if type is NAVIGATE or OTHER - const navigationTypeID = window.performance.navigation.type; - if (validNavigation(navigationTypeID, newTab)) { - switch (navigationTypeID) { - case 0: - navigationType = 'NAVIGATE'; - navPath.push(curPage); - break; - case 1: - navigationType = 'RELOAD'; - if (navPath.length === 0 || navPath[navPath.length - 1] !== curPage) { - navPath.push(curPage); - } - break; - case 2: - navigationType = getBackForwardNavigation(); - if (navigationType === 'FORWARD') { - // Only push if not coming from external domain - if (document.referrer.indexOf(origin) > -1) { - navPath.push(curPage); - } - } else if (navigationType === 'BACK') { - // Only remove last if not coming from external domain - if (lastInStack !== curPage) { - navPath.pop(); - } - } else { - navPath.push(curPage); - } - break; - default: - navigationType = 'OTHER'; - navPath.push(curPage); - } - } else { - navPath.push(curPage); - } - try { - webStorageProxy.setItem( - '_nav_path', - JSON.stringify(navPath), - sessionStorage, - ); - } catch (exception) { - console.log(exception); - } - } - - window.addEventListener('beforeunload', removeTabOnUnload); - - const payload = { - tabCount: tabCount, - redirectCount: redirectCount, - navigationType: navigationType, - newTab: newTab === true ? 'New' : 'Existing', - tabId: tabId, - }; - - // Set the data model keys directly so they can be used in the Page View tag - window.google_tag_manager['GTM-KMMLRS'].dataLayer.set( - 'browsingBehavior', - payload, - ); - - // Also push to dataLayer - window.dataLayer.push({ - event: 'custom.navigation', - browsingBehavior: payload, - }); -})(); From edb6092f53daaf4eab54447cf34d325d9d20c3c8 Mon Sep 17 00:00:00 2001 From: Ans Date: Thu, 7 Nov 2024 15:51:42 -0500 Subject: [PATCH 2/2] Revert bah-explainers deletion --- .../apps/analytics-gtm/js/bah-explainers.js | 140 ++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js diff --git a/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js b/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js new file mode 100644 index 00000000000..891c734d1fe --- /dev/null +++ b/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js @@ -0,0 +1,140 @@ +import { analyticsSendEvent } from '@cfpb/cfpb-analytics'; +import { addEventListenerToSelector } from './util/analytics-util'; + +/* +Buying a House /owning-a-home/loan-estimate/ +Buying a House /owning-a-home/closing-disclosure/ +*/ + +/** + * @param {string} label - The label to pass off to analytics. + */ +export default function (label) { + const trackingLabel = `${label} Interaction`; + + const expandableStates = {}; + let lastExpandable; + + /** + * Record state (expanded or collapsed) of expandables. + * @param {string} id - The unique HTML ID of an expandable. + */ + function recordExpandableState(id) { + if (!expandableStates[id]) { + expandableStates[id] = true; + } else if (lastExpandable === id) { + expandableStates[id] = !expandableStates[id]; + } + lastExpandable = id; + } + + /** + * Record state (expanded or collapsed) of expandables. + * @param {HTMLElement} expandable - An expandable HTML element. + * @returns {boolean} True if the expandable is animating, false otherwise. + */ + function isAnimatingExpandable(expandable) { + let isAnimating = false; + + if ( + expandable.classList.contains('o-expandable__expanding') || + expandable.classList.contains('o-expandable__collapsing') + ) { + isAnimating = true; + } + + return isAnimating; + } + + /** + * @param {MouseEvent} event - Mouse event from the click. + */ + function trackFormExplainerPageLinkClick(event) { + const target = event.target; + const pageNumber = 'Page ' + target.getAttribute('data-page'); + analyticsSendEvent({ + event: trackingLabel, + action: 'Page link click', + label: pageNumber, + }); + } + + /** + * @param {MouseEvent} event - Mouse event from the click. + */ + function trackFormExplainerPageButtonClick(event) { + const target = event.currentTarget; + const currentPageDom = document.querySelector( + '.form-explainer__page-link.current-page', + ); + const currentPage = 'Page ' + currentPageDom.getAttribute('data-page'); + let action = 'Next Page button clicked'; + if (target.classList.contains('prev')) { + action = 'Previous Page button clicked'; + } + analyticsSendEvent({ event: trackingLabel, action, label: currentPage }); + } + + /** + * @param {MouseEvent} event - Mouse event from the click. + */ + function trackExpandableTargetsClick(event) { + const elem = event.currentTarget; + const expandable = elem.parentNode; + const expandableID = expandable.id; + if (isAnimatingExpandable(expandable)) { + return; + } + recordExpandableState(expandableID); + + let action = 'Expandable collapsed'; + const label = elem.querySelector('.o-expandable__label'); + const text = label.textContent.trim(); + if (expandableStates[expandableID] === true) { + action = 'Expandable expanded'; + } + analyticsSendEvent({ event: trackingLabel, action, label: text }); + } + + /** + * @param {MouseEvent} event - Mouse event from the click. + */ + function trackImageMapOverlayClick(event) { + const target = event.target; + const href = target.getAttribute('href'); + const text = target.textContent.trim(); + + let action = 'Image Overlay click - expandable collapsed'; + const expandable = document.querySelector(href); + const expandableID = expandable.id; + if (isAnimatingExpandable(expandable)) { + return; + } + recordExpandableState(expandableID); + if (expandableStates[expandableID] === true) { + action = 'Image Overlay click - expandable expanded'; + } + analyticsSendEvent({ event: trackingLabel, action, label: text }); + } + + addEventListenerToSelector( + '.form-explainer__page-link', + 'click', + trackFormExplainerPageLinkClick, + ); + addEventListenerToSelector( + '.form-explainer__page-buttons button', + 'click', + trackFormExplainerPageButtonClick, + ); + addEventListenerToSelector( + '.o-expandable__header', + 'mouseup', + trackExpandableTargetsClick, + ); + addEventListenerToSelector( + '.image-map__overlay', + 'click', + trackImageMapOverlayClick, + ); +}