@mycujoo/mcls-components-ads
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @mycujoo/mcls-components-ads

Weekly Downloads

0

Version

1.0.0

License

none

Unpacked Size

35.4 kB

Total Files

17

Last publish

Collaborators

  • adamahom
  • yneleven
  • berker93
  • vikkivi
  • pvmnt
  • farzad-mycujoo
  • mycujoo.tv
  • radev83
  • aandrei
  • pplaatje
  • oleksiih
  • antonella.manilla
  • thecodeassassin
  • rgalus
  • mycujoomats
  • alaandrei