Responsive Seite + Adsense

Sagt mal, weil ich es hier immer wieder lese... Wie setzt Ihr das eigentlich um bzw. was ist denn da überhaupt erlaubt?? Man darf ja 3 Anzeigenblöcke integrieren. Dann gibt es da auch die "neue" Responsive-Ads. Mein Problem ist aber, dass die Anzeigen bei der mobilen Darstellung an eine ganz andere Position müssen. Wie macht man das denn offiziell bzw. wie ist es erlaubt und wie nicht?

Google schweigt sich da leider etwas aus. Die Anleitungen sagen mal so, mal so. Im Supportforum sagt jeder was anderes und auf Mail-Anfragen gibt es keine Antwort.

Mein Problem ist ja eigentlich, dass ich 6 Blöcke bräuchte, von denen jeweils nur 3 aktiv sind, je nach Darstellung. Also entweder drei rechts auf der Seite oder bei der mobilen Ansicht drei Blöcke mitten im Content. Die Anzeigen in der rechten Spalte müssen dann weg.

In einer Anleitung steht, dass man Blöcke z.B. per Media-Queries und display:none ausblenden kann, man aber auch vorsichtig sein soll und die Webmasterregeln einhalten muss. Klasse Hilfe, so wie das da steht. Zumal ich ja eben 3 ausblenden und drei andere einblenden muss. Es müssten also 6 im Quellcode eingebunden sein.

Nun bin ich gedanklich so weit, dass ich per PHP erkenne, ob es ein Mobile-Gerät ist oder nicht und dann die Anzeigen gleich im Quellcode anders platziere. Da ist dann aber das Problem, das die Erkennung nicht 100% funktioniert und Drehungen z.b. von quer auf hochkannt auch nicht erkannt werden. Auf nem Tablet quer (1024 oder 1280px) ist das dann auch wieder quatsch.

Irgendwie komme ich aus dem Dilemma nicht raus und drehe mich im Kreis.

Alex, das hört sich gut an, aber genau das geht ja nicht, siehe mein Text oben. Meine Seite kennst Du. Da sind die Ads rechts in der Spalte, also alle drei schön untereinander, aber eben neben dem Inhalt. Bei kleinen Display wandert diese rechte Spalte ganz nach unten. Somit wären auch die Anzeigen alle drei nacheinander am Ende der Seite. Das ist quatsch und bringt nichts. Die Ads müssen also von der rechten Spalte in die "mittlere" Spalte und dort verteilt werden zwischen den Unterkünften.

Es sind halt gänzlich andere Positionen, die sich so mit Float etc nicht lösen lassen.

Das wäre ja wie hier im Forum. Stell Dir vor, die Ads wären hier rechts außen am Rand. Und beim kleinen Display soll das Ad dann wischen Post 1 und 2 und vielleicht noch eines zwischen 7 und 8.

"wieso so kompliziert"
vielleicht stelle ich mich auch nur zu doof an und habe den Weg noch nicht gefunden. Bisher komme ich dem Thema aber leider keinen Schritt näher.

Gute Idee Margin. Nur eine Gegenfrage muss ich hier stellen: Ist das erlaubt?

Wenn ich mich nicht irre und irgendwo in den Tiefen der Hilfeseiten verlaufen habe, dann habe ich da so was im Kopf, dass es gegen die Richtlinien verstößt, wenn man einen Block dynamisch an eine andere Stelle positioniert, da dieser Vorgang angeblich einen neuen "View" produziert.

Aber einen ähnlichen Ansatz hatte ich auch schon, wenn nicht ganz so. Eben die Anzeigen schon so positionieren und dann per JS, je nach auflösen, das "(adsbygoogle = window.adsbygoogle []).push({});" ausführen oder nicht. Aber auch hier weiß ich nicht, ob das erlaubt ist. Google sagt weder ja noch nein, nur dass Veränderungen am Code verboten sind. Für mich ist das zwar keine Veränderung, aber Google sieht ja bekanntlich vieles anders.

ok Margin, habe da was im Forum gefunden. Die Frage war: "Ich wollte mal nachfragen, ob es erlaubt ist den Werbeblock in der Mitte nachträglich per Javascript in den sichtbaren Bereich zu verschieben? "

