github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add event tracking

Browse Source
pull/3185/head
Kamran Ahmed 2 years ago
parent e3ae882cbc
commit 0996ca6006
3 changed files with 98 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      components/footer.tsx
  2. 23
      components/roadmap/roadmap-page-header.tsx
  3. 52
      components/roadmap/tns-alert.tsx

45
components/footer.tsx
Unescape View File

@ -2,6 +2,7 @@ import { Box, Container, Flex, Image, Link, SimpleGrid, Stack, Text } from '@cha
import siteConfig from '../content/site.json'; import siteConfig from '../content/site.json';
import { CustomAd } from './custom-ad'; import { CustomAd } from './custom-ad';
import React from 'react'; import React from 'react';
import { event } from '../lib/gtag';
function NavigationLinks() { function NavigationLinks() {
return ( return (
@ -37,7 +38,8 @@ export function Footer() {
<Container maxW='container.md'> <Container maxW='container.md'>
<NavigationLinks /> <NavigationLinks />
<SimpleGrid mt={['40px', '40px', '50px']} mb='40px' gap={['40px', '40px', '75px']} columns={[1, 1, 2, 2]} justifyContent='space-between'> <SimpleGrid mt={['40px', '40px', '50px']} mb='40px' gap={['40px', '40px', '75px']} columns={[1, 1, 2, 2]}
justifyContent='space-between'>
<Box maxWidth={'550px'}> <Box maxWidth={'550px'}>
<Flex gap={0} alignItems='center' color='gray.400'> <Flex gap={0} alignItems='center' color='gray.400'>
<Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }} <Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
@ -67,7 +69,9 @@ export function Footer() {
<Box maxWidth={'550px'} textAlign={['left', 'left', 'right']}> <Box maxWidth={'550px'} textAlign={['left', 'left', 'right']}>
<Link display='flex' justifyContent={['flex-start', 'flex-start', 'flex-end']} fontWeight={600} <Link display='flex' justifyContent={['flex-start', 'flex-start', 'flex-end']} fontWeight={600}
_hover={{ textDecoration: 'none', color: 'white' }} href='https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer' target='_blank'> _hover={{ textDecoration: 'none', color: 'white' }}
href='https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer'
target='_blank'>
<Image alt='' w='195px' src='/tns.png' /> <Image alt='' w='195px' src='/tns.png' />
</Link> </Link>
@ -75,9 +79,40 @@ export function Footer() {
computing, and the latest in at-scale development, deployment, and management.</Text> computing, and the latest in at-scale development, deployment, and management.</Text>
<Text fontSize='14px' color='gray.500'> <Text fontSize='14px' color='gray.500'>
<Link href='https://thenewstack.io/category/devops/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer' target='_blank' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px' ml={['0', '0', '10px']}>DevOps</Link>&middot; <Link
<Link href='https://thenewstack.io/category/kubernetes/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer' target='_blank' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Kubernetes</Link>&middot; href='https://thenewstack.io/category/devops/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer'
<Link href='https://thenewstack.io/category/cloud-native/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer' target='_blank' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Cloud-Native</Link> target='_blank'
_hover={{ textDecoration: 'none', color: 'white' }}
onClick={() => {
event({
category: 'PartnerClick',
action: `TNS Referral`,
label: `TNS Referral - Footer`,
});
}}
color='gray.400' mx='10px' ml={['0', '0', '10px']}>DevOps</Link>&middot;
<Link
href='https://thenewstack.io/category/kubernetes/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer'
target='_blank' _hover={{ textDecoration: 'none', color: 'white' }}
onClick={() => {
event({
category: 'PartnerClick',
action: `TNS Referral`,
label: `TNS Referral - Footer`,
});
}}
color='gray.400' mx='10px'>Kubernetes</Link>&middot;
<Link
href='https://thenewstack.io/category/cloud-native/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer'
target='_blank' _hover={{ textDecoration: 'none', color: 'white' }}
onClick={() => {
event({
category: 'PartnerClick',
action: `TNS Referral`,
label: `TNS Referral - Footer`,
});
}}
color='gray.400' mx='10px'>Cloud-Native</Link>
</Text> </Text>
</Box> </Box>
</SimpleGrid> </SimpleGrid>

23
components/roadmap/roadmap-page-header.tsx
Unescape View File

@ -19,10 +19,11 @@ import {
Text, Text,
useDisclosure useDisclosure
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { AtSignIcon, ChatIcon, DownloadIcon, ExternalLinkIcon } 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'; import { event } from '../../lib/gtag';
import { TNSAlert } from './tns-alert';
type RoadmapPageHeaderType = { type RoadmapPageHeaderType = {
roadmap: RoadmapType; roadmap: RoadmapType;
@ -163,7 +164,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
<Flex justifyContent='space-between' alignItems={'center'} mt='20px'> <Flex justifyContent='space-between' alignItems={'center'} mt='20px'>
<Stack isInline flex={1}> <Stack isInline flex={1}>
<Button <Button
d={['flex', 'flex']} display={['flex', 'flex']}
as={Link} as={Link}
href={'/roadmaps'} href={'/roadmaps'}
size='xs' size='xs'
@ -174,7 +175,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
_hover={{ textDecoration: 'none' }} _hover={{ textDecoration: 'none' }}
> >
&larr; &larr;
<Text as='span' d={['none', 'inline']} ml='5px'> <Text as='span' display={['none', 'inline']} ml='5px'>
All Roadmaps All Roadmaps
</Text> </Text>
</Button> </Button>
@ -182,7 +183,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
<RoadmapDownloader roadmapTitle={roadmap.featuredTitle} /> <RoadmapDownloader roadmapTitle={roadmap.featuredTitle} />
<RoadmapSubscriber roadmapTitle={roadmap.featuredTitle} /> <RoadmapSubscriber roadmapTitle={roadmap.featuredTitle} />
<Box flex={1} justifyContent='flex-end' d='flex'> <Box flex={1} justifyContent='flex-end' display='flex'>
<Button <Button
as={Link} as={Link}
href={`${siteConfig.url.issue}?title=[Suggestion] ${roadmap.title}`} href={`${siteConfig.url.issue}?title=[Suggestion] ${roadmap.title}`}
@ -201,19 +202,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
</Flex> </Flex>
{isInteractiveRoadmap(roadmap.id) && ( {isInteractiveRoadmap(roadmap.id) && (
<Box mt='30px' mb={hasTNSAlert ? ['-53px', '-48px', '-63px'] : ['-37px', '-32px', '-47px']} borderWidth={1} rounded='3px'> <Box mt='30px' mb={hasTNSAlert ? ['-53px', '-48px', '-63px'] : ['-37px', '-32px', '-47px']} borderWidth={1} rounded='3px'>
{ hasTNSAlert && ( { hasTNSAlert && <TNSAlert roadmapName={roadmap.featuredTitle} />}
<Text
fontWeight={500}
fontSize='14px'
bg='gray.100'
p='5px 7px'
rounded='2px 2px 0 0'
borderBottomWidth={1}
>
<Box as='span' display={['none', 'none', 'inline']}>Get the latest { roadmap.featuredTitle } news from our sister site&nbsp;<Link href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'} target='_blank' textDecoration='underline' fontWeight={600}>TheNewStack.io <ExternalLinkIcon /></Link></Box>
<Box as='span' display={['inline', 'inline', 'none']}>Get latest { roadmap.featuredTitle } news on &nbsp;<Link href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'} target={'_blank'} textDecoration='underline' fontWeight={600}>TheNewStack.io <ExternalLinkIcon /></Link></Box>
</Text>
)}
<Text <Text
fontWeight={500} fontWeight={500}
fontSize='14px' fontSize='14px'

52
components/roadmap/tns-alert.tsx
Unescape View File

@ -0,0 +1,52 @@
import { Box, Link, Text } from '@chakra-ui/react';
import { ExternalLinkIcon } from '@chakra-ui/icons';
import React from 'react';
import { event } from '../../lib/gtag';
type TNSAlertProps = {
roadmapName: string;
};
export function TNSAlert(props: TNSAlertProps) {
const { roadmapName } = props;
return (
<Text
fontWeight={500}
fontSize='14px'
bg='gray.100'
p='5px 7px'
rounded='2px 2px 0 0'
borderBottomWidth={1}
>
<Box as='span' display={['none', 'none', 'inline']}>Get the latest {roadmapName} news from our sister site&nbsp;
<Link
href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'}
target='_blank' textDecoration='underline'
onClick={() => {
event({
category: 'PartnerClick',
action: `TNS Referral`,
label: `TNS Referral - ${roadmapName}`,
});
}}
fontWeight={600}>TheNewStack.io <ExternalLinkIcon />
</Link>
</Box>
<Box as='span' display={['inline', 'inline', 'none']}>Get latest {roadmapName} news on &nbsp;
<Link
href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'}
target='_blank' textDecoration='underline'
onClick={() => {
event({
category: 'PartnerClick',
action: `TNS Referral`,
label: `TNS Referral - ${roadmapName}`,
});
}}
fontWeight={600}>TheNewStack.io <ExternalLinkIcon />
</Link>
</Box>
</Text>
);
}
Write Preview
Loading…
Cancel
Save