open-index/open-npm huggingface dataset:
npm package: @mycujoo/mcls-components-ads
Description: ## Ad component
Latest version: 1.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](https://codesandbox.io/s/sad-pateu-w2mvys?file=/src/Ad.tsx) example.

```tsx
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.

```html
<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.

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