Also im Grunde genau das, nachträglich per JS von Stelle A an Stelle B zu schieben.

Antwort: Nein, so eine "Floating-Box" wäre ein Verstoß gegen die AdSense-Programmrichtlinien.

Edit: Das mit den Views. Also ich kann das nun auch nur noch so aus meinen Erinnerungen sagen, finde die Seite gerade nicht mehr. Es ist wohl so, dass wenn der Code von Stelle A nach Stelle B verschoben wird, auch, wenn sich bei den Responsive-Ads die Ausrichtung oder Größe ändern, dann wird vom AD-Script ein neuer View erzeugt, da die Ads neu geladen werden. Bedeutet also, dass die eigentlich Seite nur einmal geladen wird, die Ads aber mehrfach und genau das ist wohl verboten.

Hm, auch zum Thema das "push" manuell auszulösen geht wohl nicht. Die Antwort eines G-Mitarbeiters: "ich habe das von unseren Experten überprüfen lassen. Die Einbindung von AdSense-Code in jeder Form, welche vom Original abweicht, beispielsweise über extern eingebundene JavaScript-Dateien, ist ein Verstoß gegen unsere Richtlinien."

Und solche Antworten, wieder vom G-Mitarbeiter, helfen halt auch nicht weiter: "Wir werden uns zu konkreten Umsetzungen nicht äußern, da dies verständlicherweise eine Flut an Anfragen lostreten könnte. Ob die von Dir genannte Umsetzung diese Regeln erfüllt, kannst Du Dir selbst beantworten."

Klar, das ist ja das Problem, man kann alles anderes verstehen. Ich verstehe es auch mal so und mal so, aber sicher bin ich mir nirgends. Und mein Edit oben spricht ja genau das an: "Wir werden uns zu konkreten Umsetzungen nicht äußern .... Ob die von Dir genannte Umsetzung diese Regeln erfüllt, kannst Du Dir selbst beantworten." Das ist also die Antwort auf eine Frage, ob eine bestimmte Umsetzung den Richtlinien entspricht oder nicht.

Prinzipiell würde ich es ja auch versuchen, wenn es hier nicht um größere Summen gehen würde. Aber mal so als "Test" ein Konto aufs Spiel setzen, das 5-Stellige Beträge im Jahr abwirft ist nicht wirklich so meins.

Bezüglich der Frage: Die war schon so gemeint wie es oben steht, hab nur nicht alles kopiert. Da ging es um eine Seite, die teilweise sehr langen Content hat und die Ads regulär danach eingebunden sind. Der Nutzer wollte nun bei den sehr langen Seiten die Ads weiter nach oben verschieben. Also schon "statisch" und nicht "folgend" oder so. Genau genommen ist das sogar genau wie bei mir. Bei mir wäre auch an manchen Stellen sehr viel Inhalt und die Ads dann darunter. Genau wegen dem langen Inhalt möchte ich die auch weiter oben haben

So, ein paar neue Ansätze

Margin an der Sache war ich auch schon dran und das führte mich dann letztendlich zu einem Grid-System. Aber auch so, den inneren Bereich aufzutrennen in mehrere Einzelbereiche, war einer meiner ersten Gedanken. Leider kam ich da nicht weiter, weil: In der rechten Spalte auch andere Dinge stehen, die bei Mobile-Ansicht nach unten müssen. Das ist aber nicht so schlimm, die könnte ich notfalls mit mitten rein nehmen und ausblenden. Das größere Problem da ist nur, dass der innere Bereich zum einen sehr unterschiedlich lang ist. Das reicht von einer Unterkunft bis hin zu 60. Das andere Problem an der Sache, um die linke Navigation und den mittleren Bereich liegt ein DIV. Das wird benötigt, damit die Höhe (für Footer und rechte Spalte) gleich ist und der Footer nicht auf manchen Seiten direkt unter dem Content klebt und die Navi überlagert oder umgedreht, direkt unter der Navi klebt und den Content überdeckt. Selbiges auch bei der rechten Seite. Ohne das umliegende Div würde diese bei kurzen Inhalten in den mittleren Bereich rutschen. Das wird sogar noch verstärkt, wenn die rechte Seite nicht aus einem großen Div besteht, sondern aus mehreren einzelnen. Die würden dann immer nach links rutschen, wenn der Inhalt kürzer ist als die rechte Seite.

