feat: add quickstart name and id to tessen events

newrelic · Oct 18, 2021 · 28422b0 · 28422b0
1 parent f1bc742
commit 28422b0
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 9 deletions.
diff --git a/src/components/Tabs/BarItem.js b/src/components/Tabs/BarItem.js
@@ -7,7 +7,15 @@ import {
 } from '@newrelic/gatsby-theme-newrelic';
 import useTabs from './useTabs';
 
-const BarItem = ({ index, children, id, count, disabled }) => {
+const BarItem = ({
+  index,
+  children,
+  id,
+  count,
+  disabled,
+  quickstartName,
+  quickstartId,
+}) => {
   const [currentTab, setCurrentTab] = useTabs();
 
   const isSelected =
@@ -18,6 +26,8 @@ const BarItem = ({ index, children, id, count, disabled }) => {
       actionName: 'packTabToggle',
       packTabState: currentTab,
       packTabCount: count,
+      quickstartName,
+      quickstartId,
     },
     { enabled: Boolean(currentTab) }
   );
@@ -31,6 +41,8 @@ const BarItem = ({ index, children, id, count, disabled }) => {
         tessen.track('instantObservability', `QuickstartTabToggle`, {
           QuickstartTabState: id,
           QuickstartTabCount: count,
+          quickstartName,
+          quickstartId,
         });
       }}
       css={css`
@@ -137,6 +149,8 @@ BarItem.propTypes = {
   id: PropTypes.string.isRequired,
   count: PropTypes.number,
   disabled: PropTypes.bool,
+  quickstartName: PropTypes.string.isRequired,
+  quickstartId: PropTypes.string.isRequired,
 };
 
 export default BarItem;
diff --git a/src/components/quickstarts/SupportSection.js b/src/components/quickstarts/SupportSection.js
@@ -8,14 +8,17 @@ import {
   QUICKSTART_SUPPORT_LEVELS,
 } from '../../data/constants';
 
-const SupportSection = ({ supportLevel }) => {
+const SupportSection = ({ supportLevel, quickstartName, quickstartId }) => {
   const tessen = useTessen();
   const supportLink = (
     <Link
       to={SUPPORT_LINK}
       key={QUICKSTART_SUPPORT_LEVELS.NEWRELIC}
       onClick={() =>
-        tessen.track('instantObservability', 'QuickstartDetailsSupportClick')
+        tessen.track('instantObservability', 'QuickstartDetailsSupportClick', {
+          quickstartName,
+          quickstartId,
+        })
       }
     >
       Visit our Support Center
@@ -27,7 +30,14 @@ const SupportSection = ({ supportLevel }) => {
       to={COMMUNITY_LINK}
       key={QUICKSTART_SUPPORT_LEVELS.NEWRELIC}
       onClick={() =>
-        tessen.track('instantObservability', 'QuickstartDetailsCommunityClick')
+        tessen.track(
+          'instantObservability',
+          'QuickstartDetailsCommunityClick',
+          {
+            quickstartName,
+            quickstartId,
+          }
+        )
       }
     >
       the Explorers Hub
@@ -81,6 +91,8 @@ const SupportSection = ({ supportLevel }) => {
 
 SupportSection.propTypes = {
   supportLevel: PropTypes.string.isRequired,
+  quickstartName: PropTypes.string.isRequired,
+  quickstartId: PropTypes.string.isRequired,
 };
 
 export default SupportSection;
diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js
@@ -189,14 +189,27 @@ const QuickstartDetails = ({ data, location }) => {
               }
             `}
           >
-            <Tabs.BarItem id="overview">Overview</Tabs.BarItem>
+            <Tabs.BarItem
+              id="overview"
+              quickstartName={quickstart.name}
+              quickstartId={quickstart.id}
+            >
+              Overview
+            </Tabs.BarItem>
             <Tabs.BarItem
               id="dashboards"
               count={quickstart.dashboards?.length ?? 0}
+              quickstartName={quickstart.name}
+              quickstartId={quickstart.id}
             >
               Dashboards
             </Tabs.BarItem>
-            <Tabs.BarItem id="alerts" count={quickstart.alerts?.length ?? 0}>
+            <Tabs.BarItem
+              id="alerts"
+              count={quickstart.alerts?.length ?? 0}
+              quickstartName={quickstart.name}
+              quickstartId={quickstart.id}
+            >
               Alerts
             </Tabs.BarItem>
             <Tabs.BarItem
@@ -205,6 +218,8 @@ const QuickstartDetails = ({ data, location }) => {
                 (quickstart.instrumentation?.length ?? 0) +
                 (quickstart.documentation?.length ?? 0)
               }
+              quickstartName={quickstart.name}
+              quickstartId={quickstart.id}
             >
               Data sources
             </Tabs.BarItem>
@@ -266,7 +281,11 @@ const QuickstartDetails = ({ data, location }) => {
                     onClick={() =>
                       tessen.track(
                         'instantObservability',
-                        'QuickstartDetailsSignUpClick'
+                        'QuickstartDetailsSignUpClick',
+                        {
+                          quickstartName: quickstart.name,
+                          quickstartId: quickstart.id,
+                        }
                       )
                     }
                   >
@@ -278,7 +297,11 @@ const QuickstartDetails = ({ data, location }) => {
                     onClick={() =>
                       tessen.track(
                         'instantObservability',
-                        'QuickstartDetailsLoginClick'
+                        'QuickstartDetailsLoginClick',
+                        {
+                          quickstartName: quickstart.name,
+                          quickstartId: quickstart.id,
+                        }
                       )
                     }
                   >
@@ -300,7 +323,11 @@ const QuickstartDetails = ({ data, location }) => {
             </PageTools.Section>
             <PageTools.Section>
               <PageTools.Title>Support</PageTools.Title>
-              <SupportSection supportLevel={quickstart.level} />
+              <SupportSection
+                supportLevel={quickstart.level}
+                quickstartName={quickstart.name}
+                quickstartId={quickstart.id}
+              />
             </PageTools.Section>
           </Layout.PageTools>
         </PageLayout>