Add click tracking on YouTube banner

pull/1657/head
Kamran Ahmed 3 years ago
parent 7c6aee88a0
commit 0f117cfa00
  1. 9
      components/sticky-banner.tsx
  2. 2
      lib/gtag.ts
  3. 6
      pages/index.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'
})}
>
<YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />
<Text as='span' fontWeight={500} fontSize='14px'>

@ -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');

@ -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>

Loading…
Cancel
Save