Full Width

With SDK v5.5, Audience Network has introduced a new ad format called full width. Full width ads enable mobile web publishers to seamlessly switch from traditional 300x250 banner ads to a full width format. This new format extends beyond the 300x250 frame, as the image captures the full width of the screen. The ad frame captures the full width with a 10px horizontal padding, and extends up to 375px vertically.

Steps to Implement Full Width with Prebid.js

  1. Update to the latest version of our Prebid Adapter
  2. Update your Header Bidding ad unit configurations to pass format: 'fullwidth` for any placements you'd like to render as full width (param could be fullwidth: true if using an older adapter version).
    code: 'div-gpt-ad-1',    
      sizes: [[300, 250]],
      bids: [{
        bidder: 'audienceNetwork',
        params: {
            placementId: '[PLACEMENT_ID]',
            testmode: false,
            format: 'fullwidth'
            }
        }]
    }];

Best Practices for Implementing Full Width

  • You must use DFP Ad Server
  • Uncheck Safeframes in DFP on the creative level
  • The page header should contain the following tag
    <meta content="width=device-width, initial-scale=1" name="viewport">
  • The page should not set "overflow: hidden" on any parents of the DFP Div
  • The page should not set a fixed height or width on any parent of the DFP Div
  • Test before launching
    • Test in a sandbox environment before launching to production
    • Test with tag in DFP (waterfall) before making Header Bidding changes
  • UX Considerations
    • Ad height may be too big for ATF or Homepage/Section Fronts
    • Full Width doesn't work on tablets

Fullwidth Tag for Testing (Insert Your Placement ID)

