From 70316090a6615023dbbcee963c397dd80656f944 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 2 Sep 2022 00:15:06 +0400
Subject: [PATCH] Add analytics events

---
 components/roadmap/roadmap-page-header.tsx | 24 ++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/roadmap/roadmap-page-header.tsx b/components/roadmap/roadmap-page-header.tsx
index 5760c258a..1c4f0132a 100644
--- a/components/roadmap/roadmap-page-header.tsx
+++ b/components/roadmap/roadmap-page-header.tsx
@@ -22,19 +22,27 @@ import {
 import { AtSignIcon, ChatIcon, DownloadIcon } from '@chakra-ui/icons';
 import React from 'react';
 import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../../pages/signup';
+import { event } from '../../lib/gtag';
 
 type RoadmapPageHeaderType = {
   roadmap: RoadmapType;
 };
 
-function RoadmapDownloader() {
+function RoadmapDownloader({ roadmapTitle }: { roadmapTitle: string }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const initialRef = React.useRef(null);
 
   return (
     <>
       <Button
-        onClick={onOpen}
+        onClick={(e) => {
+          event({
+            category: 'Subscription',
+            action: `Clicked Download ${roadmapTitle} Roadmap`,
+            label: `Download ${roadmapTitle} Roadmap Button`
+          });
+          onOpen();
+        }}
         size='xs'
         py='14px'
         px='10px'
@@ -54,7 +62,15 @@ function RoadmapDownloader() {
           <ModalBody p={6}>
             <Heading mb='5px' fontSize='2xl'>Download Roadmap</Heading>
             <Text fontSize={'md'} color='gray.700'>Enter your email below to receive the download link.</Text>
-            <form action={SIGNUP_FORM_ACTION} method='post' target='_blank' onSubmit={onClose}>
+            <form action={SIGNUP_FORM_ACTION} method='post' target='_blank' onSubmit={() => {
+              event({
+                category: 'Subscription',
+                action: `Submitted Download ${roadmapTitle} Roadmap Email`,
+                label: `PDF / Subscribe ${roadmapTitle} Roadmap`
+              });
+
+              onClose();
+            }}>
               <Input required ref={initialRef} size='md' my='10px' type='email' placeholder='Email address' name={SIGNUP_EMAIL_INPUT_NAME}  />
               <Button type='submit' colorScheme='green' size='md' width={'full'}>Send Link</Button>
             </form>
@@ -106,7 +122,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
               </Text>
             </Button>
 
-            <RoadmapDownloader />
+            <RoadmapDownloader roadmapTitle={roadmap.featuredTitle} />
 
             <Button
               as={Link}