src/Placement.js
/**
         * Renders a Google DFP/ADX response
         * @private
         */
Renders a Google DFP/ADX response
@private
Renders a Google DFP / ADX response @private
_showADX() {
            const data = (this._response || { data: { settings: {} } }).data || { settings: {} };
            const templateName = this._getTemplate(Placement.ContentTypes.adx, Placement.DefaultTemplates.adx);
            let size = null;
            if (this.config.size) {
                if (Placement.Sizes[this.config.size]) {
                    size = Placement.Sizes[this.config.size];
                } else {
                    let match = (/^([0-9]+)x([0-9]+)$/i).exec(this.config.size);
                    if (match) {
                        size = { width: match[1], height: match[2] }
                    }
                }
            }
            if (!size) size = Placement.Sizes.default;
            let adUnitPath = '/90447967/okanjo:<publisher>';
            let declineReason;
            if (data.settings.display && data.settings.display.adx_unit_path) {
                adUnitPath = data.settings.display.adx_unit_path;
                declineReason = 'custom_ad_unit';
            }
            const renderContext = {
                css: !this.config.no_css,
                size,
                adUnitPath
            };
            this.setMarkup(okanjo.ui.engine.render(templateName, this, renderContext));
            this._reportWidgetLoad(declineReason);
            const container = this.element.querySelector('.okanjo-adx-container');
            if (container) {
                const frame = document.createElement('iframe');
                const attributes = {
                    'class': 'okanjo-adx-frame',
                    frameborder: 0,
                    vspace: 0,
                    hspace: 0,
                    webkitallowfullscreen: '',
                    mozallowfullscreen: '',
                    allowfullscreen: '',
                    scrolling: 'auto',
                    width: size.width,
                    height: size.height
                };
                Object.keys(attributes).forEach((key) => frame.setAttribute(key, attributes[key]));
                container.appendChild(frame);
                let clickUrl = okanjo.metrics.create(this._metricBase)
                    .type(Metrics.Object.thirdparty_ad, Metrics.Event.interaction)
                    .meta(this.getConfig())
                    .meta({
                        ta_s: adUnitPath,
                        ta_w: size.width,
                        ta_h: size.height
                    })
                    .element(frame)
                    .viewport()
                    .widget(this.element)
                    .toUrl();
                frame.contentWindow.trackImpression = () => {
                    okanjo.metrics.create(this._metricBase)
                        .type(Metrics.Object.thirdparty_ad, Metrics.Event.impression)
                        .meta(this.getConfig())
                        .meta({
                            ta_s: adUnitPath,
                            ta_w: size.width,
                            ta_h: size.height
                        })
                        .element(frame)
                        .viewport()
                        .widget(this.element)
                        .send()
                    ;
                    this._addOnceViewedHandler(frame, () => {
                        okanjo.metrics.create(this._metricBase)
                            .type(Metrics.Object.thirdparty_ad, Metrics.Event.view)
                            .meta(this.getConfig())
                            .meta({
                                ta_s: adUnitPath,
                                ta_w: size.width,
                                ta_h: size.height
                            })
                            .element(frame)
                            .viewport()
                            .widget(this.element)
                            .send()
                        ;
                    });
                };
                frame.contentWindow.document.open();
                frame.contentWindow.document.write(
`<html><head><style type="text/css">html,body {margin: 0; padding: 0;}</style></head><body>
<`+`script type="text/javascript" src="https://www.googletagservices.com/tag/js/gpt.js">
    googletag.pubads().addEventListener('slotRenderEnded', function(e) { 
        trackImpression(e);
    });
    googletag.pubads()
        .definePassback("${adUnitPath.replace(/"/g, '\\"')}", [[${size.width}, ${size.height}]])
        .setClickUrl("${clickUrl}&u=")
        .display();
<`+`/script>
</body></html>`);
                frame.contentWindow.document.close();
            }
            this.emit('load');
        }
