Add event tracking

2025-08-28 19:49:50 +02:00 · 2022-12-27 00:26:38 +04:00
parent e3ae882cbc
commit 0996ca6006
3 changed files with 98 additions and 22 deletions
--- a/components/footer.tsx
+++ b/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 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>
--- a/components/roadmap/roadmap-page-header.tsx
+++ b/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 && (
-              <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'
--- a/components/roadmap/tns-alert.tsx
+++ b/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>
+  );
+}