gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add click tracking on YouTube banner

Browse Source
This commit is contained in:
Kamran Ahmed
2021-09-14 20:34:24 +02:00
parent 69ef7615fe
commit 9a63e576c7
3 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/sticky-banner.tsx
View File

@ -1,6 +1,7 @@
import { Flex, Link, Text } from '@chakra-ui/react'; import { Flex, Link, Text } from '@chakra-ui/react';
import YouTubeLogo from '../components/icons/youtube.svg'; import YouTubeLogo from '../components/icons/youtube.svg';
import siteConfig from '../content/site.json'; import siteConfig from '../content/site.json';
import { event } from '../lib/gtag';
export function StickyBanner() { export function StickyBanner() {
return ( return (
@ -8,8 +9,6 @@ export function StickyBanner() {
href={siteConfig.url.youtube} href={siteConfig.url.youtube}
bg={'yellow.300'} bg={'yellow.300'}
color='gray.900' color='gray.900'
// bg={'teal.900'}
// color='gray.300'
alignItems='center' alignItems='center'
position='fixed' position='fixed'
left={0} left={0}
@ -18,8 +17,12 @@ export function StickyBanner() {
justifyContent='center' justifyContent='center'
py='8px' py='8px'
_hover={{ textDecoration: 'none', bg: 'yellow.400' }} _hover={{ textDecoration: 'none', bg: 'yellow.400' }}
// _hover={{ textDecoration: 'none', bg: 'teal.800', color: 'gray.100' }}
target='_blank' 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' }} /> <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />
<Text as='span' fontWeight={500} fontSize='14px'> <Text as='span' fontWeight={500} fontSize='14px'>

2
lib/gtag.ts
View File

@ -17,7 +17,7 @@ export function firePageView(url: string) {
} }
// https://developers.google.com/analytics/devguides/collection/gtagjs/events // 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; const { action, category, label, value } = props;
if (!window.gtag) { if (!window.gtag) {
console.warn('Missing GTAG – Analytics disabled'); console.warn('Missing GTAG – Analytics disabled');

6
pages/index.tsx
View File

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