Feature Request: Dynamically Disable Ads for Paid Members

[tagomorisatoshi]

Description:
We would like to dynamically disable Google AdSense ads for users who are paid members. This feature is essential for providing a premium user experience to our paying customers.

Use Case:
Our platform offers a subscription model, and it is crucial that our paid members do not see any ads while using the service. Currently, we have no way to programmatically disable ads for these users, and we would like a solution to manage this dynamically based on the user's subscription status.

Proposed Solution:
Introduce a method to programmatically enable or disable Google AdSense ads based on the user's subscription status.
Provide documentation and examples on how to implement this feature.
Benefits:
Improved user experience for paid members by providing an ad-free environment.
Increased value proposition for our subscription model.
More control over ad display settings based on user roles.
We appreciate your consideration of this feature request and look forward to your feedback.

[carlosvaldesweb]

X2. I think that is good feature, a lot of site use this model.

[carlosvaldesweb]

I've tried different ways.
First, i've modified nuxt.config.ts to use pauseOnLoad in true

googleAdsense: {
        test: process.env.GOOGLE_ADSENSE_TEST_MODE === "true",
        pauseOnLoad: true,
      },

After that i've created a composable called useGoogleAdsense

export const useGoogleAdsense = () => {
  const runtimeConfig = useRuntimeConfig();

  const disableAds = () => {
    runtimeConfig.public.googleAdsense.pauseOnLoad = true;
  };

  const enableAds = () => {
    runtimeConfig.public.googleAdsense.pauseOnLoad = false;
  };

  return { disableAds, enableAds };
};

Bus it seems that pauseOnLoad is not reactive, so iit cannot enable google ads, any idea @danielroe @manniL ?

For now, i only can control manually adding ads, but i can't find solution for automatic ads

<Adsbygoogle
        v-if="!user?.is_subscribed"
        ad-slot="00000000"
        style="display: inline-block; width: 728px; height: 90px"
      />

[johnm1998]

I have a similar request, turning off adsense on some pages will be useful

[bloor]

Just make a wrapper component ?
This is what I use, it also gives me control on checking if adblock is enabled.
So $auth.adPolicy is either ad, placeholder or false

<template>
    <div :class="props.class" class="panel panel-default bg-gray-dark b-a-1 b-warning b-r-a-3 h-100 position-relative" v-if="$auth.adPolicy">
        <div class="text-warning text-end font-monospace" style="position: absolute; top: -20px; width: 100%;">
            GOOGLE ADVERTISMENT
        </div>
        <div class="panel-body p-a-0 panel-gab-line" v-if="$auth.adPolicy == 'placeholder'">
            <div class="gab-message">
                <Image :src="`/images/gab/${parseInt(Math.random() * 12)}.png`" />
                <p>Ads help us sustain the project. Please consider <span class="text-warning">whitelisting</span> us in AdBlock.</p>
            </div>
        </div>

        <template v-if="$auth.adPolicy == 'ad'">
            <ClientOnly>
                <Adsbygoogle
                    ad-format="fluid"
                    :ad-style="{ display: 'flex', height: '100%'}" />
            </ClientOnly>
        </template>
    </div>
</template>

<script setup>
    const props = defineProps({
        class: { default: undefined },
    })

    const { $auth } = useNuxtApp();
</script>

The end result is something like this:
STANDARD USER / NO USER

PREMIUM USER

[Flashx29]

Any updates on this feature?

[TheAlexLichter]

Possibly the easiest is using https://scripts.nuxt.com/ for loading the adsense script "conditionally" 👍