Add event tracking

components/footer.tsx

@@ -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
-              <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>
           </Box>
         </SimpleGrid>

components/roadmap/roadmap-page-header.tsx

@@ -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 && (
+            { 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
               fontWeight={500}
               fontSize='14px'

components/roadmap/tns-alert.tsx

@@ -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>
+  );
+}