# html5 / Google Web Designer / ausgabe



## YotErra (20. Juni 2020)

hallo ihr lieben,
seit einigen wochen prügele ich mir die erstellung von dynamischen werbebannern im Google Web Designer über youtube-tutorials rein. leider läuft mein erstlingswerk nicht auf allen endgeräten die ich bisher checken konnte:
http://yoterra.de/html5/

mac OS X - firefox und safari OK

iPhone 7 - safari OK

windows 7 professional
- Google Chome OK
- iE - gibt die runde Maske als quadrat aus, nicht schlimm, OK

*- firefox, gleiche version wie auf dem mac - zeigt gar nix an*, quelltext aber da

hier weiß bestimmt jemand wie ich das beheben/regeln/anzeigen lassen kann?
Und ggf. wie ein preview-bild anstatt des codes an ältere endgeräte ausgegeben werden kann?
über jegliche hinweise sehr dankbar - auch wenn ich in dem vorliegenden schon mist eingebaut habe...

LG
YotErra


----------



## YotErra (20. Juni 2020)

YotErra hat gesagt.:


> *- firefox, gleiche version wie auf dem mac - zeigt gar nix an*, quelltext aber da



oh mann, ich vollpfosten - es hat sich quasi von selbst erledigt
es lag an dem geilen Adblocker


----------



## YotErra (20. Juni 2020)

YotErra hat gesagt.:


> Und ggf. wie ein preview-bild anstatt des codes an ältere endgeräte ausgegeben werden kann?
> über jegliche hinweise sehr dankbar - auch wenn ich in dem vorliegenden schon mist eingebaut habe...



falls jemand herzu tipps/verbesserungsvorschläge geben kann - gernstens!


----------



## ComFreek (20. Juni 2020)

YotErra hat gesagt.:


> oh mann, ich vollpfosten - es hat sich quasi von selbst erledigt
> es lag an dem geilen Adblocker


Das solltest du aber derart beheben, dass Nutzer mit Adblocker halt zumindest Teile deiner Seite sehen anstatt einen weißen Bildschirm. Ich sehe nämlich auch einen weißen Bildschirm.

Laut Devkonsole verursacht die unterbundene Google Ad Ressource wohl eine Exception, die die ganze weitere Skriptausführung unterbindet - und die Website wird quasi ohne inhaltliches HTML ausgeliefert; nur mit JS.


----------



## YotErra (20. Juni 2020)

ich habe leider keinen plan, alles neuland für mich (von JS keinen plan)
weißt du wie das gamacht werden könnte/sollte? wäre vermutlich änlich der kategorie "preview-bild anstatt des codes"...?


----------



## YotErra (20. Juni 2020)

habe dies hier gefunden:



