Using observables to limit users from seeing ads in Angular app?

Question

I'm attempting to segment my members who are considered premium members and not have my AdMob ads appear in my app to them.

Currently, I simply initialize, configure and show my ads in my app.component.ts file like such:

AdMob.showBanner(options);

I tried to set an observable in my auth.service that allowed me to subscribe to if the user was a premium member:

premiumMember: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

if (premium) {
    this.premiumMember.next(true);
}

I then updated my app.component.ts file to subscribe to the premiumMember observable:

    this.auth.premiumMember.subscribe((response:boolean) => {
        if (!response) {
            AdMob.showBanner(options);
        }
    });

However, that does not appear to work, as the ads are always appearing, no matter the value of the observable.

Do you need to explicitly set the AdMob to hide if the observable is true? Any thoughts or ideas on the best practices to architect this out?

Answer 1

BehaviorSubject in angular will emit the initial/last emitted value. false in your case, because of your initial value specified was false.

premiumMember: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

This means that when your app.component.ts loads, the subscription on this.auth.premiumMember receives a value of false at first. So AdMob.showBanner() will run. And then when you .next() it will receive the new latest value.

I'm going assume you are using this package @capacitor-community/admob ?

My suggestion is to initialize and show the banner and then when a premium user logs in then use AdMob.removeBanner() to ensure the banner is removed.

So your code should change to this

AdMob.showBanner(options);

this.auth.premiumMember.subscribe((premiumMember :boolean) => {
    if (premiumMember) {
        AdMob.removeBanner();
    }
});