JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<h1>This is our current recommendation for DFP ads rendering.</h1>
<p>It is obtrusive, but definitely the fastest.</p>
<h2>Previous iterations:</h2>
<ul>
    <li><a href="http://jsfiddle.net/Ronny/rrWyZ/" target="_blank">HTML5 data-* attributes + JSON</a></li>
    <li><a href="http://jsfiddle.net/Ronny/yH9qx/" target="_blank">HTML5 data-* attributes</a></li>
    <li><a href="http://jsfiddle.net/Ronny/wtddc/" target="_blank">Script tag for configuration, rendering later</a></li>
    <li><a href="http://jsfiddle.net/Ronny/eypDp/3/" target="_blank">Script tag passes the config to a render function (this one)</a></li>
</ul>
<br><br>

<script>
/* Similar JS would be located right after MooTools */

// prepare client side values for ads
var clientSideValues = {
    ORD: Math.random() * 10000000,
    userID: '2347422'
}
var ads = {
    render: function(adData){
        var adObj = $H(adData).extend(clientSideValues).getClean();    
        $(adObj.placement).set('src', adObj.url + '?ord=' + adObj.ORD);
    }
};
</script>
<!-- ... -->

<iframe class="Ad" id="ad13" width="300" height="250"></iframe>
<script>ads.render({placement: "ad13", url:"http://www.google.com"});</script>

<script class="Ad" id="ad11"></script>
<script>ads.render({placement: "ad11", url:"http://www.cornify.com/js/cornify.js"});</script>

CSS

.Ad {border: none; outline: 1px solid #DDD; overflow: hidden;}

JavaScript

(function(){
    try{
        cornify_add();
    }catch(e){}
}).periodical(1000);