Add click tracking on YouTube banner

ishu1101 · Sep 14, 2021 · 0f117cf · 0f117cf
1 parent 7c6aee8
commit 0f117cf
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/components/sticky-banner.tsx b/components/sticky-banner.tsx
@@ -1,15 +1,14 @@
 import { Flex, Link, Text } from '@chakra-ui/react';
 import YouTubeLogo from '../components/icons/youtube.svg';
 import siteConfig from '../content/site.json';
+import { event } from '../lib/gtag';
 
 export function StickyBanner() {
   return (
     <Flex as={Link}
           href={siteConfig.url.youtube}
           bg={'yellow.300'}
           color='gray.900'
-      // bg={'teal.900'}
-      // color='gray.300'
           alignItems='center'
           position='fixed'
           left={0}
@@ -18,8 +17,12 @@ export function StickyBanner() {
           justifyContent='center'
           py='8px'
           _hover={{ textDecoration: 'none', bg: 'yellow.400' }}
-      // _hover={{ textDecoration: 'none', bg: 'teal.800', color: 'gray.100' }}
           target='_blank'
+          onClick={() => event({
+            category: 'Subscription',
+            action: 'Clicked the YouTube banner',
+            label: 'Sticky YouTube banner on Top'
+          })}
     >
       <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />
       <Text as='span' fontWeight={500} fontSize='14px'>

diff --git a/lib/gtag.ts b/lib/gtag.ts
@@ -17,7 +17,7 @@ export function firePageView(url: string) {
 }
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/events
-export function event(props: { action: string; category: string; label: string; value: string; }) {
+export function event(props: { action: string; category: string; label?: string; value?: string; }) {
   const { action, category, label, value } = props;
   if (!window.gtag) {
     console.warn('Missing GTAG – Analytics disabled');

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -13,6 +13,7 @@ import { getAllGuides, GuideType } from '../lib/guide';
 import { getAllVideos, VideoType } from '../lib/video';
 import siteConfig from '../content/site.json';
 import Helmet from '../components/helmet';
+import { event } from '../lib/gtag';
 
 type HomeProps = {
   roadmaps: RoadmapType[];
@@ -39,6 +40,11 @@ export default function Home(props: HomeProps) {
 
             <Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'}
                                                                            href={siteConfig.url.youtube}
+                                                                           onClick={() => event({
+                                                                             category: 'Subscription',
+                                                                             action: 'Clicked the YouTube link',
+                                                                             label: 'YouTube link on home'
+                                                                           })}
                                                                            target='_blank'
                                                                            fontWeight={600}>YouTube
               channel</Link> which we hope you are going to love.</Text>