Help rendering an ad slot based on the state of another ad

[jdwinall-tm]

I have three ads on a page with ids half-page, top-medium-rectangle & bottom-medium-rectangle.

How would I implement the following?

I want to render half-page on desktop with two conditions:

• If half-page renders and the contents are empty, I want to render two different ad slots: top-medium-rectangle & bottom-medium-rectangle.
• If half-page renders and displays an ad, I do not want to show top-medium-rectangle & bottom-medium-rectangle.

This is my custom ad component that uses react-gpt with a TODO console log.

import React, { Component, PropTypes } from 'react'
import { Bling as Gpt, Events } from 'react-gpt' // eslint-disable-line import/no-unresolved

Gpt.configure({renderWhenViewable: true})
Gpt.enableSingleRequest()

Gpt.on(Events.SLOT_RENDER_ENDED, event => {
  const slot = event.slot
  const divId = slot.getSlotElementId()
  const targetingKeys = slot.getTargetingKeys()
  const targeting = targetingKeys.reduce((t, key) => {
    const val = slot.getTargeting(key)
    t[key] = val.length === 1 ? val[0] : val
    return t
  }, {})
  if (debug) {
    if (!event.isEmpty && event.size) {
      console.log(`${targeting.adType} ad creative '${event.creativeId}' is rendered to slot '${divId}' of size '${event.size[0]}x${event.size[1]}'`, event, targeting)
    } else {
      console.log(`${targeting.adType} ad rendered but empty, div id is ${divId}`, event, targeting)
      if (targeting.adType === 'Half Page') {
        console.log('@TODO: Attempt to render Top Medium Rectangle and Bottom Medium Rectangle')
      }
    }
  }
})

class AdGpt extends Component {
  render () {
    const adState = {
      'halfPage': {
        adUnitPath: '/4595/nfl.test.open'
        collapseEmptyDiv: [true, true],
        id: 'half-page',
        sizeMapping: [
          {viewport: [800,0], slot: [300, 600]}
        ],
        targeting: {
          adType: 'Half Page'
        }
      },
      'topMediumRectangle': {
        adUnitPath: '/4595/nfl.test.open'
        collapseEmptyDiv: [true, true],
        id: 'top-medium-rectangle',
        sizeMapping: [
          {viewport: [800,0], slot: [300, 250]}
        ],
        targeting: {
          adType: 'Top Medium Rectangle'
        }
      },
      'bottomMediumRectangle': {
        adUnitPath: '/4595/nfl.test.open'
        collapseEmptyDiv: [true, true],
        id: 'bottom-medium-rectangle',
        sizeMapping: [
          {viewport: [800,0], slot: [300, 250]}
        ],
        targeting: {
          adType: 'Bottom Medium Rectangle'
        }
      },
    }

    return (
      <div>
        <Gpt {...adState[this.props.name]} />
      </div>
    )
  }
}

export default AdGpt

And this is how I am using it:

import React from 'react'
import AdGpt from 'components/AdGpt'

const Test = props => {
  return (
    <div>
      <AdGpt
        name={['halfPage']} />

      <AdGpt
        name={['topMediumRectangle']} />

      <AdGpt
        name={['bottomMediumRectangle']} />
    </div>
  )
}

export default

[apotek]

Very interested in these kinds of conditional solutions based on viewport and previous ad delivery events within the same page. There must be a pattern for this to follow. Curious to see what comes of this thread.

[jdwinall-tm]

Is this functionality possible? @blakemcintyre @potench @hewholived @potenchious @taak77

[dbredvick]

I know this issue is almost four years old, but does anyone have a solution for this?