Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adagioBidAdapter: add Video support #6038

Merged
merged 5 commits into from
Dec 4, 2020

Conversation

osazos
Copy link
Collaborator

@osazos osazos commented Nov 26, 2020

Type of change

  • Feature
  • Code style update (formatting, local variables)

Description of change

Add support for Video request in AdagioBidAdapter.

Contact email of the adapter’s maintainer: dev@adagio.io

Related PR (doc): prebid/prebid.github.io#2536

@musikele
Copy link
Contributor

musikele commented Dec 3, 2020

Hi @osazos !
Are there any test params to display a fake video? Can you write those test parameters in adagioBidAdapter.md ?

Copy link
Contributor

@musikele musikele left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just one minor modification.

@@ -38,6 +47,10 @@ Connects to Adagio demand source to fetch bids.
category: 'sport', // Recommended. Category of the content displayed in the page.
subcategory: 'handball', // Optional. Subcategory of the content displayed in the page.
postBid: false // Optional. Use it in case of Post-bid integration only.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing a , after postBid: false - discovered while copy/pasting to test the adapter.

@osazos
Copy link
Collaborator Author

osazos commented Dec 3, 2020

Hello @musikele

Thanks for your review.

I updated the adagioBidAdapter.md file. As you'll see I set two adUnits regarding their mediaTypes and add the special param key debug which allow you to get a fake response (video or banner) from our SSP.
With this extra param, you can simply use the values set in the examples.

Let me know if you need something else.

Copy link
Contributor

@musikele musikele left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't make it to work. I see the network response from the bidder with the demo ad, but I don't see the video rendered. I'm going to paste the demo page I tried:

<!--
  This page calls a single bidder for a single ad slot. It can be considered a "hello world" example for using
  Prebid with the Google Publisher Tag.
  It also makes a good test page for new adapter PR submissions. Simply set your server's Bid Params object in the
  bids array inside the adUnits, and it will use your adapter to load an ad.
  NOTE that many ad servers won't send back an ad if the URL is localhost... so you might need to
  set an alias in your /etc/hosts file so that you can load this page from a different domain.
-->

<html>
  <head>
    <script async src="../../build/dev/prebid.js"></script>
    <script
      async
      src="https://www.googletagservices.com/tag/js/gpt.js"
    ></script>
    <script>
      var pbjs = pbjs || {};
      pbjs.que = pbjs.que || [];

      var googletag = googletag || {};
      googletag.cmd = googletag.cmd || [];

      var PREBID_TIMEOUT = 1000;

      var adUnits = [
        {
          code: "video1",
          mediaTypes: {
            video: {
              context: "outstream",
              playerSize: [640, 480],
              mimes: ["video/mp4"],
              //skip: 0,
              // Other OpenRTB 2.5 video options…
            },
          },
          bids: [
            {
              bidder: "adagio", // Required
              params: {
                organizationId: "1002", // Required - Organization ID provided by Adagio.
                site: "adagio-io", // Required - Site Name provided by Adagio.
                placement: "in_article", // Required. Refers to the placement of an adunit in a page. Must not contain any information about the type of device. Other example: `mpu_btf'.
                adUnitElementId: "article_outstream", // Required - AdUnit element id. Refers to the adunit id in a page. Usually equals to the adunit code above.

                // The following params are limited to 30 characters,
                // and can only contain the following characters:
                // - alphanumeric (A-Z+a-z+0-9, case-insensitive)
                // - dashes `-`
                // - underscores `_`
                // Also, each param can have at most 50 unique active values (case-insensitive).
                pagetype: "article", // Highly recommended. The pagetype describes what kind of content will be present in the page.
                environment: "mobile", // Recommended. Environment where the page is displayed.
                category: "sport", // Recommended. Category of the content displayed in the page.
                //subcategory: "handball", // Optional. Subcategory of the content displayed in the page.
                //postBid: false, // Optional. Use it in case of Post-bid integration only.
                // video: {
                //   skip: 0,
                //   // OpenRTB 2.5 video options defined here override ones defined in mediaTypes.
                // },
                // Optional debug mode, used to get a bid response with expected cpm.
                debug: {
                  enabled: true,
                  cpm: 3.0, // default to 1.00
                },
              },
            },
          ],
        },
      ];

      pbjs.que.push(function () {
        pbjs.addAdUnits(adUnits);
        pbjs.bidderSettings = {
          adagio: {
            alwaysUseBid: true,
            adserverTargeting: [
              {
                key: "site",
                val: function (bidResponse) {
                  return bidResponse.site;
                },
              },
              {
                key: "environment",
                val: function (bidResponse) {
                  return bidResponse.environment;
                },
              },
              {
                key: "placement",
                val: function (bidResponse) {
                  return bidResponse.placement;
                },
              },
              {
                key: "pagetype",
                val: function (bidResponse) {
                  return bidResponse.pagetype;
                },
              },
              {
                key: "category",
                val: function (bidResponse) {
                  return bidResponse.category;
                },
              },
              {
                key: "subcategory",
                val: function (bidResponse) {
                  return bidResponse.subcategory;
                },
              },
            ],
          },
        };
        pbjs.requestBids({
          bidsBackHandler: initAdserver,
        });
      });

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

      setTimeout(function () {
        initAdserver();
      }, PREBID_TIMEOUT);

      googletag.cmd.push(function () {
        var slot1 = googletag
          .defineSlot("/19968336/prebid_outstream_adunit_1", [[1, 1]], "video1")
          .addService(googletag.pubads());
        googletag.pubads().disableInitialLoad();
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
      });
    </script>
  </head>

  <body>
    <h2>Prebid.js Test</h2>
    <h5>Div-1</h5>

    <div id="video1">
      <p>Prebid Outstream Video Ad</p>

      <script type="text/javascript">
        googletag.cmd.push(function () {
          googletag.display("video1");
        });
      </script>
    </div>
  </body>
