Light version

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

Features:

  • Light version is recommended for websites that already have DFP tags, and want to make minimal changes.
  • 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/light

 

Instructions:

Step 1: Replace the section

<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>
<script src='http://www.googletagservices.com/tag/js/gpt.js'></script>

with this (change the whole block of code):

<script>
  var ads = { styles: {}, light:true };

  // set open/close push button text or images
  ads.styles.push = { 
    iconsStyle   : "width:62px;position:absolute;left:900px;top:0;border:1px solid #ccc;"
                 + "font-family:Arial;font-size:11px;padding:3px;background-color:white;"
                 + "text-align:center",
    openIconHTML : "[OPEN]", 
    closeIconHTML: "[CLOSE]" };

  var googletag = googletag || {cmd:[]};
</script>
<script async="async" 
  src='https://storage.googleapis.com/adcase.io/dist/3/adcase.js'></script>

 

Step 2: Replace

   googletag.enableServices();

with this (only add one line)

    googletag.pubads().setTargeting('adcase', ads.logData);
    googletag.enableServices();

 

Step 3: Add a container empty div in each ad slot. Add data-format for push ad slots.

  • You can define as many slots as needed.
<div>
  <div id='any-div-name-normal-box'>
    <script>googletag.cmd.push(function() { 
              googletag.display('any-div-name-normal-box'); });</script>
  </div>
</div>

<div>
  <div id='any-div-name-push' data-format='push'>
    <script>googletag.cmd.push(function() { 
              googletag.display('any-div-name-push'); });</script>
  </div>
</div>

 

Step 4: Add interstitial and footer ad slots.

  • There can be only one slot of type interstitial, and only one slot of type footerFixed.
  • Interstitial and footers must be defined at the end of the page and enclosed in a "display:none" div.
<div style='display:none'>
  <div id='any-div-name-interstitial' data-format='interstitial'>
    <script>googletag.cmd.push(function() { 
              googletag.display('any-div-name-interstitial'); });</script>
  </div>
</div>

<div style='display:none'>
  <div id='any-div-name-footer' data-format='footerFixed'>
    <script>googletag.cmd.push(function() { 
              googletag.display('any-div-name-push'); });</script>
  </div>
</div>

 

Important Notes:

  • Interstitial and footers divs (step 4) must be defined at the end of the page.
  • Interstitial and footers divs (step 4) must be enclosed in a hidden div.
  • Interstitial and footers must be defined as normal slots, and must have a fixed size. They are not out of page slots. They should look like:
googletag.defineSlot('/21634433536/special/interstitial',
          [800,600], 'any-div-name-interstitial').addService(googletag.pubads());

 

Working example:

<!DOCTYPE HTML> 
<html lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<script>
  var ads = { styles: {}, light:true };

  ads.styles.push = { 
    iconsStyle   : "width:62px;position:absolute;left:900px;top:0;border:1px solid #ccc;"
                 + "font-family:Arial;font-size:11px;padding:3px;background-color:white;"
                 + "text-align:center;",
    openIconHTML : "[OPEN]", 
    closeIconHTML: "[CLOSE]" };

  var googletag = googletag || {cmd:[]};
</script>

<script async='async' 
  src='https://storage.googleapis.com/adcase.io/dist/3/adcase.js'></script>

<script>
  googletag.cmd.push(function() {

    googletag.defineSlot('/21634433536/special/box1', [[300, 250],[300,600]], 
      'adslot-box1').addService(googletag.pubads());
    googletag.defineSlot('/21634433536/special/push_html5', [970, 250], 
      'adslot-push').addService(googletag.pubads());
    googletag.defineSlot('/21634433536/special/footer', [970, 90], 
      'adslot-footer').addService(googletag.pubads());
    googletag.defineSlot('/21634433536/special/interstitial', [800,600], 
      'adslot-itt').addService(googletag.pubads());

    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.pubads().setTargeting('adcase', ads.logData);
    googletag.enableServices();
  });
</script>
</head>
<body>
<div>
  <div id='adslot-box1'>
    <script>googletag.cmd.push(function() { 
              googletag.display('adslot-box1'); });</script>
  </div>
</div>

<div>
  <div id='adslot-push' data-format='push'>
    <script>googletag.cmd.push(function() { 
              googletag.display('adslot-push'); });</script>
  </div>
</div>

<div style='display:none'>
  <div id='adslot-footer' data-format='footerFixed'>
    <script>googletag.cmd.push(function() { 
              googletag.display('adslot-footer'); });</script>
  </div>
</div>

<div style='display:none'>
  <div id='adslot-itt' data-format='interstitial'>
    <script>googletag.cmd.push(function() { 
              googletag.display('adslot-itt'); });</script>
  </div>
</div>

</body>
</html>

 

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.