AMP

Aktionen und Events in AMP E-Mails

Important: this documentation is not applicable to your currently selected format stories!

Diese Dokumentation behandelt Aktionen und Events für das AMP E-Mail Format. Entsprechende Informationen zu AMP Websites, Storys und Ads findest du unter Aktionen und Events.

Das Attribut on wird verwendet, um Event Handler für Elemente zu platzieren. Die unterstützten Events sind vom Element abhängig.

Der Wert der Syntax ist eine einfache domänenspezifische Sprache in der folgenden Form:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Die folgende Tabelle beschreibt die einzelnen Elemente der Syntax.

Syntax Erforderlich? Beschreibung
eventName ja Das ist der Name des Events, welches das Element verfügbar macht.
targetId ja Das ist die DOM ID für das Element oder ein vordefiniertes besonderes Ziel, für das eine Aktion als Reaktion auf das Event ausgeführt werden soll. Im folgenden Beispiel ist die targetId die DOM ID des Ziels amp-lightbox, photo-slides.
<amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Bilder anzeigen</button>
methodName nein Das ist für Elemente mit Standardaktionen.

Dies ist die Methode, welche vom Zielelement (referenziert von targetId) verfügbar gemacht wird und die ausgeführt werden soll, wenn das Event ausgelöst wird.

In AMP sind Standardaktionen möglich, die für Elemente implementiert werden können. Wird methodName weggelassen, führt AMP die Standardmethode aus.

arg=value nein Manche Aktionen können (sofern sie dokumentiert sind) Argumente akzeptieren. Die Argumente werden in Klammern im Format key=value angegeben. Die zulässigen Werte sind:
  • einfache Strings ohne Anführungszeichen: simple-value
  • Strings mit Anführungszeichen: "string value" oder 'string value'
  • Boolesche Werte: true oder false
  • Zahlen: 11 oder 1.1
  • Punktsyntaxverweis auf Ereignisdaten: event.someDataVariableName

Verarbeiten mehrerer Events

Um mehrere Events eines Elements abzuhören, müssen diese durch ein Semikolon ; getrennt werden.

Beispiel: on="submit-success:lightbox1;submit-error:lightbox2"

Mehrere Aktionen für ein Event

Für dasselbe Ereignis können mehrere Aktionen nacheinander ausgeführt werden. Dazu werden die Aktionen durch ein Komma ',' getrennt.

Beispiel: on="tap:target1.actionA,target2.actionB"

Global definierte Events und Aktionen

AMP definiert das Event tap als global. Dieses kann für jedes HTML Element (einschließlich AMP Elemente) abgehört werden.

AMP definiert außerdem die Aktionen hide, show und toggleVisibility als global. Sie können auf jedem beliebigen HTML Element ausgelöst werden.

Ein Element kann nur wieder angezeigt werden, wenn es zuvor durch die Aktion hide oder toggleVisibility oder mithilfe des Attributs hidden ausgeblendet wurde. Die Aktion show unterstützt keine Elemente, die mit der CSS Eigenschaft display:none oder der AMP Eigenschaft layout=nodisplay ausgeblendet waren.

In AMP ist beispielsweise Folgendes möglich:

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>

Elementspezifische Events

* – alle Elemente

Event Beschreibung
tap Wird ausgelöst, wenn das Element angeklickt/angetippt wird.

Elemente für die Eingabe

Event Beschreibung Elemente Daten
change Wird ausgelöst, wenn der Wert des Elements geändert und bestätigt wird.

Die Eigenschaften der Daten spiegeln diese in HTMLInputElement und HTMLSelectElement wider.

