feat: add browser agent tracking to docs nav related components

newrelic · Oct 18, 2021 · eba0413 · eba0413
1 parent 9c4be3c
commit eba0413
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 6 deletions.
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;