Skip to content

New banner script

Why new banner script?

The new banner script injects adnetwork code directly into your page, without using unnecessary iframes. This means that adnetwork codes will see your page as referrer, which may increase your income. It also facilitates integration and gives much more control of banner look and feel. You just drop a script into the page, mark places where banners should appear, and optionally adjust the labels. It works great with native banners, because they work as if you just inserted their codes into the page.

Quick start

Just two steps:

  1. Insert our script anywhere in the page, just once per page.
  2. Mark banner containers with two attributes
    1. data-asg-ins to mark it as a banner container
    2. specify spot id in data-spots attribute on the same element

Example

Let's say we have a page with the following HTML: 

<article>  
  <p>Part of what it is to be scientifically-literate, it's not ...</p>  

  <p>I think the greatest of people in society carved...</p>  

  <p>Once you have an innovation culture, even those who are not...</p>  

  <p>So the history of discovery, particularly cosmic....</p>  

  <p>I'm perennially intrigued how people who lead ...</p>

</article>

We want to display a banner after the third paragraph. 1. Insert <script async src="//cdn.tapioni.com/v2-banner.js"></script> anywhere on the page. 2. Add <div data-asg-ins data-spots="123"></div> (123 is your banner spot id) where you want your banner to be.

For example, like this: 

<article>
  <script async src="//cdn.tapioni.com/v2-banner.js"></script>

  <p>Part of what it is to be scientifically-literate, it's not ...</p>  

  <p>I think the greatest of people in society carved...</p>  

  <p>Once you have an innovation culture, even those who are not...</p>

 . <div data-asg-ins data-spots="123"></div>

  <p>So the history of discovery, particularly cosmic....</p>  

  <p>I'm perennially intrigued how people who lead ...</p>

</article>
Voila:

Fine-tuning

Making my page faster

As you can see in examples, we add async attribute to our script. It means that browser won't wait for our script to execute, so it wouldn't affect performance. The script will scan your page for banner placeholders twice: when it first executes, and after the whole page has been loaded. If you need to dynamically insert banners after the initial page load, see more advanced tricks below. You can also dns-prefetch to our servers or to your antiadblock-domain in the head element of the page. This might slightly improve page load time.

If you're NOT using antiadblock domain, we will hit two domains (one for the script, and another for the ads):

<link rel="dns-prefetch" href="https://cdn.tapioni.com/">
<link rel="dns-prefetch" href="https://a.labadena.com/">
If you ARE using antiadblock, DNS-prefetch just it: 
<link rel="dns-prefetch" href="https://my.anti-adblock.domain/">

Taming banner size and position

We do not set any banner size or position on our side. The actual size and position is determined by Adnetwork codes and your website's CSS. Let's say you want the Home Sale banner from the example above to be centered vertically. Just wrap it with a div and tell that div to center its content, and maybe add some margin. It's your page, you are the king.

<style>  
  .banners-container {  
    display: flex;  
    justify-content: center;
    margin: 1rem 0;  
  }  
</style>  

<p>Once you have an innovation culture, even those who are not...</p>

<div class="banners-container">  
  <div data-asg-ins data-spots="4287"></div>  
</div>

<p>So the history of discovery, particularly cosmic....</p>

Adding banners after the page has loaded

Let's say you want to display a banner in some element, that is added onto the page after it has been loaded. You have the following code, and try to add a banner placeholder with correct data-asg-ins and data-spots: 

<script>  
  function addBanner(event) {  
    event.preventDefault()  
    const target = document.getElementById('banner-container')  
    target.innerHTML = '';  
    const container = document.createElement('div')  
    container.setAttribute('data-asg-ins', 'data-asg-ins')  
    container.setAttribute('data-spots', '4287')  
    target.appendChild(container)  
  }  
</script>  

<p id="banner-container"></p>  

<p><a href="#" onclick="addBanner(event); return false">Add banner dynamically</a></p>
Unfortunately, this will not work. Our script finished looking for banner placeholders as soon as the page has loaded, and adding auto monitor may slow down your page. You need to trigger looking for containers again with the following snippet: 
    if (window.AsgManager) {  
      window.AsgManager.loadSpots({  
        additionalSelectors: '[data-asg-ins]',  
      });  
    }
This won't affect any existing banners, but will load new ones.

Adding label and close button

You can mark banners as ads and add close button to them. To toggle it on, there should be true value in window.AsgAdsInventory.settings.banner.label.enabled: 

