info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-01 21:32:35 +02:00
Code Issues Releases Wiki Activity

Add analytics events

Browse Source
This commit is contained in:
Kamran Ahmed
2022-09-02 00:15:06 +04:00
parent 2542b7014d
commit 70316090a6
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/roadmap/roadmap-page-header.tsx
View File

@@ -22,19 +22,27 @@ import {
import { AtSignIcon, ChatIcon, DownloadIcon } from '@chakra-ui/icons'; import { AtSignIcon, ChatIcon, DownloadIcon } from '@chakra-ui/icons';
import React from 'react'; import React from 'react';
import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../../pages/signup'; import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../../pages/signup';
import { event } from '../../lib/gtag';
type RoadmapPageHeaderType = { type RoadmapPageHeaderType = {
roadmap: RoadmapType; roadmap: RoadmapType;
}; };
function RoadmapDownloader() { function RoadmapDownloader({ roadmapTitle }: { roadmapTitle: string }) {
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const initialRef = React.useRef(null); const initialRef = React.useRef(null);
return ( return (
<> <>
<Button <Button
onClick={onOpen} onClick={(e) => {
event({
category: 'Subscription',
action: `Clicked Download ${roadmapTitle} Roadmap`,
label: `Download ${roadmapTitle} Roadmap Button`
});
onOpen();
}}
size='xs' size='xs'
py='14px' py='14px'
px='10px' px='10px'
@@ -54,7 +62,15 @@ function RoadmapDownloader() {
<ModalBody p={6}> <ModalBody p={6}>
<Heading mb='5px' fontSize='2xl'>Download Roadmap</Heading> <Heading mb='5px' fontSize='2xl'>Download Roadmap</Heading>
<Text fontSize={'md'} color='gray.700'>Enter your email below to receive the download link.</Text> <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} /> <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> <Button type='submit' colorScheme='green' size='md' width={'full'}>Send Link</Button>
</form> </form>
@@ -106,7 +122,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
</Text> </Text>
</Button> </Button>
<RoadmapDownloader /> <RoadmapDownloader roadmapTitle={roadmap.featuredTitle} />
<Button <Button
as={Link} as={Link}