input
event.min
event.max
event.value
event.valueAsNumber
input[type="radio"],
input[type="checkbox"]
event.checked
select
event.min
event.max
event.value
input-debounced Wird ausgelöst, wenn der Wert des Elements geändert wird. Das ist vergleichbar mit dem Standard Event change, dieses hier wird aber erst 300 ms nach Ende der Änderung des Eingabewertes ausgelöst. Elemente, die das Event input auslösen. Entspricht den Event Daten von change.
input-throttled Wird ausgelöst, wenn der Wert des Elements geändert wird. Das ist vergleichbar mit dem Standard Event change, dieses hier wird aber so gedrosselt, dass es höchstens einmal alle 100 ms ausgelöst wird, während der Eingabewert sich ändert. Elemente, die das Ereignis input auslösen. Entspricht den Event Daten von change.

amp-accordion > section

Event Beschreibung Daten
expand Wird ausgelöst, wenn ein Abschnitt im Akkordeonstil erweitert wird. Keine
collapse Wird ausgelöst, wenn ein Abschnitt im Akkordeonstil reduziert wird. Keine

amp-carousel[type="slides"]

Event Beschreibung Daten
slideChange Wird ausgelöst, wenn sich die aktuelle Folie des Karussells ändert.
// Foliennummer.
event.index

amp-lightbox

Event Beschreibung Daten
lightboxOpen Wird ausgelöst, wenn die Lightbox vollständig sichtbar ist. Keine
lightboxClose Wird ausgelöst, wenn die Lightbox vollständig geschlossen wird. Keine

amp-list

Event Beschreibung Daten
fetch-error(low-trust) Wird ausgelöst, wenn das Abrufen von Daten fehlschlägt. Keine

amp-selector

Event Beschreibung Data
select Wird ausgelöst, wenn eine Option ausgewählt oder abgewählt wird.
// Wert des Attributs "option" des Zielelements.
event.targetOption
// Array mit den Werten des Attributs "option" aller ausgewählten Elemente.
event.selectedOptions

amp-sidebar

Event Beschreibung Daten
sidebarOpen Wird ausgelöst, wenn die Seitenleiste nach Ende des Übergangs vollständig geöffnet ist. Keine
sidebarClose Wird ausgelöst, wenn die Seitenleiste nach Ende des Übergangs vollständig geschlossen ist. Keine

amp-state

Event Beschreibung Daten
fetch-error(low-trust) Wird ausgelöst, wenn das Abrufen von Daten fehlschlägt. Keine

form

Event Beschreibung Daten
submit Wird ausgelöst, wenn das Formular abgesendet wird.
submit-success Wird ausgelöst, wenn die Formularübermittlung laut Rückantwort erfolgreich war.
// JSON mit Rückantwort.
event.response
submit-error Wird ausgelöst, wenn die Formularübermittlung laut Rückantwort fehlerhaft war.
// JSON mit Rückantwort.
event.response
valid Wird ausgelöst, wenn das Formular gültig ist.
invalid Wird ausgelöst, wenn das Formular ungültig ist.

Elementspezifische Aktionen

* (alle Elemente)

Aktion Beschreibung
hide Blendet das Zielelement aus.
show Zeigt das Zielelement an. Wenn dadurch das Elementautofocus sichtbar wird, springt der Fokus darauf.
toggleVisibility Schaltet die Sichtbarkeit des Zielelements um. Wenn dadurch das Element autofocus sichtbar wird, rückt es in den Fokus.
toggleClass(class=STRING, force=BOOLEAN) Schaltet die Klasse des Zielelements um. force ist optional und stellt sicher, dass die Klasse bei true nur hinzugefügt, aber nicht entfernt wird, und bei false nur entfernt, aber nicht hinzugefügt wird.
focus Setzt den Fokus auf das Zielelement. Um den Fokus aufzuheben, muss ein anderes Element mittels focus den Fokus erhalten (in der Regel das übergeordnete Element). Aus Gründen der Barrierefreiheit raten wir dringend davon ab, den Fokus zu diesem Zweck auf body/documentElement zu setzen.

amp-accordion