> <script>
> window.onload = function(){
> setTimeout(function() {
> var ad = document.querySelector("ins.adsbygoogle");
> ...



img src="image here" ist klar
funktioniert so allerdings nicht. habe ich von hier: How do I replace all the blocked google ads (with an image) on my page instead of just the first one? Trouble with CSS selectors


----------



## Jan-Frederik Stieler (20. Juni 2020)

Hi,
wahrscheinlich gibts den Selektor nicht.
Wenn Du mit dem Google Designer was erstellst hat das nichts mit Gogole Ads zu tun!

Grüße


----------



## ComFreek (20. Juni 2020)

@Jan-Frederik Stieler Aber anscheinend gibt der Google Designer (bei aktivierten Google Ads seitens des OP?) Webseitencode aus, der unbrauchbar bei Nutzung eines Adblockers ist.


----------



## YotErra (20. Juni 2020)

ComFreek hat gesagt.:


> @Jan-Frederik Stieler Aber anscheinend gibt der Google Designer (bei aktivierten Google Ads seitens des OP?) Webseitencode aus, der unbrauchbar bei Nutzung eines Adblockers ist.


...ich packe die frage noch im javascript-forum?


----------



## Jan-Frederik Stieler (21. Juni 2020)

Also ich beziehe mich jetzt auf das Beispiel am Anfang. Und diese Beispiel hat doch nix mit den Google ADs zu tun. Ich hab auch einen Adblocker aktiv (ghost).
Bzw. es ist ja egal was der angezeigt bekommt. Aber mit seinem Fallbackcode kann es nicht funktionieren weil der Selector welchen er da aufruft einfach nicht existiert.

Der Op sollte halt mal die Devtools verwenden um zu sehen in welcher Situation welche Selektoren angewendet werden bzw. Welche Elemente der Adblocker löscht.

Das ist mal wieder so ein Fall wo gedacht wird, ich muss kein Mechaniker sein, um ein Automotor auszubauen, nur weils n Schraubenschlüssel gibt welcher die Hälfte der Arbeit abnimmt. Nicht bös gemeint nur man besteigt keinen Mount Everest wenn man grad mit Klettern angefangen hat.

@YotErra I’m JS Form hängen die selben Leute rum wie hier .
Welchen Adblocker nutzt Du den?

Grüße


----------



## YotErra (21. Juni 2020)

hey,
ich habe den adblock plus am laufen... zeigt dein browser das ganze an wenn du deinen blocker am laufen hast oder auch nix?



Jan-Frederik Stieler hat gesagt.:


> Der Op sollte halt mal die Devtools  verwenden



wie meinen? verstehe weder "Op" noch "Devtools". hast du bessere vorschläge für einen anfänger solche werbebanner umzusetzen als den google web designer?

es scheint jedenfalls deutlich umfangreicher zu sein als anfänglich vermutet.


----------



## Jan-Frederik Stieler (21. Juni 2020)

Hi,
Ja mit meinem Adblocker kann ich mir den Banner anschauen. Aber ist schwer zu sagen ob das immer noch so ist wenn dieser wirklich von Google ausgeliefert wird.
Aber ich hab den Adblocker auch recht moderat eingestellt, da ja viele auch Ihr Webangebot durch Werbung finanzieren.

OP = Original Poster, in Unserem Fall Du.
DevTools = sind die Developer Tools Im Chrome, aber jeder Browser hat sowas inzwischen. Einfach mal auf ein Element gehen die rechte Maustaste drücken und auf »Untersuchen« klicken. Dann geht ein Fenster auf in welchem Du den Quellcode, Dein angewendetes CSS und vieles mehr siehst und teilweise auch zur Laufzeit verændern kannst. Auch Analysetools sind dort noch versteckt.
Damit kannst Du z.B. die Selektoren (Klassen und IDs) herausfinden welche Google Designer verwendet. Natürlich kannst Du in dem Fenster auch suchen und musst nicht alles von Hand durchgehen.

Solche Banner lassen sich auch nur mit HTML und CSS umsetzen da braucht es kein JS für.
Ansonsten weiß ich nicht was ich Dir an Tips mitgeben soll außer lernen .
Ich mach das Jetzt seit 20 Jahren beruflich und lerne immer noch jeden Tag.
Und z.B. Das heute zu lernen erleichtert einiges. Als ich angefangen haben war der Browserkrieg der 90er grad auf dem Höhepunkt. Also hat man im Grunde alles für jeden Browser anpassen müssen. CSS steckte noch in den Kinderschuhen und JS war, im Gegensatz zu heute verdammt kompliziert zu schreiben und als Teufelszeug verpönt.

Also alle Zeichen stehen drauf das es nie leichter war die Sprachen zu lernen als heute .
Die Frage ist ob Du das lernen willst und ob es Dich weiterbringt?

Viele Grüße
Jan


----------



## YotErra (21. Juni 2020)

Jan-Frederik Stieler hat gesagt.:


> Damit kannst Du z.B. die Selektoren (Klassen und IDs) herausfinden welche Google Designer verwendet.
> ...
> Solche Banner lassen sich auch nur mit HTML und CSS umsetzen da braucht es kein JS für.



lieben dank für deine erklärungen, ich lerning-bei-doing-OP.
habe vor 20 jahren dank selfhtml die html und css die grundlagen mir selbst beigebracht und mit dem texteditor umgesetzt. so´n developer-dingsbums brauche ich nicht um die classen oder IDs zu finden. nur ich weiß leider nicht wie ich dann damit umgehen sollte.
der GWD arbeitet vorwiegend mit CSS, wozu die JS übrhaupt da sind kann ich mit meinem wissen nicht beurteilen (werde bestimmt die tage mal einen nach dem anderen einfach löschen und schauen was passiert - try and error). ich nutze ihn quasi als WYSIWYG. er ist recht übersichtlich aufgebaut und relativ einfach zu bedienen. nur das bringt mich alles beim blocker-problem (das so zufällg aufgetaucht ist) und alten browserversionen nicht wirklich weiter.



> wenn dieser wirklich von Google ausgeliefert wird.



soweit ich es überblicke kann ein mit dem googler gebauter content auch über andere plattformen ausgespuckt werden. janee?

kannst du mir mit deiner berufserfahrung und deinem wissen helfen da ein preview-bild ausspucken zu lassen bzw. eine andere lösung zu bewerkstelligen?

lieben gruß
YotErra

PS. diese aktion mit jquery.unveil: POZILEI existiert auch nur so gut dank großartiger hilfe von hier. das originalscript hat etliche macken die bereinigt wurden. theoretisch kann ich jetzt auch tausende videos einbinden und geladen wird erst wenn der scrollbalken steht. ich mag sowas


----------



## Jan-Frederik Stieler (22. Juni 2020)

Hi,
Ich muss erstmal schauen wie der Adblocker den Inhalt blockt. Eventuell wird ein Fallback garnicht funktionieren da der Sinn von den Adblockern ja genau das ist alles auszuschalten was Werbung ist und dann nicht doch wieder ein Hintertürchen offen zu lassen um was anzuzeigen.

Nun Du kannst Dir die Sachen aus dem Google Designer für die GoogleAds in normalen Conten umwandeln und anderweitig verwenden.

Da hier JavaScript von Seiten Googles zum Einsatz kommt hilft es Dir nichts zu wissen wie Du im Googledesigner Elemente genannt hast. Es kann sein das Google alle Selektoren austauscht und dann kannst Du nicht mehr auf die Dir bekannten zu greifen.
Heißt wenn Du debugging betreibst bleibt Dir nichts anderes übrig als mit DevTools zu arbeiten um zu sehen wie der vom Browser gerendete Inhalt Aussieht. Vor allem auch wenn man mit PHP arbeitet.
Aber gut musst Du wissen.

Die Probleme mit Unveil beziehe ich eher darauf dass das Tool nicht wirklich für Youtubevideos ausgelegt ist. Das sind dann keine Bugs sondern das falsche Tool für Deine Anforderungen.

Ich hab mir Deine Seite mal angeschaut und da müssten ein paar Sachen verbessert werden. Z.B. Veraltetes HTML (Verwendung von als deprecated eingestuften Elementen), nicht responsive Bilder/Videos. Diese sprengen die Max-Breite Deiner Webseite, zumindest auf meinem iPhone.
Und es können auch rechtliche Probleme Auf Dich zukommen.
Nicht Verwendung des Impressums auf der Polizeiseite. Komplett fehlende Datenschutzerklärung, welche auch bei nicht Erfassung von Daten vorhanden sein muss.
I’m Impressum fehlt die Rufnummer, welch Du nur weglassen darfst wenn Du innerhalb von 30 – 60 min. Auf eine elektronische Kontaktaufnahme reagierst. Das kann eigentlich keiner einhalten.

Dann solltest Du schauen, hab ich jetzt nicht gemacht, deshalb die Empfehlung, ob auf Deiner Seite Cookies/Sessions gespeichert werden. Was wahrscheinlich der Fall ist, da Du externe Google Fonts lädst und bei YouTube ist es abhängig von den YouTube-Einstellungen. Eventuell verwendest Du ja auch noch Google Analytics, da wird’s dann ganz problematisch.

Diese ganzen sind aber eigentlich recht einfach zu lösen bedeuten nur etwas Arbeit.

Viele Grüße


----------



## YotErra (22. Juni 2020)

Jan-Frederik Stieler hat gesagt.:


> Ich hab mir Deine Seite mal angeschaut



leider dauerbaustelle


----------

