Potential conditional bid issue with labelAny

[jfr01]

Type of issue

Question on feature

Description

We working on prebid conditional adunits integration with freewheel-ssp bidder, and are currently facing some inconsistencies when testing ad play from mobile browsers. As of now, we are able to get ad play during a Desktop scenario, however, when switching to Mobile, the ad does not render.

We have tried to change different size arrays, but so far no luck with mobile types.

Steps to reproduce

-Use Chrome browser on desktop mode and access the test page provided below. You should see the ad render. -Use Chrome browser, and use Mobile user agent under DevTools. Attempt to load the same test page and ad will not render.

Test page

http://sandbox.stickyadstv.com/support/prebid-conditional-adunits.html

Expected results

The behavior we expect is for the ad to play the correct zone id while on Desktop as defined in the sizes array. And if the same page is accessed from a Mobile device, we expect to see the ad render from the other zone id as defined on other size arrays.

Actual results

While on Mobile, no ad is rendered.

Platform details

prebid.js v4.23.0

Other information

We have tried to use real mobile devices and mobile emulators. Behavior is the same as when trying a user agent. VAST tags being used are: Desktop - http://ads.stickyadstv.com/www/delivery/swfIndex.php?reqType=AdsSetup&protocolVersion=2.0&zoneId=2003 Mobile - http://ads.stickyadstv.com/www/delivery/swfIndex.php?reqType=AdsSetup&protocolVersion=2.0&zoneId=1957

Can you pls help to verify if our syntax or logic is correct? Or if we are missing something? Thank you.

[sfloam]

Hi All,

I was wondering if anyone else had any feedback on this issue? Thanks for your help!

Best,

Scott

[sfloam]

@msm0504, @bretg, @gglas do you or anyone else have any insight? We have a client pressing us for information on this. Any help would be greatly appreciated!

[bretg]

1) the pbjs.setConfig needs to be inside the pbjs.que.push() 2) you misunderstand mediaQueries 2a) you don't want to mix height and width in this way (one 0 and one max) 2b) you have min and max switched

Here's what you have: desktop: (min-width: 0px) and (max-height: 1199px) tablet: (min-width: 0px) and (max-height: 1199px). // the same? phone: (min-width: 0px) and (max-height: 700px)

Here's what you want: desktop: (min-height: 1200px) tablet: (min-height: 700px) // or whatever phone: (min-height: 0px)

If mediaqueries aren't always intuitive, especially with combinations of width and height, consider playing around with an online tool like https://angrytools.com/css/mediaquery/

