Migrate all examples in dev-docs

_includes/astjs.html

@@ -0,0 +1,5 @@
+<script async
+    type="text/plain"
+    class="cmplazyload"
+    data-cmp-purpose="c51"
+    data-cmp-src="//acdn.adnxs.com/ast/ast.js"></script>

_layouts/example.html

@@ -51,27 +51,10 @@ <h4>About this example:</h4>
           </div>
         </div>
 
-    <p></p>
-        <p>
-          In the JSFiddle example below:
-        <ul><li>Click <b>Result</b> to see the example output.</li>
-            <li>Click <b>Edit in JSFiddle</b> to open the example in the JSFiddle editor in a new tab.</li></ul>
-        </p>
-
-
         <div class="row">
-          <!-- JSFiddle -->
-          <iframe width="100%" height="{{page.code_height}}" src="about:blank"
-                  allowfullscreen="allowfullscreen" allowpaymentrequest
-                  frameborder="0"noresize="noresize" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" 
-                  class="cmplazyload" 
-                  data-cmp-purpose="1"
-                  data-cmp-src="//{{page.jsfiddle_link}}"
-                  data-cmp-preview-headline="JSFiddle"
-                  data-cmp-preview-text="Sorry, JSFiddle code examples aren't available with your cookie privacy settings."
-                  data-cmp-preview-checkbox=""
-                  ALLOWTRANSPARENCY="true">
-          </iframe>
+          <div class="col-md-12">
+            {{ content }}
+          </div>
         </div>
 
         <div class="row">

dev-docs/examples/adunit-refresh.md

@@ -9,9 +9,77 @@ about:
 - Demonstrates the ability to <strong>refresh individual ad units</strong>. This is useful for infinite scrolling ad slots.
 - Keep in mind that when auto-refreshing is done incorrectly, it could cause the same bids to be rendered repeatedly. For instance, when googletag.pubads.refresh() is called directly without removing the PBJS targeting, the same hb_ variables get re-sent to GAM, re-chosen, and re-rendered over and over without ever asking PBJS for updated targeting variables.  See <a href="/dev-docs/publisher-api-reference/setConfig.html#setConfig-auctionOptions">Auction Options</a> for more info.
 
-jsfiddle_link: jsfiddle.net/Prebid_Examples/cu7tpexf/embedded/html,result
-
-code_height: 1540
 
 pid: 20
 ---
+
+## Individual Ad Unit Refresh / Infinite Scroll
+
+{% include prebidjs-non-prod.html %}
+{% include gptjs.html %}
+
+{% capture htmlCodePrebid %}<h5>Div-1</h5>
+<button class="btn btn-primary mb-3" onclick="refreshBid()">Refresh Ad Unit</button>
+<div id='div-1'>
+  <script type='text/javascript'>
+    googletag.cmd.push(function() {
+      googletag.display('div-1');
+    });
+  </script>
+</div>
+{% endcapture %}
+
+{% capture jsCode %}var sizes = [
+    [300, 250]
+];
+var PREBID_TIMEOUT = 1000;
+
+var googletag = googletag || {};
+googletag.cmd = googletag.cmd || [];
+
+var pbjs = pbjs || {};
+pbjs.que = pbjs.que || [];
+
+var adUnits = [{
+    code: '/19968336/header-bid-tag-0',
+    mediaTypes: {
+        banner: {
+            sizes: sizes
+        }
+    },
+    bids: [{
+        bidder: 'appnexus',
+        params: {
+            placementId: 13144370
+        }
+    }]
+}];
+
+pbjs.que.push(function() {
+    pbjs.addAdUnits(adUnits);
+});
+
+var slot1;
+googletag.cmd.push(function() {
+    slot1 = googletag.defineSlot('/19968336/header-bid-tag-0', [[300, 250]], 'div-1')
+        .addService(googletag.pubads());
+    googletag.pubads().disableInitialLoad();
+    googletag.pubads().enableSingleRequest();
+    googletag.enableServices();
+});
+
+function refreshBid() {
+    pbjs.que.push(function() {
+        pbjs.requestBids({
+            timeout: PREBID_TIMEOUT,
+            adUnitCodes: ['/19968336/header-bid-tag-0'],
+            bidsBackHandler: function() {
+                pbjs.setTargetingForGPTAsync(['/19968336/header-bid-tag-0']);
+                googletag.pubads().refresh([slot1]);
+            }
+        });
+    });
+}
+{% endcapture %}
+
+{% include code/web-example.html id="basic-prebid-example" html=htmlCodePrebid js=jsCode %}

dev-docs/examples/basic-example.md

@@ -11,9 +11,80 @@ about:
 - Default keyword targeting setup (<a href="/dev-docs/publisher-api-reference/bidderSettings.html">reference</a>)
 - Default price granularity
 
-jsfiddle_link: jsfiddle.net/Prebid_Examples/94jt62b8/embedded/html,result
-
-code_height: 2300
-
 pid: 10
 ---
