Siehe Anzeigenarten Google Tipp
Wenn man eine neue Datei ersellt, muss man sich entscheiden, welche Art von Anzeige oder Dokument man erstellen will. Hier gibt es viele Einstellungsmöglichkeiten.
Wenn das Dokument erstellt ist, sieht man die Einstellungen im Fenster .
Unter hat man die Möglichkeit den Dokumenty zu ändern. Möchte man aus einer Google Anzeige eine lokale Anzeige machen, ist der bessere Weg ein neues Dokument mit gleichen Maßen zu erstellen und im Startmenue des neuen Dokuments unter Umgebung keine Google Anzeige zu wählen. Dann kann man aus der zuvor erstellten Google Anzeige, alles in das neue Dokument kopieren. Wenn es responsiv ist, wähle, bevor etwas kopiert wird, unter Basisdokument bearbeiten. Es werden alle Versionen und auch die Animationen in das neue Dokument kopiert.
AMP-Seiten sind "abgespeckte" Versionen von normalen Websites. Sie nutzen eine spezialisierte Form von HTML (AMP HTML), die bestimmte langsame Elemente (wie schweres JavaScript) verbietet oder einschränkt.
Der Speed-Vorteil: AMP-Seiten laden oft in unter einer Sekunde.
Google Cache: Google speichert diese Seiten auf eigenen Servern (Caching). Wenn du ein Suchergebnis anklickst, wird die Seite oft schon im Hintergrund geladen, bevor du überhaupt tippst.
Einschränkungen: Man kann nicht jedes beliebige Skript nutzen. Alles muss den strengen AMP-Validierungsregeln entsprechen.
Das ist die Werbe-Variante des Frameworks. Ein AMPHTML-Banner ist eine Display-Anzeige (wie du sie in GWD erstellst), die komplett auf AMP-Technologie basiert.
Herkömmliche HTML5-Banner können manchmal "schwer" sein, die Website verlangsamen oder ruckeln. AMPHTML-Banner lösen dieses Problem:
Performance: Sie sind bis zu 6-mal schneller als normale Banner.
Sicherheit: Da kein beliebiges JavaScript ausgeführt werden darf, sind sie sicherer vor Malware.
Bessere Klickraten: Da das Banner sofort erscheint und nicht erst nach 3 Sekunden "nachlädt", interagieren Nutzer eher damit.
Wenn du in GWD ein neues Dokument startest, kannst du explizit AMPHTML-Anzeige auswählen.
| Feature | Normales HTML5 Banner | AMPHTML Banner |
| Dateigröße | Oft größer durch Bibliotheken | Sehr schlank und optimiert |
| JavaScript | Erlaubt (beliebig) | Nur über spezielle AMP-Komponenten |
| Ladezeit | Abhängig vom Server | Fast instant durch Priorisierung |
| Plattformen | Überall (Google Ads, Display & Video 360) | Speziell für AMP-Inventar & Google Ads |
Das sind die "großen Geschwister" der Standard-Google-Tools. Während normale Nutzer Google Ads verwenden, nutzen große Agenturen und Konzerne die Google Marketing Platform (GMP).
Studio und Campaign Manager 360 (CM360) sind zentrale Bestandteile dieser Suite.
Studio (früher "Doubleclick Studio") ist das Bindeglied zwischen deinem Design in Google Web Designer und der Auslieferung als Anzeige. Es ist ein Werkzeug für Kreative und Entwickler.
Hauptaufgabe: Hochladen, Testen und Veröffentlichen von Rich Media-Anzeigen (Banner mit Video, interaktiven Elementen oder komplexen Animationen).
Dynamische Inhalte: Hier wird die Logik für dynamische Banner hinterlegt. Wenn ein Banner je nach Wetter, Standort oder User-Interesse andere Produkte zeigen soll, wird das über Studio gesteuert.
GWD-Anbindung: In Google Web Designer gibt es oben rechts den Button "Veröffentlichen > Studio". Damit schickst du dein Design direkt in die Cloud von Studio.
CM360 ist das "Gehirn" der Kampagne. Es ist ein Ad-Management-System für Werbetreibende und Agenturen.
Ad Serving: Hier werden die fertigen Banner (die aus Studio kommen) hochgeladen und "gehostet".
Tracking & Messung: CM360 zählt jeden Klick und jede Impression und verfolgt, was der Nutzer danach auf der Website macht (Conversions), egal auf welcher Plattform der Banner lief.
Zentralisierung: Man kann damit Anzeigen über viele verschiedene Werbenetzwerke gleichzeitig steuern, nicht nur auf Google-Seiten.
Man kann sich das wie eine Filmproduktion vorstellen:
| Tool | Rolle | Was passiert dort? |
| Google Web Designer | Das Studio | Hier wird der "Film" (das Banner) gedreht und gestaltet. |
| Google Studio | Die Post-Produktion | Hier werden Spezialeffekte und dynamische Daten hinzugefügt und der Film final geprüft. |
| Campaign Manager 360 | Der Verleih | Hier wird entschieden, in welchen Kinos (Websites) der Film läuft und wie viele Leute ihn gesehen haben. |
Wenn du in GWD arbeitest, musst du beim Erstellen einer neuen Datei oft wählen, ob die Anzeige für Google Ads, Display & Video 360 oder eben Studio bestimmt ist.
Wählst du Studio, stehen dir oft mehr technische Freiheiten (wie Enabler-Skripte für komplexe Interaktionen) zur Verfügung, die bei einfachen Google Ads Bannern verboten wären.
Das passt perfekt zum Thema Google Web Designer, da GWD eines der Standardtools ist, um genau diese Anzeigenformate zu gestalten.
Hier ist die einfache Erklärung:
AdMob ist ein Werbenetzwerk von Google, das speziell für mobile Apps (iOS und Android) entwickelt wurde.
Für Entwickler: Wenn du eine App programmierst (z. B. ein Spiel oder eine Taschenlampen-App), nutzt du AdMob, um Werbeflächen in deiner App zu verkaufen und damit Geld zu verdienen.
Für Werbetreibende: Unternehmen nutzen AdMob, um ihre Banner direkt in Apps anzuzeigen, anstatt nur auf mobilen Webseiten.
Der Name: Er setzt sich aus „Advertising“ (Werbung) und „Mobile“ zusammen.
Ein Interstitial (auch "Zwischenschaltung" genannt) ist ein spezielles Anzeigenformat, das den ganzen Bildschirm einnimmt.
Das Prinzip: Im Gegensatz zu kleinen Bannern am oberen oder unteren Rand überlagert ein Interstitial die komplette App-Oberfläche.
Der Zeitpunkt: Sie erscheinen typischerweise an natürlichen Übergangspunkten innerhalb einer App, zum Beispiel:
Zwischen zwei Spiel-Leveln.
Nachdem ein Foto erfolgreich hochgeladen wurde.
Beim Wechseln von einem Tab zum anderen.
Interaktion: Der Nutzer hat zwei Möglichkeiten: Er klickt auf die Anzeige oder schließt sie über ein „X“ (meist nach einer kurzen Wartezeit von 5 Sekunden), um zur App zurückzukehren.
| Merkmal | Banner-Anzeige | Interstitial-Anzeige |
| Größe | Kleiner Streifen (fixiert) | Vollbild (Takeover) |
| Aufmerksamkeit | Eher gering (wird oft ignoriert) | Sehr hoch, da bildschirmfüllend |
| Klickrate (CTR) | Niedriger | Deutlich höher |
| Nutzererlebnis | Wenig störend | Kann störend sein (Timing ist extrem wichtig!) |
Wenn du in GWD ein Banner für AdMob erstellst, kannst du das Format „Interstitial“ wählen. Das Programm gibt dir dann eine Arbeitsfläche, die sich flexibel an verschiedene Smartphone-Bildschirmgrößen anpasst.
Da Interstitials mehr Platz bieten, werden sie oft für Rich Media genutzt – also Banner mit kleinen Animationen, Videos oder sogar interaktiven Mini-Games, die du in GWD zusammenbaust.
Über das Element- Tool kann man div-Elemente, Videos, Html Elemente einfügen. Indem es auf der Bühen aufzieht. Bei den HTML - Elementen gibt man in der Werkzeugleiste an, welches es sein soll.
Die Quelle zu Bild oder Video wird im Eigenschaften-Fenster zugewiesen.
Dort kann man ein Bild auch austauschen selbst wenn es schon animiert ist.
Alternativ kann man ein Bild auch einfach per drag und drop aus einem Ordner auf die Bühne ziehen. Die Bilder
und Videos werden im Bibliothek als Asset aufgeführt.
Eine dritte Möglichkeit besteht über
Ein gekacheltest Hintergrundbild lässt sich nur über CSS regel. Verwende als Pfad den Ordner
assets/ denn dort werden alle Bilder bei der Veröffentlichung abgelegt.
Ein Focalpoint ist ein Bildausschnitt, der bei allen verschiedenen Bildschirmgrößen zu sehen ist.
Erstelle einen Banner mit der Option Responsive.
Füge ein Bild ein wähle im Eigenschaftenfenster Größe 100% Breite und Höhe, Position Absolut 0, 0
Delta die Einstellungen in Bezug auf das Element, Absolut Einstellungen in Bezug auf die Umgebung/ Bühne
Wähle Skalierung
Wähle Blickpunkt aktiviern
Es öffnet sich das Fenster Bilckpunkt aktivieren. Dieses Fenster kann man auch im Konstextmenüs des Bildes aufrufen.
Setze den Kreis auf den Bereich der immer sichtbar sein soll. Wähle Vorschau
Mit rechter Maustaste Farben aus Bild extrahieren fügt 5 relevante Farben des Bildes in die Farbmusterpalette ein.
Farben oder Farbverläufe lassen sich in der Palsette einfügen mit einem Pluzszeichen rechts unten in der Farbansicht / Muster
Das Farbverlaufstool ermöglicht die Skalierung an den letzten Anffasser und die Drehung am zweitletzten. Während der Drehung wied die Skalierung automatisch angepasst.
Man kann mehrere Elemente über das Kontextmenü zusammenfassen oder gruppieren.
Zusammenfassen in GWD ist in vielen anderen Programmen das Gruppieren. Wähle mehrere Elemente aus und wähle im Kontextmenü zusammenfassen. Durch Doppelklick kann man die einzelnen Elemente bearbeiten, Doppelklick außerhalb führt zurück auf die Bühne. Wähle im Kontextmemü Aufteilen um die Zusammenfassung aufzuheben.
Gruppen entsprechen Symbolen in Flash oder
Animate.
Im Kontextmenü lassen sich mehrere ausgwählte Elemente gruppieren. Diese Gruppen
kann man kopieren und einfügen. Durch doppelklick kann man Änderungen darin vornehmen. Diese Änderungen wirken
sich auf alle Instanzen aus.
Die Gruppen befinden sich wie alle Assets in der Bibliothek und können von dort auf die Bühne gezogen werden.
Man kann Gruppen verschachteln. Gruppen kann Animationen enthalten. Gruppen können Ereignisse enthalten.
Gruppeninstanzen kann man auflösen im Konstextmenü mit aufteilen.
Wählte man eine Gruppe in der Bibliothek aus findet man im Kontextmenü die Befehle: Ubenennnen, Löschen
Bearbeiten in der Bibliothek im Kontextmenü einer Gruppe führt dazu, dass man nur die Gruppe angzeigt bekommt. Bearbeitungsmodus beenden druch: Doppelklick außen, Gliederungseditor, unten rechts.
Duplizieren erzeugt eine neue Gruppe mit anderem Namen.
Element Kontextmenü Bildmaske hinzufügen Die Transparenzbereiche des Maskenbildes blendet das Element aus. Die Maske kann mit dem Auswahltool verschoben und skaliert werden. Hat man die Maske ausgewählt kann man sie auch mit der Entf-Taste löschen.
Eine Maske kann auch importiertes SVG Bild sein.
Mit rechter Maustaste lässt sich eine Verlaufsmake hinzufügen. Im Eigenschaftenfenster stellt man die Optionen ein. Mit dem Auswahlwerkzeug kann man den Verlauf verschieben und skalieren.
Wählen Sie das Element aus, Wählen eines der Clip-path-Masken aus den Werkzeugen aus und ziehe sie auf dem Element auf. Beachte, dass für die Polygonmaske mehrere Formen in der Werkzeugleiste gibt. Die Umschalttaste erhält die Proportionen der Form. Die Vektorpunkte können nachträglich verschoben werden, aber deren Anzahl kann nicht verändert werden.
Masken lassen sich animieren, Nicht alle Masken werden in allen Browsern dargestellt.
Man kann mehrere Elemente mit rechter Maus Zusammenfassen und dann eine Maske auf diese Elemente anwenden.
Mit dem Auswahltool (Pfeil) kann man Elemente auswählen, verschieben, anordnen, verteilen. In der Optionsleiste des Werkzeugs befinden sich alle möglichen Icons für das Verteilen, Ausrichten und Position oder Anordnung im Stapel.
Wähle man den Bearbeitungsmodus, kann man die Elemente vergrößern und drehen. Auch hier ist das meiste
selbsterklärend. Nur die ersten beiden Option der Werkzeugleiste sind nicht so offensichtlich.
| Positionierungs-Style | Beschreibung |
|---|---|
 Standardpositionierung
