mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-31 21:11:44 +02:00
Add analytics events
This commit is contained in:
@@ -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}
|
||||
|
Reference in New Issue
Block a user