[NO-TICKET] Put analytics behind feature flags (#1047)

* Put analytics behind separate feature flags Default Alert and Dialog to OFF Default HelpDrawer to ON because I think it's lower risk * Default help drawer analytics to off as well for now * Add feature flag info to doc site * Move checking for ga feature flag further up the function * ga content formatting updates * fcode formatting specification Co-authored-by: Ni Chia <[email protected]> Co-authored-by: line47 <[email protected]>
CMSgov · May 25, 2021 · c82ecf8 · c82ecf8
1 parent f7642b0
commit c82ecf8
Show file tree

Hide file tree

Showing 11 changed files with 194 additions and 73 deletions.
diff --git a/packages/design-system-docs/src/pages/components/Alert/_Alert.docs.scss b/packages/design-system-docs/src/pages/components/Alert/_Alert.docs.scss
@@ -191,16 +191,32 @@ Style guide: components.alert.guidance
 /*
 Google Analytics
 
-On application where the page has `utag` loaded, analytics event tracking is enabled by default. The data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.
-- To disable the automatic event tracking, pass this prop to the component
+**Analytics event tracking is disabled by default.**
+
+### Enable event tracking
+
+- Import and set the `setAlertSendsAnalytics` feature flag to `true` in your application's entry file:
+
+```JSX
+import { setAlertSendsAnalytics } from "@cmsgov/<design-system-package>";
+setAlertSendsAnalytics(true);
 ```
+On applications where the page has `utag` loaded, the data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.
+
+### Disable event tracking
+
+- Pass the `onComponentDidMount` prop set to `false` to the component:
+
+```JSX
 analytics={
   {
     onComponentDidMount: {false}
   }
 }
 ```
-- To override the event tracking, pass changes via the analytics prop
+### Override  event tracking
+
+- Pass changes via any of the [available analytics props](#components.alert.analytics).
 
 Style guide: components.alert.guidance-analytics
 */
diff --git a/packages/design-system-docs/src/pages/components/Dialog/_Dialog.docs.scss b/packages/design-system-docs/src/pages/components/Dialog/_Dialog.docs.scss
@@ -188,17 +188,34 @@ Style guide: components.dialog.guidance
 /*
 Google Analytics
 
-On application where the page has `utag` loaded, analytics event tracking is enabled by default. The data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.
-- To disable the automatic event tracking, pass this prop to the component
+**Analytics event tracking is disabled by default.**
+
+### Enable event tracking
+
+- Import and set the `setDialogSendsAnalytics` feature flag to `true` in your application's entry file:
+
+```JSX
+import { setDialogSendsAnalytics } from "@cmsgov/<design-system-package>";
+setDialogSendsAnalytics(true);
 ```
+On applications where the page has `utag` loaded, the data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.
+
+### Disable event tracking
+
+- Pass the `onComponentDidMount` prop set to `false` to the component:
+- Pass the `onComponentWillUnmount` prop set to `false` to the component:
+
+```JSX
 analytics={
   {
     onComponentDidMount: {false},
     onComponentWillUnmount: {false}
   }
 }
 ```
-- To override the event tracking, pass changes via the analytics prop
+### Override  event tracking
+
+- Pass changes via any of the [available analytics props](#components.alert.analytics).
 
 Style guide: components.dialog.guidance-analytics
 */
diff --git a/packages/design-system-docs/src/pages/components/Dialog/_ThirdPartyLink.docs.scss b/packages/design-system-docs/src/pages/components/Dialog/_ThirdPartyLink.docs.scss
@@ -50,17 +50,34 @@ Style guide: patterns.external-link.guidance
 /*
 Google Analytics
 
-On application where the page has `utag` loaded, analytics event tracking is enabled by default. The data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.
-- To disable the automatic event tracking, pass this prop to the component
+**Analytics event tracking is disabled by default.**
+
+### Enable event tracking
+
+- Import and set the `setDialogSendsAnalytics` feature flag to `true` in your application's entry file:
+
+```JSX
+import { setDialogSendsAnalytics } from "@cmsgov/<design-system-package>";
+setDialogSendsAnalytics(true);
 ```
+On applications where the page has `utag` loaded, the data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.
+
+### Disable event tracking
+
+- Pass the `onComponentDidMount` prop set to `false` to the component:
+- Pass the `onComponentWillUnmount` prop set to `false` to the component:
+
+```JSX
 analytics={
   {
     onComponentDidMount: {false},
     onComponentWillUnmount: {false}
   }
 }
 ```
-- To override the event tracking, pass changes via the analytics prop
+### Override  event tracking
+
+- Pass changes via any of the [available analytics props](#components.alert.analytics).
 
 Style guide: patterns.external-link.guidance-analytics
 */
diff --git a/packages/design-system-docs/src/pages/components/HelpDrawer/_HelpDrawer.docs.scss b/packages/design-system-docs/src/pages/components/HelpDrawer/_HelpDrawer.docs.scss
@@ -194,17 +194,35 @@ Style guide: components.help-drawer.guidance
 /*
 Google Analytics
 
-On application where the page has `utag` loaded, analytics event tracking is enabled by default. The data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.
-- To disable the automatic event tracking, pass this prop to the component
+**Analytics event tracking is disabled by default.**
+
+### Enable event tracking
+
+- Import and set the `setHelpDrawerSendsAnalytics` feature flag to `true` in your application's entry file:
+
+```JSX
+import { setHelpDrawerSendsAnalytics } from "@cmsgov/<design-system-package>";
+setHelpDrawerSendsAnalytics(true);
 ```
+On application where the page has `utag` loaded, the data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.
+
+### Disable event tracking
+
+- Pass the `onComponentDidMount` prop set to `false` to the component:
+- Pass the `onComponentWillUnmount` prop set to `false` to the component:
+
+```JSX
 analytics={
   {
     onComponentDidMount: {false},
     onComponentWillUnmount: {false}
   }
 }
 ```
-- To override the event tracking, pass changes via the analytics prop
+
+### Override  event tracking
+
+- Pass changes via any of the [available analytics props](#components.alert.analytics).
 
 Style guide: components.help-drawer.guidance-analytics
 */
diff --git a/packages/design-system/src/components/Alert/Alert.jsx b/packages/design-system/src/components/Alert/Alert.jsx
@@ -1,6 +1,7 @@
 import { EVENT_CATEGORY, MAX_LENGTH, sendAnalyticsEvent } from '../analytics/SendAnalytics';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { alertSendsAnalytics } from '../flags';
 import classNames from 'classnames';
 import get from 'lodash/get';
 import uniqueId from 'lodash.uniqueid';
@@ -34,27 +35,29 @@ export class Alert extends React.PureComponent {
   }
 
   componentDidMount() {
-    const eventAction = 'onComponentDidMount';
-    const eventHeading = this.props.heading || this.props.children;
+    if (alertSendsAnalytics()) {
+      const eventAction = 'onComponentDidMount';
+      const eventHeading = this.props.heading || this.props.children;
 
-    /* Send analytics event for `error`, `warn`, `success` alert variations */
-    if (this.props.variation) {
-      if (typeof eventHeading === 'string') {
-        this.eventHeadingText = eventHeading.substring(0, MAX_LENGTH);
-      } else {
-        const eventHeadingTextElement =
-          (this.alertRef && this.alertRef.getElementsByClassName('ds-c-alert__heading')[0]) ||
-          (this.alertRef && this.alertRef.getElementsByClassName('ds-c-alert__body')[0]);
-        this.eventHeadingText =
-          eventHeadingTextElement && eventHeadingTextElement.textContent
-            ? eventHeadingTextElement.textContent.substring(0, MAX_LENGTH)
-            : '';
-      }
+      /* Send analytics event for `error`, `warn`, `success` alert variations */
+      if (this.props.variation) {
+        if (typeof eventHeading === 'string') {
+          this.eventHeadingText = eventHeading.substring(0, MAX_LENGTH);
+        } else {
+          const eventHeadingTextElement =
+            (this.alertRef && this.alertRef.getElementsByClassName('ds-c-alert__heading')[0]) ||
+            (this.alertRef && this.alertRef.getElementsByClassName('ds-c-alert__body')[0]);
+          this.eventHeadingText =
+            eventHeadingTextElement && eventHeadingTextElement.textContent
+              ? eventHeadingTextElement.textContent.substring(0, MAX_LENGTH)
+              : '';
+        }
 
-      sendAnalyticsEvent(
-        get(this.props.analytics, eventAction),
-        get(defaultAnalytics(this.eventHeadingText, this.props.variation), eventAction)
-      );
+        sendAnalyticsEvent(
+          get(this.props.analytics, eventAction),
+          get(defaultAnalytics(this.eventHeadingText, this.props.variation), eventAction)
+        );
+      }
     }
   }
 

diff --git a/packages/design-system/src/components/Alert/Alert.test.jsx b/packages/design-system/src/components/Alert/Alert.test.jsx
@@ -1,5 +1,6 @@
 import Alert from './Alert';
 import React from 'react';
+import { setAlertSendsAnalytics } from '../flags';
 import { shallow } from 'enzyme';
 
 const text = 'Ruhroh';
@@ -73,13 +74,15 @@ describe('Alert', function () {
     };
 
     beforeEach(() => {
+      setAlertSendsAnalytics(true);
       tealiumMock = jest.fn();
       window.utag = {
         link: tealiumMock,
       };
     });
 
     afterEach(() => {
+      setAlertSendsAnalytics(false);
       jest.resetAllMocks();
     });
 

diff --git a/packages/design-system/src/components/Dialog/Dialog.jsx b/packages/design-system/src/components/Dialog/Dialog.jsx
@@ -4,6 +4,7 @@ import Button from '../Button/Button';
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
+import { dialogSendsAnalytics } from '../flags';
 import get from 'lodash/get';
 
 // Default analytics object
@@ -52,32 +53,36 @@ export class Dialog extends React.PureComponent {
   }
 
   componentDidMount() {
-    const eventAction = 'onComponentDidMount';
-    const eventHeading = this.props.title || this.props.heading;
+    if (dialogSendsAnalytics()) {
+      const eventAction = 'onComponentDidMount';
+      const eventHeading = this.props.title || this.props.heading;
 
-    if (typeof eventHeading === 'string') {
-      this.eventHeadingText = eventHeading.substring(0, MAX_LENGTH);
-    } else {
-      this.eventHeadingText =
-        this.headingRef && this.headingRef.textContent
-          ? this.headingRef.textContent.substring(0, MAX_LENGTH)
-          : '';
-    }
+      if (typeof eventHeading === 'string') {
+        this.eventHeadingText = eventHeading.substring(0, MAX_LENGTH);
+      } else {
+        this.eventHeadingText =
+          this.headingRef && this.headingRef.textContent
+            ? this.headingRef.textContent.substring(0, MAX_LENGTH)
+            : '';
+      }
 
-    /* Send analytics event for dialog open */
-    sendAnalyticsEvent(
-      get(this.props.analytics, eventAction),
-      get(defaultAnalytics(this.eventHeadingText), eventAction)
-    );
+      /* Send analytics event for dialog open */
+      sendAnalyticsEvent(
+        get(this.props.analytics, eventAction),
+        get(defaultAnalytics(this.eventHeadingText), eventAction)
+      );
+    }
   }
 
   componentWillUnmount() {
-    const eventAction = 'onComponentWillUnmount';
-    /* Send analytics event for dialog close */
-    sendAnalyticsEvent(
-      get(this.props.analytics, eventAction),
-      get(defaultAnalytics(this.eventHeadingText), eventAction)
-    );
+    if (dialogSendsAnalytics()) {
+      const eventAction = 'onComponentWillUnmount';
+      /* Send analytics event for dialog close */
+      sendAnalyticsEvent(
+        get(this.props.analytics, eventAction),
+        get(defaultAnalytics(this.eventHeadingText), eventAction)
+      );
+    }
   }
 
   render() {

diff --git a/packages/design-system/src/components/Dialog/Dialog.test.jsx b/packages/design-system/src/components/Dialog/Dialog.test.jsx
@@ -1,6 +1,7 @@
 import { mount, shallow } from 'enzyme';
 import Dialog from './Dialog';
 import React from 'react';
+import { setDialogSendsAnalytics } from '../flags';
 
 function render(customProps = {}, deep = false) {
   const props = Object.assign(
@@ -76,13 +77,15 @@ describe('Dialog', function () {
     };
 
     beforeEach(() => {
+      setDialogSendsAnalytics(true);
       tealiumMock = jest.fn();
       window.utag = {
         link: tealiumMock,
       };
     });
 
     afterEach(() => {
+      setDialogSendsAnalytics(false);
       jest.resetAllMocks();
     });
 

diff --git a/packages/design-system/src/components/HelpDrawer/HelpDrawer.jsx b/packages/design-system/src/components/HelpDrawer/HelpDrawer.jsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import get from 'lodash/get';
+import { helpDrawerSendsAnalytics } from '../flags';
 
 // Default analytics object
 const defaultAnalytics = (heading = '') => ({
@@ -48,32 +49,36 @@ export class HelpDrawer extends React.PureComponent {
   componentDidMount() {
     if (this.headingRef) this.headingRef.focus();
 
-    const eventAction = 'onComponentDidMount';
-    const eventHeading = this.props.title || this.props.heading;
+    if (helpDrawerSendsAnalytics()) {
+      const eventAction = 'onComponentDidMount';
+      const eventHeading = this.props.title || this.props.heading;
 
-    if (typeof eventHeading === 'string') {
-      this.eventHeadingText = eventHeading.substring(0, MAX_LENGTH);
-    } else {
-      this.eventHeadingText =
-        this.headingRef && this.headingRef.textContent
-          ? this.headingRef.textContent.substring(0, MAX_LENGTH)
-          : '';
-    }
+      if (typeof eventHeading === 'string') {
+        this.eventHeadingText = eventHeading.substring(0, MAX_LENGTH);
+      } else {
+        this.eventHeadingText =
+          this.headingRef && this.headingRef.textContent
+            ? this.headingRef.textContent.substring(0, MAX_LENGTH)
+            : '';
+      }
 
-    /* Send analytics event for helpdrawer open */
-    sendAnalyticsEvent(
-      get(this.props.analytics, eventAction),
-      get(defaultAnalytics(this.eventHeadingText), eventAction)
-    );
+      /* Send analytics event for helpdrawer open */
+      sendAnalyticsEvent(
+        get(this.props.analytics, eventAction),
+        get(defaultAnalytics(this.eventHeadingText), eventAction)
+      );
+    }
   }
 
   componentWillUnmount() {
-    const eventAction = 'onComponentWillUnmount';
-    /* Send analytics event for helpdrawer close */
-    sendAnalyticsEvent(
-      get(this.props.analytics, eventAction),
-      get(defaultAnalytics(this.eventHeadingText), eventAction)
-    );
+    if (helpDrawerSendsAnalytics()) {
+      const eventAction = 'onComponentWillUnmount';
+      /* Send analytics event for helpdrawer close */
+      sendAnalyticsEvent(
+        get(this.props.analytics, eventAction),
+        get(defaultAnalytics(this.eventHeadingText), eventAction)
+      );
+    }
   }
 
   render() {