Full version

Guille Filipich edited this page Jun 20, 2018 · 16 revisions

Features:

  • Full version is recommended for websites new to DFP, as well as the ones that are doing a full tag refresh.
  • Works with all Rich Media Formats created with Adcase.io builder
  • To get debug screens for desktop and mobile devices, in your browser add    ?ads.debug=true to any url. This will set the blue "ads" button. ?ads.debug=false to turn it off.
  • To traffic a test campaign, in your browser add    ?adstest=TESTCODE    to any url. This will set a adstest key-value in every request. This way you can trafic a test (sponsorship) line item in a real web page, for testing purposes. ?adstest=false to turn it off.

 

Demo page:

https://adcase.io/demo/full

 

Instructions:

Step 1: Add ad slots

  • insert one div for each creative in your page.
  • set data-adtype to group creatives by type
  • divs for interstitial and footer should not be created in the page.
<!-- page content -->
<div id="box1" class="ad-slot" data-adtype="smallBox"></div>
<!-- page content -->
<div id="box2" class="ad-slot" data-adtype="smallBox" 
      data-kv='{"key1":["value1","value2",3],"key2":"value4","key3":5}'></div>
<!-- page content -->
<div id="box3" class="ad-slot" data-adtype="bigBox"></div>
<!-- page content -->

 

Step 2: Add config.js call at end of page

  • configuration file can exist as an actual file, or inside a GTM tag.
  • Option A: As an actual .js file. Script must be called at the end of the page, when all divs already exists in DOM:
<!-- site content ends -->
<script>
  var ads = {}; var s = document.createElement('script'); 
    s.async = true; s.src = "config.js"; document.head.appendChild(s);
</script>
</body>
</html>
  • Option B: As a GTM Tag: You can use a standard GTM implementation. Trigger must be on DOM Ready, to make sure all divs already exist in DOM.

 

Step 3: Edit Config.js file

  • The configuration is exactly the same for a config.js file, as well as in a GTM tag.
  • You can use this same example file as a base.
  • Please remember to delete all comments for production use.
var ads = ads || {};
ads.kv = ads.kv || {};
ads.styles = ads.styles || {};
ads.slotRenderedCallback = ads.slotRenderedCallback || {};
//--------------------------------------------------------
// CONFIGURATION START
//--------------------------------------------------------
// adcase.js library
// you can use jsdelivr CDN or host it yourself. We recommend that you host it.
ads.lib = "https://storage.googleapis.com/adcase.io/dist/3/adcase.js";  
ads.network = 21634433536;   // DFP network code

// ads.slots creates new divs in document.body:
// adtype matches to an ads.adTypesMap[].adtype value:
ads.slots = [ 
      { id:"interstitial", adtype: "interstitialAd" },  
      { id:"footerFixed", adtype: "footerAd" }    
];

// map to group same adslots. Options:
//   deviceType: "desktop", "mobile", or "desktop,mobile"
//   sizes: Same as DFP sizes. Can be one [w,h] size, or a list.
//   minWidth: screen width from which entry is considered. Ignored in smaller screens. 
//   adFormat:  "footerFixed", "interstitial", "push". Not needed for standard ad slots.
//
ads.adTypesMap = [
      // standard
      { adtype:"smallBox", deviceType: "desktop,mobile", sizes: [300,250] },
      { adtype:"bigBox", deviceType: "mobile", sizes: [[300,250],[300,600]] },

      // interstitial and footer, the ones that you did not create before
      { adtype:'footerAd',       deviceType: "desktop", minWidth:1000, 
            adFormat: "footerFixed",  sizes: [970,251] },
      { adtype:'interstitialAd', deviceType: "desktop", 
            adFormat: "interstitial",  sizes: [[800,600],[1,1]] },
    ];

//
// optionals
// example page level key **tags** with several values. 
ads.kv.tags=['politics','president','country'];

// to enable lazy loading, uncomment next line
//ads.lazy = true;

/* 
  ad unit path creation logic goes here:
  The DFP ad unit path is then created as    
  /[ads.network]/ads.router()/[adslot.id]
  this is an example function that should be tailored to your website
  you can use regular expresions or if/case statements
  for the demo this is fixed.
*/
ads.router = function(url) {
  return "/special/";
}
//--------------------------------------------------------
// CONFIGURATION END 
//--------------------------------------------------------



// Next lines are to force blue debug button in development sites. 
// Please delete them for production:
if(!localStorage.getItem("adcase-adstest")) { 
  localStorage.setItem("adcase-adstest", "test-value"); 
} 
localStorage.setItem("ads.debug",true);



// no changes needed after this:
ads.ready = function(params) { 
  params = params || {}; 
  if(!ads.loaded) { ads.loaded = true; var s = document.createElement('script');
                    s.async = true; s.src = ads.lib; document.head.appendChild(s); } 
  ads.cmd = ads.cmd || []; 
  ads.cmd.push( {cmd:"run", path: ads.router(), pending: params.pending } ); 
  ads.run && ads.run(); 
}

// you can call ads.ready as many times as needed. 
// DFP will only get ads for new divs, that were created after the first call.
// Making multiple calls is useful for infinite scrolling.
ads.ready();

// if you want to call ads.ready() to refresh all adds in a SPA or PWA, call:
// ads.ready({ refresh:true });

 

Support and new ideas:

  • Open a Github issue, we'll do our best to solve your request asap.
  • Please remember adcase.io is given for free as is, with no contractual support. As it is not a Google product, it has no Google official support.

 

Request for new creative types:

  • Open a Github issue with your request, adding a link to a plain no-dfp working example. We'll do our best to solve your request asap.

 

<!-- enjoy -->
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.