This version of sizeConfig works in your test page:

    pbjs.que.push(function () {
    pbjs.setConfig({
      sizeConfig: [
        {
          mediaQuery: "(min-height: 701px)",
          sizesSupported: [
            [1800, 1000],
            [1200, 90],
            [970, 250],
            [970, 90],
            [728, 90],
            [300, 600],
            [300, 250],
            [100, 200],
            [640, 480]
          ],
          labels: ["desktop"]
        },
        {
          mediaQuery: "(min-height: 0px)",
          sizesSupported: [
            [300, 50],
            [320, 50],
            [120, 20],
            [350, 450],
            [600, 350]
          ],
          labels: ["phone"]
        }
      ]
    });

[jfr01]

@bretg Thank you for your feedback. We revise the configuration and added the changes as per suggestion. Even after moving the mediaQueries inside pbjs.que.push() and assigning the 'min-height', we still inconsistent plays from our end. Sometimes, it will play the correct ad from Desktop zone, others will play the ad from Desktop & Phone from Desktop device.

It seems that the behavior is inconsistent, so we are reviewing the integration again. We have updated the test page "http://sandbox.stickyadstv.com/support/prebid-conditional-adunits.html" if you have time you can take a look to our changes.

One thing we were wondering is, does it matter that we are using the same bidder name for those two bids config?

[bretg]

I think there may be a problem with the labelAny feature. Will ask someone to look into that. In the meantime, this works:

• switch your labelAny to labelAll
• add the height range desktop mediaQuery: "(min-height: 701px)", phone mediaQuery: "(min-height: 0px) and (max-height: 700px)",

[jfr01]

@bretg We did the modification to use labelAll instead of labelAny as well as adjusting the mediaQuery sizes, but this doesn't seem to work from our test case.

[bretg]

You updated the labels in the wrong place... you changed "labels" in the sizeConfig to "labelAll"

This page works for me in the sense that if the browser is > 700px, zone 2003 is sent. If 700 or under, zone 1957 is sent.

<html>

<head>
  <title>Prebid StickyAdsTV</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
  <script type="text/javascript" src="https://acdn.adnxs.com/prebid/not-for-prod/prebid.js"></script>
  <script>
    var PREBID_TIMEOUT = 10000;

    var adUnits = [
      {
        code: "div-gpt-ad-1460505748561-0",
        mediaTypes: {
          banner: {
            sizes: [
              [768, 90],
              [300, 50],
              [320, 50],
              [120, 20],
              [350, 450],
              [468, 60],
              [320, 50],
              [640, 480],
              [1800, 1000],
              [1200, 90],
              [970, 250]
            ] //available sizes array
          }
        },
        bids: [
          {
            bidder: "freewheel-ssp",
            labelAll: ["desktop"],
            params: {
              zoneId: "2003", //only mandatory field
              format: "intext-roll", //choose the sliderad format
              minPlayerSize: [100, 200],
              maxPlayerSize: [1800, 1000]
            }
          },
          {
            bidder: "freewheel-ssp",
            labelAll: ["phone"],
            params: {
              zoneId: "1957", //only mandatory field
              format: "intext-roll", //choose the sliderad format
              minPlayerSize: [300, 50],
              maxPlayerSize: [600, 350]
            }
          }
        ]
      }
    ];

    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];
  </script>
  <!-- Prebid Config Section END -->

  <!-- Prebid Boilerplate Section START. No Need to Edit. -->

  <script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    googletag.cmd.push(function () {
      googletag.pubads().disableInitialLoad();
    });

    pbjs.que.push(function () {
      pbjs.setConfig({
        sizeConfig: [
          {
            mediaQuery: "(min-height: 701px)",
            sizesSupported: [
              [1800, 1000],
              [1200, 90],
              [970, 250],
              [970, 90],
              [728, 90],
              [300, 600],
              [300, 250],
              [100, 200],
              [640, 480]
            ],
            labels: ["desktop"]
          },
          {
            mediaQuery: "(min-height: 0px) and (max-height: 700px)",
            sizesSupported: [
              [300, 50],
              [320, 50],
              [120, 20],
              [350, 450],
              [600, 350]
            ],
            labels: ["phone"]
          }
        ]
      });
      pbjs.addAdUnits(adUnits);
      pbjs.requestBids({
        bidsBackHandler: sendAdserverRequest
      });
    });

    function sendAdserverRequest() {
      if (pbjs.adserverRequestSent) return;
      pbjs.adserverRequestSent = true;
      googletag.cmd.push(function () {
        pbjs.que.push(function () {
          pbjs.setTargetingForGPTAsync();
          googletag.pubads().refresh();
        });
      });
    }

    setTimeout(function () {
      sendAdserverRequest();
    }, PREBID_TIMEOUT);
  </script>
  <!-- Prebid Boilerplate Section END -->

  <script>
    (function () {
      var gads = document.createElement("script");
      gads.async = true;
      gads.type = "text/javascript";
      var useSSL = "https:" == document.location.protocol;
      gads.src =
        (useSSL ? "https:" : "http:") +
        "//www.googletagservices.com/tag/js/gpt.js";
      var node = document.getElementsByTagName("script")[0];
      node.parentNode.insertBefore(gads, node);
    })();
  </script>

  <script>
    googletag.cmd.push(function () {
      googletag
        .defineSlot(
          "/19968336/header-bid-tag-0",
          [
            [300, 250],
            [640, 480]
          ],
          "div-gpt-ad-1460505748561-0"
        )
        .addService(googletag.pubads());

      googletag.pubads().enableSingleRequest();
      googletag.enableServices();
    });
  </script>
</head>

<body>
  <h2>Prebid.js Test with StickyAdsTV Bidder Adapter</h2>
  <h5>Advertisement</h5>
  <div style="width:640px;height:480px;background-color:#CCCC77;">
    <div id="div-gpt-ad-1460505748561-0" style="background-color:#FFCC77;">
      <script type="text/javascript">
        googletag.cmd.push(function () {
          googletag.display("div-gpt-ad-1460505748561-0");
        });
      </script>
    </div>
    <div id="testing div">
      some output here
    </div>
  </div>
</body>

</html>

[sfloam]

Hi @bretg,

Thanks for reaching out! I see that mistake. However, the issue remaining is that we aren't able to render the ads on the phone. For example, if you are hosting the html5 on a simple server and accessing it via your phone or using Chrome inspector to emulate a browser on a mobile device. On a rare occasion, we will see a fallback ad, once in a blue moon. However, the expected ad won't show up.

[sfloam]

@snapwich, we updated the http://sandbox.stickyadstv.com/support/prebid-conditional-adunits.html page to use the workaround suggested by @bretg.

We are still unable to identify why the ads will not render on a mobile device. Technically, we expect the phone ad to render on a mobile device.

This unexpected behavior can be replicated by:

1. Using Google Chrome's Inspector Dev Tool to emulate a mobile device (i.e. Pixel 2) and then loading the above url in the mobile browser.

2. Using Safari's Develop menu option and changing the user-agent to a phone. Then one can load the above url in the mobile browser

3. Opening the URL using a real iPhone in mobile Chrome and Safari.

I've tried a bunch of different techniques (i.e. adjusting the mediaQuery, supported sizes, max/min player size, etc). I cleared my cache as well.

On an extremely rare occasion, I will see a fallback ad play on a phone, but it's nondeterministic. I mention this because it demonstrates that it is possible. I've seen it happen maybe 3 times over the course of a week's worth of testing and reconfiguring.

I really appreciate your help!

[snapwich]

sounds good. i'll have some time either friday or next week to look into this more for you.

[bretg]

@snapwich - rather than look at the render issue, I'm hoping you can focus on the question about whether there's an issue with labelAny. And adding some console logs to debug this sort of thing would be great. MediaQueries suck.

@sfloam - I think Chrome dev tool's emulation mode doesn't handle screen sizes. I spent way too long playing around with it and gave up. Just change the size of the browser and it works.

I see a paco ad play when the ad request for zone 1957 goes out.

[sfloam]

Thanks @bretg for looking into it. Unfortunately, I can't even get the ad to render in a native mobile browser such as Safari and Chrome on a real iPhone X. This is really strange.

[wqi1972]

@sfloam I think there are a couple of issues with your sandbox pages. 1) If you want to make your page responsive, which let the page work for desktop / tablet / phone, you need add following tag inside header

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>

