Fixes #5244 Add examples component (#5463)

* Fixes #5244 Add examples component * Show case basic prebid example * Migrate all examples in dev-docs * Add source panel this is still missing the prebid.js and other javascripts that might be necessary * Implement source tab and create better styling * document scripts include * add gpt.js as default include * disable bare urls lint on script * fix bare url lint * fix bare url lint * fix bare url linting * fix lint on bare url * remove lint override * disable bare url lint file * update rule * update rule number * update rule number --------- Co-authored-by: Chris Huie <[email protected]>
prebid · Aug 23, 2024 · 58b1799 · 58b1799
1 parent 9189613
commit 58b1799
Show file tree

Hide file tree

Showing 17 changed files with 1,592 additions and 62 deletions.
diff --git a/_includes/astjs.html b/_includes/astjs.html
@@ -0,0 +1,6 @@
+<!-- markdownlint-disable MD034 -->
+<script async
+    type="text/plain"
+    class="cmplazyload"
+    data-cmp-purpose="c51"
+    data-cmp-src="https://acdn.adnxs.com/ast/ast.js"></script>
diff --git a/_includes/code/web-example.html b/_includes/code/web-example.html
@@ -0,0 +1,82 @@
+<!-- markdownlint-disable MD034 -->
+<!-- 
+  provide the following variables:
+  - id: unique id for the example
+  - html: html code snippet
+  - js: js code snippet
+  - scripts: a commad separate list of required scripts. Allowed values are pbjs,gpt,astjs . default is pbjs,ast
+--->
+<ul class="nav nav-tabs" role="tablist">
+    <li class="nav-item ui-tab" role="presentation">
+      <button class="nav-link active" id="{{ include.id }}-result-tab" data-toggle="tab" data-target="#{{ include.id }}-result" type="button" role="tab" aria-controls="result" aria-selected="true">result</button>
+    </li>
+    <li class="nav-item ui-tab" role="presentation">
+      <button class="nav-link" id="{{ include.id }}-html-tab" data-toggle="tab" data-target="#{{ include.id }}-html" type="button" role="tab" aria-controls="html" aria-selected="false">html</button>
+    </li>
+    <li class="nav-item ui-tab" role="presentation">
+      <button class="nav-link" id="{{ include.id }}-js-tab" data-toggle="tab" data-target="#{{ include.id }}-js" type="button" role="tab" aria-controls="js" aria-selected="false">js</button>
+    </li>
+    <li class="nav-item ui-tab" role="presentation">
+      <button class="nav-link" id="{{ include.id }}-source-tab" data-toggle="tab" data-target="#{{ include.id }}-source" type="button" role="tab" aria-controls="js" aria-selected="false">source</button>
+    </li>
+</ul>
+<div class="tab-content mb-3" id="example-tab-content">
+  <div class="tab-pane fade show active" id="{{ include.id }}-result" role="tabpanel" aria-labelledby="{{ include.id }}-result-tab">
+    <div class="bg-light p-3 shadow-sm">
+      <!-- external required scripts -->
+      {% assign scripts = include.scripts | split: "," %}
+      {% for script in scripts %}
+        {% if script == "pbjs" %}
+          {% include prebidjs-non-prod.html %}
+        {% elsif script == "gpt" %}
+          {% include gptjs.html %}
+        {% elsif script == "astjs" %}
+          {% include astjs.html %}
+        {% else %}
+          script tag '{{ script }}' unknown
+        {% endif %}
+      {% else %}
+        <!-- no required scripts defined, pbjs will be included by default -->
+        {% include prebidjs-non-prod.html %}
+        {% include gptjs.html %}
+      {% endfor %}
+
+      <!-- example code -->
+      <script>{{ include.js }}</script>
+      <!-- example html -->
+      {{ include.html }}
+    </div>
+  </div>
+  <div class="tab-pane fade" id="{{ include.id }}-html" role="tabpanel" aria-labelledby="{{ include.id }}-html-tab">
+    <pre class="mt-0 shadow-sm"><code class="language-html">{{ include.html | xml_escape}}</code></pre>
+  </div>
+  <div class="tab-pane fade" id="{{ include.id }}-js" role="tabpanel" aria-labelledby="{{ include.id }}-js-tab">
+    <pre class="mt-0 shadow-sm"><code class="language-javascript">{{ include.js }}</code></pre>
+  </div>
+  <div class="tab-pane fade" id="{{ include.id }}-source" role="tabpanel" aria-labelledby="{{ include.id }}-source-tab">
+    <pre class="mt-0 shadow-sm"><code class="language-html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset=&quot;UTF-8&quot;&gt;
+    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
+    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
+    &lt;title&gt;{{ page.title }}&lt;/title&gt;
+
+    &lt;!-- required scripts --&gt;
+    {% assign scripts = include.scripts | split: "," %}{% for script in scripts %}{% if script == "pbjs" %}&lt;script async src=&quot;https://cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js&quot;&gt;&lt;/script&gt;
+    {% elsif script == "gpt" %}&lt;script async src=&quot;https://securepubads.g.doubleclick.net/tag/js/gpt.js&quot;&gt;&lt;/script&gt;
+    {% elsif script == "astjs" %}&lt;script async src=&quot;https://acdn.adnxs.com/ast/ast.js&quot;&gt;&lt;/script&gt;{% else %}&lt;!-- unknown script tag '{{ script }}' required --&gt;{% endif %}{% else %}&lt;script async src=&quot;//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js&quot;&gt;&lt;/script&gt;
+    &lt;script async src=&quot;https://securepubads.g.doubleclick.net/tag/js/gpt.js&quot;&gt;&lt;/script&gt;{% endfor %}
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;!-- javascript --&gt;
+  &lt;script&gt;{{ include.js }}&lt;/script&gt;
+
+  &lt;!-- html --&gt;
+  {{ include.html | xml_escape}}
+  &lt;/body&gt;
+&lt;/html&gt;
+    </code></pre>
+  </div>
+</div>
+
diff --git a/_includes/prebidjs-non-prod.html b/_includes/prebidjs-non-prod.html
@@ -1,2 +1,3 @@
+<!-- markdownlint-disable MD034 -->
 <!-- non-production version of prebid.js-->
-<script type="text/plain" class="cmplazyload" data-cmp-vendor="s1442" async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
+<script type="text/plain" class="cmplazyload" data-cmp-vendor="s1442" async data-cmp-src="https//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
diff --git a/_layouts/example.html b/_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">

diff --git a/dev-docs/examples/adunit-refresh.md b/dev-docs/examples/adunit-refresh.md
@@ -9,9 +9,74 @@ 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
+
+{% 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 %}
diff --git a/dev-docs/examples/basic-example.md b/dev-docs/examples/basic-example.md
@@ -11,9 +11,77 @@ 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
+
+{% capture htmlCodePrebid %}<h5>Div-1</h5>
+<div id='div-1' style="min-height:250px;">
+  <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 scripts="pbjs,gpt" %}