verwenden |
Bevorzugen der Oben-links-Positionierung für das Layout und von transform:translate3d() bei Animation der Position |
 Positionierung
oben/links verwenden |
Verwenden von Oben-links-Werten, wenn ein Element in einem Keyframe positioniert wird. Hier werden die CSS Eigenschaften top, right, bottom, left verwendet. |
 3D-Verschiebung verwenden |
Verwenden von transform:translate3d()-Werten, wenn ein Element in einem Keyframe positioniert wird |
| Größenanpassungs-Style | Beschreibung |
|---|---|
 Standardgrößenanpassung
verwenden |
Bevorzugen der Größenanpassung über Breite und Höhe für das Layout und von transform:scale3d() bei Animation der Größe |
 Breite
und Höhe verwenden |
Verwenden von Werten für Breite und Höhe, wenn die Größe eines Elements in einem Keyframe angepasst wird |
 3D-Skalierung
verwenden |
Verwenden von transform:scale3d()-Werten, wenn ein Element in einem Keyframe skaliert wird |
Siehe Video Tipp / siehe GWD Tipp
Erstelle ein Div (keinen Button), der als Button dienen soll. Klicken den Button doppelt an, um die Schrift innerhalb des Buttons einzufügen.
Der Button ist jetzt rot umrandet.
Ziehe ein Textfeld über dem Button auf. Erzeuge einen kleinen Text für den Button. Schriftgröße 12 bis 14px . Wähle im Fenster die Option Schrifgröße verkleinern und an Textcontainer anpassen.
Gebe darunter eine minimale Größe von 8px an.
Aktiviere die Option Kürzen und an Textcontainer anpassen
Im Fenster deaktiviere die Option width und height falls vorhanden.
Wähle im Fenster die Option Flexbox die
CSS-Eigenschaft display:flex wird automatisch auf das Elternelement in diesem Fall dem Div
zugewiesen. Wähle bei den Flex-Optionen
Justification center, und Cross-axis-alignment
center. Um Flexbox wieder zu deaktivieren muss man undo/rückgäging wählen.
Nun soll der Text sich der Größe anpassen.
Wähle den Text aus, gebe ihm eine Größe von 28px so dass er größer als das Div ist.
Wähle im Fenster unter Größenbeschränkung
Max. Breite 60% Min Breite 44%
Wenn man nun den Button auswählt und ihn vergrößert und verkleinert, passt sich die Schrift in ihrer Größe an. Das funktioniert auch mit andern Elementen.
Hier geht es darum, dass der Button egal bei welcher Bildschirmgröße an einer bestimmten Position verankert wird, beispielsweise in der Mitte unten.
Doppelklicke außerhalb des Buttons, damit die Seite ausgewählt ist, unten links steht page1:div. Wähle im Fenster die Option Größen und Bereiche Responsive Layout
Klicke auf den Button und wähle im Fenster unter Verankerung eine gewünschte Position in dem Auswahlfeld. Mit Pfeiltaste oder Shift Pfeiltastekann man den Button verschieben.
Wenn man nun die Seitengröße verändert, sieht man, wie der Button an seiner Position bleibt.
Wenn der Button sich bei Größenänderung der Seite auch in der Größe anpassen soll, wählt man unter die Option Prozentsätze verwenden Dadurch wird in den Feldern für Position und Größe die Einheit Prozent anstatt px automatisch aktiviert. Ein nochmaliges Anklicken von Prozentsätze verwenden schaltet nicht zurück, aber man kann die Einheiten auf px setzen und es werden automatisch die zuvor vergebenen Werte wieder zugewiesen.
Wenn man nun den Button auswählt und ihn vergrößert und verkleinert, passt sich die Schrift in ihrer Größe an.
siehe Google Tipp. Es gibt 2 Arten die Seiten responsive zu gestalten. Ein "Fluid Design" oder "Mediarules". Das flüssige Design ist so angelegt, dass die Größen und Positionen der einzelnen Elemente sich an jede beliebige Bildschirmgröße anpassen. Hier arbeitet man mit Flexbox und prozentualen Werten.
Bei einem Design mit Mediarules wird für mehrere verschiedene Größen ein Design erstellt.
Um ein Design für mehrere verschiedene Größen, beispielsweise mehrere verschiedene Anzeigen- oder Bannergrößen vorzubereiten, kann man Vorlagen / Mockups erstellen.
In GWD erstelle eine neue Datei, z.B.: Banner, Display und Video360 und aktiviere die Option responsive.
Importiere die Assets (Bilder, Vorlagen, drag'n'drop) und ziehe die erste Vorlage auf die Bühne. Positioniere sie. Verringere die Deckkraft im Fenster.
Zeitleiste erweiterter Modus. Kontextmenü der Ebene in der Zeitleiste Anleitungsebene. Durch Anleitungsebene wird das Element bei der Veröffentlichung nicht angezeigt.
Ziehe die zuvor importierten Bilder aus der Bibliothek auf die Bühne und skaliere und positioniere sie.
Logischerweise sollten Elemente/ Komponenten, welche die gesamte Bühne bedecken sollen, in einer prozentualen Größe von 100% x 100% eingefügt werden.
Erstelle Textfelder und Buttons nach der Vorlage.
Im Fenster Responsive gibt es verschiedene Größen und zwar Optionen für Auslieferungsgröße & Vorschaugröße. Wähle eine neue Größe und füge dann eine weitere Vorlage ein. Die andere Vorlage kannst du in der Zeitleiste ausblenden. Schiebe und skalieren die Elemente nach der Vorlage.
Füge nach gleichem Schema weitere gewünschten Größen ein.
Wähle unter Responsive / Größen (rechts) Responsive Vorschau
Wenn man einigen Elementen Animationen zuweisen möchte, die in allen Größen zum Tragen kommen, wähle unter Responsive, Basisdokument bearbeiten. Wähle Element in der Zeitleiste und füge Keyframes in der Zeitleiste ein. Wähle im Eigenschaftenfenster/ Verschiebung, Rotation und Skalierung und gebe dort Werte ein. Dadurch wird die Animation mit CSS-Transform erstellt.
Passe die Animtion in den anderen Responsive Größen an, falls nötig. Im Fenster Responsives Layout / Größen wird in den Größen die Option Größenspezifische Medienregel aktiviert angezeigt.
Unter sieht man alle Elemente und deren Eigenschaften, die für eine bestimmte Größe definiert wurden. Man kann auch ein einzelnes Element auf der Bühen auswählen und unter Auswahl/ Element wählen.
Im Eigenschaftenfenster und in der Zeitleiste werden die Eigenschaften, welche für eine bestimmte Medienregel überschrieben wurden, gelb angezeigt.
Es gibt unter einen Button rechts für eine Vorschau auf der Bühne. Alle aktivierten Größen werden angezeigt.
Oben rechts gibt es die Vorschau im Browser. Achtung, Werbeblocker im Browser können die Vorschau verhindern.
Animationen mit Zeitleiste lassen sich ähnlich wie in Animate erstellen. Es gibt Ebenen, Keyframes, ein- & ausblenden, sperren, Stapelreihenfolge. Es gibt Easing Funktionen, wenn man mit rechts in der Zeitleiste auf linear klickt.
In der Zeitleistenebene werden alle Elemente aufgeführt. Man kann dort einen ID Namen vergeben (oder im Eigenschaften-Fenster).
Animationen werden mit CSS erstellt. Wenn man Positionseigenschaften im Eigenschaftenfenster zuweisen will, wähle das Unterfenster: damit es über CSS-Transform definiert wird.
Man kann gruppierten Elementen innerhalb der Gruppe Animationen zuweisen, wie bei Animate-Movieclip-Symbolen.
Erzeuge einen Keyframe schiebe das Element an eine andere Position.
Es erscheint eine gerade Linie, von Start zu Endpunkt. Diese Linie kann man verändern. Neue Punkte durch Anklicken hinzufügen. Desweiteren kann man das Motion Path Werkzeug nutzen, um den Linienverlauf zu ändern.
Im Eigenschaftenfenster kann man das Objekt am Pfad ausrichten.
Mit keyframes kann man auch am Motionpfad verschiedene Easings eingeben.
Mittels Optimize Path kann die Dateigröße verkleinert werden.
Es gibt einen Ereignistrack, dort kann man an beliebiger Stelle über das Kontextmenü ein Label und/ oder ein
Ereignis einfügen. Zeitleistenbefehle wie play, gotoAndPlay stehen im "Step by Step"-
Ereignisfenster zur
Verfügung.
Jedes Element hat eine eigene Ebene.
Man kann einzelne Elemente/ Ebenen Animationen in Schleife abspielen, dazu wähle die Option in der gewünschten Ebene und gebe die gewünschte Wiederholungsrate an.
Man kann sogenannte Anleitungsebenen erstellen, das sind Mockup-Elemente, die man als Vorlage für das Design erstellt hat und die bei der Veröffentlichung nicht angezeigt werden sollen. Wähle dazu im Kontextmemü Anleitungsebene
Im Kontextmenü eines Zeitpunkts der Ebene kann man einen Sichtbarkeitsbereich festlegen. Eventuell vorhandene Keyframes für die Ebene werden entfernt. Doppelklick auf einen Ziehpunkt setzt ihn zurück.
Komponenten sind vorgefertigte Bausteine: Gesten, Bildschaltflächen, Parallaxe, SMS, 360° Galerie und weitere Galerien, Audio, Video, 3D Modellansicht Partikeleffekte, 3D Animation und vieles mehr.
Gesten sind Ereignisse, die auf Touchscreen ausgeführt werden, wie wischen, ziehen, etc.
Ziehe eine Gesten Komponente auf die Bühne und wähle sie aus. Wähle im Kontextmenü Ereignis hinzufügen. Wähle eine Geste aus, beispielsweise nach links wischen und vergebe beispielsweise: Zeitachse/ Toggle Play. Nach links wischen schaltet die Animation um zwischen pause und play.
Die Bildschaltfläche entspricht dem Button-Symbol in Animate. Für die 3 Zustände (normal, berühren, drücken) importiert man 3 Bilder oder setzt eine URL auf die Bilder. Die Bilder können an dynamische Daten gebunden werden.
Ziehe eine Interaktion / Parrallax Komponente auf die Bühne.
Im Eigenschaften-Fenster unter (Zahnradsymbol) Einstellungen oder durch Doppelklick kommt man zu den Einstellungen.
Innerhalb der Einstellungen wähle den Plus-Button im Ebenen Fenster, um Bilder einzufügen.
Die Bilder kann man im Ebenen-Fenster ein und ausblenden.
Blende alle bis auf ein Bild aus und wähle für das Bild die Start und Endposition. Für das Hintergrundbild könnten beide Position gleich sein, damit es sich nicht bewegt.
Nachdem man die Startposition festgelegt hat, wählt man Ende. Nun kann man im Fenster Position die An Startpositon angleichen anklicken, damit die Position von Anfang und Ende gleich ist. Dann kann man das Bild mit Shift Taste verschieben. Shift Taste schränkt die Bewegung auf horizontaler oder vertikaler Achse ein.
Im Fenster kann man ein Easing definieren. Die Option Inaktiven Status anzeigen blendet Anfang und Endstatus ein.
Mit dem Plus Button zwischen Anfang und Ende kann man auch einen Mitte Zustand hinzufügen
Im Eigenschaftenfenster kann man Transparenz und Easing einstellen.
Google Tipp | Youtube Video Google Tipp
Im Kontextmenü eines Elemenst wähle Ereignis hinzufügen. Mam wird durch ein Step by Step Menü geleitet, welches man auch später über das Fenster aufrufen kann.
In einer Google Anzeige ruft man einen Link auf über Aktion Exit Anzeige oder Exit Anzeige (überschreibt URL). Beide Varianten öffnen die Seite im neuen Fenster. Der Standard Exit Anzeige In Google Ads oder DV360 kann der Media-Manager diese URL später noch sehen und manuell ändern, falls sich der Link kurzfristig ändert (ohne die GWD-Datei neu bearbeiten zu müssen).
Exit Anzeige (überschreibt URL) Diese Aktion erzwingt, dass exakt die URL aufgerufen wird, die du in GWD eingetragen hast. Sie ignoriert eventuelle Umleitungen oder Änderungen, die später im Google-Interface vorgenommen werden. as ist sinnvoll, wenn du mehrere Buttons im Banner hast, die auf unterschiedliche Unterseiten führen sollen (z. B. ein Button für "Schuhe", einer für "Hosen"). Damit stellst du sicher, dass die Klicks nicht alle auf der gleichen Hauptseite landen.
Messwerte ID Hier gibt man eine sinnvolle ID ein. Darüber werden in einer Google Anzeige Informationen gespeichert, wie Klickrate etc. etc. abrufen.
Will man beispielsweise einen eigenen Link einfügen, der nicht im neuen Fenster geöffnet wird, muss man es in
Javascript selbst
programmieren. Es kann sein, dass es in einer Google Anzeige nicht funktioniert.
window.open("https://www.meineUrl.de", "_self");
Man kann auch eine Variable oder Konstante definieren.
In der Codeansicht suche nach folgender Loader-Funktion und füge den Code ein:
function handleDomContentLoaded(event) {
window.meineUrl = "https://www.mySite.de";
}
Dann kann man diese nutzen mit window.meineUrl
Man kann auch direkt nach dem Script Tag Variablen und Konstanten global definieren. Suche nach dem Script Tag
mit: id="gwd-init-code" und definiere eine Konstante:
const MEINE_URL = "https://..."; // Global definiert
Gehe in der Designansicht auf das -Fenster und klicke das + Pluszeichen.
Man fügt den Code immer in Funktionen ein. Um global auf mehrere Variablen zugreifen zu können, kann man über das Window Objekt einige Eigenschaften einfügen:
window.bannerConfig = {
zielUrl: "https://www.deine-website.de",
hoverFarbe: "#FFCC00",
standardFarbe: "#FFFFFF",
version: "1.0.2"
};
Diese kann man dann folgendermaßen nutzen:
window.open(window.bannerConfig.zielUrl, "_self");
this.style.backgroundColor = window.bannerConfig.hoverFarbe;
Man kann auch Ereignisse in der Zeitleiste einfügen. Außerdem kann man
Zeitleistenbefehle aus EaselJs nutzen gotoAndPlay(), play(), stop()