After I add this meta tag to your page, then I am able to see correct freewheel-ssp request be sent on Chrome emulator. 2) I don't think (min-height: 0px) and (max-height: 700px) is a good option to define phone, since iPhoneX has height 812px. I think (min-width: 0px) and (max-width: 481px) is better. 3) looks like you test ad only target desktop, not on any other devices, that is why the real ad doesn't show up on real phone or Chrome emulator.

[sfloam]

@wqi1972, thanks for your response! You mentioned that the test ad only targets desktop. I just want to confirm if you are seeing this set somewhere in our code or the http://www.googletagservices.com/tag/js/gpt.js code? Our Solution Engineer did not see targeting for the zones provided on our server.

[wqi1972]

@sfloam what I mean is not Google gpt targeting, but freewheel bidding targeting. If you load http://sandbox.stickyadstv.com/support/prebid-conditional-adunits.html on desktop, and make the browser narrow enough, then you will the test ad from freewheel does show up. And here is the request parameters I get for the freewheel bidding

reqType: AdsSetup
protocolVersion: 2.0
zoneId: 1957
componentId: prebid
componentSubId: intext-roll
timestamp: 1612460531825
pKey: -1750832410
playerSize: 350x450

On desktop, freewheel returns: <Ad id="AdswizzAd4882">, which is the test ad you expected from freewheel.

But if I use Chrome phone emulator, freewheel bidding sends the same parameters, but response becomes <Ad id="ClientSideAdEx-12494497">

My best guess is: the freewheel test bid AdswizzAd4882 only targets desktop, not on other devices.

[snapwich]

So I've tested the test page provided and it seems to be working. I am getting the "phone" bid only coming through when emulating phone sizes, and "desktop" bid when at desktop sizes.

@wqi1972 is correct that the <meta name="viewport" is required to have the correct pixel counts for matchMedia to work as intended. I see that in the test page though so I am assuming this was added later? Is this problem resolved?

Let me know, thanks.

[jfr01]

Thank you all for your help here @snapwich @bretg @wqi1972, the feature is working as expected from our end. The zone=1957 was bidding over a third-party buyer while on mobile, this was causing issues during testing. We moved to a different test zone and now mobile is working nicely.

We are pending confirmation from the client, but I think we should be good now.