<script>
window.AsgAdsInventory = {  
    antiadblockDomain: 'my.anti-adblock.domain',
    settings: {
      banner: {
          label: {
              enabled: true
            }
        }
    }
}
</script>
This config will applied to ALL script-powered Adspyglass banners on the page, but you can override it for specific banners - see [[#Per-banner configuration]].

This setting will use you page default style for links to display the label. The label will be aligned right, have 75% opacity and font-size of 0.75rem. You can easily change the appearance. Here's how:

Set label position

You can set label position with window.AsgAdsInventory.settings.banner.label.position. Available values are top left, top center, top right, bottom left, bottom center, bottom right. For example: 

<script>  
  window.AsgAdsInventory = {  
    antiadblockDomain: 'my.anti-adblock.domain',  
    settings: {  
      banner: {  
        label: {  
          enabled: true,  
          position: "bottom center"  
        }  
      }  
    }  
  }  
</script>

Changing label and close button text

You can do it with window.AsgAdsInventory.settings.banner.label.text and window.AsgAdsInventory.settings.banner.label.closeButton settings. For example: 

<script>  
  window.AsgAdsInventory = {  
    antiadblockDomain: 'my.anti-adblock.domain',  
    settings: {  
      banner: {  
        label: {  
          enabled: true,  
          position: "bottom center",  
          text: "Advertisment",  
          closeButton: "Dismiss"  
        }  
      }  
    }  
  }  
</script>

Hiding close button

Set window.AsgAdsInventory.settings.banner.label.closeButton to an empty string to hide it: 

<script>  
  window.AsgAdsInventory = {  
    antiadblockDomain: 'my.anti-adblock.domain',  
    settings: {  
      banner: {  
        label: {  
          enabled: true,  
          position: "bottom center",  
          text: "Advertisment",  
          closeButton: ""  
        }  
      }  
    }  
  }  
</script>

Going crazy with label

You can add any class to the label row via window.AsgAdsInventory.settings.banner.label.labelRowClass , and use it to style the label with CSS however you like. For example: 

<script>  
  window.AsgAdsInventory = {  
    antiadblockDomain: 'my.anti-adblock.domain',  
    settings: {  
      banner: {  
        label: {  
          enabled: true,  
          labelRowClass: 'banner-label'  
        }  
      }  
    }  
  }  
</script>

<style>  
  .banner-label {  
    display: flex;  
    justify-content: space-between;  
    padding: 1rem 0;  
  }  

  .banner-label > a {  
    display: inline-flex;  
    opacity: 100;  
    text-decoration: none;  
    font-size: 1rem;  
  }  

  .banner-label > a:last-child {  
    background-repeat: no-repeat;  
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="blue" class="size-5"> <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" /> </svg>');  
    width: 20px;  
    height: 20px;  

    /* Hide the text. */  
    text-indent: 100%;  
    white-space: nowrap;  
    overflow: hidden;  
  }  
</style>
Hint: If you don't want to use CSS trick to hide button text, you can set it to a single space: " "

Label config reference

For your convenience, here's the summary of options for window.AsgAdsInventory.settings.banner.label:

Option Type Default value What it does
enabled boolean false Toggles label on and off
position string top right Determines label position relative to the banner
text string Ads by Adspyglass Text of the label link
closeButton string Close Close button text. Set to empty string ("") to completely remove the close button
labelRowClass string "" Class to add to label row, so that you could style it as you like.

Per-banner configuration

You can set different label config for each banner with the help of data-settings attribute on the banner container. Just override global config by providing valid JSON inside that attribute. Values will be merged with the global config.

Let's see an example.

Suppose you have three banners on the page. You want to display label for all banners at top left, except the second banner. For the second one the label should be hidden. Also, you want to hide the close button for the last one and change its text to "Ads". Start with the global config. Enable the label as explained above: 

<script>  
  window.AsgAdsInventory = {  
    antiadblockDomain: 'my.anti-adblock.domain',  
    settings: {  
      banner: {  
        label: {  
          enabled: true  
        }  
      }  
    }  
  }  
</script>  

<div class="banners-container">  
  <div data-asg-ins data-spots="4287"></div>  
  <div data-asg-ins data-spots="4287"></div>  
  <div data-asg-ins data-spots="4287"></div>  
</div>
This setting will be applied to each banner on the page: To hide label of the second banner you need to set label.enabled to false. This corresponds to the following JSON: { "label": { "enabled": false } }. Just specify it in data-settings attribute of the banner: 
<script>  
  window.AsgAdsInventory = {  
    antiadblockDomain: 'my.anti-adblock.domain',  
    settings: {  
      banner: {  
        label: {  
          enabled: true,  
          position: 'top left'  
        }  
      }  
    }  
  }  
</script>  

<div class="banners-container">  
  <div data-asg-ins data-spots="4287"></div>  
  <div data-asg-ins data-spots="4287" data-settings='{ "label": { "enabled": false } }'></div>  
  <div data-asg-ins data-spots="4287"></div>  
</div>
Important gotcha: You must provide valid JSON. It means that all keys must be enclosed with double-quotes, as required by JSON standard. Using single-quotes inside the data-settings attribute like this: data-settings="{ 'label': { 'enabled': false } }" won't work, and there will be a warning in JS console: To change text and hide close button for the third banner, use the following config: { "label" : { "text": "Ads", "closeButton": "" } } (remember that empty string hides Close button completely): 
<script>  
  window.AsgAdsInventory = {  
    antiadblockDomain: 'my.anti-adblock.domain',  
    settings: {  
      banner: {  
        label: {  
          enabled: true,  
          position: 'top left'  
        }  
      }  
    }  
  }  
</script>  

<div class="banners-container">  
  <div data-asg-ins data-spots="4287"></div>  
  <div data-asg-ins data-spots="4287" data-settings='{ "label": { "enabled": false } }'></div>  
  <div data-asg-ins data-spots="4287" data-settings='{ "label": { "text": "Ads", "closeButton": "" } }'></div>  
</div>
Here you go: Note that you did not specify enabled or position for the third banner. It got these values from the global config. In the per-banner config you need to specify only values that differ from the global config.

Why do I have to specify "label" key in my data-settings?

We may add more settings to banners later, which do not relate to label. That's why we preferred to namespace label settings from the start.