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.