Merge pull request #1750 from newrelic/tessen-instrument

chore: instrumenting the banner button
newrelic · Oct 6, 2021 · 7ae082a · 7ae082a
2 parents cd1cc01 + 4438425
commit 7ae082a
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 80 deletions.
diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
-import { Button, Link } from '@newrelic/gatsby-theme-newrelic';
+import { Button, Link, useTessen } from '@newrelic/gatsby-theme-newrelic';
 import ioBanner from '../images/ioBanner.png';
 
 const IOBanner = ({ isMobile }) => {
+  const tessen = useTessen();
+
+  const handleBannerButtonClick = () => {
+    tessen.track('instantObservability', 'BannerButtonClick');
+  };
+
   return (
     <section
       css={css`
@@ -71,6 +77,7 @@ const IOBanner = ({ isMobile }) => {
           `}
           to="https://docs.newrelic.com/docs/full-stack-observability/observe-everything/get-started/new-relic-quickstarts-overview/"
           instrumentation={{ component: 'IOBanner' }}
+          onClick={handleBannerButtonClick}
         >
           Learn more
         </Button>

diff --git a/src/components/PackTile.js b/src/components/PackTile.js
@@ -3,13 +3,7 @@ import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
 
 import { css } from '@emotion/react';
-import {
-  Surface,
-  Icon,
-  useTessen,
-  useInstrumentedHandler,
-  Tag,
-} from '@newrelic/gatsby-theme-newrelic';
+import { Surface, Icon, useTessen, Tag } from '@newrelic/gatsby-theme-newrelic';
 import { SHIELD_LEVELS } from '../data/constants';
 import PackImg from './PackImg';
 
@@ -32,34 +26,20 @@ const PackTile = ({
 }) => {
   const tessen = useTessen();
 
-  const handlePackClick = useInstrumentedHandler(
-    () => {
-      tessen.track('instantObservability', 'QuickstartClick', {
-        publicCatalogView: view,
-        quickstartName: name,
-      });
-      navigate(fields.slug);
-    },
-    {
-      actionName: 'QuickstartClick',
+  const handlePackClick = () => {
+    tessen.track('instantObservability', 'QuickstartClick', {
       publicCatalogView: view,
       quickstartName: name,
-    }
-  );
+    });
+    navigate(fields.slug);
+  };
 
-  const handleBuildTileClick = useInstrumentedHandler(
-    () => {
-      tessen.track('instantObservability', 'BuildYourOwnQuickstartClick', {
-        publicCatalogView: view,
-        quickstartName: name,
-      });
-    },
-    {
-      actionName: 'BuildYourOwnQuickstartClick',
+  const handleBuildTileClick = () => {
+    tessen.track('instantObservability', 'BuildYourOwnQuickstartClick', {
       publicCatalogView: view,
       quickstartName: name,
-    }
-  );
+    });
+  };
 
   return (
     <Surface

diff --git a/src/components/quickstarts/QuickstartDataSources.js b/src/components/quickstarts/QuickstartDataSources.js
@@ -1,60 +1,72 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import pluralize from 'pluralize';
-import { Surface, Link, Tag } from '@newrelic/gatsby-theme-newrelic';
+import { Surface, Link, Tag, useTessen } from '@newrelic/gatsby-theme-newrelic';
 import Intro from '../Intro';
 import { quickstart } from '../../types';
 
-const QuickstartDataSources = ({ quickstart }) => (
-  <>
-    <Intro
-      css={css`
-        margin-bottom: 16px;
-      `}
-    >
-      {quickstart.title} observability quickstart contains{' '}
-      {pluralize('data source', quickstart.documentation?.length ?? 0, true)}.
-      This is how you'll get your data into New Relic.{' '}
-    </Intro>
+const QuickstartDataSources = ({ quickstart }) => {
+  const tessen = useTessen();
 
-    <div
-      css={css`
-        display: grid;
-        grid-gap: 1rem;
-        grid-template-columns: repeat(3, 1fr);
+  const handleDocsTileClick = () => {
+    tessen.track('instantObservability', 'DocsTileClick', {
+      quickstartName: quickstart.name,
+      quickstartId: quickstart.id,
+    });
+  };
 
-        @media (max-width: 1180px) {
-          grid-template-columns: repeat(1, 1fr);
-        }
-      `}
-    >
-      {quickstart.documentation.map((doc, index) => (
-        <Surface
-          key={index}
-          as={Link}
-          to={doc.url}
-          base={Surface.BASE.PRIMARY}
-          css={css`
-            padding: 1rem;
-            color: inherit;
-          `}
-          interactive
-        >
-          <h3>{doc.name}</h3>
-          {doc.description && <p>{doc.description}</p>}
-          <Tag
+  return (
+    <>
+      <Intro
+        css={css`
+          margin-bottom: 16px;
+        `}
+      >
+        {quickstart.title} observability quickstart contains{' '}
+        {pluralize('data source', quickstart.documentation?.length ?? 0, true)}.
+        This is how you'll get your data into New Relic.{' '}
+      </Intro>
+
+      <div
+        css={css`
+          display: grid;
+          grid-gap: 1rem;
+          grid-template-columns: repeat(3, 1fr);
+
+          @media (max-width: 1180px) {
+            grid-template-columns: repeat(1, 1fr);
+          }
+        `}
+      >
+        {quickstart.documentation.map((doc, index) => (
+          <Surface
+            key={index}
+            as={Link}
+            to={doc.url}
+            base={Surface.BASE.PRIMARY}
+            onClick={handleDocsTileClick}
             css={css`
-              display: inline-block;
-              margin-bottom: 1rem;
+              padding: 1rem;
+              color: inherit;
             `}
+            interactive
           >
-            Docs
-          </Tag>
-        </Surface>
-      ))}
-    </div>
-  </>
-);
+            <h3>{doc.name}</h3>
+            {doc.description && <p>{doc.description}</p>}
+            <Tag
+              css={css`
+                display: inline-block;
+                margin-bottom: 1rem;
+              `}
+            >
+              Docs
+            </Tag>
+          </Surface>
+        ))}
+      </div>
+    </>
+  );
+};
 
 QuickstartDataSources.propTypes = {
   quickstart: quickstart.isRequired,

diff --git a/src/data/constants.js b/src/data/constants.js
@@ -12,6 +12,7 @@ export const SDK_BASE_URL =
   'https://d1zobbh8kytrtv.cloudfront.net/platform/doc-app';
 
 export const NR1_LOGIN_URL = 'https://login.newrelic.com/login';
+
 export const NR1_SIGNUP_URL = 'https://newrelic.com/signup';
 
 export const NR1_PACK_DETAILS_NERDLET =

diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js
@@ -264,9 +264,30 @@ const QuickstartDetails = ({ data, location }) => {
               <PageTools.Title>How to use this quickstart</PageTools.Title>
               <ol>
                 <li>
-                  <Link to={SIGNUP_LINK}>Sign Up</Link> for a free New Relic
-                  account or <Link to={LOGIN_LINK}>Log In</Link> to your
-                  existing account.
+                  <Link
+                    to={SIGNUP_LINK}
+                    onClick={() =>
+                      tessen.track(
+                        'instantObservability',
+                        'QuickstartDetailsSignUpClick'
+                      )
+                    }
+                  >
+                    Sign Up
+                  </Link>{' '}
+                  for a free New Relic account or{' '}
+                  <Link
+                    to={LOGIN_LINK}
+                    onClick={() =>
+                      tessen.track(
+                        'instantObservability',
+                        'QuickstartDetailsLoginClick'
+                      )
+                    }
+                  >
+                    Log In
+                  </Link>{' '}
+                  to your existing account.
                 </li>
                 <li>Click the green install button above.</li>
                 <li>