Add in-renderer integration example

dev-docs/examples/in-renderer-integration.md

@@ -0,0 +1,67 @@
+---
+layout: example
+title: in-renderer Integration Example
+description: in-renderer Integration (formerly known as “outstream”) Example
+
+sidebarType: 1
+
+about:
+  - in-renderer Integration is one of the integration methods for Prebid Video
+  - In this example, to keep it simple, ad rendering is performed using `pbjs.renderAd`
+  - InRenderer.js, an open-source renderer optimized for in-renderer integration, is used as the renderer for in-renderer integration. For more information, see <a href="https://github.com/hogekai/in-renderer-js" target="_blank">InRenderer.js documentation</a>
+---
+
+## Example
+
+{% capture htmlCodePrebid %}
+<h1>in-renderer Integration Example</h1>
+
+<div id="ad-unit-1"></div>
+{% endcapture %}
+
+{% capture jsCode %}var pbjs = pbjs || {};
+pbjs.que = pbjs.que || [];
+
+var adUnit = {
+  code: "ad-unit-1",
+  mediaTypes: {
+    video: {
+      context: "outstream",
+      playerSize: [640, 360],
+      mimes: ["video/mp4", "video/webm", "video/ogg"],
+      protocols: [2, 3, 5, 6, 7, 8],
+      api: [2],
+    }
+  },
+  bids: [
+    {
+      bidder: "michao",
+      params: {
+        placement: "inbanner",
+        site: 1,
+        test: true
+      },
+    },
+  ],
+  renderer: {
+    url: `https://cdn.jsdelivr.net/npm/in-renderer-js@1/dist/in-renderer.umd.min.js`,
+    render: (bid) => {
+      var inRenderer = new window.InRenderer();
+      inRenderer.render("ad-unit-1", bid);
+    },
+  },
+};
+
+pbjs.que.push(function() {
+  pbjs.addAdUnits(adUnit);
+  pbjs.requestBids({
+    timeout: 5000,
+    bidsBackHandler: function () {
+      const highestCpmBids = pbjs.getHighestCpmBids("ad-unit-1");
+      pbjs.renderAd('ad-unit-1', highestCpmBids[0].adId);
+    },
+  });
+})
+{% endcapture %}
+
+{% include code/web-example.html id="basic-prebid-example" html=htmlCodePrebid js=jsCode %}

dev-docs/examples/multi-format-example.md

@@ -7,152 +7,84 @@ sidebarType: 1
 
 about:
 - A multi-format ad unit allows you to receive any combination of banner, video, or native demand
+- A multi-format ad unit has two methods - a simple setup with in-renderer integration that does not require complex configuration on the ad server side, and format switching on the ad server side
 - Any bidder that supports at least one of the listed media types can participate in the auction for that ad unit
 - For engineering setup instructions, see <a href="/dev-docs/show-multi-format-ads.html">Show Multi-Format Ads</a>