<html>
  <body>
    <div style="display:none; position: relative;">    
      <script type="text/javascript">    
        var data = {    
          placementid: 'PLACEMENT_ID',    
          format: 'fullwidth',    
          testmode: false,    
          onAdLoaded: function(element) {    
            console.log('Audience Network [PLACEMENT_ID] ad loaded');    
            element.style.display = 'block';    
          },    
          onAdError: function(errorCode, errorMessage) {    
            console.log('Audience Network [PLACEMENT_ID] error (' + errorCode + ') ' + errorMessage);    
          }    
        };    
      </script>    
      <script>    
      (function(a,b,c){var d="https://www.facebook.com",e="https://connect.facebook.net/en_US/fbadnw55.js",f={iframeLoaded:true,xhrLoaded:true},g=a.data,h=function(){if(Date.now)return Date.now();else return+new Date()},i=function(B){var C=d+"/audience_network/client_event",D={cb:h(),event_name:"ADNW_ADERROR",ad_pivot_type:"audience_network_mobile_web",sdk_version:"5.5.web",app_id:g.placementid.split("_")[0],publisher_id:g.placementid.split("_")[1],error_message:B},E=[];for(var F in D)E.push(encodeURIComponent(F)+"="+encodeURIComponent(D[F]));var G=C+"?"+E.join("&"),H=new XMLHttpRequest();H.open("GET",G,true);H.send();if(g.onAdError)g.onAdError("1000","Internal error.")},j=function(){if(b.currentScript)return b.currentScript;else{var B=b.getElementsByTagName("script");return B[B.length-1]}},k=function(B){try{return B.document.referrer}catch(C){}return""},l=function(){var B=a,C=[B];try{while(B!==B.parent&&B.parent.document)C.push(B=B.parent)}catch(D){}return C.reverse()},m=function(){var B=l();for(var C=0;C<B.length;C++){var D=B[C],E=D.ADNW||{};D.ADNW=E;if(!D.ADNW)continue;return E.v55=E.v55||{ads:[],window:D}}throw new Error("no_writable_global")},n=function(B){var C=B.indexOf("/",B.indexOf("://")+3);if(C===-1)return B;return B.substring(0,C)},o=function(B){return B.location.href||k(B)},p=function(B){if(B.sdkLoaded)return;var C=B.window.document,D=C.createElement("iframe");D.name="fbadnw";D.style.display="none";D.onload=function(){var E=D.contentDocument.createElement("script");E.src=e;E.async=true;D.contentDocument.body.appendChild(E)};C.body.appendChild(D);B.sdkLoaded=true},q=function(B){var C=/^https?:\/\/www\.google(\.com?)?.\w{2,3}$/;return!!B.match(C)},r=function(B){return!!B.match(/cdn\.ampproject\.org$/)},s=function(){var B=c.ancestorOrigins||[],C=B[B.length-1]||c.origin,D=B[B.length-2]||c.origin;if(q(C)&&r(D))return n(D);else return n(C)},t=function(B){try{return JSON.parse(B)}catch(A){i(A.message);throw A}},u=function(B,C,D){if(!B.iframe){var E=D.createElement("iframe");E.src=d+"/audiencenetwork/iframe/";E.style.display="none";D.body.appendChild(E);B.iframe=E;B.iframeAppendedTime=h();B.iframeData={}}C.iframe=B.iframe;C.iframeData=B.iframeData;C.tagJsIframeAppendedTime=B.iframeAppendedTime||0},v=function(B){var C=d+"/audiencenetwork/xhr/?sdk=5.5.web";for(var D in B)if(typeof B[D]!=="function")C+="&"+D+"="+encodeURIComponent(B[D]);var E=new XMLHttpRequest();E.open("GET",C,true);E.withCredentials=true;E.onreadystatechange=function(){if(E.readyState===4){var F=t(E.response);B.events.push({name:"xhrLoaded",source:B.iframe.contentWindow,data:F,postMessageTimestamp:h(),receivedTimestamp:h()})}};E.send()},w=function(B,C){var D=d+"/audiencenetwork/xhriframe/?sdk=5.5.web";for(var E in C)if(typeof C[E]!=="function")D+="&"+E+"="+encodeURIComponent(C[E]);var F=b.createElement("iframe");F.src=D;F.style.display="none";b.body.appendChild(F);C.iframe=F;C.iframeData={};C.tagJsIframeAppendedTime=h()},x=function(B){var C=function(event){try{var E=event.data;if(E.name in f)B.events.push({name:E.name,source:event.source,data:E.data})}catch(A){}},D=B.iframe.contentWindow.parent;D.addEventListener("message",C,false)},y=function(a){if(a.context&&a.context.sourceUrl)return true;try{return!!JSON.parse(decodeURI(a.name)).ampcontextVersion}catch(A){return false}},z=function(B){var C=h(),D=l()[0],E=j().parentElement,F=D!=a.top,G=D.$sf&&D.$sf.ext,H=o(D),I=m();p(I);var J={amp:y(D),events:[],tagJsInitTime:C,rootElement:E,iframe:null,tagJsIframeAppendedTime:I.iframeAppendedTime||0,url:H,domain:s(),channel:n(o(D)),width:screen.width,height:screen.height,pixelratio:a.devicePixelRatio,placementindex:I.ads.length,crossdomain:F,safeframe:!!G,placementid:g.placementid,format:g.format||"300x250",testmode:!!g.testmode,onAdLoaded:g.onAdLoaded,onAdError:g.onAdError};if(g.bidid)J.bidid=g.bidid;if(F||!c.ancestorOrigins)w(I,J);else{u(I,J,D.document);v(J)}x(J);J.rootElement.dataset.placementid=J.placementid;I.ads.push(J)};try{z()}catch(A){i(A.message||A);throw A}})(window,document,location);    
      </script>    
    </div>    
  </body>
</html>

Fullwidth Tag w/Bidding Macros (if trafficking the tag in the server rather than wrapper snippet)

