Testing Prebid with AppNexus in NextJS

[lukechar05]

Hi, I have recently been tasked with integrating prebid.js on my company's video.js player as we are looking to onboard advertisers for our content library and publisher network. Right now I am just looking to locally have demo videos ads running with AppNexus before integrating our first real partner: InMobi.

Our application is built in nextjs so following the documentation I downloaded the prebid script with the following modules:
Modules: appnexusBidAdapter, consentManagementGpp, consentManagementTcf, gppControl_usnat, gppControl_usstates, gptPreAuction, tcfControl, allowActivities, anPspParamsConverter, videoModule */

And call it in our root layout like:

 <Script
        src="/assets/scripts/prebid9.42.0.js"
        strategy="beforeInteractive"
      />

      {/* Initialize Prebid */}
      <Script
        id="prebid-init"
        strategy="beforeInteractive"
      >
        {`
          var pbjs = pbjs || {};
          pbjs.que = pbjs.que || [];
        `}
      </Script

In the player directly then i call the setupVideoAdsWithPrebid function I wrote (view code below) to initialize prebid with the correct bidder settings and have the auction. The problem is AppNexus is never bidding (no bid event always), but no errors or warnings are thrown in debug, and there's nothing particularly suspicious in the network tab. Am I doing this right? Does AppNExus just not bid on localhost even with its test placement_id. Any help or guidance would be greatly appreciated 🙏

const initVideoPrebid = (channelId, isTestMode = false, callbacks = {}) => {
  const pbjs = window.pbjs || {};
  pbjs.que = pbjs.que || [];

  pbjs.setConfig({
    debug: true,
    cache: {
      url: 'https://prebid.adnxs.com/pbc/v1/cache'
    },
    priceGranularity: {
      buckets: [
        { precision: 2, min: 0, max: 1, increment: 0.1 },
        { precision: 2, min: 1, max: 5, increment: 0.5 },
        { precision: 2, min: 5, max: 20, increment: 1 }
      ]
    },
    deviceAccess: true,
    enableTIDs: true,
    allowActivities: {
      accessDevice: {
        default: true,
        rules: [{
          condition: function (params) {
            return params.componentName === 'appnexus';
          },
          allow: true
        }]
      }
    },

    ortb2: {
      device: {
        ext: {
          consent: 1
        }
      }
    },
    bidderSettings: {
      appnexus: {
        storageAllowed: true
      }
    }
  });

  let bids = [];

  if (isTestMode) {
    bids.push({
      bidder: 'appnexus',
      params: {
        placement_id: 13232385,
        video: {
          skippable: true,
          playback_method: ['auto_play_sound_off']
        }
      }
    });
  }

  const videoAdUnits = [{
    code: 'vn_video',
    mediaTypes: {
      video: {
        context: 'instream',
        playerSize: [[600, 500]],
        mimes: ['video/mp4', 'application/javascript', 'video/webm'],
        protocols: [1, 2, 3, 4, 5, 6, 7, 8],
        api: [1, 2],
        placement: 1,
        linearity: 1,
        maxduration: 30
      }
    },
    bids: bids
  }];

  return new Promise((resolve, reject) => {
    pbjs.que.push(function () {
      console.log('Prebid queue processing, ad units:', videoAdUnits);
      pbjs.addAdUnits(videoAdUnits);
      
      pbjs.requestBids({
        bidsBackHandler: function () {
          console.log('Bids back handler called');
          const highestBid = pbjs.getHighestCpmBids('vn_video')[0];

          if (highestBid) {
            const vastUrl = highestBid.videoCacheKey ?
              `https://prebid.adnxs.com/pbc/v1/cache?uuid=${highestBid.videoCacheKey}` :
              null;

            const bidderPriceKey = `hb_pb_${highestBid.bidderCode}`;

            const targeting = {
              'hb_bidder': highestBid.bidderCode,
              'video': 'instream',
              'videonest_channel': channelId
            };

            targeting[bidderPriceKey] = getPriceValueForGranularity(highestBid.cpm);

            const bidResponse = {
              bid: highestBid,
              targeting: targeting,
              vastUrl: vastUrl
            };

            if (callbacks.onBidWon) {
              callbacks.onBidWon(bidResponse);
            }

            resolve(bidResponse);
          } else {
            if (callbacks.onNoBids) {
              callbacks.onNoBids();
            }

            resolve({
              bid: null,
              targeting: {
                'videonest_channel': channelId
              }
            });
          }
        }
      });
    });
  });
};


export const setupVideoAdsWithPrebid = (player, channelId, isTestMode = false, setLoading = null) => {
  if (!player.ima) {
    console.error('IMA plugin is not loaded. Make sure to load videojs-ima.');
    return Promise.reject(new Error('IMA plugin not found'));
  }

  return new Promise((resolve, reject) => {
    try {
      initVideoPrebid(channelId, isTestMode, {
        onBidWon: (bidResponse) => {
          console.log('Bid responses:', bidResponse);
          console.log('Highest bid:', pbjs.getHighestCpmBids('vn_video')[0]);
          if (bidResponse.bid && bidResponse.vastUrl) {
            setupVastWithPlayer(player, bidResponse.vastUrl);
            resolve({
              success: true,
              vastUrl: bidResponse.vastUrl,
              bid: bidResponse.bid
            });
            if (setLoading) setLoading(false);
          } else {
            console.log('No valid VAST URL found, playing content video');
            if (setLoading) setLoading(false);
            player.play();
            resolve({ success: false, message: 'No valid VAST URL, playing content' });
          }
        },
        onNoBids: () => {
          if (setLoading) setLoading(false);
          player.play();
          resolve({ success: false, message: 'No bids received' });
        }
      });
    } catch (error) {
      console.error('Error setting up video ads:', error);
      if (setLoading) setLoading(false);
      player.play();
      reject(error);
    }
  });
};

[patmmccann]

The problem is AppNexus is never bidding (no bid event always), but no errors or warnings are thrown in debug,

This is quite common #7365 was opened to solve this and luckily we now have a solution! see #12720 and https://github.com/prebid/prebid.github.io/pull/5995/files

[lukechar05]

@patmmccann That seems to be an example for banner ads is there one for video ?

[patmmccann]

#12720 allowed for a video response

@mkomorski do you know if there is a video debugging mock bid example in the docs?

[mkomorski]

@patmmccann probably not, at least I didn't add anything regarding #12720 to the docs

[patmmccann]

Let's edit https://docs.prebid.org/dev-docs/examples/instream-banner-mix.html to use the debugging module for the video response