</html>

So, there are two things we can do.

  • I prefer that we would still try to make the demo ad show up on my pc so we can both be extra safe of what we're merging. You may replicate this setup on your pc with chrome and tell me what's wrong.
  • If you see it working on your side, and you think the problem I am having is based on some misconfiguration on my side, we can merge this. But I would use this as a last resort. We still have some time before next release.

Let me know how to proceed.

code: 'article_outstream',
mediaTypes: {
video: {
outstream: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this outstream: { is not needed. The correct format should be:

{
  code: "video1",
    mediaTypes: {
      video: {
        context: "outstream",
        playerSize: [640, 480],
        ...
      }
   }
}
``` 

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, it works fine!
If you want to update the adagioBidAdapter.md file and fix the example (by removing the outstream: { line (and the corresponding } ) we can merge this one.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @musikele

I amended the adagioBidAdapter.md, so you can merge when you want :)

@osazos
Copy link
Collaborator Author

osazos commented Dec 4, 2020

Thanks to take the time to fully test our PR.

I think the issue is due to the default Google slot creative template and some error in the test page.

To see the renderer playing, please update the test page with the code bellow:

var adUnits = [
  {
    code: "video1",
    bids: [
    {
      bidder: "adagio",
      params: {
        organizationId: "1002",
        site: "adagio-io",
        placement: "in_article",
        adUnitElementId: "video1", // --> important for our renderer}]
  }
];

function initAdserver(bidResponses) {
  if (pbjs.initAdserverSet) return;
  pbjs.initAdserverSet = true;
  googletag.cmd.push(function () {
    pbjs.que.push(function () {
      pbjs.setTargetingForGPTAsync('video1'); // Required to match the adUnit defined with googletag.defineSlot(), see bellow.
      console.log('bidResponses', bidResponses) // inspect the full bid response object
      googletag.pubads().refresh();
    });
  });
}


// Define a slot which can serve a prebid-universal-creative template.
var slot1 = googletag
  .defineSlot("/21686208299/pave", [[1, 1]], "video1")
  .addService(googletag.pubads());

adagio-outstream

@osazos osazos force-pushed the adagio-feature/outstream-video branch from 721e62a to 6fc58c1 Compare December 4, 2020 08:29
Copy link
Contributor

@musikele musikele left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@musikele musikele merged commit 2b730a8 into prebid:master Dec 4, 2020
@osazos osazos deleted the adagio-feature/outstream-video branch March 15, 2021 08:52
stsepelin pushed a commit to cointraffic/Prebid.js that referenced this pull request May 28, 2021
* adagioBidAdapter: add outstream video support

* Lint: semi rule consistency

* IE11 support: remove Array.includes()

* Generate bidResponse.vastUrl based on vastXml dataUri encoding

* Update .md file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants