Was sind ist AMP Seiten?

AMP ist ein Open Source HTML Framework für die unkomplizierte Erstellung von Webseiten mit kurzen Ladezeiten, bei denen die Benutzererfahrung im Vordergrund steht. AMP Seiten werden in der Google Suche mit einem Blitz-Icon markiert. AMP steht für Accelerated Mobile Page.

Wo funktioniert AMP Web-Push?

Die AMP Web-Push Erweiterung funktioniert nur auf Android Smartphones und Tablets. Derzeit werden iOS Geräte nicht unterstützt. iOS Geräte unterstützen grundsätzlich AMP Seiten, jedoch nicht die AMP Web-Push Erweiterung.

Wie funktioniert die Integration von Web-Push in AMP Seiten?

Achtung: diese Anleitung dient ausschließlich zur Integration in AMP Seiten. Bitte achte auf den korrekten Einbau der Codes.

1. Erstelle deine AMP Seite / Templates

Folge dem AMP Setup Tutorial zur Erstellung deiner AMP fähigen Seite. Falls dieser Punkt schon erledigt ist, kannst du gleich mit Schritt 2 weitermachen.

2. AMP Web-Push Erweiterungen hinzufügen

Füge bitte folgendes Skript im AMP <head> Bereich deiner AMP Seiten ein. In vielen Themes wirst du das im Mastertemplate machen müssen. Achte bitte nochmals darauf, dies nur für deine AMP Seiten zu machen. Deine normale Webseite darf nicht mit AMP Code angepasst werden.

<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

3. AMP Web-Push Erweiterung konfigurieren

Bitte lade die folgenden Dateien herunter (rechte Maustaste, Link speichern unter) und kopiere diese ins Root-Verzeichnis deiner Webseite. Die PushPandaWorker.zip Datei bitte vor dem Kopieren auf den Server entpacken, diese enthält eine Javascript-Datei PushPandaWorker.js :

Als nächsten Schritt füge bitte folgenden Code in den AMP <body> deiner Seite ein:

ersetze DOMAIN mit der Domain welche du für PushPanda registriert hast
ersetze PID mit der Project-ID welche du im PushPanda Backend hier in deinen Projekt-Details findest

<amp-web-push id="amp-web-push" layout="nodisplay"
  helper-iframe-url="https://DOMAIN/amp-helper-frame.html?p=PID" 
  permission-dialog-url="https://DOMAIN/amp-permission-dialog.html?p=PID" 
  service-worker-url="https://DOMAIN/PushPandaWorker.js?p=PID"
  service-worker-scope="https://DOMAIN/"
></amp-web-push>

4. Einbau des AMP Widgets

Nachdem die Konfiguration von AMP Web-Push jetzt abgeschlossen ist, kannst Du das AMP Web-Push Widget an deiner gewünschten Stelle im AMP Template deiner Seite einbauen. Durch den Einbau des Widgets werden automatisch an dieser Position entsprechende Buttons zum Anmelden und Abmelden angezeigt. Das folgende Beispiel veranschaulicht dies:

Veranschaulichung AMP Web Push Widget Integration von PushPanda

Wir empfehlen die Buttons am Ende des Hauptcontents einzufügen. Am Beginn der Seite würden die Buttons den User vom angezeigten Inhalt ablenken.
Weiters ist es auch wichtig, dass sich der User mit den angezeigten Inhalten identifiziert, dadurch steigt die Wahrscheinlichkeit dass der User Web Push Nachrichten abonniert. Die Position am Ende des Inhalts ist für eine gute Conversion gut geeignet.

Für die Widgets müssen als erstes die CSS Definitionen in den <head> Bereich des Templates geladen werden. Gerne können diese Anweisungen entsprechen der Designvorgaben der Webseite angepasst werden.

<style amp-custom>
amp-web-push-widget button.subscribe {
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 15px;
  cursor: pointer;
  outline: none;
  font-size: 15px;
  line-height: 1.4em;
  font-weight: 400;
  background: #0be6af;
  color: #333;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

amp-web-push-widget button.subscribe .pp-icon, amp-web-push-widget button.unsubscribe .pp-icon {
  margin-right: 10px;
  color: white;
}

amp-web-push-widget button.subscribe:active {
  transform: scale(0.99);
}

amp-web-push-widget.amp-invisible {
  display: none;
}

amp-web-push-widget button.unsubscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  font-size: 15px;
  font-weight: 400;
  background: transparent;
  color: #B1B1B1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>

Als nächstes muss der folgende Code an der Stelle im AMP Template eingefügt werden, an der die Buttons für die An- und Abmeldung angezeigt werden sollen.

<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="45">
<button class="subscribe" on="tap:amp-web-push.subscribe">
<amp-img
 class="pp-icon"
 width="24"
 height="24"
 layout="fixed" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00NjYuOTYsMzgwLjkxYy0yLjAzMy0xMC44NTctMTIuNDgzLTE4LjAwOS0yMy4zNDEtMTUuOTc0Yy0xMC44NTYsMi4wMzUtMTguMDA5LDEyLjQ4NS0xNS45NzUsMjMuMzQxDQoJCQljMS41MSw4LjA1NS0yLjAzMSwxMy43OTUtNC4yNzUsMTYuNWMtMi4yMzksMi42OTctNy4yMTUsNy4yMjMtMTUuMzgsNy4yMjNIMTA0LjM5N2MtOC4xNjUsMC0xMy4xNDEtNC41MjUtMTUuMzgtNy4yMjMNCgkJCWMtMi4yNDQtMi43MDUtNS43ODUtOC40NDUtNC4yNzUtMTYuNWM1LjY3My0zMC4yNzIsMTcuMDU2LTUwLjE4MywyOC4wNjQtNjkuNDM5QzEyNi4xNzYsMjk1LjQ1NSwxNDAsMjcxLjI3NCwxNDAsMjM0di0zMA0KCQkJYzAtNjMuMDY3LDUxLjI2My0xMTUuMDcyLDExNC4zMDItMTE1Ljk4N2gzLjc4MUMzMjAuOTA4LDg4LjkyNSwzNzIsMTQwLjkzLDM3MiwyMDR2MzBjMCwzMS43MjMsMTAuMzc3LDUzLjU1MiwyMC4xMDQsNzEuNTIzDQoJCQljMy42Miw2LjY4OCwxMC41LDEwLjQ4NCwxNy42MDYsMTAuNDg0YzMuMjE1LDAsNi40NzctMC43NzcsOS41MDItMi40MTVjOS43MTUtNS4yNTcsMTMuMzI3LTE3LjM5NSw4LjA2OS0yNy4xMDgNCgkJCUM0MTcuNjA0LDI2OC42MDIsNDEyLDI1NC4yODEsNDEyLDIzNHYtMzBjMC00MS4xNjEtMTUuOTQzLTgwLjAzNy00NC44OTQtMTA5LjQ2NkMzNDIuMjk2LDY5LjMxMiwzMTAuNDM5LDUzLjU3NCwyNzYsNDkuMjNWMjANCgkJCWMwLTExLjA0Ni04Ljk1NC0yMC0yMC0yMGMtMTEuMDQ2LDAtMjAsOC45NTQtMjAsMjB2MjkuMjg5QzE1OS41NDIsNTkuMjA5LDEwMCwxMjUuMTgxLDEwMCwyMDR2MzANCgkJCWMwLDI2LjY0Ny05LjY3Myw0My41NjYtMjEuOTE5LDY0Ljk4NmMtMTIuMDY0LDIxLjEwNC0yNS43MzksNDUuMDIzLTMyLjY1NSw4MS45MjRjLTMuMzAxLDE3LjYxNiwxLjM2OSwzNS42MjYsMTIuODEzLDQ5LjQxNA0KCQkJQzY5LjY3Myw0NDQuMSw4Ni40OTcsNDUyLDEwNC4zOTcsNDUyaDkxLjk4OWMwLDMzLjA4NCwyNi45MTYsNjAsNjAsNjBzNjAtMjYuOTE2LDYwLTYwaDkxLjYwM2MxNy45LDAsMzQuNzI1LTcuOSw0Ni4xNTgtMjEuNjc2DQoJCQlDNDY1LjU5MSw0MTYuNTM2LDQ3MC4yNjEsMzk4LjUyNiw0NjYuOTYsMzgwLjkxeiBNMjU2LjM4Nyw0NzJjLTExLjAyOCwwLTIwLTguOTcyLTIwLTIwaDQwDQoJCQlDMjc2LjM4Nyw0NjMuMDI4LDI2Ny40MTUsNDcyLDI1Ni4zODcsNDcyeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTA4LjM2Myw0NS4wOThjLTguMjMtNy4zNjgtMjAuODc0LTYuNjY4LTI4LjI0MSwxLjU2MkM0MS4zNTIsODkuOTcsMjAsMTQ1Ljg1LDIwLDIwNC4wMDZjMCwxMS4wNDYsOC45NTQsMjAsMjAsMjANCgkJCXMyMC04Ljk1NCwyMC0yMGMwLTQ4LjI5OCwxNy43My05NC43MDMsNDkuOTI1LTEzMC42NjdDMTE3LjI5Miw2NS4xMDksMTE2LjU5Myw1Mi40NjUsMTA4LjM2Myw0NS4wOTh6Ii8+DQoJPC9nPg0KPC9nPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00MzEuODc4LDQ2LjY2Yy03LjM2Ny04LjIyOS0yMC4wMTItOC45MjktMjguMjQxLTEuNTYycy04LjkyOSwyMC4wMTEtMS41NjIsMjguMjQxDQoJCQlDNDM0LjI3LDEwOS4zMDQsNDUyLDE1NS43MDgsNDUyLDIwNC4wMDZjMCwxMS4wNDYsOC45NTQsMjAsMjAsMjBjMTEuMDQ2LDAsMjAtOC45NTQsMjAtMjANCgkJCUM0OTIsMTQ1Ljg1LDQ3MC42NDgsODkuOTcsNDMxLjg3OCw0Ni42NnoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==">
</amp-img>
Benachrichtigungen erhalten</button>
</amp-web-push-widget>
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="45">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
Benachrichtigungen abmelden</button>
</amp-web-push-widget>

Dieser Code kann auch gerne an die Erfordernisse angepasst werden. Wichtig dabei ist, dass bei den beiden Buttons innerhalb des <amp-web-push-widget> die on="tap:amp-web-push.subscribe" Eigenschaft gesetzt wird. Wird darauf vergessen, funktionieren die Buttons nicht:

Anmelde-Button

<amp-web-push-widget ....>
  <button .... on="tap:amp-web-push.subscribe">

Abmelde Button

<amp-web-push-widget ....>
  <button .... on="tap:amp-web-push.unsubscribe">

👍 Wenn diese Punkte abgeschlossen sind ist deine Seite AMP Web-Push ready.