Including advertising into AppPresser

Today we are going to look at including iAd, Apple’s Ad Service, into our app. To do this, we are going to use Phonegap’s own iAd plugin.

Create a Child Theme

To start, my first tip is to create a child theme. If you are not currently using a child theme, I would suggest running through the video found here. Child themes allow you to make changes the AppTheme (or any theme for that matter) without fear of losing any customisation when running theme updates. They are simple to set up and save so much time and anguish in the long run.

Include the JS

Next, you will need to include the javascript required to make iAd work. First of all, in your theme, create a folder called js. This is where we will save the new code

Now copy the following code into your favourite text editor. Save this file as iad.js and save it into the js folder you just created

document.addEventListener("deviceready", onDeviceReady, false);

document.addEventListener("onClickAd", onClickAd, false);
document.addEventListener("onReceiveAd", onReceiveAd, false);
document.addEventListener("onFailedToReceiveAd", onFailedToReceiveAd, false);

function onDeviceReady() {
if ( window.plugins && window.plugins.iAd ) {
window.plugins.iAd.createBannerView(
{
'bannerAtTop': true
}, function() {
window.plugins.iAd.showAd( true );
}, function(){
alert( "failed to create ad view" );
});
} else {
alert('iAd plugin not available/ready.');
}
}
function onClickAd() {
// count click
}
function onReceiveAd() {
// do whatever you want
}
function onFailedToReceiveAd( ret ) {
alert( ret.error );
}

Enqueue the script

We need to tell our theme that this code is now present. To do this, we will use wp_enqueue_script(). We use this for two reasons. The first, is simply because it is the right way to do it. The second is because we only want the code to display when the app is in use and we can set that by using the dependencies.

To include this, we will need to create a functions.php for our child theme. The functions.php is a file that allows us to add new features and functionality and is similar to how a plugin works. We will create this file in our Child Theme folder. Once created, we will add the following:

function iad_scripts() {
wp_enqueue_script( 'iad', get_stylesheet_directory_uri() . '/js/iad.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'iad_scripts' );

Basically, all we are doing here is telling our website that we need to include a file called iad.js. The enqueue script is being told to find the location of our stylesheet and from there, look inside a folder called js and this is where it will find our file.

We can also see our array(‘cordova-core’) element. This is the bit that tells wp_enqueue_script to only run when the app is open. As a test, you could change it to array(), reupload your functions.php and view the source of you code. You will now see the iad.js code being called. Change the code back to array(‘cordova-core’), refresh your site and you will notice it has now disappeared.

If you do not already have anything in your functions.php, remember to include an opening PHP tag.

…and finally.

Our last step is to now tell our Phonegap app to include the iAd plugin. To do this, all we need to do is amend our config.xml file. This is found within your www folder which is a part of your pg-build available to download in your AppPresser account.

We need to add the following line to the list of plugins. The list of plugins will start with the text ‘<gap:plugin name=’ :

<gap:plugin name="com.rjfun.cordova.plugin.iad" version="0.1.6" />

Once you have included this, you can now save your file, re-zip your www folder and upload to Phonegap and that’s it!

If you need any further help, feel free to comment or ask in the forums.