Merge pull request #4382 from newrelic/clang/track-nav

feat(analytics): add browser agent tracking to docs nav related components
newrelic · Oct 19, 2021 · c1fdd11 · c1fdd11
2 parents 93253f8 + 003a3d4
commit c1fdd11
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "@github-docs/frontmatter": "^1.3.1",
     "@mdx-js/mdx": "^2.0.0-next.8",
     "@mdx-js/react": "^2.0.0-next.8",
-    "@newrelic/gatsby-theme-newrelic": "^3.1.3",
+    "@newrelic/gatsby-theme-newrelic": "^3.2.0",
     "@splitsoftware/splitio-react": "^1.2.4",
     "babel-jest": "^26.3.0",
     "common-tags": "^1.8.0",
@@ -132,7 +132,7 @@
   "license": "Apache-2",
   "scripts": {
     "build": "gatsby build",
-    "develop": "gatsby develop",
+    "develop": "GATSBY_NEWRELIC_ENV=development gatsby develop",
     "reboot": "rm -rf node_modules && yarn && yarn clean && yarn start",
     "build:production": "GATSBY_NEWRELIC_ENV=production yarn run build",
     "build:staging": "GATSBY_NEWRELIC_ENV=staging yarn run build",

diff --git a/src/components/DefaultRelatedContent.js b/src/components/DefaultRelatedContent.js
@@ -26,28 +26,60 @@ const DefaultRelatedContent = () => {
       <Trans i18nKey="defaultRelatedContent.list" parent="ul">
         <li>
           Browse the{' '}
-          <ExternalLink href="https://discuss.newrelic.com">
+          <ExternalLink
+            href="https://discuss.newrelic.com"
+            instrumentation={{
+              navInteractionType: 'defaultForMoreHelpLinkClick',
+            }}
+          >
             Explorers Hub
           </ExternalLink>{' '}
           to get help from the community and join in discussions.
         </li>
         <li>
           Find{' '}
-          <Link to="/docs/using-new-relic/welcome-new-relic/get-started/find-help-use-support-portal">
+          <Link
+            to="/docs/using-new-relic/welcome-new-relic/get-started/find-help-use-support-portal"
+            instrumentation={{
+              navInteractionType: 'defaultForMoreHelpLinkClick',
+            }}
+          >
             answers on our sites and learn how to use our support portal
           </Link>
           .
         </li>
         <li>
           Run{' '}
-          <Link to="/docs/using-new-relic/cross-product-functions/troubleshooting/new-relic-diagnostics">
+          <Link
+            to="/docs/using-new-relic/cross-product-functions/troubleshooting/new-relic-diagnostics"
+            instrumentation={{
+              navInteractionType: 'defaultForMoreHelpLinkClick',
+            }}
+          >
             New Relic Diagnostics
           </Link>
           , our troubleshooting tool for Linux, Windows, and macOS.
         </li>
         <li>
-          Review New Relic's <Link to="/docs/security">data security</Link> and{' '}
-          <Link to="/docs/licenses">licenses</Link> documentation.
+          Review New Relic's{' '}
+          <Link
+            to="/docs/security"
+            instrumentation={{
+              navInteractionType: 'defaultForMoreHelpLinkClick',
+            }}
+          >
+            data security
+          </Link>{' '}
+          and{' '}
+          <Link
+            to="/docs/licenses"
+            instrumentation={{
+              navInteractionType: 'defaultForMoreHelpLinkClick',
+            }}
+          >
+            licenses
+          </Link>{' '}
+          documentation.
         </li>
       </Trans>
     </div>

diff --git a/src/components/SubNavigation.js b/src/components/SubNavigation.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
+import { useDebounce } from 'react-use';
 import {
   Link,
   Navigation,
@@ -14,6 +15,19 @@ const SubNavigation = ({ nav }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const { t } = useTranslation();
 
+  useDebounce(
+    () => {
+      if (typeof window !== 'undefined' && window.newrelic && searchTerm) {
+        window.newrelic.addPageAction('navInteraction', {
+          navInteractionType: 'leftNavSearch',
+          searchTerm,
+        });
+      }
+    },
+    400,
+    [searchTerm]
+  );
+
   return (
     <>
       <Link
@@ -48,7 +62,9 @@ const SubNavigation = ({ nav }) => {
             <SearchInput
               placeholder={t('subNav.filter.placeholder')}
               onClear={() => setSearchTerm('')}
-              onChange={(e) => setSearchTerm(e.target.value)}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+              }}
               value={searchTerm}
               css={css`
                 margin-bottom: 1rem;

diff --git a/yarn.lock b/yarn.lock
@@ -3483,10 +3483,10 @@
     eslint-plugin-promise "^4.2.1"
     eslint-plugin-react "^7.14.3"
 
-"@newrelic/gatsby-theme-newrelic@^3.1.3":
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-3.1.3.tgz#2443dc05a541fc5d40a2c998e434947e46ac7e1d"
-  integrity sha512-0MJOU1lswdMb/AaRf2BdGWxH7t7+Hvoq7C4fp8lnL9HBLmaASUQGL2nSUjXfb4kWy13buNuYwJCZ25w/wly9ig==
+"@newrelic/gatsby-theme-newrelic@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-3.2.0.tgz#d8ea63cb315a1a88f9b4af66e342e1d762247572"
+  integrity sha512-eTEdfaNS2rGtO81+CtJG1qnKX9FLqd94NgNUYpH9BVl1+XpuRVaDtuhR7UhfOA1gG4dVE7R/cvNjWyfphr6Cyw==
   dependencies:
     "@wry/equality" "^0.4.0"
     "@xstate/react" "^1.3.1"