AMP Web Push einrichten

Falls Sie bei Ihrer Seite AMP (Accelerated Mobile Pages)
einsetzen, und auch wirklich nur dann, zeigen wir Ihnen in dieser Anleitung,
wie Sie trotzdem nicht auf Web Push Benachrichtigungen verzichten müssen. So
können Sie auch Push Eintragungen von AMP Nutzern einholen.

Hierzu sind 3 Schritte notwendig.

1. Web Push Skript einbinden

Das offizielle amp-web-push Skript im <head>
einbinden:

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

2. Web Push Element einfügen

Für HTTPS Seiten:

cleverpush-amp-helper-frame.html
und
cleverpush-amp-permission-dialog.html
in einem gewünschten Verzeichnis platzieren. Wir empfehlen das Root Verzeichnis.
Andernfalls müssen die beiden Dateien im gleichen Verzeichnis wie
cleverpush-worker.js liegen.

Folgenden Code an einer beliebigen Stelle im <body>
des AMP Quelltexts einfügen:

<amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://DOMAIN.COM/cleverpush-amp-helper-frame.html"
    permission-dialog-url="https://DOMAIN.COM/cleverpush-amp-permission-dialog.html"
    service-worker-url="https://DOMAIN.COM/cleverpush-worker.js"
  >
</amp-web-push>

(DOMAIN.COM durch Domain aus den Kanal Einstellungen ersetzen)

Für HTTP Seiten:

Folgenden Code an einer beliebigen Stelle im <body>
des AMP Quelltexts einfügen:

<amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://SUBDOMAIN.cleverpush.com/amp-helper-frame"
    permission-dialog-url="https://SUBDOMAIN.cleverpush.com/amp-permission-dialog"
    service-worker-url="https://SUBDOMAIN.cleverpush.com/worker.js"
  >
</amp-web-push>

(SUBDOMAIN durch Subdomain aus den Kanal Einstellungen ersetzen)

3. Opt-In Widget einfügen

Damit der User sich nun auch für die Push Nachrichten anmelden kann, muss mindestens
eines unserer Widgets eingebaut werden.
Es gibt hier 2 Varianten, die auch in Kombination genutzt werden können:

Variante 1: Button Widget
Variante 2: Overlay Widget

Button Widget:

Folgenden Code im <head> der Seite einfügen. Falls
bereits ein <style amp-custom> Tag existiert, bitte
den nachfolgenden Inhalt in den bestehenden Tag einfügen (die Styles
können natürlich beliebig bearbeitet werden):

