Merge pull request #327 from flacoman91/ga-actions

GA integration

src/__tests__/__snapshots__/App.spec.jsx.snap

@@ -1155,7 +1155,7 @@ exports[`initial state renders without crashing 1`] = `
                 className="h4 flex-all export-results"
               >
                 <button
-                  className="a-btn a-btn__link"
+                  className="a-btn a-btn__link export-btn"
                   data-gtm_ignore="true"
                   onClick={[Function]}
                 >

src/__tests__/utils.spec.jsx

@@ -1,8 +1,9 @@
 import {
   ariaReadoutNumbers, calculateDateRange, clamp, coalesce, debounce,
-  formatPercentage, getFullUrl, hasFiltersEnabled, hashCode, shortIsoFormat,
-  sortSelThenCount, startOfToday, parseCookies
+  formatPercentage, getFullUrl, hasFiltersEnabled, hashCode, sendAnalyticsEvent,
+  shortIsoFormat, sortSelThenCount, startOfToday, parseCookies
 } from '../utils'
+import Analytics from '../actions/analytics'
 import { DATE_RANGE_MIN } from '../constants'
 import React from 'react'
 import moment from 'moment'
@@ -277,5 +278,16 @@ describe('module::utils', () => {
       } )
     } );
   } );
+
+  describe( 'sendAnalyticsEvent', () => {
+    it( 'calls the analytics library', () => {
+      Analytics.getDataLayerOptions = jest.fn()
+      Analytics.sendEvent = jest.fn()
+      sendAnalyticsEvent( 'myAction Name', 'some label')
+      expect( Analytics.getDataLayerOptions )
+        .toHaveBeenCalledWith( 'myAction Name', 'some label' )
+      expect( Analytics.sendEvent ).toHaveBeenCalled()
+    } )
+  } )
 })
 

src/actions/__tests__/dataExport.spec.jsx

@@ -21,7 +21,6 @@ describe('action:dataExport', () => {
 
   describe('compound actions', () => {
     let middlewares, mockStore, store
-
     beforeEach(() => {
       middlewares = [thunk]
       mockStore = configureMockStore(middlewares)

src/actions/dataExport.jsx

@@ -4,7 +4,6 @@
 
 import { buildLink, simulateClick } from './domUtils'
 import { MODAL_SHOWN, MODAL_TYPE_DATA_EXPORT } from '../constants'
-import Analytics from './analytics'
 import { stateToQS } from '../reducers/query'
 
 const DATA_HOST = 'https://files.consumerfinance.gov'
@@ -50,9 +49,6 @@ export function buildSomeResultsUri( format, size, queryState ) {
 * @returns {string} a packaged payload to be used by Redux reducers
 */
 export function showExportDialog() {
-  Analytics.sendEvent(
-    Analytics.getDataLayerOptions( 'Export', 'User Opens Export Modal' )
-  )
   return {
     type: MODAL_SHOWN,
     modalType: MODAL_TYPE_DATA_EXPORT,
@@ -67,9 +63,6 @@ export function showExportDialog() {
 * @returns {function} a set of steps to execute
 */
 export function exportAllResults( format ) {
-  Analytics.sendEvent(
-    Analytics.getDataLayerOptions( 'Export All Data', format )
-  )
   return () => {
     const uri = buildAllResultsUri( format )
     const link = buildLink( uri, 'download.' + format )
@@ -85,9 +78,6 @@ export function exportAllResults( format ) {
 * @returns {function} a set of steps to execute
 */
 export function exportSomeResults( format, size ) {
-  Analytics.sendEvent(
-    Analytics.getDataLayerOptions( 'Export Some Data', format )
-  )
   return ( _, getState ) => {
     const uri = buildSomeResultsUri( format, size, getState().query )
     const link = buildLink( uri, 'download.' + format )

src/components/ActionBar.jsx

@@ -3,36 +3,42 @@ import { connect } from 'react-redux'
 import { FormattedNumber } from 'react-intl'
 import iconMap from './iconMap'
 import React from 'react';
+import { sendAnalyticsEvent } from '../utils'
 import { showExportDialog } from '../actions/dataExport'
 
 export class ActionBar extends React.Component {
   render() {
+    const { hits, tab, total } = this.props
     return (
       <div>
         <summary className="action-bar" id="search-summary">
-          <div>{ this.props.hits === this.props.total ?
-             <h2>
-                 Showing&nbsp;
-                 <FormattedNumber value={this.props.total} />
-                 &nbsp;total complaints
-              </h2> :
-             <h2>
-                Showing&nbsp;
-                <FormattedNumber value={this.props.hits} />
-                &nbsp;matches out of&nbsp;
-                <FormattedNumber value={this.props.total} />
-                &nbsp;total complaints</h2>
+          <div>{ hits === total ?
+            <h2>
+              Showing&nbsp;
+              <FormattedNumber value={ total }/>
+              &nbsp;total complaints
+            </h2> :
+            <h2>
+              Showing&nbsp;
+              <FormattedNumber value={ hits }/>
+              &nbsp;matches out of&nbsp;
+              <FormattedNumber value={ total }/>
+              &nbsp;total complaints</h2>
           }
           </div>
           <div>
             <h3 className="h4 flex-all export-results">
-              <button className="a-btn a-btn__link"
+              <button className="a-btn a-btn__link export-btn"
                       data-gtm_ignore="true"
-                      onClick={this.props.onExportResults}>
+                      onClick={ () => {
+                        this.props.onExportResults( tab )
+                      } }>
                 Export data
               </button>
               <button className="a-btn a-btn__link print-preview"
-                      onClick={ this._showPrintView }>
+                      onClick={ () => {
+                        this._showPrintView( tab )
+                      } }>
                 { iconMap.getIcon( 'printer' ) }
                 Print
               </button>
@@ -43,7 +49,8 @@ export class ActionBar extends React.Component {
     );
   }
 
-  _showPrintView() {
+  _showPrintView( tab ) {
+    sendAnalyticsEvent( 'Print', 'tab:' + tab )
     const printUrl = window.location.href + '&printMode=true&fromExternal=true'
     window.location.assign( printUrl )
   }
@@ -53,11 +60,12 @@ export const mapStateToProps = state => ( {
   hits: state.aggs.total,
   printMode: state.view.printMode,
   total: state.aggs.doc_count,
-  view: state.query.tab
+  tab: state.query.tab
 } )
 
 export const mapDispatchToProps = dispatch => ( {
-  onExportResults: () => {
+  onExportResults: tab => {
+    sendAnalyticsEvent( 'Export', tab + ':User Opens Export Modal' )
     dispatch( showExportDialog() )
   }
 } )

src/components/Charts/RowChart.jsx

@@ -3,7 +3,9 @@
 import './RowChart.less'
 import * as d3 from 'd3'
 import { changeFocus, collapseTrend, expandTrend } from '../../actions/trends'
-import { cloneDeep, coalesce, getAllFilters, hashObject } from '../../utils'
+import {
+  cloneDeep, coalesce, getAllFilters, hashObject, sendAnalyticsEvent
+} from '../../utils'
 import { miniTooltip, row } from 'britecharts'
 import { connect } from 'react-redux'
 import { max } from 'd3-array'
@@ -210,13 +212,15 @@ export const mapDispatchToProps = dispatch => ( {
       values = filterGroup ?
         getAllFilters( element.parent, filterGroup[keyName].buckets ) : []
     }
-
+    sendAnalyticsEvent( 'Trends click', element.parent )
     dispatch( changeFocus( element.parent, lens, [ ...values ] ) )
   },
   collapseRow: rowName => {
+    sendAnalyticsEvent( 'Bar chart collapsed', rowName.trim() )
     dispatch( collapseTrend( rowName.trim() ) )
   },
   expandRow: rowName => {
+    sendAnalyticsEvent( 'Bar chart expanded', rowName.trim() )
     dispatch( expandTrend( rowName.trim() ) )
   }
 } )

src/components/Charts/TileChartMap.jsx

@@ -1,9 +1,8 @@
 import './TileChartMap.less'
 import { addStateFilter, removeStateFilter } from '../../actions/map'
 import { GEO_NORM_NONE, STATE_DATA } from '../../constants'
-import Analytics from '../../actions/analytics'
+import { hashObject, sendAnalyticsEvent } from '../../utils'
 import { connect } from 'react-redux'
-import { hashObject } from '../../utils'
 import React from 'react'
 import TileMap from './TileMap'
 
@@ -147,17 +146,11 @@ export const mapStateToProps = state => {
 
 export const mapDispatchToProps = dispatch => ( {
   addState: selectedState => {
-    Analytics.sendEvent(
-      Analytics.getDataLayerOptions( 'State Event: add',
-        selectedState.abbr, )
-    )
+    sendAnalyticsEvent( 'State Event: add', selectedState.abbr )
     dispatch( addStateFilter( selectedState ) )
   },
   removeState: selectedState => {
-    Analytics.sendEvent(
-      Analytics.getDataLayerOptions( 'State Event: remove',
-        selectedState.abbr )
-    )
+    sendAnalyticsEvent( 'State Event: remove', selectedState.abbr )
     dispatch( removeStateFilter( selectedState ) )
   }
 } )

src/components/Dialogs/DataExport.jsx

@@ -1,5 +1,5 @@
 import './DataExport.less'
-import { bindAll, getFullUrl } from '../../utils'
+import { bindAll, getFullUrl, sendAnalyticsEvent } from '../../utils'
 import {
   buildAllResultsUri, buildSomeResultsUri, exportAllResults, exportSomeResults
 } from '../../actions/dataExport'
@@ -146,9 +146,10 @@ export class DataExport extends React.Component {
 
   _exportClicked() {
     if ( this.state.dataset === 'full' ) {
-      this.props.exportAll( this.state.format )
+      this.props.exportAll( this.state.format, this.props.tab )
     } else {
-      this.props.exportSome( this.state.format, this.props.someComplaints )
+      this.props.exportSome( this.state.format, this.props.someComplaints,
+        this.props.tab )
     }
 
     this.setState( { mode: NOTIFYING } )
@@ -343,16 +344,23 @@ export const mapStateToProps = state => {
 
   return {
     allComplaints,
-    someComplaints,
     queryState: {
       ...state.query
-    }
+    },
+    someComplaints,
+    tab: state.query.tab
   }
 }
 
 export const mapDispatchToProps = dispatch => ( {
-  exportAll: format => dispatch( exportAllResults( format ) ),
-  exportSome: ( format, size ) => dispatch( exportSomeResults( format, size ) )
+  exportAll: ( format, tab ) => {
+    sendAnalyticsEvent( 'Export All Data', tab + ':' + format )
+    dispatch( exportAllResults( format ) )
+  },
+  exportSome: ( format, size, tab ) => {
+    sendAnalyticsEvent( 'Export Some Data', tab + ':' + format )
+    dispatch( exportSomeResults( format, size ) )
+  }
 } )
 
 export default connect( mapStateToProps, mapDispatchToProps )( DataExport )

src/components/Dialogs/RootModal.jsx

@@ -22,7 +22,8 @@ export const RootModal = ( { modalType, modalProps, onClose } ) => {
     const SpecificModal = MODAL_COMPONENTS[modalType]
 
     return (
-      <ReactModal isOpen={true}
+      <ReactModal appElement={ document.querySelector( '#root' ) }
+                  isOpen={true}
                   contentLabel="CFPB Modal Dialog"
                   className="modal-body"
                   overlayClassName="modal-overlay"
@@ -32,7 +33,9 @@ export const RootModal = ( { modalType, modalProps, onClose } ) => {
     )
   }
 
-  return <ReactModal isOpen={false}></ReactModal>
+  return <ReactModal appElement={ document.querySelector( '#root' ) }
+                     isOpen={ false }>
+  </ReactModal>
 }
 
 export const mapDispatchToProps = dispatch => ( {

src/components/Dialogs/__tests__/DataExport.spec.jsx

@@ -8,6 +8,7 @@ import renderer from 'react-test-renderer'
 import configureMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
 import ReduxDataExport, { DataExport, mapDispatchToProps } from '../DataExport'
+import * as utils from '../../../utils'
 
 const mockDataExportActions = require('../../../actions/dataExport')
 
@@ -36,6 +37,9 @@ function setupSnapshot(total=1001) {
       doc_count: 9999,
       total
     },
+    query: {
+      tab: 'foo'
+    }
   })
 
   return renderer.create(
@@ -196,18 +200,26 @@ describe('component::DataExport', () => {
     } );
   } );
 
-  describe('mapDispatchToProps', () => {
-
-    it('provides a way to call exportAllResults', () => {
-      const dispatch = jest.fn()
-      mapDispatchToProps(dispatch).exportAll('json')
-      expect(dispatch.mock.calls.length).toEqual(1)
-    })
-
-    it('provides a way to call exportSomeResults', () => {
-      const dispatch = jest.fn()
-      mapDispatchToProps(dispatch).exportSome('csv', 1300)
-      expect(dispatch.mock.calls.length).toEqual(1)
-    })
-  })
+  describe( 'mapDispatchToProps', () => {
+    let dispatch, gaSpy
+    beforeEach( () => {
+      dispatch = jest.fn()
+      gaSpy = jest.spyOn( utils, 'sendAnalyticsEvent' )
+    } )
+
+    afterEach( () => {
+      jest.clearAllMocks()
+    } )
+    it( 'provides a way to call exportAllResults', () => {
+      mapDispatchToProps( dispatch ).exportAll( 'json', 'mytab' )
+      expect( dispatch.mock.calls.length ).toEqual( 1 )
+      expect( gaSpy ).toHaveBeenCalledWith( 'Export All Data', 'mytab:json' )
+    } )
+
+    it( 'provides a way to call exportSomeResults', () => {
+      mapDispatchToProps( dispatch ).exportSome( 'csv', 1300, 'atab' )
+      expect( dispatch.mock.calls.length ).toEqual( 1 )
+      expect( gaSpy ).toHaveBeenCalledWith( 'Export Some Data', 'atab:csv' )
+    } )
+  } )
 })

src/components/List/ListPanel.jsx

@@ -12,6 +12,7 @@ import Loading from '../Dialogs/Loading'
 import Pagination from './Pagination'
 import React from 'react'
 import { Select } from '../RefineBar/Select'
+import { sendAnalyticsEvent } from '../../utils'
 import { Separator } from '../RefineBar/Separator'
 import StaleDataWarnings from '../Warnings/StaleDataWarnings'
 
@@ -116,10 +117,13 @@ const mapStateToProps = state => ( {
 export const mapDispatchToProps = dispatch => ( {
   onSize: ev => {
     const iSize = parseInt( ev.target.value, 10 )
+    sendAnalyticsEvent( 'Dropdown', iSize + ' results' )
     dispatch( changeSize( iSize ) )
   },
   onSort: ev => {
-    dispatch( changeSort( ev.target.value ) )
+    const { value } = ev.target
+    sendAnalyticsEvent( 'Dropdown', sorts[value] )
+    dispatch( changeSort( value ) )
   }
 } )
 

src/components/RefineBar/ChartToggles.jsx

@@ -3,6 +3,7 @@ import { changeChartType } from '../../actions/trends'
 import { connect } from 'react-redux'
 import iconMap from '../iconMap'
 import React from 'react'
+import { sendAnalyticsEvent } from '../../utils'
 
 export class ChartToggles extends React.Component {
   _toggleChartType( chartType ) {
@@ -40,6 +41,7 @@ export const mapStateToProps = state => ( {
 
 export const mapDispatchToProps = dispatch => ( {
   toggleChartType: chartType => {
+    sendAnalyticsEvent( 'Button', 'Trends:' + chartType )
     dispatch( changeChartType( chartType ) )
   }
 } )