Question

I created a mobile application using the jQuery Mobile Framework. All pages are loaded within index.php (using <div data-role="page" id="title">).

In the footer of each page, I added Admob code:

<div data-role="footer">
 <script type="text/javascript">
  var admob_vars = {
  pubid: 'XXXXXX', // publisher id
  bgcolor: 'FF9119', // background color (hex)
  text: 'FFFFFF', // font-color (hex)
  test: false // test mode, set to false to receive live ads
   };
 </script>
 <script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>
</div>  

The result is that on all pages the same ad is shown, perhaps this is caused by the fact that all pages are loaded within index.php (so in index.php, about 10 ads are loaded at the same time).

Any idea how to fix this? How can I show different ads? Adrotation for each page request => what jQuery function is triggered?

Thanks!

Answer 1

You should remove all the hard coded calls and do something like that:
1. Bind a call to inject this code to ‘pagebeforeshow’ event – so each time before a new page is being shown to the user you will fetch a new ad and show it.
2. How to fetch a new Ad:

Another option (I took form Admob doc):
You can programmatically display a new ad by putting an ad web page in an IFRAME:

   ...
   <iframe id="admob_ad" style="position: absolute; width: 320px; height: 48px; left: 0px; top: 0px;" noresize="noresize" frameborder="0" src="http://your_site.com/your_admob_web_page.html">
   </iframe>
   ...
   // refresh the IFRAME where you want to display a new ad
   var adIframeEl = document.getElementById("admob_ad");

   adIframeEl.src = adIframeEl.src;
   ...

`

Good luck.