<style amp-custom>
amp-web-push-widget button.subscribe {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 15px;
  cursor: pointer;
  outline: none;
  font-size: 15px;
  font-weight: 400;
  background: #4A90E2;
  color: white;
  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 .subscribe-icon {
  margin-right: 10px;
}

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

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>

Folgenden Code dort einfügen, wo der Opt-In Button erscheinen soll (wir
empfehlen nach dem Inhalt des Artikels und vor den Kommentaren):

<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
  <button class="subscribe" on="tap:amp-web-push.subscribe">
    <amp-img
     class="subscribe-icon"
     width="24"
     height="24"
     layout="fixed"
     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUuMTM3IDMuOTQ1Yy0uNjQ0LS4zNzQtMS4wNDEtMS4wNy0xLjA0LTEuODJ2LS4wMDNjMC0xLjE3Mi0uOTM5LTIuMTIyLTIuMDk3LTIuMTIycy0yLjA5Ny45NS0yLjA5NyAyLjEyMnYuMDAzYy4wMDEuNzUxLS4zOTYgMS40NDYtMS4wNDEgMS44Mi00LjY2NyAyLjcxMi0xLjk4NSAxMS43MTUtNi44NjIgMTMuMzA2djEuNzQ5aDIwdi0xLjc0OWMtNC44NzctMS41OTEtMi4xOTUtMTAuNTk0LTYuODYzLTEzLjMwNnptLTYuNzI4IDEyLjA1NWgtMS44ODJjMS4yNDUtMi43NDEuODc5LTkuMDEyIDMuODczLTEwLjY1NS0xLjc2MSAyLjA2Ny0uOTUgNy41MDQtMS45OTEgMTAuNjU1em0zLjU5MS0xM2MtLjU1MiAwLTEtLjQ0OC0xLTEgMC0uNTUxLjQ0OC0xIDEtMXMxIC40NDkgMSAxYzAgLjU1Mi0uNDQ4IDEtMSAxem0tMyAxOGg2YzAgMS41OTgtMS4zOTMgMy0yLjk3MSAzLTEuNTc5IDAtMy4wMjktMS40MDItMy4wMjktM3oiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+">
    </amp-img>
    Benachrichtigungen erhalten
  </button>
</amp-web-push-widget>

<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
   <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Von Benachrichtigungen abmelden</button>
</amp-web-push-widget>

(SUBDOMAIN durch Subdomain aus den Kanal Einstellungen ersetzen)

Overlay Widget:

Falls amp-script noch nicht verwendet wird, muss folgender
Code im <head> der Seite eingefügt werden:

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

Falls amp-bind noch nicht verwendet wird, muss folgender
Code im <head> der Seite eingefügt werden:

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

Folgenden Code im <head> der Seite einfügen. Falls bereits ein <style amp-custom> Tag existiert, bitte den nachfolgenden Inhalt in den bestehenden Tag einfügen (die Styles können natürlich beliebig bearbeitet werden):

.cleverpush-btn {

position: fixed;

z-index: 2;

bottom: 60px;

left: 20px;

background-color: #fa6909;

width: 48px;

height: 48px;

border-radius: 50%;

border: 0;

outline: none;

display: flex;

align-items: center;

justify-content: center; }

.cleverpush-unsubscribe {

opacity: .6;

width: 32px;

height: 32px; }

.cleverpush-confirm {

left: 10px;

right: 10px;

padding: 15px;

bottom: 0;

position: fixed;

background-color: #fff;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); }

.cleverpush-confirm-title {

font-size: 17px;

font-weight: bold;

margin-bottom: 5px; }

.cleverpush-confirm-text {

font-size: 14px;

margin-bottom: 10px;

color: #555; }

.cleverpush-confirm-buttons {

display: flex;

align-items: center;

margin-top: 15px; }

.cleverpush-confirm-button {

color: #555;

background-color: transparent;

padding: 10px;

width: 50%;

margin-right: 5px;

text-align: center;

border: none;

font-size: 16px;

font-weight: bold;

cursor: pointer;

border-radius: 5px; }

.cleverpush-confirm-button:hover {

opacity: 0.9; }

.cleverpush-confirm-button-allow {

background-color: green;

color: #fff;

margin-left: 5px;

margin-right: 0; }

amp-consent {

background: none; }

Folgendes Skript herunterladen und auf der eigenen Domain unter einem beliebigen Pfad bereitstellen: https://static.cleverpush.com/channel/amp/CHANNEL_ID.js (CHANNEL_ID mit der Kanal ID ersetzen)
Folgenden Code oben im <body> der
Seite einfügen:

    <amp-script layout="fixed-height" height="1" src="/cleverpush/cleverpush-amp.js">
        <div>&nbsp;</div>

        <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="300" height="300" hidden [hidden]="cleverpushConfirmVisible != true">
            <div class="cleverpush-confirm">
                <div class="cleverpush-confirm-title">Push Nachrichten aktivieren</div>

                <div class="cleverpush-confirm-text">Kann jederzeit in den Browser Einstellungen deaktiviert werden</div>

                <div class="cleverpush-confirm-buttons">
                    <button id="cleverpush-button-deny" class="cleverpush-confirm-button" on="tap:AMP.setState({cleverpushConfirmVisible: false})">
                        Nein, danke
                    </button>
                    
                    <button id="cleverpush-button-allow" class="cleverpush-confirm-button cleverpush-confirm-button-allow" on="tap:amp-web-push.subscribe">
                        Aktivieren
                    </button>
                </div>
            </div>
        </amp-web-push-widget>
    </amp-script>

Aufgrund der Limitierungen der gesamten amp-script Größen auf einer Seite
werden wir versuchen das Skript immer so klein wie möglich zu halten, aktuell
ist es < 1KB groß.
Hinweise:

Wenn der <amp-script Tag nicht oben im Body eingebaut ist, lädt
AMP diesen eventuell erst wenn dieser in den sichtbaren Bereich kommt.
Daher empfehlen wir ihn so weit oben wie möglich einzubauen.
Bestenfalls wird das eingebundene amp-script lokal gehostet, damit
kein amp-script Hash im <head> platziert werden muss.