prebid / Prebid.js

Setup and manage header bidding advertising partners without writing code or confusing line items. Prebid.js is open source and free.
https://docs.prebid.org
Apache License 2.0
1.28k stars 2.06k forks source link

Video Outstream: prebid,js Error in Example #10944

Open richmadriz opened 8 months ago

richmadriz commented 8 months ago

Error in Example outstream no server, https://docs.prebid.org/examples/video/outstream/pb-ve-outstream-no-server.html We are working trying to separate this example but it has an error which happens to us in the same way in our demo. ms: Error rendering ad (id: 31f3cda2d27635): renderAd was prevented from writing to the main document.

Imagen de WhatsApp 2024-01-15 a las 09 00 07_2a076f96

jarrettabello commented 8 months ago

I took at look at this test page and found a few issues. I believe our test code example needs to be reworked here. We are using document in the renderAd function and we need to specify an element as an ad container.

By updating the test page with an ad container to inject the ad into the error resolves. image

Also worth noting that the script tag that contains the prebid configuration on the page is a script tag with text/plain <script type="text/plain" class="optanon-category-C0003"> -- that should be updated to text/javascript

<script type="text/javascript" class="optanon-category-C0003">
        var pbjs = pbjs || {};
        pbjs.que = pbjs.que || [];
        var adUnits = [{
            code: 'video1',
            mediaTypes: {
                video: {
                    context: 'outstream',
            playerSize: [640, 480],
            mimes: ['video/mp4'],
            protocols: [1, 2, 3, 4, 5, 6, 7, 8],
            playbackmethod: [2],
            skip: 1
                }
            },
            bids: [{
                bidder: 'appnexus',
                params: {
                    placementId: 13232385
                }
            }]
        }];

        pbjs.que.push(function() {
            pbjs.addAdUnits(adUnits);
            pbjs.requestBids({
                timeout: 1000,
                bidsBackHandler: function(bids) {
                    var highestCpmBids = pbjs.getHighestCpmBids('video1');
                    pbjs.renderAd(document.getElementById('myad'), highestCpmBids[0].adId);
                }
            });
        });
    </script>
richmadriz commented 8 months ago

I tried this already by obtaining a div apart from video1 and obtaining the video1 Id tag itself but it does not work with any div that is in the document either,

and this in the BODY

<div id="video1"></div>
<div id="myad"></div>
dgirardi commented 2 months ago

Related to https://github.com/prebid/prebid.github.io/issues/5400

dgirardi commented 1 month ago

Also related: https://github.com/prebid/prebid.github.io/issues/5248