feat: add tracking

newrelic · Nov 15, 2021 · cd51378 · cd51378
1 parent 7b0d273
commit cd51378
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/src/components/InstallButton.js b/src/components/InstallButton.js
@@ -16,6 +16,7 @@ import {
 } from '../data/constants';
 import { quickstart } from '../types';
 import Cookies from 'js-cookie';
+import useTreatment from '../hooks/useTreatment';
 
 /**
  * @param {Object} parameters
@@ -85,6 +86,8 @@ const hasComponent = (quickstart, key) =>
   quickstart[key] && quickstart[key].length > 0;
 
 const InstallButton = ({ quickstart, location, ...props }) => {
+  const { treatment } = useTreatment('super_tiles');
+
   const hasInstallableComponent =
     hasComponent(quickstart, 'installPlans') ||
     quickstart.id === CODESTREAM_QUICKSTART_ID;
@@ -153,6 +156,7 @@ const InstallButton = ({ quickstart, location, ...props }) => {
       quickstartName: quickstart.name,
       quickstartId: quickstart.id,
       quickstartUrl: quickstart.packUrl,
+      super_tiles_treatment: treatment,
       quickstartButtonText: hasInstallableComponent
         ? 'Install quickstart'
         : 'See installation docs',

diff --git a/src/experiments/super_tiles/components/CodeStreamTile.js b/src/experiments/super_tiles/components/CodeStreamTile.js
@@ -1,9 +1,19 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import SuperTile from './SuperTile';
-import { Button } from '@newrelic/gatsby-theme-newrelic';
+import { Button, useTessen } from '@newrelic/gatsby-theme-newrelic';
+import { Link } from 'gatsby';
 
 const CodeStreamTile = () => {
+  const tessen = useTessen();
+
+  const link =
+    '/instant-observability/codestream/29bd9a4a-1c19-4219-9694-0942f6411ce7/';
+
+  const handleButtonClick = () => {
+    tessen.track('clickSuperTile', 'QuickstartLanding', { tile: 'codestream' });
+  };
+
   return (
     <SuperTile>
       <div
@@ -55,7 +65,10 @@ const CodeStreamTile = () => {
                 color: var(--color-brand-400);
               }
             `}
+            onClick={handleButtonClick}
             variant={Button.VARIANT.OUTLINE}
+            to={link}
+            as={Link}
           >
             Install CodeStream
           </Button>

diff --git a/src/experiments/super_tiles/components/GuidedInstallTile.js b/src/experiments/super_tiles/components/GuidedInstallTile.js
@@ -1,9 +1,20 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import SuperTile from './SuperTile';
-import { Button } from '@newrelic/gatsby-theme-newrelic';
+import { Button, useTessen } from '@newrelic/gatsby-theme-newrelic';
+import { navigate } from 'gatsby';
 
 const GuidedInstallTile = () => {
+  const tessen = useTessen();
+
+  const link =
+    'https://docs.newrelic.com/docs/using-new-relic/welcome-new-relic/get-started/new-relic-guided-install-overview/';
+
+  const handleButtonClick = () => {
+    tessen.track('clickSuperTile', 'QuickstartLanding', { tile: 'guided' });
+    navigate(link);
+  };
+
   return (
     <SuperTile type="primary">
       <div
@@ -52,7 +63,9 @@ const GuidedInstallTile = () => {
           </span>
         </div>
         <div>
-          <Button variant={Button.VARIANT.PRIMARY}>Install New Relic</Button>
+          <Button onClick={handleButtonClick} variant={Button.VARIANT.PRIMARY}>
+            Install New Relic
+          </Button>
         </div>
       </div>
     </SuperTile>