Das Hauptproblem sehe ich hier ja durchaus darin, dass die Seite quasi spaltenweise aufbaut und nicht zeilenweise. Grob gesagt sind es ja "nur" zwei Hauptspalten. Die Master (enthält die beiden Spalten Navi und Inhalt) und die Sidebar. Zeilenweise wäre ja Grid, aber wie gesagt, da scheiterte ich. Kleine Seiten umzusetzen war da kein Problem, aber so was komplexes wie meine Hauptseite, die ja selbst sehr viel aus Boxen und festen Elementen (also nicht primär Fließtext) besteht, das klappte nicht. Zeilenweise bringt auch das Problem mit sich, dass die ganzen einzelnen Blöcke dann unterschiedlich hoch sein können und sich daher auch unterschiedlich anordnen. Gut, dafür gibt es eine JS-Lösung, aber die ist für IE 9 und kleiner nicht nutzbar.

cura
Links sind immer gut. Habe da auch schon mehr als 50 und blicke nicht mehr durch. Ansätze gibt es immer gute, aber alle haben bestimmte Einschränkungen, die alles zu Nichts machen.

Alex
"Ist das Design responsive, sollte es meiner Meinung nach klappen." Dann bin ich wohl wirklich zu doof für. Habe mir Deine Seiten ja angesehen, die sind ja alle fast identisch. Allerdings sind die von der Komplexität her viel einfacher als meine.

" Ich setze Bootstrap dafür ein"
Hatte ich ja auch versucht und scheiterte. Kannst Du mir mal eine Seite zeigen, die rein optisch mit drei Spalten arbeitet, wobei die rechte quasi abgekoppelt "frei schwebend" daneben hängt. Und in Sachen Verschiebungen bei kleinen Auflösungen die linke Navigation nach oben geht, dann der Content kommt und die rechte Seite nach unten? Gut, die hatte ich auch schon gefunden. Wichtig aber, dass nicht alles in Prozent angegeben wird. Die Navi und der Inhalt dürfen die Größe ändern, aber nicht größer als xx Pixel werden und auch nicht kleiner als xx Pixel. Die Rechte Spalte darf sich prozentual gar nicht ändern, die hat drei feste Zustände. 300px, 160px oder ganz weg.

Alle Vorlagen die ich in Sachen Grid bisher hatte arbeiteten nur mit prozentualen Breiten. Änderte ich hier bestimmte Bereiche mit min-/max-width, dann hat es letztendlich immer das Layout zerschossen, wenn an bestimmte Breakpoints kam. Dazu kam das oben genannte Problem der unterschiedlichen Box-Höhen. Also mal als Beispiel. Das erste Row hat drei Zellen. Erste 100px hoch, zweite 50px und dritte 200px. Wenn nun im Grid die zweite row darunter kommt, dann beginnt die an der längsten Stelle vom vorherigen row, also bei 200px. Somit ist zwischen den zweiten Zellen aus row1 und row2 immer ein Abstand.

Deine Veränderung an der Seite verläuft ja so

1 2 3

wird zu

1
2
3

Da wird quasi nur umgeformt. 1, 2 und 3 bestehen jeweils selbst aus mehreren DIVs. Genau das habe ich ja. Nur 3 mit seinen ganzen enthaltenen Divs soll nicht komplett nach unten unter 2, sondern sich mit 2 "mischen". Manche Grid können das, allerdings mischen die dann auch so seltsam, dass teilweise der Inhalt zwischen der Navigation steht, sich also zwischen die einzelnen einordnet.

Wenn Du Dir nun die Frage stellst, warum das bei Dir geht. Ganz einfach z.B. bei pagespeed. Du packst quasi alles in ein Row und nicht in verschiedene, die unterschiedlich hoch sind. Dadurch, dass aber alles in einem Row ist liegt auch im alles ein Div drum rum. Und dann sind wir genau an meinem Problem, dass man dann nicht in den Bereich durch "clear" einbrechen kann...

"Damit meine ich das wenn du das Tablet drehst, die Ads sich nicht anpassen." Da muss ich leider widersprechen, denn das tun sie. Aber nur, wenn das Layout dafür geeignet ist.

