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
Split 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 { CustomAd } from './custom-ad';
import React from 'react';
import { event } from '../lib/gtag';
function NavigationLinks() {
return (
@ -37,7 +38,8 @@ export function Footer() {
<Container maxW='container.md'>
<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'}>
<Flex gap={0} alignItems='center' color='gray.400'>
<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']}>
<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' />
</Link>
@ -75,9 +79,40 @@ export function Footer() {
computing, and the latest in at-scale development, deployment, and management.</Text>
<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 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;
<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>
<Link
href='https://thenewstack.io/category/devops/?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' 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>
</Box>
</SimpleGrid>

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

@ -19,10 +19,11 @@ import {
Text,
useDisclosure
} 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 { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../../pages/signup';
import { event } from '../../lib/gtag';
import { TNSAlert } from './tns-alert';
type RoadmapPageHeaderType = {
roadmap: RoadmapType;
@ -163,7 +164,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
<Flex justifyContent='space-between' alignItems={'center'} mt='20px'>
<Stack isInline flex={1}>
<Button
d={['flex', 'flex']}
display={['flex', 'flex']}
as={Link}
href={'/roadmaps'}
size='xs'
@ -174,7 +175,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
_hover={{ textDecoration: 'none' }}
>
&larr;
<Text as='span' d={['none', 'inline']} ml='5px'>
<Text as='span' display={['none', 'inline']} ml='5px'>
All Roadmaps
</Text>
</Button>
@ -182,7 +183,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
<RoadmapDownloader roadmapTitle={roadmap.featuredTitle} />
<RoadmapSubscriber roadmapTitle={roadmap.featuredTitle} />
<Box flex={1} justifyContent='flex-end' d='flex'>
<Box flex={1} justifyContent='flex-end' display='flex'>
<Button
as={Link}
href={`${siteConfig.url.issue}?title=[Suggestion] ${roadmap.title}`}
@ -201,19 +202,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
</Flex>
{isInteractiveRoadmap(roadmap.id) && (
<Box mt='30px' mb={hasTNSAlert ? ['-53px', '-48px', '-63px'] : ['-37px', '-32px', '-47px']} borderWidth={1} rounded='3px'>
{ hasTNSAlert && (
<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>
)}
{ hasTNSAlert && <TNSAlert roadmapName={roadmap.featuredTitle} />}
<Text
fontWeight={500}
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