Aktion Beschreibung
toggle(section=STRING) Schaltet zwischen den Zuständen expanded und collapsed der Sektionen von amp-accordion um. Bei Aufruf ohne Argumente werden alle Sektionen des Akkordeons umgeschaltet. Gib die Section ID, damit die Aktion bei einer bestimmten Sektion ausgelöst wird: on="tap:myAccordion.toggle(section='section-id')".
expand(section=STRING) Erweitert die Sektionen des Akkordeons. Ist eine Sektion bereits erweitert, bleibt sie in diesem Zustand. Bei Aufruf ohne Argumente werden alle Sektionen des Akkordeons erweitert. Gib die Section ID an, damit das Event bei einer bestimmten Sektion ausgelöst wird: on="tap:myAccordion.expand(section='section-id')".
collapse(section=STRING) Reduziert die Sektionen des Akkordeons. Ist eine Sektion bereits reduziert, bleibt sie in diesem Zustand. Bei Aufruf ohne Argumente werden alle Sektionen des Akkordeons reduziert. Gib die Section ID an, damit das Event bei einer bestimmten Sektion ausgelöst wird: on="tap:myAccordion.collapse(section='section-id')".

amp-carousel[type="slides"]

Aktion Beschreibung
goToSlide(index=INTEGER) Dreht das Karussell bis zu einem bestimmten Folienindex.

amp-image-lightbox

Aktion Beschreibung
open (default) Öffnet die Image Lightbox, wobei das Bild, welches die Aktion ausgelöst hat, zum Quellbild wird.

amp-lightbox

Aktion Beschreibung
open (default) Öffnet die Lightbox.
close Schließt die Lightbox.

amp-list

Event Beschreibung Daten
changeToLayoutContainer Aktualisiert das Layout von amp-list zu layout="CONTAINTER", um eine dynamische Größenänderung zu ermöglichen.
fetch-error(low-trust) Wird ausgelöst, wenn das Abrufen von Daten fehlschlägt. Keine

amp-selector

Aktion Beschreibung
clear Löscht alle Auswahlen aus einem definierten amp-selector.
selectUp(delta=INTEGER) Verschiebt die Auswahl um den Wert von 'delta' nach oben. Der Standardwert von 'delta' ist -1. Wenn keine Optionen ausgewählt sind, erhält der ausgewählte Zustand den Wert der letzten Option.
selectDown(delta=INTEGER) Verschiebt die Auswahl um den Wert von 'delta' nach unten. Das Standardwert für 'delta' ist 1. Wenn keine Optionen ausgewählt sind, wird der ausgewählte Zustand zum Wert der ersten Option.
toggle(index=INTEGER, value=BOOLEAN) Schaltet die Anwendung von `selected` um. Wenn das Attribut select nicht vorhanden ist, wird es durch diese Aktion hinzugefügt. Wenn das Attribut select vorhanden ist, wird es durch diese Aktion entfernt. Du kannst das Hinzufügen oder Entfernen erzwingen und beibehalten, indem du einen Booleschen Wert in das Argument `value` aufnimmst. Der Wert `true` erzwingt das Hinzufügen des Attributs `selected` und entfernt es nicht, wenn es bereits vorhanden ist. Der Wert `false` entfernt das Attribut, fügt es jedoch nicht hinzu, wenn es nicht vorhanden ist.

amp-sidebar

Aktion Beschreibung
open (default) Öffnet die Seitenleiste.
close Schließt die Seitenleiste.
toggle Schaltet den Status der Seitenleiste um.

form

Aktion Beschreibung
clear Löscht alle Werte aus den Eingabefeldern des Formulars.
submit Sendet das Formular ab.

Besondere Ziele

Die folgenden Ziele werden vom AMP System bereitgestellt und haben besondere Anforderungen:

Ziel: AMP

Das Ziel AMP wird von der AMP Runtime bereitgestellt und implementiert Aktionen der obersten Ebene, die für das gesamte Dokument gelten.

Aktion Beschreibung
setState({foo: 'bar'})1

Benötigt amp-bind.

Fügt ein Objektliteral in den bindbaren Status ein.

1Bei Verwendung mit mehreren Aktionen, warten nachfolgende Aktionen auf setState(), um den vorherigen Aufruf abzuschließen. Pro Ereignis ist nur ein einziger setState() zulässig.