Aber im Grund geht es ja nicht darum, ob und wie sich Ads anpassen / ändern, sondern darum, wie man ein DIV, das ADs enthält wo anders hin bekommt. Oder eben wie ganz oben gesagt, dass da 6 drinnen sind und je nach Ansicht jeweils die entsprechenden 3 angezeigt werden oder oder oder.

Alex
Das "das geht irgendwie" ist aber leider keine Lösung. Wenn ich mal eine Seite sehen würde, die so funktioniert, dann würde das schon reichen. Habe gestern auch noch mal die ganzen Beispiele von Bootstrap durchgemacht - keines davon kommt auch nur ansatzweise an das ran, was ich suche. Dann selbst was zusammengebaut per Jetstrap. Gut, das ist schon möglich, dass man die rechte Spalte in die Mitte gemischt bekommt, aber mit dem Problem, dass die Zeilenabstände willkürlich sind und eben vom Inhalt der jeweiligen Zellen abhängen. Da machen es sich die ganzen Demos recht leicht, denn dort ist alles schön quadratisch und gleich lang. Sobald das aber nicht mehr der Fall ist, hat man ein Problem. Noch schlimmer wird es, wenn der Inhalt auch noch komplett dynamisch ist, man also noch nicht mal ansatzweise sagen könnte, da ist so und so viel drinnen.

Habe mir auch zig andere Webseiten angesehen, auch aus dem Bereich Unterkünfte. Entweder haben die gar kein "responsive" oder ein Grid. Bei denen mit Grid kommt genau das zum tragen, dass die Abstände unterschiedlich sind. Sieht man z.b auch bei fewo24. Da ist zwar auch alles fast quadratisch, aber eben nicht 100% und das führt zu den "Fehlern". Zudem arbeiten die meisten nur mit 2 Spalten und nicht mit drei.

Eine gut klingende Lösung hätte ich ja, aber die kann man noch nicht verwenden: CSS "display:flex" mit "order". Da kann man dann Boxen hinsetzen wie man lustig ist, egal wie die im Quelltext stehen. Leider wird das aber nur von sehr wenigen und sehr neuen Browsern unterstützt.

Margin
Genau, DIV-Suppe ist gut gesagt. Ob man da ans Ziel kommt bin in mir noch nicht mal sicher, nah dran war ich schon, aber letztendlich immer ersoffen, auch bei den Grid-Dingern.

Wegen den Adsense. Da biste so ziemlich an der gleichen Stelle wir ich, die ja mein Post auslöste. Die Automatik haste so richtig erkannt, der umliegende DIV muss eine Größenangabe haben. Dazu kommt noch die Möglichkeit das per Media-Queries zu machen, diese müssen dann aber auf der Seite sein und nicht im CSS.

Auflösung erkennen, kein Problem, nur da ist es dann für die Ads schon zu spät. Vorher, also serverseitig könnte man eingreifen und die DIVs einfach wo anders einbauen. Das mache ich jetzt ja derzeit, wenn "mobil", dann die Ads rechts einfach weg lassen und in den Content schön verteilen, aber optimal ist es nicht. Zudem arbeitet das dann nicht mit Auflösungen, sondern UA-Erkennungen. Hier kommt dann der Punkt zum Tragen, dass bei bestimmten Auflösungen das Layout geändert wird. z.B. Tablet 768px ergibt zwei Spalten. Quer mit 1024px sind es drei Spalten. Der Server hat auf Basis der Mobil-Erkennung aber die Ads in den mittleren Bereich gesetzt, wo sie in dem Fall nicht hin gehören.

Theoretisch, da war ich auch schon, müsste man per JS die Auflösung erkennen und das dann per ajax an ein PHP-Script geben, das dann die Anzeigen dynamisch und einmalig einbindet - das ist aber verboten, warum auch immer. Der Code muss direkt im Quelltext stehen und darf nicht von anderen Scripten nachgeladen werden. In den meisten Fällen geht es auch gar nicht, da das AD-Script dann gleich einen Fehler bringt. Seit die ADs nicht mehr mit iFrames arbeiten haben die wesentlich mehr Schutzmechanismen, leider.

Danke Margin, das hatte ich für mich auch so interpretiert, auch wenn das nicht 100% so da steht.

