fix(app-rfi): ga track default disabled for pii

Author: scott-williams-az

packages/app-rfi/src/components/AsuRfi/index.js

@@ -44,6 +44,7 @@ const AsuRfi = props => {
     country,
     stateProvince,
     successMsg,
+    dataLayerEnabled,
     test,
     dataSourceDegreeSearch,
     dataSourceAsuOnline,
@@ -99,6 +100,7 @@ const AsuRfi = props => {
         country,
         stateProvince,
         successMsg,
+        dataLayerEnabled,
         test,
         dataSourceDegreeSearch,
         dataSourceAsuOnline,
@@ -150,6 +152,7 @@ AsuRfi.defaultProps = {
   country: undefined,
   stateProvince: undefined,
   successMsg: undefined,
+  dataLayerEnabled: false,
   test: false,
   dataSourceDegreeSearch: DATA_SOURCE.DEGREE_SEARCH,
   dataSourceAsuOnline: DATA_SOURCE.ASU_ONLINE,
@@ -175,6 +178,7 @@ AsuRfi.propTypes = {
   country: PropTypes.string,
   stateProvince: PropTypes.string,
   successMsg: PropTypes.string,
+  dataLayerEnabled: PropTypes.bool,
   test: PropTypes.bool,
   dataSourceDegreeSearch: PropTypes.string,
   dataSourceAsuOnline: PropTypes.string,

packages/app-rfi/src/components/AsuRfi/story.helper.js

@@ -23,6 +23,7 @@ export const defaultArgs = {
   country: undefined,
   stateProvince: undefined, // Only US states or CA provinces - use full name.
   successMsg: undefined,
+  dataLayerEnabled: false,
   test: false,
   dataSourceDegreeSearch: undefined, // "https://degrees.apps.asu.edu/t5/service",
   dataSourceAsuOnline: undefined, // "https://cms.asuonline.asu.edu/lead-submissions-v3.5/programs",

packages/app-rfi/src/components/steps/questions/Country.js

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from "react";
 
-import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
 import { fetchCountries } from "../../../core/utils/fetchCountries";
 import { useRfiContext } from "../../../core/utils/rfiContext";
+import {
+  gaEventPropTypes,
+  useTryGAEvent,
+} from "../../../core/utils/useDataLayer";
 import { RfiSelect } from "../../controls";
 
 // Options
@@ -45,14 +48,16 @@ export const Country = ({ gaData }) => {
     });
   }, []); // Run only once
 
+  const tryGAEvent = useTryGAEvent();
+
   return (
     <RfiSelect
       label={label}
       id={name}
       name={name}
       options={countryOptions}
       onBlur={e =>
-        trackGAEvent({
+        tryGAEvent({
           ...gaData,
           event: "select",
           type: label,

packages/app-rfi/src/components/steps/questions/EmailAddress.js

@@ -1,6 +1,9 @@
 import React from "react";
 
-import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
+import {
+  gaEventPropTypes,
+  useTryGAEvent,
+} from "../../../core/utils/useDataLayer";
 import { RfiEmailInput } from "../../controls";
 
 /**
@@ -10,6 +13,8 @@ export const EmailAddress = ({ gaData }) => {
   const label = "Email Address";
   const name = "EmailAddress";
 
+  const tryGAEvent = useTryGAEvent();
+
   return (
     <RfiEmailInput
       label={label}
@@ -18,7 +23,7 @@ export const EmailAddress = ({ gaData }) => {
       requiredIcon
       required
       onBlur={e =>
-        trackGAEvent({
+        tryGAEvent({
           ...gaData,
           type: label,
           text: e.target.value,

packages/app-rfi/src/components/steps/questions/FirstName.js

@@ -1,6 +1,9 @@
 import React from "react";
 
-import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
+import {
+  gaEventPropTypes,
+  useTryGAEvent,
+} from "../../../core/utils/useDataLayer";
 import { RfiTextInput } from "../../controls";
 
 /**
@@ -10,6 +13,8 @@ export const FirstName = ({ gaData }) => {
   const label = "First name";
   const name = "FirstName";
 
+  const tryGAEvent = useTryGAEvent();
+
   return (
     <RfiTextInput
       label={label}
@@ -18,7 +23,7 @@ export const FirstName = ({ gaData }) => {
       requiredIcon
       required
       onBlur={e =>
-        trackGAEvent({
+        tryGAEvent({
           ...gaData,
           type: label,
           text: e.target.value,

packages/app-rfi/src/components/steps/questions/LastName.js

@@ -1,6 +1,9 @@
 import React from "react";
 
-import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
+import {
+  gaEventPropTypes,
+  useTryGAEvent,
+} from "../../../core/utils/useDataLayer";
 import { RfiTextInput } from "../../controls";
 
 /**
@@ -10,6 +13,8 @@ export const LastName = ({ gaData }) => {
   const label = "Last name";
   const name = "LastName";
 
+  const tryGAEvent = useTryGAEvent();
+
   return (
     <RfiTextInput
       label={label}
@@ -18,7 +23,7 @@ export const LastName = ({ gaData }) => {
       requiredIcon
       required
       onBlur={e =>
-        trackGAEvent({
+        tryGAEvent({
           ...gaData,
           type: label,
           text: e.target.value,

packages/app-rfi/src/components/steps/questions/Phone.js

@@ -1,6 +1,9 @@
 import React from "react";
 
-import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
+import {
+  gaEventPropTypes,
+  useTryGAEvent,
+} from "../../../core/utils/useDataLayer";
 import { RfiPhone } from "../../controls";
 
 /**
@@ -10,6 +13,8 @@ export const Phone = ({ gaData }) => {
   const label = "Phone";
   const name = "Phone";
 
+  const tryGAEvent = useTryGAEvent();
+
   return (
     <RfiPhone
       label={label}
@@ -18,7 +23,7 @@ export const Phone = ({ gaData }) => {
       requiredIcon
       required
       onBlur={e =>
-        trackGAEvent({
+        tryGAEvent({
           ...gaData,
           type: label,
           text: e.target.value,

packages/app-rfi/src/components/steps/questions/ZipCode.js

@@ -1,8 +1,11 @@
 import React, { useEffect } from "react";
 
-import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
 import { KEY } from "../../../core/utils/constants";
 import { useRfiContext } from "../../../core/utils/rfiContext";
+import {
+  gaEventPropTypes,
+  useTryGAEvent,
+} from "../../../core/utils/useDataLayer";
 import { RfiTextInput } from "../../controls";
 
 /**
@@ -31,6 +34,8 @@ export const ZipCode = ({ gaData }) => {
     return <></>;
   }
 
+  const tryGAEvent = useTryGAEvent();
+
   return (
     <RfiTextInput
       label={label}
@@ -39,7 +44,7 @@ export const ZipCode = ({ gaData }) => {
       requiredIcon
       required
       onBlur={e =>
-        trackGAEvent({
+        tryGAEvent({
           ...gaData,
           type: label,
           text: e.target.value,

packages/app-rfi/src/core/types/rfi-types.js

@@ -17,6 +17,7 @@
  * @property {string} [country]
  * @property {string} [stateProvince]
  * @property {string} [successMsg]
+ * @property {boolean} [dataLayerEnabled]
  * @property {boolean} [test]
  * @property {string} [dataSourceDegreeSearch]
  * @property {string} [dataSourceAsuOnline]
@@ -46,6 +47,7 @@
  * @property {string} [country]
  * @property {string} [stateProvince]
  * @property {string} [successMsg]
+ * @property {boolean} [dataLayerEnabled]
  * @property {boolean} [test]
  * @property {string} [dataSourceDegreeSearch]
  * @property {string} [dataSourceAsuOnline]

packages/app-rfi/src/core/utils/useDataLayer.js

@@ -0,0 +1,15 @@
+// @ts-check
+import { trackGAEvent as fn } from "../../../../../shared";
+import { useRfiContext } from "./rfiContext";
+
+export { gaEventPropTypes } from "../../../../../shared";
+
+export const useTryGAEvent = () => {
+  const { dataLayerEnabled } = useRfiContext();
+
+  if (dataLayerEnabled) {
+    return fn;
+  }
+  // return NOOP function
+  return () => {};
+};