This article contains information on configuring popups and some code examples. Besides, we explore various options you may want to use while running popup campaigns. Finally, we advise how and when to use these options.

To configure the code, you have to add options as shown below:

<script>
(function(w,a){
  w[a] = w[a] || {};
  w[a].queue = w[a].queue || [];
  w[a].queue.push(function(){
    _ASO.PuOptions = {
        idzone: XXXXX,
        //options here
    };
    _ASO.loadPuHelper(); 
  })
})(window, "_aso");
</script>
<script data-cfasync="false" async="async" type="text/javascript" src="https://media.aso1.net/js/code.min.js"></script>

Available options for popup code

mode

Our ad server supports several popup modes, so you can use any of them (keep limitations in mind).

The list of supported popup modes:

  1. TabUnder
  2. TabUp (default)
  3. PopUp
  4. PopUnder 
  5. Special TabUp. It's modified mode #2 that uses custom behavior in Firefox and mobile devices.

Please note that modes 3 and 4 may not work correctly in some browsers, i.e., Google Chrome. If a browser doesn't support a mode, an ad will be opened as a TabUnder. We have a special fallback mode for Google Chrome that can be enabled by adding "chromeFallback: true" to the options.

_ASO.PuOptions = {
    idzone: XXXXX,
    mode: 1
};

bindTo

This option is used to bind pops to some specific tag names or classes. The value is an array of strings.

Use case: if you'd like to trigger ads only when users click on images rather than on any blank space (one of the recommendations for non-abusive popunders).

Example:

_ASO.PuOptions = {
    idzone: XXXXX,
    bindTo: ['a', 'img', '.content-area']
};

ignoreTo

It acts similarly to bindTo but restricts the popup script from opening when users click on ignored elements/ DOM nodes. The value is an array of strings.

Use case: you may not want to trigger ads on navigation or control elements, so you can use this option to disable that. For example, the play button on a video player or the top navigation menu. And that might be a good idea since this is one of the recommendations for non-abusive pops.

Example:

_ASO.PuOptions = {
    idzone: XXXXX,
    ignoreTo: ['.igmoreMe', '.playButton', '.mainMenu']
};

coverTags

You should use this option to trigger a pop when the user clicks on an IFRAME, VIDEO, or OBJECT element. The value is an array of strings.

Use case: to trigger popups on Youtube and other iframed players.

Example:

_ASO.PuOptions = {
    idzone: XXXXX,
    coverTags: ['iframe']
};

cappingLimit

Using this option, you can define the maximum number of popup openings within the capping interval (see below). Note this is client-based capping.

The default value is 1. The minimal possible value is 1.

In the example below, the popup will be opened as often as 3 times per hour:

_ASO.PuOptions = {     
    idzone: XXXXX,     
    cappingLimit: 3,
    cappingInterval: 3600 
};

cappingInterval (in seconds)

Using this option, you can define the time interval of client-based capping.

The default value is 30 sec. The minimal possible value is 1 sec.

In the example below, the popup will be opened as often as 1 time per hour:

_ASO.PuOptions = {     
    idzone: XXXXX,
    cappingInterval: 3600 
};

cappingStrategy

Using this option, you can define how capping counters are saved in the user's browser.

Possible values:

  • 1 – In memory. The capping counter resets after every page refresh or visitor navigates to another page. In other words, capping will work within one page only.
  • 2 – Browser storage (default). The counter is being saved in permanent storage, and it doesn't reset if the visitor navigates to another page.
  • 3 – Cookie-based storage.

In the example below, the popup will be opened as often as 3 times per hour:

_ASO.PuOptions = {     
    idzone: XXXXX,     
    cappingStrategy: 2
};

ifChrome

Since Google Chrome browser is the most sensitive to pop-up ad format, we added a special option to configure Chrome-specific options more easily.

The value of this option should be either false (if you need to disable popups in Chrome completely) or a callback function where you can specify Chrome-related options.

Popups disabled in Chrome:

_ASO.PuOptions = {
    idzone: XXXXX,
    ifChrome: false
};

Special config for Chrome:

_ASO.PuOptions = {
    idzone: XXXXX,
    ifChrome: function(opts) {
        opts.bindTo = ['.content-block'];
    }
};

IfMobile

It's good practice to have a special configuration for mobile devices. To make it easier, we added this option.

The value of this option should be either false (if you need to disable popups on mobiles completely) or a callback function where you can specify mobile-related options.

Popups disabled on mobile devices:

_ASO.PuOptions = {
    idzone: XXXXX,
    ifMobile: false
};

Special config for mobile devices:

_ASO.PuOptions = {
    idzone: XXXXX,
    ifMobile: function(opts) {
        opts.ignoreTo = ['.play-button'];
    }
};

How to configure popups – complete code examples

1. To comply with Google policies, you should not trigger pops on every site's element. Instead, you must only trigger them in the content area (navigation and menus must not trigger pops).

<script>
(function(w,a){
  w[a] = w[a] || {};
  w[a].queue = w[a].queue || [];
  w[a].queue.push(function(){
    _ASO.PuOptions = {
        idzone: XXXXX,
        ifChrome: function(opts) {
            opts.bindTo = ['.content-area-class'];
        }
    }
    _ASO.loadPuHelper();
  })
})(window, "_aso");
</script>
<script data-cfasync="false" async="async" type="text/javascript" src="https://media.aso1.net/js/code.min.js"></script>

2. To change popups behavior on mobile video sites, you may need to exclude the play button (or the entire player) from elements that trigger pops.

<script>
(function(w,a){
  w[a] = w[a] || {};
  w[a].queue = w[a].queue || [];
  w[a].queue.push(function(){
    _ASO.PuOptions = {
        idzone: XXXXX,
        ifMobile: function(opts) {
            opts.ignoreTo = ['.player', '.play-button'];
        }
    }
    _ASO.loadPuHelper();
  })
})(window, "_aso");
</script>
<script data-cfasync="false" async="async" type="text/javascript" src="https://media.aso1.net/js/code.min.js"></script>

Compact tag

This type of tag is for easier placing popup tags on websites. It contains one short line only.

Technically, it simply puts the standard tag described above into a single-file container.

The disadvantage of the compact tag is that it cannot be configured as flexibly as the standard tag. It supports a few options only via special parameters that are aliases for the standard tag parameters described above:

  • ci – cappingInterval
  • cs – cappingStrategy
  • m – mode
  • cifr=1 – coverTags: ['iframe']

Compact tag example:

<script data-cfasync="false" async src="https://media.aso1.net/js/pu/c.js#zid=35128&ci=30&cs=2&m=2"></script>  

Conclusion

We hope this article will help you to configure popups easily and, more importantly, according to your needs. Running pop ads may be challenging, so we wish you the best of luck.