MCLS Components - AdSlot
Ad component
To use the react ad unit import AdSlot
from the library and pass at least unitPath
and sizeMapping
props.
Please check this CodeSandbox example.
import { AdSlot, AdSlotSizing } from '@mycujoo/mcls-components-ads';
const adSlotSizing: AdSlotSiging = [
{
viewport: [0, 0],
slot: [[728, 90]],
},
{
viewport: [900, 0],
slot: [
[1024, 768],
[750, 200],
],
},
]
;<AsSlot
unitPath={'/6355419/Travel/Europe'}
targeting={{
name: 'name',
}}
sizeMapping={}
slotRefreshRateMs={60000}
/>
In order for GPT ads to work the gpt library must be loaded on the pages where the AdSlots are used.
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
></script>
Ad hooks
For implementing custom logic around ad slots on a page, can be done using useAdEvents
hook.
The hook handles subscriptions to Ad events listeners in a react hook. Below is an example of extending the hook to manage hiding some low priority ads from the page when ads with a higher priority are being shown.
import { useAdsEvents } from '@mycujoo/mcls-components-ads'
export const useLowPriorityAdsHandler = (): void => {
const [adUnits] = useState(new Map<string, googletag.Slot>())
useAdsEvents({
onSlotLoad: (unitPath, unit) => {
adUnits.set(unitPath, unit)
},
onSlotVisibilityChange: (unitPath, _unit, visualViewport) => {
if (unitPath === '/test/ad/path') {
const lowPriorityAd = adUnits.get('/test/ad/low/prio/path')
if (visualViewport) {
lowPriorityAd && window?.googletag?.destroySlots([lowPriorityAd])
}
}
},
})
}