Ad blocker breaks browser app with admob


#1

I have an app with a simple admob bottom banner that works great. Setting up a web version and it works great - unless you have an ad blocker (so most people who use the internet).
I don’t really care if the ads aren’t shown on the web version but I’d like it to still be functional. As-is the client denying loading the admob plugin stops everything.

Is there way to selectively not use admob in the web version (while maintaining the same codebase)?


#2

Have you tried attaching a catch to your Admob.createBanner() ?


#3

I don’t think it even gets that far, because Admob can’t exist if the js file is never loaded.


#4

I don’t understand your post. But you could use adMob only when this.platform.is('cordova') if all you care about is detecting the browser platform. Managing adblocking on a device takes more.


#5

The problem is that I have this

import { AdMob } from ‘@ionic-native/admob’;

in my app module, and a service that imports it as well and actually handles the setup. The browser is using cordova in production. The import requires that AdMob and such are defined, which happens in js files that are loaded by the browser. Ad blockers prevent these from being loaded. Because it’s all intertwined this breaks js on the page and therefore the functionality a whole.

I cannot rely on this.platform.is('cordova') - firstly the browser build is cordova, and more importantly the error occurs when the browser fails to fetch the js file which happens well before the platform is ready.


#6

Does it actually fail on the import or only on the code that tries to use it?


#7

On the import, the code never tries to use it on the browser


#8

Ok, so you would be looking to not execute this import in specific environments. I have no idea if this is possible.

Maybe experiment with renaming the AdMob.js file?
What rule from the adblocker is triggering? (Some adblockers show this)


#9

Something is strange here. I just tested, and I can use ionic serve with no problems, even when importing AdMob.


#10

ionic serve isn’t the browser build, ionic serve doesn’t use cordova by default.

ionic build browser --prod


#11

And you can’t detect that environment with this.platform.is('core') ?


#12

Yes I can, but this error occurs before I am able to do this anywhere because it’s breaking at the app module initialization when it’s unable to import the js file.

If I remove all usage of admob, but just have it imported this error kills the application. As @Sujan12 said, it’s like I would need a conditional import.
I’m not sure how to go about experimenting with renaming the files since it’s all built programatically.


#13

How exactly are you adding Admob to your project? (links to plugins used please, so we can look into them)


#14

I’ve never run into this. But if I were faced with it, the first thing I would do would be to place the import only in code that never executed and see if I could get that working. Like page DummyPage that never appears in the nav stack.


#15

Thanks @Sujan12

Plugin:

$ ionic plugin add cordova-plugin-admobpro
$ npm install --save @ionic-native/admob

app.module.ts:

import { AdMob } from '@ionic-native/admob';
import { AdmobService } from '../providers/admob-service';

...

providers: [
        ...
        AdMob,
        AdmobService,
        ...
    ],

The AdmobService just wraps the execution of things in an isDevice() check to prevent it from running in the browser. The actual admob code is never executed unless isDevice() is true

admobservice.ts:

import { AdMob } from '@ionic-native/admob';

...

isDevice(): boolean {
        if (!this.platform.is('cordova')) {
            return false;
        }

        if (this.platform.is('core') || this.platform.is('mobileweb')) {
            return false;
        }

        if (!this.platform.is('ios') && !this.platform.is('android')) {
            return false;
        }

        return true;
    }

#16

What documentation are you following to set AdMob as a provider? It’s a native plugin. My import is in app.component.ts, because I want a banner on every page in the non-pro version of the app.

The logic for your AdMobService is small enough to fit sensibly into app.component.ts.

Am I missing something?


#17

So please note that what I am suggesting is a hack as I have no idea how to solve the real problem, but this could already be enough to get your app working again:

Fork the cordova plugin on Github and make the following changes:

  1. Rename this file: https://github.com/floatinghotpot/cordova-admob-pro/blob/master/www/AdMob.js
  2. Edit this to reflect the new name: https://github.com/floatinghotpot/cordova-admob-pro/blob/master/plugin.xml#L20-L22
  3. See if this fixes your problem (uninstall the old plugin and reinstall using your Github URL instead of cordova-plugin-admobpro)

(Ionic Native should have no problem with this at all.


#18

Thanks @Sujan12 I understand it’s a hacky workaround, but I’ll give it a try, can’t hurt :slight_smile:

@AaronSterling - as of Ionic 3.x native plugins are injected as providers. My implementation is correct, that’s not really an issue here. I have ads successfully serving on devices, and successfully not being served on browsers. The application is working as intended on the browser, it’s just this specific edge case with adblock that breaks. Unfortunately it breaks early enough that I can’t do anything to avoid it in the usual scope.


#19

I forked cordova-pluging-admob-free and was able to change the file names so it at least works in chrome with adblock-plus.

On the off chance that someone else has this rare edge case here is my fork: https://github.com/beck24/cordova-plugin-admob-free

Please don’t use it to show ads though, I don’t want ad blockers to add my changes to their blacklist. The intent of it is to use the in the browser, but still have admob on the mobile app.