jQuery Mobile – Google Ads and Google Ads Mobile combined

Some time ago I had to combine Google Ads and Google Ads Mobile on my page, Google Ads for the tablets, Mobile for the mobile devices.

First I added the following HTML/JavaScript before the body tag:

 HTML | 
 
 copy code |
?

01
<div id="adsense_mobile_top" style="display:none;">
02
    <script type="text/javascript"><!--
03
      window.googleAfmcRequest = {
04
        client: 'xxx',
05
        format: 'xxx',
06
        output: 'html',
07
        slotname: 'xxx',
08
      };
09
    //--></script>
10
    <script type="text/javascript"    src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>
11
</div>
12
<div id="adsense_top" style="display:none;">
13
    <script type="text/javascript"><!--
14
        google_ad_client = "xxx";/
15
        google_ad_slot = "xxx";
16
        google_ad_width = xxx;
17
        google_ad_height = xxx;
18
        //-->
19
    </script>
20
    <script type="text/javascript"
21
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
22
    </script>
23
</div>

Make sure you fill in your own Adsense data.

Then I added the following HTML code to the place where I wanted the ad to be:

 HTML | 
 
 copy code |
?

1
<div id="google_ads_top">
2
            <div align="center">
3
            </div>
4
</div>

Then I added the following javascript before the body tag:

 Javascript | 
 
 copy code |
?

01
<script type="text/javascript">
02
function loadAd(){
03
    var mobile = (/iphone|ipad|ipod|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));    
04
    var ads_top = $("#adsense_top").find("iframe");    
05
    if (mobile || ((/android/i.test(navigator.userAgent.toLowerCase())) && (/mobile/i.test(navigator.userAgent.toLowerCase())))) {  
06
        ads_top = $("#adsense_mobile_top").find("iframe");
07
    }
08
    else
09
    {
10
        ads_top.css('position', 'static');
11
    }
12
 
13
    $(ads_top).appendTo("#google_ads_top div");
14
    $("#adsense_top").remove();
15
    $('div').live('pagehide',function(event, ui){
16
        $(ads_top).appendTo("#google_ads_top div");
17
    });
18
}
19
$('div[data-role=page]').live('pageshow', loadAd);
20
</script>

And there you have it, a website that gets a new ad on every pageview, and selects the ad on the kind of device you have.

There are multiple ways to base ads on the kind of device, but I needed a JavaScript solution because I just heavy cache on the pages. PHP selecting won’t work.