_showADX ( ) { const data = ( this . _response || { data : { settings : { } } } ) . data || { settings : { } } ; const templateName = this . _getTemplate ( Placement . ContentTypes . adx , Placement . DefaultTemplates . adx ) ; let size = null ; if ( this . config . size ) { if ( Placement . Sizes [ this . config . size ] ) { size = Placement . Sizes [ this . config . size ] ; } else { let match = ( / ^([0-9]+)x([0-9]+)$ / i ) . exec ( this . config . size ) ; if ( match ) { size = { width : match [ 1 ] , height : match [ 2 ] } } } } if ( ! size ) size = Placement . Sizes . default ; let adUnitPath = '/90447967/okanjo:<publisher>' ; let declineReason ; if ( data . settings . display && data . settings . display . adx_unit_path ) { adUnitPath = data . settings . display . adx_unit_path ; declineReason = 'custom_ad_unit' ; } const renderContext = { css : ! this . config . no_css , size , adUnitPath } ; this . setMarkup ( okanjo . ui . engine . render ( templateName , this , renderContext ) ) ; this . _reportWidgetLoad ( declineReason ) ; const container = this . element . querySelector ( '.okanjo-adx-container' ) ; if ( container ) { const frame = document . createElement ( 'iframe' ) ; const attributes = { 'class' : 'okanjo-adx-frame' , frameborder : 0 , vspace : 0 , hspace : 0 , webkitallowfullscreen : '' , mozallowfullscreen : '' , allowfullscreen : '' , scrolling : 'auto' , width : size . width , height : size . height } ; Object . keys ( attributes ) . forEach ( ( key ) => frame . setAttribute ( key , attributes [ key ] ) ) ; container . appendChild ( frame ) ; let clickUrl = okanjo . metrics . create ( this . _metricBase ) . type ( Metrics . Object . thirdparty_ad , Metrics . Event . interaction ) . meta ( this . getConfig ( ) ) . meta ( { ta_s : adUnitPath , ta_w : size . width , ta_h : size . height } ) . element ( frame ) . viewport ( ) . widget ( this . element ) . toUrl ( ) ; frame . contentWindow . trackImpression = ( ) => { okanjo . metrics . create ( this . _metricBase ) . type ( Metrics . Object . thirdparty_ad , Metrics . Event . impression ) . meta ( this . getConfig ( ) ) . meta ( { ta_s : adUnitPath , ta_w : size . width , ta_h : size . height } ) . element ( frame ) . viewport ( ) . widget ( this . element ) . send ( ) ; this . _addOnceViewedHandler ( frame , ( ) => { okanjo . metrics . create ( this . _metricBase ) . type ( Metrics . Object . thirdparty_ad , Metrics . Event . view ) . meta ( this . getConfig ( ) ) . meta ( { ta_s : adUnitPath , ta_w : size . width , ta_h : size . height } ) . element ( frame ) . viewport ( ) . widget ( this . element ) . send ( ) ; } ) ; } ; frame . contentWindow . document . open ( ) ; frame . contentWindow . document . write ( ` ` + ` ${ adUnitPath . replace ( / " / g , '\\"' ) } ${ size . width } ${ size . height } ${ clickUrl } ` + ` ` ) ; frame . contentWindow . document . close ( ) ; } this . emit ( 'load' ) ; }
Renders a Google DFP/ADX response
 @private
Renders a Google DFP / ADX response @private
// Get the template we should use to render the google ad // Determine what size ad we can place here // Defined size, use these known dimensions // No given size, we need to guess // If we're using okanjo's ad slot, then track the impression // otherwise decline it because we're just passing through to the publishers account // Pass along what the template needs to know to display the ad // Render the container // Report the impression // Insert the actual ad into the container /* istanbul ignore else: custom templates could break this */ // Make the frame element // Apply attributes // Attach to dOM // Build a click-through tracking url so we know when an ad is clicked too // Transfer references to the frame window // frame.contentWindow.okanjo = okanjo; // frame.contentWindow.placement = this; // Start watching for a viewable impression // Load Google ad! // TODO future event hooks // googletag.pubads().addEventListener('impressionViewable', function(e) { future )}); // googletag.pubads().addEventListener('slotOnload', function(e) { future }); // googletag.pubads().addEventListener('slotVisibilityChangedEvent', function(e) { future ); // Impression tracking is done from within the iframe. Crazy, right? // Hook point that the widget is done loading