[search] adds segment tracking for queries and clicks

CHANGELOG.md

@@ -1,7 +1,8 @@
 ## Master
 
-* Fixes z-index issue with `Search` modal and `TopbarSticker`. [#139](https://github.com/mapbox/dr-ui/pull/139)
+* Fix z-index issue with `Search` modal and `TopbarSticker`. [#139](https://github.com/mapbox/dr-ui/pull/139)
 * Add ability to filter `Search` results by current site or all docs. [#138](https://github.com/mapbox/dr-ui/pull/138)
+* Add Segment events for tracking queries and clicks in the `Search` component. [#140](https://github.com/mapbox/dr-ui/pull/14)
 
 ## 0.14.0
 

package.json

@@ -77,6 +77,9 @@
     "react-stickynode": "^2.1.1",
     "rehype-sectionize-headings": "^1.0.0-rc.1"
   },
+  "optionalDependencies": {
+    "@mapbox/web-analytics": "^0.5.1"
+  },
   "jest": {
     "testRegex": ".*\\.test\\.js$"
   }

src/.eslintrc.json

@@ -11,6 +11,9 @@
     "@mapbox/eslint-config-mapbox/promise",
     "prettier"
   ],
+  "globals": {
+    "analytics": true
+  },
   "rules": {
     "prefer-const": "off",
     "react/no-deprecated": "off",

src/components/search/search-box.js

@@ -100,12 +100,25 @@ class SearchBox extends React.Component {
         id={this.props.inputId}
         inputValue={this.props.searchTerm}
         onChange={selection => {
+          // track click
+          if (window && window.analytics) {
+            analytics.track('Searched docs', {
+              query: this.props.searchTerm,
+              clicked: selection.url.raw
+            });
+          }
           this.props.trackClickThrough(selection.id.raw); // track selection click through
           window.open(selection.url.raw, '_self'); // open selection in current window
         }}
         onInputValueChange={newValue => {
           if (props.searchTerm === newValue) return;
           props.setSearchTerm(newValue, { debounce: 300 });
+          // track query
+          if (window && window.analytics) {
+            analytics.track('Searched docs', {
+              query: newValue
+            });
+          }
         }}
         itemToString={() => props.searchTerm}
       >

src/test-cases-app/test-cases-app.js

@@ -2,8 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestKitchen from '@mapbox/react-test-kitchen';
 import componentIndex from './component-index'; // eslint-disable-line
+import '@mapbox/web-analytics'; // eslint-disable-line
 
 class App extends React.Component {
+  componentDidMount() {
+    if (window && window.initializeMapboxAnalytics) {
+      window.initializeMapboxAnalytics();
+    }
+  }
+
   render() {
     return <ReactTestKitchen componentIndex={componentIndex} />;
   }