CODEWITHSUNDEEP
androidcordovagoogle-dfp
ToddD
ToddD

Reputation: 95

Google Publisher Tag ads in Cordova Android app

I'm working on an Android app within the Cordova 2.2.0 framework, and I'm having a lot of trouble getting clickthroughs working on GPT-based ads. (Surely I'm not the first person to try this.)

GPT renders friendly IFRAMES with the ad creative, containing essentially <a href="http://www.example.com/clickthrough/yadayadayada" target="_blank">(ad creative)</a>

In the browser and on iOS, tapping the ad will open the clickthrough in a new browser window, which is what I want to happen here. But on the native app on both my Kindle Fire HD and Droid 4, tapping the ad opens the clicktrough page within the IFRAME space, so you get the top-left 320x50 of the page rendered within my other page.

I've tried editing the whitelist but that's not an option because the creative can come from anywhere (we use several ad networks to fill our remnant ads), and because the ad renders in an IFRAME that I can't control I haven't been able to wrap the HREF in javascript:window.open(), and I haven't found a way to have the Android Java code intercept those clickthroughs.

I've also looked into AdMob, but my boss doesn't want to change the ad experience from our mobile website, which has between one and three ads scrolling with the page.

EDIT Being able to render an AdMob view on the page where the ads go, so that the view scrolls with the website, would work.

What could I do to open those clickthroughs in a new window?

Thanks for your help.

Upvotes: 4

Views: 1268

Answers (1)

ToddD
ToddD

Reputation: 95

I added this JavaScript code to the function that loads or refreshes the ads:

$('.advertisement iframe').each(function() {
    $(this).one('load', function() {
        makeOpenWindowHref(this);
    });
});

with the function:

function makeOpenWindowHref(element) {
    if (isNativeApp){
        $(element).contents().find('a[href^="http"]').each(function() {
            $(this).click(function(event){
                event.preventDefault();
                navigator.app.loadUrl($(this).attr("href"), {
                    openExternal:true
                });
            });
        });
    }
}

This essentially modifies the IFRAME contents to make the clickthrough open into a new window using the Cordova navigator.app.loadUrl() function.

Upvotes: 3

Related Questions