Oder stand das "aber alle Ads zusammen (display + display none) dürfen nicht mehr ergeben" irgendwo so ausdrücklich und ich habe das ständig überlesen? Der Satz ist nämlich unmissverständlich Diese "drei" von Google könnte man, wenn man will, auch auf "aktive Ads" beziehen. Irgendwo steht nämlich, dass bei display:none die Anzeige nicht nur ausgeblendet wird, sondern dass die gar nicht angefragt wird, daher muss die Anweisung auch auf die Seite selbst und nicht ins CSS.

Zitat

In gewissen Fällen soll eine Anzeige möglicherweise überhaupt nicht geschaltet werden, zum Beispiel auf Mobilgeräten mit einem vergleichsweise kleinen Bildschirm. Wenn Sie einen Anzeigenblock ausblenden möchten, können Sie einen Parameter mit CSS-Medienabfragen einrichten, damit keine Anzeigenanfrage erfolgt und keine Anzeige geschaltet wird.

Leider war das auch eine der Fragen an den Support, die nicht beantwortet wurde Genau wie der Ansatz, die Ads an sich einzubinden, aber die Push-Anweisung weg zu lassen. Die würden so also nie ausgeführt werden, allerdings könnte man es als "Veränderung des Codes" auffassen.

Genau genommen ist das "display:none" ohnehin sehr schwammig formuliert. An manchen Stellen ließt sich das nämlich wie "nicht alle ausblenden, nur eines bei speziellen Fällen" zumal sie in dem Zusammenhang immer wieder auf die Richtlinien verweisen. Genau genommen schreiben die ja quasi "Sie dürfen es, aber seien sie vorsichtig".

Google scheint sogar zwischen Responsive-Seiten und Mobile-Seiten zu unterscheiden, denn während es heißt auf Responsive-Seiten dürfen drei Ads, darf auf Mobile-Seiten nur ein Ad. Es wird aber auch hier nicht klar definiert, was für Google Responsive und was Mobile ist.

Ha, den Text kannte ich noch nicht - wieder was neues.

Ich meinte den hier:

Zitat

- Gemäß unseren *** Link veraltet *** darf auf einer mobilen Webseite jeweils nur ein AdSense Mobile-Anzeigenblock platziert werden.

*** Link veraltet ***
Ob das nun was ganz anderes ist, keine Ahnung. Die dort gezeigten Beispiele an Ads sind jedenfalls die gleichen, die so auch ausgeliefert werden, abgesehen von den WAP-Ads.

Dann gibt Google selbst noch eine Lösung, wie man die Ads an die Seitengröße anpassen kann:
*** Link veraltet ***
Allerdings eben mit dem Hinweis:

Zitat

Jegliche Änderung, die nicht dem obigen JavaScript-Code entspricht, wird als Verstoß gegen unsere Programmrichtlinien gewertet

Der das ganze somit wieder unbrauchbar macht Im Grund wäre das ja ein Ansatz gewesen, nur eben nicht die Größe ändern, sondern per fast identischem Script das Ad einblenden oder eben nicht.

" Was die Definitionen mobile und responsiv betrifft, ist dieser Artikel für mich eindeutig:"
Ok, dann geht es da also darum, dass die Mobile-Seite eine eigen Seite mit eigener URL ist und nicht um angepasste Inhalte, oder? Letzteres wäre bei mir der Fall, denn ich nehme bestimmte Dinge einfach raus - nicht per display:none, sondern direkt in PHP. Ich habe also einen anderen Quellcode auf der gleichen URL.

Mensch, das könnte alles so einfach sein, wenn Google das einfach mal klar sagen würde. Aber in allen Foren wird an entsprechenden Stellen von zuständigen Personen nicht geantwortet.

Am einfachsten wäre ja so was da:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:160px;height:600px"
     data-ad-client="ca-pub-xxxx"
     data-ad-slot="xxxx"></ins>
<script>
[COLOR=#008000][B]if  (window.innerWidth  >= 800) {[/B][/COLOR]
    (adsbygoogle = window.adsbygoogle || []).push({});
[COLOR=#008000][B]}[/B][/COLOR]
</script>

also einfach eine Anweisung, bei welchen Auflösungen er "push" ausführen soll. Ohne push wird die Anzeige nicht geladen, das oben drüber ist dann nur sinnloser HTML-Müll.