Rate Your Experience

Wie erstellt man CSS-Filter für KI-Platzhalter?

Geändert am: Fri, 2 Feb, 2024

In bestimmten Situationen können automatisch generierte Platzhalter aus verschiedenen Gründen an unerwünschten Stellen auftreten, beispielsweise aufgrund der hybriden Natur eines Layouts oder Theme-Änderungen/-Updates.

Um solche Probleme zu überwinden, haben Sie in den Einstellungen Ihres Dashboards die Möglichkeit, CSS-Insertionsfilter zu verwenden, um solche Probleme zu lösen. Beachten Sie, dass für die effektive Nutzung dieser Funktion eine gute Kenntnis von CSS-Selektoren empfohlen wird. Die Verwendung zu allgemeiner CSS-Filter kann unbeabsichtigt alle KI-Platzhalter auf der Seite blockieren.

Die Schritte, die Sie befolgen müssen, hängen von der Art des automatisch generierten Platzhalters ab, den Sie sehen:

Wenn der Platzhalter aus WordPress generiert wurde (der Platzhaltername ist mit "wp_" vorangestellt), müssen Sie eine Ausschlussregel im WordPress-Dashboard hinzufügen.
Wenn der Platzhalter aus unserem Platzhalter-Service generiert wurde (der Platzhaltername ist mit "gen_" vorangestellt), müssen Sie entweder eine Ausschlussregel in unserer Platzhalter-Service-Konfiguration oder im Ezoic-Dashboard hinzufügen.
Wenn der Platzhalter aus unseren Auto-Insert-Anzeigen generiert wurde, müssen Sie entweder eine Ausschlussregel in unserer Platzhalter-Service-Konfiguration oder im Ezoic-Dashboard hinzufügen.
Die Schritte, die Sie befolgen können, um dieses Problem zu lösen, sind wie folgt:

Auswahl Ihres Filters


1. Lokalisieren Sie die unerwünschte Anzeige

Angenommen, die folgende Anzeige erscheint innerhalb eines geordneten Listenelements. Die Anzeige mag unattraktiv aussehen, daher werden wir versuchen, einen CSS-Filter zu erstellen, um sie zu vermeiden:

image


2. Inspektieren Sie den HTML-Code

Um einen passenden CSS-Selektor für die Filterung zu bestimmen, müssen wir den HTML-Code untersuchen. Dies kann durch einen Rechtsklick auf das Listen- oder Anzeigenelement und Auswahl der Option "Untersuchen" erfolgen.

image

Dies sollte das Entwicklertools-Panel öffnen, wobei das Element im HTML hervorgehoben wird. In unserem Fall können wir sehen, dass die Anzeige innerhalb eines ol (geordnete Liste)-Elements eingefügt ist:

image

Tipp: Wenn Sie in den Entwicklertools über ein HTML-Element fahren, wird das Element auf der Seite hervorgehoben. Dies hilft Ihnen dabei, genau zu erkennen, welches Element Sie auswählen. Zum Beispiel ist das "ol"-Element unten im blauen Bereich hervorgehoben:

image

Ihren Filter anwenden


Das Hinzufügen des Filters im Ezoic-Dashboard (für Auto-Insert-Anzeigen und den Platzhalter-Service)

Navigieren Sie zum Menü "EzoicAds" >> "Anzeigenpositionen", wählen Sie den Tab "Auto-Insert-Anzeigen" aus und klicken Sie dann im Abschnitt "CSS-Filter" auf "ERSTELLEN":

image

Es gibt mehrere Möglichkeiten, ein HTML-Element auf einer Webseite mithilfe von CSS-Selektoren zu identifizieren. In unserem Beispiel würde ein einfaches "ol" ausreichen, um alle geordneten Listen auf der Seite zu filtern.

Wir könnten auch spezifischer mit unserem CSS-Selektor sein. Zum Beispiel könnten wir geordnete Listen filtern, die ein Kind eines div innerhalb eines Artikels sind:

image

Weitere Informationen zu CSS-Selektoren finden Sie hier.

Nachdem Sie erfolgreich den CSS-Filter erstellt haben, speichern Sie die Änderungen und aktualisieren Sie die Seite.

Das Hinzufügen des Filters in der Placeholder-Service-Konfiguration (für Auto-Insert-Anzeigen und den Platzhalter-Service)

Sie können auf die Placeholder-Service-Konfiguration zugreifen, indem Sie die Google Chrome-Erweiterung auf Ihrer Website aktivieren und "Placeholder Service Config" auswählen."

image

Anschließend können Sie das "+" neben "Ausschlussfilter" auswählen, um einen neuen CSS-Filter hinzuzufügen.

image

Von hier aus können Sie entweder "Übergeordnet auswählen" oder einen "Manuellen" Filter hinzufügen. Wenn Sie "Manuell" auswählen, werden Sie aufgefordert, die oben entwickelte CSS-Regel einzugeben.

"Übergeordnet auswählen" bietet Ihnen die Möglichkeit, einen Bereich auf der Live-Seite zu markieren, der von der Anzeige ausgeschlossen werden soll.

Das Hinzufügen des Filters im WordPress-Plug-in (für WordPress-Anzeigen)

Sie können auf die CSS-Filter für WordPress-Plug-ins zugreifen, indem Sie die Einstellungen des Ezoic WordPress-Plug-ins auswählen - indem Sie das Einstellungszahnrad auswählen.

image

Sie können dann "Neuen Filter hinzufügen" auswählen, um einen neuen CSS-Filter für WordPress-Platzhalter einzufügen

image

Überprüfung

Wenn der Filter korrekt umgesetzt wurde, werden die KI-Platzhalter nicht mehr an der unerwünschten Stelle angezeigt. Dies zeigt an, dass der CSS-Filter die gezielten Elemente effektiv herausgefiltert hat.

image

Bitte beachten Sie, dass es manchmal bis zu 30 Minuten dauern kann, bis diese Änderungen wirksam werden.



Loading ...