MFPI: How to implement a Mobile Fullpage Interstitial ad zone
The mobile full page interstitial is a postitial ad that appears between page loads on a website. Fullpage Interstitial is triggered on clicks only and displays the ad between the page of origin and destination.
Interstitials are a popular ad choice because of their size and is a great alternative to the Mobile Popunder format. It has a high CTR and high viewability.
Ad filter options (Products and Labels) are available so you can control what types of ad can be shown to your users.
The interstitial is fully responsive and it is fully compliant with Google and The Better Ads Coalition, featuring a ‘Close Ad’ button in the top right hand corner of the ad format, allowing the user to close the interstitial and continue to view the websites content.
The format is very user friendly, the creative is a 900x1600 banner on the vertical with a maximum size of 150KB, ensuring the ad is aligned with Google and the IAB.
Step 1
In your admin panel under Publisher go to ‘Sites & Zones’ then click ‘New Zone’. A drop down menu will appear with a list of your websites, select the website you want to enable FullPage Interstitial for. This will open the ad format selection page. Click on the drop down menu ‘Mobile’, select ‘Mobile Fullpage Interstitial’ and click ‘Next.’
Step 2
Name: Personalise the ad zone name to suit your own needs (at least 5 characters long).
Category (default): This is automatically selected based on the category of the site you selected in the previous step.
Subcategory (optional): We recommend that you don’t select a subcategory in order to maximise your earning potential.
Frequency capping: You can now use the radio button to choose between Clicks and Time.
- Time: Determine how many times the interstitial will appear within a period of time.
- Clicks :Determine how many clicks it takes to show the ad for the first time and how many clicks will make it appear every time after that. Note that this method only considers clicks on links
Example: If you choose "1st time after 3 clicks, then after every 15 clicks ", the ad will show after the user's first 3 clicks on the site, then again with every 15 clicks onwards.
Trigger method : Determines whether links need to have a specific class for the Mobile Fullpage Interstitial to trigger.
Browser settings : Determine on which browsers your ad should be displayed:
- All: Choose this option to show the ad zone on all browsers.
- Chrome Only: Choose this option to only show the ad zone on Chrome.
- Non-Chrome Only: Choose this option to show the ad zone on all browsers except Chrome.
Fallback HTML: Enable this option to display a custom HTML when there are no campaigns available to show. Switching on this option opens a few more options for your zone:
- Type: A Soft Floor means that we will also run CPC and CPA campaigns that could have an average eCPM higher than your floor CPM, meaning that the floor is not 100% guaranteed. A Hard Floor means we will only run CPM and Smart CPM campaigns on this zone, meaning that the floor is 100% guaranteed.
- Floor CPM: The minimum CPM required for campaigns to appear in this zone.
Note that it is required to add an Alternative HTML tag when you enable Fallback HTML.
Step 3
Block Ad type: This allows you to block advertising based on the audience for your traffic. “General” advertising will show an ad that promotes a product suitable for all visitors.
Block Specific Products: You are also able to block specific product types that you don’t want to display in your ad zone. Please note: Blocking too many products could result in no ads showing or reduce your revenues significantly.
Once these steps are completed click “CREATE”.
Step 4
Once you have clicked ‘Create’ the ad snippet code will be generated which you will need to embed within the tag in your site. The id zone number generated will be a unique number of the ad zone you have created.
HTML Example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Fullpage Interstitial</p>
<script type="application/javascript" data-idzone="8910112" data-ad_sub="20001" data-ad_tags="humour,general,games" data-ad_frequency_period="5" data-ad_frequency_count="1" data-browser_settings="1" data-ad_trigger_method="2" data-ad_trigger_class="triggerfull" src="https://a.realsrv.com/fp-interstitial.js"></script>
</body>
</html>
Note: The page should be mobile responsive otherwise the ad will not display correctly.
Using Popunders and Fullpage Interstitials:
You can combine a Mobile Fullpage Interstitial and a Mobile Popunder on the same webpage by setting different triggering options:
Option 1 - Triggering both formats after a number of user clicks
Let's say you set the Popunder ad format with Frequency Capping 1x24h, then the Mobile Fullpage Interstitial set to be triggered in the 3rd click and then after every 15 clicks, both set with the Click on Links method. So now the end user will see the Popunder triggered on their 1st click and then the user will see the Mobile Fullpage Interstitial in their 3rd click and 15 clicks later see the Interstitial ad once again.
HTML example Pop & Mobile Full Page in the same page with freq capping Clicks and using subID and keywords:
<html>
<head></head>
<body>
<!-- Mobile popunder
<script type="text/javascript">
var ad_idzone = "1234567",
ad_tags = "humour,general,games",
ad_sub = "100001",
ad_popup_fallback = false,
ad_popup_force = false,
ad_chrome_enabled = true,
ad_new_tab = false,
ad_frequency_period = 1440,
ad_frequency_count = 1,
ad_trigger_method = 3;
</script>
<script type="text/javascript" src="https://a.realsrv.com/popunder1000.js" />
Mobile Fullpage
<script type="application/javascript" data-idzone="8910112" data-ad_sub="20001" data-ad_tags="humour,general,games" data-ad_first_trigger_clicks="3" data-ad_next_trigger_clicks="15" data-browser_settings="1" data-ad_trigger_method="3" src="https://a.realsrv.com/fp-interstitial.js" />
<a href="#">Click</a>
-->
Option 2 - Triggering both formats depending where the user clicks
You can also place triggers within the webpage to show both ad format when a user clicks on different thumbnails or when he clicks on a video to play or to pause a video for example. This works by setting up specific separate classes as triggers for each ad format.
HTML example Pop & Mobile Full Page in the same page and using subID and keywords:
<html>
<head></head>
<body>
<!-- Popunder
<script type="text/javascript">
var ad_idzone = "1234567",
ad_tags = "humour,general,games",
ad_sub = "100001",
ad_popup_fallback = false,
ad_popup_force = false,
ad_chrome_enabled = true,
ad_new_tab = false,
ad_frequency_period = 5,
ad_frequency_count = 1,
ad_trigger_method = 2,
ad_trigger_class = "triggerpop";
</script>
<script type="text/javascript" src="[https://a.realsrv.com/popunder1000.js](https://a.exosrv.com/popunder1000.js)" />
Mobile Full Page
<script type="application/javascript" data-idzone="8910112" data-ad_sub="20001" data-ad_tags="humour,general,games" data-ad_frequency_period="5" data-ad_frequency_count="1" data-browser_settings="1" data-ad_trigger_method="2" data-ad_trigger_class="triggerfull" src="https://a.realsrv.com/fp-interstitial.js" />
<a className="triggerpop" href="#">Popunder</a>
<a className="triggerfull" href="#">Mobile Full Page</a>
-->
Note:
- Classes must be included within a link tag \<a> containing simple text or an image.
- Classes must not contain a space. E.: "thumb nail" . Used dashes instead: "thumb-nail".
- Multiple classes are allowed as long as are set separated by commas: "test, thumb, etc".
Option 3 - Browser selection
Additionally, by using browser settings you could show the Mobile Fullpage Interstitial with one browser and the Popunder in another browser, as both formats have this option available. For instance:
By leaving disabled the option Chrome Enabled, this will stop the Popunder from being displayed in Chrome but not in the rest of the browsers.
If you also select the option Chrome Only for the Mobile Fullpage Interstitial, this format will only be displayed in Chrome.
In this scenario, both formats will be integrated within the same page but triggered depending on the browser the user uses to access your page.
HTML example Pop & Mobile Full Page in the same page with Browser Settings and using subID and keywords:
<html>
<head></head>
<body>
<!-- Popunder
<script type="text/javascript">
var ad_idzone = "1234567",
ad_tags = "humour,general,games",
ad_sub = "100001",
ad_popup_fallback = false,
ad_popup_force = false,
ad_chrome_enabled = false,
ad_new_tab = false,
ad_frequency_period = 1440,
ad_frequency_count = 1,
ad_trigger_method = 3;
</script>
<script type="text/javascript" src="https://a.realsrv.com/popunder1000.js" />
Mobile Full Page
<script type="application/javascript" data-idzone="8910112" data-ad_sub="20001" data-ad_tags="humour,general,games" data-ad_frequency_period="5" data-ad_frequency_count="1" data-browser_settings="2" data-ad_trigger_method="3" src="https://a.realsrv.com/fp-interstitial.js" />
</a><a href="#">Click</a>
-->
Setting up Desktop and Mobile Interstitials within the same site.
Our fullpage interstitial is able to detect the environment (mobile or desktop) used to access the website and serve the corresponding ad.
However, depending on your site set up, you might require an additional set up to make sure the Fullpage interstitial is served for the specific intended device. While you should try to design and develop the code yourself, you can find below an example of how this can be achieved using Jquery.
HTML Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.3.2/mobile-detect.min.js"></script>
</head>
<body>
<h1>Detect FPI based on device</h1>
<script type="text/javascript">
var s = document.createElement("script");
s.type = "text/javascript";
window.onload = function(e) {
if ("function" === typeof MobileDetect) {
var detector = (new MobileDetect(window.navigator.userAgent));
if (detector.mobile()) {
s.setAttribute("data-idzone","3709529");
s.setAttribute("data-ad_frequency_count","1");
s.setAttribute("data-ad_frequency_period","5");
s.setAttribute("data-type","mobile");
s.setAttribute("data-browser_settings","1");
s.setAttribute("data-ad_trigger_method","2");
s.setAttribute("data-ad_trigger_class","test");
s.setAttribute("src","https://a.realsrv.com/fp-interstitial.js");
}else{
s.setAttribute("data-idzone","4217064");
s.setAttribute("data-ad_frequency_count","1");
s.setAttribute("data-ad_frequency_period","5");
s.setAttribute("data-type","desktop");
s.setAttribute("data-browser_settings","1");
s.setAttribute("data-ad_trigger_method","2");
s.setAttribute("data-ad_trigger_class","test");
s.setAttribute("src","https://a.realsrv.com/fp-interstitial.js");
}
}
document.body.appendChild(s);
};
</script>
<a href="https://www.wikipedia.org/" class="test">Click here</a>
</body>
</html>
Note: The page should be mobile responsive in order to display the appropriate fullpage interstitial.
Having more than one Mobile Fullpage Interstitial in one place
We do not recommend having more than one Fullpage interstitial in one place, as there are other ways to filter your traffic for better visibility (such as via keywords or via sub IDs).
However, if still want to have different Mobile Fullpage Interstitial zone IDs, then please make sure that each zone ID has a different class trigger. You can follow a similar implementation as Option 2 for Popunder + Fullpage interstitials.
And that’s it! If you have any problems with setting up your Mobile FullPage Interstitial zone, please contact your Account Manager or a Customer Success Specialist here.