feat: add support for sticky sponsor banner (#7602)
* Add sponsors functionality * Fix overlapping issue * Add sticky top sponsorpull/7603/head
Kamran Ahmed
4 weeks ago
committed by
GitHub
parent
7f399f5c7c
commit
65f1c9ca50
9 changed files with 404 additions and 12 deletions
@ -0,0 +1,104 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { httpGet, httpPatch, httpPost } from '../../lib/http'; |
||||||
|
import { sponsorHidden } from '../../stores/page'; |
||||||
|
import { useStore } from '@nanostores/react'; |
||||||
|
import { X } from 'lucide-react'; |
||||||
|
import { setViewSponsorCookie } from '../../lib/jwt'; |
||||||
|
import { isMobile } from '../../lib/is-mobile'; |
||||||
|
import Cookies from 'js-cookie'; |
||||||
|
import { getUrlUtmParams } from '../../lib/browser.ts'; |
||||||
|
|
||||||
|
export type BottomRightSponsorType = { |
||||||
|
id: string; |
||||||
|
company: string; |
||||||
|
description: string; |
||||||
|
gaLabel: string; |
||||||
|
imageUrl: string; |
||||||
|
pageUrl: string; |
||||||
|
title: string; |
||||||
|
url: string; |
||||||
|
}; |
||||||
|
|
||||||
|
type V1GetSponsorResponse = { |
||||||
|
id?: string; |
||||||
|
href?: string; |
||||||
|
sponsor?: BottomRightSponsorType; |
||||||
|
}; |
||||||
|
|
||||||
|
type BottomRightSponsorProps = { |
||||||
|
sponsor: BottomRightSponsorType; |
||||||
|
|
||||||
|
onSponsorClick: () => void; |
||||||
|
onSponsorImpression: () => void; |
||||||
|
onSponsorHidden: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function BottomRightSponsor(props: BottomRightSponsorProps) { |
||||||
|
const { sponsor, onSponsorImpression, onSponsorClick, onSponsorHidden } = |
||||||
|
props; |
||||||
|
|
||||||
|
const [isHidden, setIsHidden] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!sponsor) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
onSponsorImpression(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const { url, title, imageUrl, description, company, gaLabel } = sponsor; |
||||||
|
|
||||||
|
const isRoadmapAd = title.toLowerCase() === 'advertise with us!'; |
||||||
|
|
||||||
|
if (isHidden) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
href={url} |
||||||
|
target="_blank" |
||||||
|
rel="noopener sponsored nofollow" |
||||||
|
className="fixed bottom-0 left-0 right-0 z-50 flex bg-white shadow-lg outline-0 outline-transparent sm:bottom-[15px] sm:left-auto sm:right-[15px] sm:max-w-[350px]" |
||||||
|
onClick={onSponsorClick} |
||||||
|
> |
||||||
|
<span |
||||||
|
className="absolute right-1 top-1 text-gray-400 hover:text-gray-800 sm:right-1.5 sm:top-1.5 sm:text-gray-300" |
||||||
|
aria-label="Close" |
||||||
|
onClick={(e) => { |
||||||
|
e.preventDefault(); |
||||||
|
e.stopPropagation(); |
||||||
|
|
||||||
|
setIsHidden(true); |
||||||
|
onSponsorHidden(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<X className="h-5 w-5 sm:h-4 sm:w-4" /> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img |
||||||
|
src={imageUrl} |
||||||
|
className="block h-[106px] object-cover sm:h-[153px] sm:w-[118.18px]" |
||||||
|
alt="Sponsor Banner" |
||||||
|
/> |
||||||
|
</span> |
||||||
|
<span className="flex flex-1 flex-col justify-between text-xs sm:text-sm"> |
||||||
|
<span className="p-[10px]"> |
||||||
|
<span className="mb-0.5 block font-semibold">{title}</span> |
||||||
|
<span className="block text-gray-500">{description}</span> |
||||||
|
</span> |
||||||
|
{!isRoadmapAd && ( |
||||||
|
<> |
||||||
|
<span className="sponsor-footer hidden sm:block"> |
||||||
|
Partner Content |
||||||
|
</span> |
||||||
|
<span className="block pb-1 text-center text-[10px] uppercase text-gray-400 sm:hidden"> |
||||||
|
Partner Content |
||||||
|
</span> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</span> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,195 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { httpGet, httpPatch } from '../../lib/http'; |
||||||
|
import { sponsorHidden } from '../../stores/page'; |
||||||
|
import { useStore } from '@nanostores/react'; |
||||||
|
import { setViewSponsorCookie } from '../../lib/jwt'; |
||||||
|
import { isMobile } from '../../lib/is-mobile'; |
||||||
|
import Cookies from 'js-cookie'; |
||||||
|
import { getUrlUtmParams } from '../../lib/browser.ts'; |
||||||
|
import { StickyTopSponsor } from './StickyTopSponsor.tsx'; |
||||||
|
import { BottomRightSponsor } from './BottomRightSponsor.tsx'; |
||||||
|
|
||||||
|
type PageSponsorType = { |
||||||
|
company: string; |
||||||
|
description: string; |
||||||
|
gaLabel: string; |
||||||
|
imageUrl: string; |
||||||
|
pageUrl: string; |
||||||
|
title: string; |
||||||
|
url: string; |
||||||
|
id: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type StickyTopSponsorType = PageSponsorType & { |
||||||
|
buttonText: string; |
||||||
|
style?: { |
||||||
|
fromColor?: string; |
||||||
|
toColor?: string; |
||||||
|
textColor?: string; |
||||||
|
buttonBackgroundColor?: string; |
||||||
|
buttonTextColor?: string; |
||||||
|
}; |
||||||
|
}; |
||||||
|
export type BottomRightSponsorType = PageSponsorType; |
||||||
|
|
||||||
|
type V1GetSponsorResponse = { |
||||||
|
bottomRightAd?: BottomRightSponsorType; |
||||||
|
stickyTopAd?: StickyTopSponsorType; |
||||||
|
}; |
||||||
|
|
||||||
|
type PageSponsorsProps = { |
||||||
|
gaPageIdentifier?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
const CLOSE_SPONSOR_KEY = 'sponsorClosed'; |
||||||
|
|
||||||
|
function markSponsorHidden(sponsorId: string) { |
||||||
|
Cookies.set(`${CLOSE_SPONSOR_KEY}-${sponsorId}`, '1', { |
||||||
|
path: '/', |
||||||
|
expires: 1, |
||||||
|
sameSite: 'lax', |
||||||
|
secure: true, |
||||||
|
domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh', |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function isSponsorMarkedHidden(sponsorId: string) { |
||||||
|
return Cookies.get(`${CLOSE_SPONSOR_KEY}-${sponsorId}`) === '1'; |
||||||
|
} |
||||||
|
|
||||||
|
export function PageSponsors(props: PageSponsorsProps) { |
||||||
|
const { gaPageIdentifier } = props; |
||||||
|
|
||||||
|
const $isSponsorHidden = useStore(sponsorHidden); |
||||||
|
|
||||||
|
const [stickyTopSponsor, setStickyTopSponsor] = |
||||||
|
useState<StickyTopSponsorType | null>(); |
||||||
|
const [bottomRightSponsor, setBottomRightSponsor] = |
||||||
|
useState<BottomRightSponsorType | null>(); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const foundUtmParams = getUrlUtmParams(); |
||||||
|
|
||||||
|
if (!foundUtmParams.utmSource) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
localStorage.setItem('utm_params', JSON.stringify(foundUtmParams)); |
||||||
|
}, []); |
||||||
|
|
||||||
|
async function loadSponsor() { |
||||||
|
const currentPath = window.location.pathname; |
||||||
|
if ( |
||||||
|
currentPath === '/' || |
||||||
|
currentPath === '/best-practices' || |
||||||
|
currentPath === '/roadmaps' || |
||||||
|
currentPath.startsWith('/guides') || |
||||||
|
currentPath.startsWith('/videos') || |
||||||
|
currentPath.startsWith('/account') || |
||||||
|
currentPath.startsWith('/team/') |
||||||
|
) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const { response, error } = await httpGet<V1GetSponsorResponse>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-sponsor`, |
||||||
|
{ |
||||||
|
href: window.location.pathname, |
||||||
|
mobile: isMobile() ? 'true' : 'false', |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (error) { |
||||||
|
console.error(error); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setStickyTopSponsor(response?.stickyTopAd); |
||||||
|
setBottomRightSponsor(response?.bottomRightAd); |
||||||
|
} |
||||||
|
|
||||||
|
async function logSponsorImpression( |
||||||
|
sponsor: BottomRightSponsorType | StickyTopSponsorType, |
||||||
|
) { |
||||||
|
window.fireEvent({ |
||||||
|
category: 'SponsorImpression', |
||||||
|
action: `${sponsor?.company} Impression`, |
||||||
|
label: |
||||||
|
sponsor?.gaLabel || `${gaPageIdentifier} / ${sponsor?.company} Link`, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
async function clickSponsor( |
||||||
|
sponsor: BottomRightSponsorType | StickyTopSponsorType, |
||||||
|
) { |
||||||
|
const { id: sponsorId, company, gaLabel } = sponsor; |
||||||
|
|
||||||
|
const labelValue = gaLabel || `${gaPageIdentifier} / ${company} Link`; |
||||||
|
|
||||||
|
window.fireEvent({ |
||||||
|
category: 'SponsorClick', |
||||||
|
action: `${company} Redirect`, |
||||||
|
label: labelValue, |
||||||
|
value: labelValue, |
||||||
|
}); |
||||||
|
|
||||||
|
const clickUrl = new URL( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-view-sponsor/${sponsorId}`, |
||||||
|
); |
||||||
|
|
||||||
|
const { response, error } = await httpPatch<{ status: 'ok' }>( |
||||||
|
clickUrl.toString(), |
||||||
|
{ |
||||||
|
mobile: isMobile(), |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
console.error(error); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setViewSponsorCookie(sponsorId); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
window.setTimeout(loadSponsor); |
||||||
|
}, []); |
||||||
|
|
||||||
|
if ($isSponsorHidden) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{stickyTopSponsor && !isSponsorMarkedHidden(stickyTopSponsor.id) && ( |
||||||
|
<StickyTopSponsor |
||||||
|
sponsor={stickyTopSponsor} |
||||||
|
onSponsorImpression={() => { |
||||||
|
logSponsorImpression(stickyTopSponsor).catch(console.error); |
||||||
|
}} |
||||||
|
onSponsorClick={() => { |
||||||
|
clickSponsor(stickyTopSponsor).catch(console.error); |
||||||
|
}} |
||||||
|
onSponsorHidden={() => { |
||||||
|
markSponsorHidden(stickyTopSponsor.id); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{bottomRightSponsor && !isSponsorMarkedHidden(bottomRightSponsor.id) && ( |
||||||
|
<BottomRightSponsor |
||||||
|
sponsor={bottomRightSponsor} |
||||||
|
onSponsorClick={() => { |
||||||
|
clickSponsor(bottomRightSponsor).catch(console.error); |
||||||
|
}} |
||||||
|
onSponsorHidden={() => { |
||||||
|
markSponsorHidden(bottomRightSponsor.id); |
||||||
|
}} |
||||||
|
onSponsorImpression={() => { |
||||||
|
logSponsorImpression(bottomRightSponsor).catch(console.error); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
import { cn } from '../../lib/classname.ts'; |
||||||
|
import { useScrollPosition } from '../../hooks/use-scroll-position.ts'; |
||||||
|
import { X } from 'lucide-react'; |
||||||
|
import type { StickyTopSponsorType } from './PageSponsors.tsx'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { isOnboardingStripHidden } from '../../stores/page.ts'; |
||||||
|
|
||||||
|
type StickyTopSponsorProps = { |
||||||
|
sponsor: StickyTopSponsorType; |
||||||
|
|
||||||
|
onSponsorImpression: () => void; |
||||||
|
onSponsorClick: () => void; |
||||||
|
onSponsorHidden: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
const SCROLL_DISTANCE = 100; |
||||||
|
|
||||||
|
export function StickyTopSponsor(props: StickyTopSponsorProps) { |
||||||
|
const { sponsor, onSponsorHidden, onSponsorImpression, onSponsorClick } = |
||||||
|
props; |
||||||
|
|
||||||
|
const { y: scrollY } = useScrollPosition(); |
||||||
|
const [isImpressionLogged, setIsImpressionLogged] = useState(false); |
||||||
|
const [isHidden, setIsHidden] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!sponsor) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// hide the onboarding strip when the sponsor is visible
|
||||||
|
isOnboardingStripHidden.set(true); |
||||||
|
}, [sponsor]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (scrollY < SCROLL_DISTANCE || isImpressionLogged) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsImpressionLogged(true); |
||||||
|
onSponsorImpression(); |
||||||
|
}, [scrollY]); |
||||||
|
|
||||||
|
if (scrollY < SCROLL_DISTANCE || isHidden) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
target="_blank" |
||||||
|
href="https://www.google.com" |
||||||
|
onClick={onSponsorClick} |
||||||
|
className={cn( |
||||||
|
'fixed left-0 right-0 top-0 z-[91] flex min-h-[45px] w-full flex-row items-center justify-center px-14 pb-2 pt-1.5 text-base font-medium text-yellow-950', |
||||||
|
)} |
||||||
|
style={{ |
||||||
|
backgroundImage: `linear-gradient(to bottom, ${sponsor.style?.fromColor}, ${sponsor.style?.toColor})`, |
||||||
|
color: sponsor.style?.textColor, |
||||||
|
}} |
||||||
|
> |
||||||
|
<img className="h-[23px]" src={sponsor.imageUrl} alt={'ad'} /> |
||||||
|
<span className="mx-3 truncate">{sponsor.description}</span> |
||||||
|
<button |
||||||
|
className="flex-truncate rounded-md px-3 py-1 text-sm transition-colors" |
||||||
|
style={{ |
||||||
|
backgroundColor: sponsor.style?.buttonBackgroundColor, |
||||||
|
color: sponsor.style?.buttonTextColor, |
||||||
|
}} |
||||||
|
> |
||||||
|
{sponsor.buttonText} |
||||||
|
</button> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
className="absolute right-5 top-1/2 ml-1 -translate-y-1/2 px-1 py-1 opacity-70 hover:opacity-100" |
||||||
|
onClick={(e) => { |
||||||
|
e.preventDefault(); |
||||||
|
e.stopPropagation(); |
||||||
|
|
||||||
|
setIsHidden(true); |
||||||
|
onSponsorHidden(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<X className="h-4 w-4" strokeWidth={3} /> |
||||||
|
</button> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue