Add event tracking

pull/3185/head
Kamran Ahmed 2 years ago
parent e3ae882cbc
commit 0996ca6006
  1. 45
      components/footer.tsx
  2. 23
      components/roadmap/roadmap-page-header.tsx
  3. 52
      components/roadmap/tns-alert.tsx

@ -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>

@ -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'

@ -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>
);
}
Loading…
Cancel
Save