Benutzerdefinierte Aktionen erstellen

 

Sie können mithilfe von JavaScript eigene benutzerdefinierte Aktionen erstellen. Wenn Sie eine benutzerdefinierte Aktion definiert haben, lässt sie sich in Ihrem Dokument wiederverwenden.

So erstellen Sie eine benutzerdefinierte Aktion:

1. Fügen Sie ein neues Ereignis hinzu. Klicken Sie dazu unten im Steuerfeld Ereignisse auf die Schaltfläche Ereignis hinzufügen .
2. Wählen Sie das Ziel und das Ereignis aus.
3. Wählen Sie für die Aktion die Option Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen aus. Sie werden dann von Google Web Designer aufgefordert, Ihren benutzerdefinierten Code einzugeben.
   
4. Geben Sie den Namen der Aktion im Feld über dem Codefeld nach dem Präfix gwd. ein.
   • Jede benutzerdefinierte Aktion muss im Dokument einen eindeutigen Namen haben.
   • Der Name sollte aussagekräftig sein.
   • Wenn Sie einen ungültigen Namen eingeben, z. B. einen Namen mit Leerzeichen, wird das Feld rot unterstrichen.
5. Definieren Sie die Funktion im Codefeld. Unter Komponenten-APIs finden Sie eine Liste der für jede Komponente verfügbaren Eigenschaften, Ereignisse und Methoden.
6. Klicken Sie auf OK.

Das Ereignis ist so konfiguriert, dass Ihre benutzerdefinierte Aktion verwendet wird. Diese Aktion ist jetzt auch für andere Ereignisse verfügbar, die unter Benutzerdefiniert aufgeführt sind.

Sie können die Größe des Dialogfelds ändern, indem Sie die rechte untere Ecke ziehen.

Beispiele

Benutzerdefinierte Aktionen können gemeinsam mit anderen Komponenten verwendet werden, um die Funktionen von Google Web Designer zu erweitern. In den folgenden Beispielen wird die Methode document.getElementById verwendet, um das Element im Dokument anzugeben, auf das sich die Aktion bezieht.

Stummschaltung eines Videos bei Wiedergabe aufheben

Fügen Sie folgendes Ereignis hinzu:

Ziel	gwd-video_1 oder die ID Ihres Videos
Ereignis	Video > Wiedergabe nach Pause
Aktion	Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen
Benutzerdefinierter Code	if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }

 

So verwenden Sie diesen Code:

• Ersetzen Sie gwd-video_1 durch die ID Ihres Videos.

Für jeden Frame in einer Swipe-Galerie Untertitel anzeigen lassen

Fügen Sie folgendes Ereignis hinzu:

Ziel	gwd-swipegallery_1 oder die ID Ihrer Swipe-Galerie
Ereignis	Swipe-Galerie > Angezeigter Frame
Aktion	Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen
Benutzerdefinierter Code	var gallery = document.getElementById('gwd-swipegallery_1'); var div = document.getElementById('caption-div'); var text = { 1: "The text for frame 1", 2: "The text for frame 2", 3: "The text for frame 3" }; div.textContent = text[gallery.currentIndex];

 

So verwenden Sie diesen Code:

• Ersetzen Sie gwd-swipegallery_1 durch die ID Ihrer Swipe-Galerie.
• Ersetzen Sie caption-div durch die ID des Textelements, in dem der Untertitel angezeigt wird.
• Ersetzen Sie den Untertiteltext für jeden Frame im benutzerdefinierten Code.

Nach einer Pause von zwei Sekunden die nächste Seite der Anzeige aufrufen

Fügen Sie folgendes Ereignis hinzu:

Ziel	page1 oder die ID Ihrer Startseite
Ereignis	Seite > Seitenpräsentation möglich
Aktion	Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen
Benutzerdefinierter Code	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

So verwenden Sie diesen Code:

• Ersetzen Sie page1 durch die ID der Startseite.