diff --git a/components/sticky-banner.tsx b/components/sticky-banner.tsx index 288a1549d..cbecd0c7a 100644 --- a/components/sticky-banner.tsx +++ b/components/sticky-banner.tsx @@ -1,6 +1,7 @@ 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 ( @@ -8,8 +9,6 @@ export function StickyBanner() { 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' + })} > diff --git a/lib/gtag.ts b/lib/gtag.ts index e80f9d369..6d30071fe 100644 --- 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 index ea16d3990..2eef42172 100644 --- 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) { We also have a event({ + category: 'Subscription', + action: 'Clicked the YouTube link', + label: 'YouTube link on home' + })} target='_blank' fontWeight={600}>YouTube channel which we hope you are going to love.