JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<iframe class="Ad" id="ad13-TopMedRect" width="300" height="250"></iframe>
<script>ads.render({
    baseUrl:"http://dfp.doubleclick.com/metacafe/adi/studio=music;rating=clean",
    targetId: "ad13-TopMedRect"
});</script>

<script class="Ad" id="ad11"></script><script id="ha">ads.render({baseUrl:"http://dfp.doubleclick.com/metacafe/adj/studio=movie_trailers;hd=yes", targetId: "ad121"});</script>

CSS

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

JavaScript

var Ads = new Class({
    // we don't need configuration or events right now, so why bother?
    initialize: function(){
        this.ads = {};
        this.initClientSideValues();
    },
    initClientSideValues:function(){
        this.options = {
            tile: 0, // incremented after each banner
            ORD: Math.floor(Math.random() * 1e20) // static
        };
    },
    /*
     * Method: render
     * Prepare a banner URL and render the banner
     * The idea is to have 'hooks' in place, then replace their src to actually render them
     * For max performance, call it right after target element is ready.
     *
     * Example: 
     * < script class="Ad" id="ad11"></ script>
     * < script>ads.render({baseUrl:"http://dfp...adj/studio=tv;hd=yes", targetId: "ad11"});</ script>
     *
     * Parameters:
     *         adData (object) - Should contain:
     *             baseUrl (string) - Base URL for the ad, along with server-side parameters
     *             targetId (string) - ID of the empty element which will be the ad
     */
    render: function(adData){
        this.ads[adData.targetId] = adData; // store for reference
        var adDataUrl = adData.baseUrl
                        + ';tile=' + this.tile++
                        + ';ord=' + this.options.ORD;
        
        $$('#'+adData.targetId).set('src', adDataUrl);
        console && console.log(adDataUrl);
    }
});

var ads = new Ads();