@mycujoo/mcls-components-ads v1.0.0

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])
        }
      }
    },
  })
}