Great plugin! Implemented within minutes and simple for end users to manage.
Client is particularly happy with the reporting features of the plugin.
BFowler for Ad King Pro

Latest Tweets

Ad King Pro has FINALLY has an update! A cleanup really with a few tweaks to a couple of features. More to come! https://t.co/Fekax5oh1Z
Your using Ad King Pro right? Your site is responsive, surely. Implement adverts so their mobile friendly! http://t.co/9ouYGcYRMJ
Invoice King Pro and Ad King Pro both receive some amazing new features that you will want to know about! http://t.co/FBgDllGJan
Follow KingProPlugins on Twitter

Using Ad King Pro in a responsive mobile friendly way

There has been some interest in using Ad King Pro on responsive sites and replicating a mobile apps ads by having a sticky advert at the base of the screen. There are endless ways you could set this up, but I’m going to run through a typical and simple scenario here to help you get rolling.

Take the scenario that you have a banner in your sidebar (250px x 300px) and you would like a version of that advert at mobile views from 768px screen width and below using another image (768px x 96px).

Step 1: Create relevant ‘Advert Types’

Ad King Pro create advert typesIn order to separate the differences in advert sizes and control the positioning, creating different advert types allows you to control the different size types and their position on your site. By default, there is a ‘sidebar’ advert type that you can (or may already) use for your sidebar in the desktop version. Go ahead and create a new advert type called “Mobile Footer”.

Step 2: Create and assign the banners

Ad King Pro adding banner imagesOnce you have the advert types created and the 2 banner images ready to go, create 2 new adverts, assigning each to their corresponding advert type – 250px x 300px advert using the ‘sidebar’ advert type and the 768px x 96px advert using the ‘mobile footer’ advert type.

Step 3: Add adverts into page

Depending on how your theme is setup, you may be able to use the widgets or you may need to be required to add the PHP do_shortcode function into your theme files. Either way you will achieve the same result.

Widget method

Ad King Pro creating widgetsLocate your sidebar widget area and drag on your first Ad King Pro widget into that area in the position you would like your ‘sidebar’ banner to display. You are now given details to display you advert. For this example, we will be displaying a single banner in this area, but if you have the want/need to display a rotating or randomly chosen set of adverts, then it is chosen at this point. For the first one, choose the ‘Sidebar’ advert type, then choose the ID of the banner created for the sidebar, in the case of the example, it was 359. The ‘# to render is irrelevant at this stage as we have chosen a single banner ad. Once that is done, click the save button and drag on another Ad King Pro widget directly below the first one you just filled out. This time, you want to select ‘Mobile Footer’ advert type then choose the ID of the banner created for the mobile footer, in the case of the example, it was 361. Once selected, click save.

Template Method

This method will generally be used by developers and theme creators as you are required to modify the code of the themes templates your using. This example will be acting on the assumption that the sidebar.php file has been modified to not use widgets and is a ‘hardcoded’ sidebar. Any developer would be able to take this example and implement it into their site build as they need it.

All that is required for this is two “do_shortcode” functions added, and the shortcode for each banner used in each function. Information about the Ad King Pro shortcodes can be found under the how-to tab of the settings page in the admin, or you can use the shortcode builder in each editor. For the example, the two shortcodes are as follows:

<?php echo do_shortcode('[[adkingpro banner="359"]]'); ?>
<?php echo do_shortcode('[[adkingpro banner="361" type="mobile-footer"]]'); ?>

Setting the type on the mobile footer shortcode forces the output to change the class of that container from ‘sidebar’ to ‘mobile-footer’. This is important so we can differentiate between the two type of adverts.

Step 4: Add CSS to manage the display of the adverts

Now you have both banners in the sidebar, its time to get to the fun part of the setup. Depending on the theme your using and where you have positioned the desktop advert, this may or may not already be responsive by the sidebar disappearing or moving to a different location. This is a case-by-case scenario and can not be given example code for styling and positioning.

What we can do here is manage the mobile footer banner. At the beginning of this tutorial, we stated that the banner will begin to display at a window width of 768px. This is managed by CSS media queries. Developers can (and should) add this code in the themes external CSS file, however if your not familiar with coding CSS files, or would just like to keep this CSS separate to the rest of the site, then you can use the “Custom CSS” box in the Ad King Pro settings page.

Firstly we need to hide the mobile footer banner from the desktop view. We can do this by using the classes supplied by the plugin on the adverts container:

.adkingprobanner.mobile-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.adkingprobanner.mobile-footer img {
    width: 100%;
    height: auto;
    display: block; /* removes white space under the image */
}
@media (max-width: 768px) {
    .adkingprobanner.mobile-footer {display: block;}
    .adkingprobanner.sidebar {display: none;}
}

This should give you the following views:

This screen view is 769px and up

This screen view is 769px and up

This is the view at 768px - the width of an iPad portrait screen

This is the view at 768px – the width of an iPad portrait screen

 

The banner from 768 down will scale the banner to the width of the screen size

The banner from 768 down will scale the banner to the width of the screen size

If not, you may be missing the meta viewport tag in your header. Heres an example:

<meta name="viewport" content="width=device-width, initial-scale=1" />

View the demo

As mentioned earlier, there are multiple ways you could go about doing something like this, for example, if you wanted to have a thinner banner at 768px, then you could do 3 versions and have a 768px x 66px version until 480px wide. Take it even further and follow what Apple recommend for their apps – have a version for 480px and one for 320px since this banner will take up a bit of room, more so at landscape.

Having a thinner version for landscape isn’t such a silly idea. Take the best of both worlds and add a tweak to it and you could have a banner ad working perfectly for not only the width of the screen, but the orientation! Why not have desktop, landscape and portrait versions:

.adkingprobanner {display:none;}
.adkingprobanner.sidebar {display: block;}

@media only screen
and (max-width : 768px)
and (orientation : landscape) {
.adkingprobanner.sidebar {display: none;}
.adkingprobanner.landscape {display: block;}
}

@media only screen
and (max-width : 768px)
and (orientation : portrait) {
.adkingprobanner.sidebar {display: none;}
.adkingprobanner.portrait {display: block;}
}

Thats a rough concept of course and could be built upon but you get where I’m going there.

So hopefully that gives you an idea as to how to setup Ad King Pro to utilise banners responsively. I would suggest turning off logging impressions when using the above method as you will get incorrect results.

If you have any other ways of using Ad King Pro responsively, I’d love to hear them in the comments below.