-- For ad ops setup instructions, see <a href="/adops/step-by-step.html">Google Ad Manager with Prebid Step by Step</a>
+- In this example, to keep it simple, ad rendering is performed using `pbjs.renderAd`
+- InRenderer.js, an open-source renderer optimized for in-renderer integration, is used as the renderer for in-renderer integration. For more information, see [InRenderer.js documentation on Github](https://github.com/hogekai/in-renderer-js)
 
 ---
 
-## Basic Prebid.js Example
+## Example
 
-{% capture htmlCodePrebid %}<h3>div-banner-native-1</h3>
-<div id='div-banner-native-1'>
-<p>No response</p>
-<script type='text/javascript'>
-    googletag.cmd.push(function() {
-        googletag.display('div-banner-native');
-    });
+{% capture htmlCodePrebid %}
+<h1>Multi-format Example</h1>
 
-</script>
-</div>
-
-<h3>div-banner-native-2</h3>
-<div id='div-banner-native-2'>
-    <p>No response</p>
-    <script type='text/javascript'>
-        googletag.cmd.push(function() {
-            googletag.display('div-banner-outstream');
-        });
-
-    </script>
-</div>
+<div id="ad-unit-1"></div>
 {% endcapture %}
 
-{% capture jsCode %}var PREBID_TIMEOUT = 1000;
-var FAILSAFE_TIMEOUT = 3000;
-
-var googletag = googletag || {};
-googletag.cmd = googletag.cmd || [];
-
-var pbjs = pbjs || {};
+{% capture jsCode %}var pbjs = pbjs || {};
 pbjs.que = pbjs.que || [];
 
-function initAdserver() {
-    if (pbjs.initAdserverSet) return;
-
-    googletag.cmd.push(function() {
-        pbjs.que.push(function() {
-            pbjs.setTargetingForGPTAsync();
-            googletag.pubads().refresh();
-        });
-    });
-
-    pbjs.initAdserverSet = true;
-}
-
-pbjs.que.push(function() {
-    var adUnits = [{
-            code: 'div-banner-native-1',
-            mediaTypes: {
-                banner: {
-                    sizes: [
-                        [300, 250]
-                    ]
-                },
-                native: {
-                    type: 'image'
-                },
+var adUnit = {
+  code: "ad-unit-1",
+  mediaTypes: {
+    banner: {
+        sizes: [[300, 250]]
+    },
+    video: {
+      context: "outstream",
+      playerSize: [320, 180],
+      mimes: ["video/mp4", "video/webm", "video/ogg"],
+      protocols: [2, 3, 5, 6, 7, 8],
+      api: [2],
+    },
+    native: {
+      adTemplate: `<div style="width: 300px; height:250px; background-image: url(##hb_native_asset_id_1##);">`,
+      ortb: {
+        assets: [
+          {
+            id: 1,
+            required: 1,
+            img: {
+              type: 3,
+              w: 300,
+              h: 250,
             },
-            bids: [{
-                bidder: 'appnexus',
-                params: {
-                    placementId: 13232392,
-                }
-            }]
-        },
-        {
-            code: 'div-banner-native-2',
-            mediaTypes: {
-                banner: {
-                    sizes: [
-                        [300, 250]
-                    ]
-                },
-                native: {
-                    title: {
-                        required: true
-                    },
-                    image: {
-                        required: true
-                    },
-                    sponsoredBy: {
-                        required: true
-                    }
-                }
-            },
-            bids: [{
-                bidder: 'appnexus',
-                params: {
-                    placementId: 13232392,
-                }
-            }]
-        }
-    ];
-
-    pbjs.setConfig({
-        debug: true,
-        cache: {
-            url: false
-        },
-    });
-
-    pbjs.addAdUnits(adUnits);
-    pbjs.requestBids({
-            timeout: PREBID_TIMEOUT,
-        bidsBackHandler: function(bidResponses) {
-            initAdserver();
-        }
-    });
-});
-
-// in case PBJS doesn't load
-setTimeout(initAdserver, FAILSAFE_TIMEOUT);
+          },
+        ],
+      },
+    },
+  },
+  bids: [
+    {
+      bidder: "michao",
+      params: {
+        placement: "inbanner",
+        site: 1,
+        test: true
+      },
+    },
+  ],
+  renderer: {
+    url: `https://cdn.jsdelivr.net/npm/in-renderer-js@1/dist/in-renderer.umd.min.js`,
+    render: (bid) => {
+      var inRenderer = new window.InRenderer();
+      inRenderer.render("ad-unit-1", bid);
+    },
+  },
+};
 
-googletag.cmd.push(function() {
-    googletag
-        .defineSlot(
-            '/19968336/prebid_multiformat_test', [
-                [300, 250],
-                [360, 360]
-            ],
-            'div-banner-native-1'
-        )
-        .addService(googletag.pubads());
-
-    googletag
-        .defineSlot(
-            '/19968336/prebid_multiformat_test', [
-                [300, 250],
-                [360, 360]
-            ],
-            'div-banner-native-2'
-        )
-        .addService(googletag.pubads());
-
-    googletag.pubads().disableInitialLoad();
-    googletag.pubads().enableSingleRequest();
-    googletag.enableServices();
-});
+pbjs.que.push(function() {
+  pbjs.addAdUnits(adUnit);
+  pbjs.requestBids({
+    timeout: 5000,
+    bidsBackHandler: function () {
+      const highestCpmBids = pbjs.getHighestCpmBids("ad-unit-1");
+      pbjs.renderAd('ad-unit-1', highestCpmBids[0].adId);
+    },
+  });
+})
 {% endcapture %}
 
 {% include code/web-example.html id="basic-prebid-example" html=htmlCodePrebid js=jsCode %}