Anzeigenkennung

Anzeigenkennung nur bei vorhandener Werbung anzeigen

AdBlocker mit CSS erkennen

Eine Anzeigenkennung ist für den Benutzer eine wichtige Hilfe. Da der Adserver nicht immer Werbung ausliefert und einige User Adblock installiert haben, bleibt manchmal die Anzeigenkennung verloren im Content stehen. Im folgenden Beispiel wird die Überprüfung der Werbungsauslieferung mit CSS ermittelt und bei vorhandener Werbung erscheint eine Anzeigenkennung. Wird keine Werbung ausgeliefert bleibt die Anzeigenkennung unsichtbar. Mit CSS kann auch überprüft werden, ob Werbung angezeigt wird bzw. ob Adblock aktiviert wurde.

CSS Anzeigenerkennung

Für die folgenden Beispiele muss der Adblocker aktiviert / deaktiviert werden

Anzeigenkennung nur bei Werbung anzeigen

Anzeige

Sollte Adblock aktiv sein oder es wird keine Werbung ausgeliefert bleibt das Wort "Anzeige" unsichtbar.

Struktur Anzeigenkennung

<div class="adtest">
    <p class="label">Anzeige</p>
    <script type="text/javascript">
    <!--
    google_ad_client = "ca-pub-2528571520555859";
    google_ad_slot = "5146936528";
    google_ad_width = 320;
    google_ad_height = 50;
    //-->
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

CSS Anzeigenkennung

.adtest {
    overflow: hidden;
    margin: 0 0 3rem;
}

.adtest .label {
    margin: 0 0 -20px;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    color: green;
}

.adtest > *:nth-child(4) {
    display: block !important;
    margin-top: 20px !important;
}

Mit CSS testen ob Adblock aktiviert ist

Keine Werbung vorhanden oder Adblock aktiv

Sollte Adblock aktiv sein oder es wird keine Werbung ausgeliefert wird "Keine Werbung vorhanden oder Adblock aktiv" angezeigt.

Struktur Adblock-Test

<div class="adtest2">
    ... wie oben
</div>

CSS Adblock-Test

.adtest2 {
    overflow: hidden;
    margin: 0 0 3rem;
}

.adtest2 .label {
    margin: 0;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    color: red;
}

.adtest2 > *:nth-child(4) {
    display: block !important;
    margin-top: -20px !important;
    background: #fff;
}

Diese Beispiele mit Google Adsense lassen sich auch auf viele andere Anbieter übertragen.

Impressum