AMP Web-Push

AMP ist ein Open-Source-Framework von Google zur Entwicklung von benutzerorientierten Webseiten, die nahezu sofort geladen werden.

Durch die Integration der AMP-Web-Push-Komponente in Ihre AMP-Webseiten können Sie Ihre Kunden erreichen, während sie in ihren mobilen Browsern im Internet surfen.

Integrieren Sie AMP in Ihre Webseite

Fügen Sie die folgenden Dateien zum Stammverzeichnis Ihrer Webseite hinzu:

In der Datei permission-dialog.html gibt es zwei anpassbare Blöcke:

<div class="subscribe" permission="default">
    <p class="message">
    {Subscribe to push notifications}
    </p>
</div>

<div class="blocked" permission="denied">
    <p class="message">
    {Unblock push notifications in your browser settings}
    </p>
</div>

Wobei:

{Subscribe to push notifications} — eine CTA-Nachricht, die Benutzer auffordert, Push-Benachrichtigungen zu erlauben;
{Unblock push notifications in your browser settings} — eine CTA-Nachricht, die Benutzer auffordert, Push-Benachrichtigungen in ihren Browsereinstellungen freizugeben (falls Push-Benachrichtigungen von einem Benutzer explizit blockiert werden).

Um das Erscheinungsbild des Berechtigungsdialogs anzupassen, fügen Sie den folgenden Code zum <head>-Tag hinzu:

 <style amp-custom>
    .subscribe {
        /* your css here */
    }

    .blocked {
        /* your css here */
    }
</style>

Integrieren Sie AMP Web-Pushes

Um Web-Push-Benachrichtigungen auf AMP-Seiten zu implementieren, fügen Sie die Komponente amp-web-push zu jeder AMP-Seite hinzu.

Befolgen Sie dazu diese beiden Schritte:

1. Fügen Sie das folgende Skript zum <head>-Tag hinzu:

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

2. Fügen Sie den folgenden Code zum <body>-Tag hinzu:

<body>
    <amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://{domain}/helper-iframe.html"
                 permission-dialog-url="https://{domain}/permission-dialog.html"
service-worker-url="https://{domain}/service-worker.js?applicationCode={applicationCode}&senderId={senderId}&applicationServerKey={applicationServerKey}"
    ></amp-web-push>
    ...
    <!-- Start Subscribe to notifications button -->
    <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
    <button class="subscribe" on="tap:amp-web-push.subscribe">
        {Text on Subscribe button}
    </button>
    </amp-web-push-widget>
    <!-- End the Subscribe to notifications button -->
    <!-- Start Unsubscribe from notifications button -->
    <amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
    <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
        {Text on Unsubscribe button}
    </button>
    </amp-web-push-widget>
    <!-- End Unsubscribe from notifications button -->
    <!-- Start Fallback if a user blocks notifications -->
    <amp-web-push-widget visibility="blocked" layout="fixed" width="250" height="80">
    <div class="fallback">
            {Fallback if a user blocks notifications}
        </div>
    </amp-web-push-widget>
    <!-- End Fallback if a user blocks notifications -->
...
</body>

Wobei:

{domain} — die URL Ihrer Webseite,
{applicationCode} — Ihr Pushwoosh-App-Code,
{senderId} — Sender-ID aus Ihrer Firebase-Konsole,
{applicationServerKey} — Server-Schlüssel aus Ihrer Firebase-Konsole,
{Text on Subscribe button} — ein Text auf einer Schaltfläche zum Aktivieren von Push-Benachrichtigungen,
{Text on Unsubscribe button} — ein Text auf einer Schaltfläche zum Deaktivieren von Push-Benachrichtigungen,
{Fallback if a user blocks notifications} — ein Fallback-Block, der angezeigt wird, wenn ein Benutzer Push-Benachrichtigungen blockiert.

Um den Stil der Schaltflächen anzupassen, fügen Sie den folgenden Code zum <head>-Tag hinzu:

<style amp-custom>
    amp-web-push-widget button.subscribe {
        /* your css here */
    }
    amp-web-push-widget button.unsubscribe {
        /* your css here */
    }
    amp-web-push-widget .fallback {
        /* your css here */
    }
</style>

Um zu überprüfen, ob Sie alles richtig gemacht haben, verwenden Sie bitte https://search.google.com/test/amp\