[email protected] (800) 447-7307

Tutorial: Create a Pop Under Ad

Pop Under ads are quickly becoming the most popular ad format for website owners, WordPress users, and bloggers. Most pop under ads are triggered when a visitor clicks on a specified link on a website. For instance, if the most popular link on your beauty blog was ‘8 Tips to Healthy Hair’, you might want to add a pop under ad to this link. When the user clicks on your ‘8 Tips to Healthy Hair’ link, the pop under ad will appear in the current window and the ‘8 Tips to Healthy Hair’ article will appear in a new tab. When the user is done reading this article, after they close it, they will see your pop under ad behind it.

If your visitor clicks on an offer that is displayed in your pop under ad, you will earn around 3-20 cents, depending on the value of the offer. We must caution you that you please do not click on your own offers as this will result in a ban.

1. Sign In

Visit https://www.cpalead.com and click the login button in the upper right corner. If you don’t have a CPAlead account, click on the Sign Up button.
sign_in

2. Navigate to Pop Under Ad

Once signed in, on the CPAlead publisher dashboard, click on the Tools menu on the left then select ‘Pop Under Ad’.
navigate

3. Select a Pop Under Template

First you will need to select a template you would like to use for your Pop Under ad. If you wish to not use a template, simply skip this step and select Pop-Under Size below.

You will see that CPAlead has 5 different templates to choose from.

pop_under_template_selection

Adjustable Desktop iFrame

This template is for desktop traffic only and the number of rows and columns CAN be adjusted using the ‘Select Pop-Under Size’ drop down menus. Pop Under Ads designed using this template will display offers inside of an iFrame that is set to the width and height of your choice.

Adjustable Desktop Full Window

This template is for desktop traffic only and the number of rows and columns CAN be adjusted using the ‘Select Pop-Under Size’ drop down menus. Pop Under Ads designed using this template will display offers inside of a full window / full page.

pop_under_adjustable

Mobile Template

This template is for mobile traffic only and the rows and columns CANNOT be adjusted unless you edit the HTML manually. This template will use the full width and height of your visitor’s mobile browser to display our top offers.

pop_under_mobile_template

Alternative Desktop iFrame

This template is for desktop traffic only and the rows and columns CANNOT be adjusted unless you edit the HTML manually. Pop Under Ads designed using this template will display offers inside of an iFrame that is set to the width and height of your choice.

Alternative Desktop Full Window

This template is for desktop traffic only and the rows and columns CANNOT be adjusted unless you edit the HTML manually. Pop Under Ads designed using this template will display offers inside of a full window / full page.

pop_under_alternative

4. Set iFrame Size

This option allows you to change the size of the iFrame. If you selected a template, you can change the iFrame size if you like, but if you are not experienced with HTML or CSS, we recommend that you don’t change the iFrame size.
select_iframe

5. Choose how the Pop Under Ad Opens

The Pop Under Ad can be displayed different ways. Below are the three options available to you.

pop_under_method

Open ad in current tab and open destination page in new tab

This means when the link you set to trigger a pop under ad is clicked, it will show the ad in the current window your visitor is on, and then pop up the link’s destination in a new tab which will now be your visitor’s focus. When your visitor closes the destination link, they will see the pop under ad.

Open ad in new tab and open destination page in current window

This means when the link you set to trigger a pop under ad is clicked, it will show the ad in a new window and then open the destination page in the current window. This function is more like a pop up ad.

Open ad in new (iframe size) window behind destination page in current tab

This option only appears for iFrame templates. If selected, this will display the pop under ad behind the current page in an iFrame. On some browsers it appears in front of the current page like a pop up, we are still working on a fix for this.

6. If visitor is using mobile device, display

This option will allow you to select another pop under ad you designed to be displayed if the visitor is using a mobile device. You will first need to design the mobile pop under ad, then save it. When creating the desktop version of the pop under ad, you will see the mobile pop under ad you designed appear in the drop down menu. Simply select the name of your mobile pop under ad and this ad will be displayed to all mobile traffic and your current pop under ad will be displayed to all desktop traffic.

mobile_pop_under_selection

7. Set CSS Class for Trigger Event

This is the CSS class on your website, blog, or WordPress site that will trigger the pop under. This means all ‘a href’ links that use this specified class will trigger this pop under.
For instance, if I wanted the pop under to appear every time a visitor goes to my ‘About’ page on my website, I could add the class ‘pop’ to this link:
about_before
and it would look like this:
about_after
Then on my Pop Under creator on CPAlead, I would set the CSS Class for Trigger to ‘pop’, like this:
pop_under_trigger_set
You will need to add the Javascript code to make this active, but don’t worry I will detail that later.

8. Banner Name and Save

This is where you will set the Pop Under Ad name so you can find it later in your ‘Manage Ads’ menu. If you don’t wish to edit the HTML or CSS of this ad, you can save your ad now.
custom_ad_name

9. Editing HTML and CSS (Optional)

If you wish to edit the HTML and CSS of the template you select or if you wish to create your own template, please refer to our Custom Ad tutorial, steps 6 and 7.

10. Place Pop Under on Website, Blog, or WordPress Site

Once you have saved your Pop Under ad, you will be redirected to the ‘Manage Ads’ menu. Here you will see all ads you have created prior and also the ad you just created. For the Pop Under Ad you just created, click on ‘Get Code’.

Now you will see a code like this displayed:
pop_under_placement

Copy this code and place it on the webpage your pop under will appear. Next you will need to set which links trigger the pop under by setting a CSS Class, please revisit step 7 above.

If you have set a mobile version of the pop under to appear for mobile traffic (See step 6 above), you will need to make sure the desktop and mobile version of the pop under are triggered on the same class. Also please note that you will only need to use the placement code of the desktop version. If your visitor is using a desktop device, they will see the desktop pop under you designed. If your visitor is using a mobile device, they will see the mobile version you designed.

Watch our video tutorial! If you need some extra help, please watch our video tutorial below. If you still have questions, please email suggestions (@) cpalead.com. Also please like our YouTube video if you like this feature, this will encourage us to make more like it.

cpalead profile avatar picture

CPAlead

CPAlead is a private lead generation network specializing in CPA offers, PPC advertising, and CPI mobile app installs. Since 2007, CPAlead.com has paid out over $100,000,000 to publishers from all over the world. With advanced custom tracking and evolved traffic quality measures, we're able to provide unrivaled lead generation offers, PPC advertising traffic, and CPI mobile app installs to advertisers and publishers alike.