feat: add install button and instrument

newrelic · Jun 11, 2021 · 2cd7e5d · 2cd7e5d
1 parent da42517
commit 2cd7e5d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/components/InstallButton.js b/src/components/InstallButton.js
@@ -51,8 +51,8 @@ const InstallButton = ({ title, ...props }) => {
 };
 
 InstallButton.propTypes = {
-  title: PropTypes.string,
-  guid: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  guid: PropTypes.string.isRequired,
 };
 
 export default InstallButton;
diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js
@@ -5,13 +5,14 @@ import DevSiteSeo from '../components/DevSiteSeo';
 import PropTypes from 'prop-types';
 import PageLayout from '../components/PageLayout';
 import Tabs from '../components/Tabs';
-import { Layout, PageTools, Button } from '@newrelic/gatsby-theme-newrelic';
+import { Layout, PageTools, useTessen } from '@newrelic/gatsby-theme-newrelic';
 import ImageGallery from '../components/ImageGallery';
 import Intro from '../components/Intro';
+import InstallButton from '../components/InstallButton';
 
 const ObservabilityPackDetails = ({ data, location }) => {
   const pack = data.observabilityPacks;
-
+  const tessen = useTessen();
   return (
     <>
       <DevSiteSeo title={pack.name} location={location} />
@@ -24,9 +25,22 @@ const ObservabilityPackDetails = ({ data, location }) => {
               gap: 1rem;
             `}
           >
-            <Button variant={Button.VARIANT.PRIMARY} size={Button.SIZE.MEDIUM}>
-              Install
-            </Button>
+            <InstallButton
+              title="Install"
+              guid={pack.id}
+              onClick={() => {
+                tessen.track('observabilityPack', `ObservabilityPackInstall`, {
+                  installPackName: pack.name,
+                  installPackId: pack.id,
+                });
+                if (typeof window !== 'undefined' && window.newrelic) {
+                  window.newrelic.addPageAction('oPackInstall', {
+                    installPackName: pack.name,
+                    installPackId: pack.id,
+                  });
+                }
+              }}
+            />
             <Tabs.Bar
               css={css`
                 margin-top: 1rem;