+
+## Basic Prebid.js Example
+
+{% include prebidjs-non-prod.html %}
+{% include gptjs.html %}
+
+{% capture htmlCodePrebid %}<h5>Div-1</h5>
+<div id='div-1'>
+  <script type='text/javascript'>
+    googletag.cmd.push(function() {
+      googletag.display('div-1');
+    });
+  </script>
+</div>
+{% endcapture %}
+
+{% capture jsCode %}var sizes = [
+  [300, 250]
+];
+var PREBID_TIMEOUT = 700;
+
+var adUnits = [{
+  code: '/19968336/header-bid-tag-1',
+  mediaTypes: {
+    banner: {
+      sizes: sizes
+    }
+  },
+  bids: [{
+    bidder: 'appnexus',
+    params: {
+      placementId: 13144370
+    }
+  }]
+}];
+
+// ======== DO NOT EDIT BELOW THIS LINE =========== //
+var googletag = googletag || {};
+googletag.cmd = googletag.cmd || [];
+googletag.cmd.push(function() {
+  googletag.pubads().disableInitialLoad();
+});
+
+var pbjs = pbjs || {};
+pbjs.que = pbjs.que || [];
+
+pbjs.que.push(function() {
+  pbjs.addAdUnits(adUnits);
+  pbjs.requestBids({
+    bidsBackHandler: initAdserver
+  });
+});
+
+function initAdserver() {
+  if (pbjs.initAdserverSet) return;
+  pbjs.initAdserverSet = true;
+  googletag.cmd.push(function() {
+    pbjs.setTargetingForGPTAsync && pbjs.setTargetingForGPTAsync();
+    googletag.pubads().refresh();
+  });
+}
+
+setTimeout(function() {
+  initAdserver();
+}, PREBID_TIMEOUT);
+
+googletag.cmd.push(function() {
+  googletag.defineSlot('/19968336/header-bid-tag-1', sizes, 'div-1')
+    .addService(googletag.pubads());
+  googletag.pubads().enableSingleRequest();
+  googletag.enableServices();
+});
+{% endcapture %}
+
+{% include code/web-example.html id="basic-prebid-example" html=htmlCodePrebid js=jsCode %}

dev-docs/examples/custom-price-buckets.md

@@ -9,8 +9,114 @@ about:
 - This example shows custom price granularity buckets using <code>pbjs.setConfig()</code>.
 - See the <a href="/dev-docs/publisher-api-reference/setConfig.html#setConfig-Price-Granularity">API reference</a> for more detail.
 
-jsfiddle_link: jsfiddle.net/Prebid_Examples/vq05dhnj/embedded/html,result
+---
 
-code_height: 2152
+## Custom Price Granularity Buckets
 
----
+{% include prebidjs-non-prod.html %}
+{% include gptjs.html %}
+
+{% capture htmlCodePrebid %}<h5>Div-1</h5>
+<div id='div-1'>
+  <script type='text/javascript'>
+    googletag.cmd.push(function() {
+      googletag.display('div-1');
+    });
+  </script>
+</div>
+{% endcapture %}
+
+{% capture jsCode %}var sizes = [
+    [300, 250]
+];
+var PREBID_TIMEOUT = 1000;
+var FAILSAFE_TIMEOUT = 3000;
+
+var adUnits = [{
+    code: '/19968336/header-bid-tag-1',
+    mediaTypes: {
+        banner: {
+            sizes: sizes
+        }
+    },
+    bids: [{
+        bidder: 'appnexus',
+        params: {
+            placementId: 13144370
+        }
+    }]
+}];
+
+const customConfigObject = {
+    "buckets": [
+        {
+            "precision": 2, //default is 2 if omitted - means 2.1234 rounded to 2 decimal places = 2.12
+            "min": 0,
+            "max": 5,
+            "increment": 0.01
+        },
+        {
+            "precision": 2,
+            "min": 5,
+            "max": 8,
+            "increment": 0.05
+        },
+        {
+            "precision": 2,
+            "min": 8,
+            "max": 20,
+            "increment": 0.5
+        },
+        {
+            "precision": 2,
+            "min": 21,
+            "max": 99,
+            "increment": 1.00
+        }
+    ]
+};
+
+var googletag = googletag || {};
+googletag.cmd = googletag.cmd || [];
+googletag.cmd.push(function() {
+    googletag.pubads().disableInitialLoad();
+});
+
+var pbjs = pbjs || {};
+pbjs.que = pbjs.que || [];
+
+pbjs.que.push(function() {
+    pbjs.addAdUnits(adUnits);
+    pbjs.setConfig({
+        priceGranularity: customConfigObject
+    });
+    pbjs.requestBids({
+        bidsBackHandler: initAdserver,
+        timeout: PREBID_TIMEOUT
+    });
+});
+
+function initAdserver() {
+    if (pbjs.initAdserverSet) return;
+    pbjs.initAdserverSet = true;
+    googletag.cmd.push(function() {
+        pbjs.que.push(function() {
+            pbjs.setTargetingForGPTAsync();
+            googletag.pubads().refresh();
+        });
+    });
+}
+
+// in case PBJS doesn't load
+setTimeout(function() {
+    initAdserver();
+}, FAILSAFE_TIMEOUT);
+
+googletag.cmd.push(function() {
+    googletag.defineSlot('/19968336/header-bid-tag-1', sizes, 'div-1').addService(googletag.pubads());
+    googletag.pubads().enableSingleRequest();
+    googletag.enableServices();
+});
+{% endcapture %}
+
+{% include code/web-example.html id="basic-prebid-example" html=htmlCodePrebid js=jsCode %}