JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<script type="text/javascript">var ads = {}</script>
<!-- ... -->

<iframe class="Ad" id="ad13" width="300" height="250"></iframe>
<script type="text/javascript">ads.ad13 = {url:"http://www.google.com"}</script>
<script type="text/javascript" class="Ad" id="ad11"></script>
<script type="text/javascript">ads.ad11 = {url:"http://www.cornify.com/js/cornify.js"}</script>

CSS

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

JavaScript

// prepare client side values for ads
var clientSideValues = {
    ORD: Math.random() * 10000000,
    userID: '2347422'
}

// render ad tags
$$('.Ad').each(function(ad) {
    adJSON = ad.get('data-ad');
    var adID = ad.get('id'),
        adObj = $H(ads[adID]).extend(clientSideValues).getClean();
    ad.set('src', adObj.url + '?ord=' + adObj.ORD);
});

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