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:
- TabUnder
- TabUp (default)
- PopUp
- PopUnder
- 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']; } };
Request Modes
By default, our code works in asynchronous mode, meaning it doesn't block the website and browser in any way while waiting for an ad from the ad server (the ad server needs some time to find an ad for a visitor). However, this has a side effect—a new tab may open and immediately close if the ad server returns no ad for the visitor. To avoid such an effect, we recommend configuring fallback campaigns and configuring longer capping, as explained above.
You can also enable synchronous mode, which doesn't have the mentioned side effect. In this mode, the code will request the ad server before opening any tabs, but it may happen that after a click, the page will "freeze" for a bit of time.
To enable synchronous mode, you have to add "fb: false" parameter to the code configuration:
_ASO.PuOptions = {
idzone: XXXXX,
fb: false
};
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 used to place popup tags on websites more easily. 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.