<html>
  <body>
    <div style="display:none; position: relative;">    
      <script type="text/javascript">    
        var data = {    
          placementid: '%%PATTERN:fb_placementid%%',    
          format: '%%PATTERN:fb_format%%', bidid: '%%PATTERN:fb_bidid%%',    
          testmode: false,    
          onAdLoaded: function(element) {    
            console.log('Audience Network [%%PATTERN:fb_placementid%%] ad loaded');    
            element.style.display = 'block';    
          },    
          onAdError: function(errorCode, errorMessage) {    
            console.log('Audience Network [%%PATTERN:fb_placementid%%] error (' + errorCode + ') ' + errorMessage);    
          }    
        };    
      </script>    
      <script>    
        (function(a,b,c){var d="https://www.facebook.com",e="https://connect.facebook.net/en_US/fbadnw55.js",f={iframeLoaded:true,xhrLoaded:true},g=a.data,h=function(){if(Date.now)return Date.now();else return+new Date()},i=function(B){var C=d+"/audience_network/client_event",D={cb:h(),event_name:"ADNW_ADERROR",ad_pivot_type:"audience_network_mobile_web",sdk_version:"5.5.web",app_id:g.placementid.split("_")[0],publisher_id:g.placementid.split("_")[1],error_message:B},E=[];for(var F in D)E.push(encodeURIComponent(F)+"="+encodeURIComponent(D[F]));var G=C+"?"+E.join("&"),H=new XMLHttpRequest();H.open("GET",G,true);H.send();if(g.onAdError)g.onAdError("1000","Internal error.")},j=function(){if(b.currentScript)return b.currentScript;else{var B=b.getElementsByTagName("script");return B[B.length-1]}},k=function(B){try{return B.document.referrer}catch(C){}return""},l=function(){var B=a,C=[B];try{while(B!==B.parent&&B.parent.document)C.push(B=B.parent)}catch(D){}return C.reverse()},m=function(){var B=l();for(var C=0;C<B.length;C++){var D=B[C],E=D.ADNW||{};D.ADNW=E;if(!D.ADNW)continue;return E.v55=E.v55||{ads:[],window:D}}throw new Error("no_writable_global")},n=function(B){var C=B.indexOf("/",B.indexOf("://")+3);if(C===-1)return B;return B.substring(0,C)},o=function(B){return B.location.href||k(B)},p=function(B){if(B.sdkLoaded)return;var C=B.window.document,D=C.createElement("iframe");D.name="fbadnw";D.style.display="none";D.onload=function(){var E=D.contentDocument.createElement("script");E.src=e;E.async=true;D.contentDocument.body.appendChild(E)};C.body.appendChild(D);B.sdkLoaded=true},q=function(B){var C=/^https?:\/\/www\.google(\.com?)?.\w{2,3}$/;return!!B.match(C)},r=function(B){return!!B.match(/cdn\.ampproject\.org$/)},s=function(){var B=c.ancestorOrigins||[],C=B[B.length-1]||c.origin,D=B[B.length-2]||c.origin;if(q(C)&&r(D))return n(D);else return n(C)},t=function(B){try{return JSON.parse(B)}catch(A){i(A.message);throw A}},u=function(B,C,D){if(!B.iframe){var E=D.createElement("iframe");E.src=d+"/audiencenetwork/iframe/";E.style.display="none";D.body.appendChild(E);B.iframe=E;B.iframeAppendedTime=h();B.iframeData={}}C.iframe=B.iframe;C.iframeData=B.iframeData;C.tagJsIframeAppendedTime=B.iframeAppendedTime||0},v=function(B){var C=d+"/audiencenetwork/xhr/?sdk=5.5.web";for(var D in B)if(typeof B[D]!=="function")C+="&"+D+"="+encodeURIComponent(B[D]);var E=new XMLHttpRequest();E.open("GET",C,true);E.withCredentials=true;E.onreadystatechange=function(){if(E.readyState===4){var F=t(E.response);B.events.push({name:"xhrLoaded",source:B.iframe.contentWindow,data:F,postMessageTimestamp:h(),receivedTimestamp:h()})}};E.send()},w=function(B,C){var D=d+"/audiencenetwork/xhriframe/?sdk=5.5.web";for(var E in C)if(typeof C[E]!=="function")D+="&"+E+"="+encodeURIComponent(C[E]);var F=b.createElement("iframe");F.src=D;F.style.display="none";b.body.appendChild(F);C.iframe=F;C.iframeData={};C.tagJsIframeAppendedTime=h()},x=function(B){var C=function(event){try{var E=event.data;if(E.name in f)B.events.push({name:E.name,source:event.source,data:E.data})}catch(A){}},D=B.iframe.contentWindow.parent;D.addEventListener("message",C,false)},y=function(a){if(a.context&&a.context.sourceUrl)return true;try{return!!JSON.parse(decodeURI(a.name)).ampcontextVersion}catch(A){return false}},z=function(B){var C=h(),D=l()[0],E=j().parentElement,F=D!=a.top,G=D.$sf&&D.$sf.ext,H=o(D),I=m();p(I);var J={amp:y(D),events:[],tagJsInitTime:C,rootElement:E,iframe:null,tagJsIframeAppendedTime:I.iframeAppendedTime||0,url:H,domain:s(),channel:n(o(D)),width:screen.width,height:screen.height,pixelratio:a.devicePixelRatio,placementindex:I.ads.length,crossdomain:F,safeframe:!!G,placementid:g.placementid,format:g.format||"300x250",testmode:!!g.testmode,onAdLoaded:g.onAdLoaded,onAdError:g.onAdError};if(g.bidid)J.bidid=g.bidid;if(F||!c.ancestorOrigins)w(I,J);else{u(I,J,D.document);v(J)}x(J);J.rootElement.dataset.placementid=J.placementid;I.ads.push(J)};try{z()}catch(A){i(A.message||A);throw A}})(window,document,location);    
      </script>    
    </div>    
  </body>
</html>