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:

  1. 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.
  2. 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:

  1. 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:

  1. 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>
    
  2. 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:

  1. 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>
    
  2. 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>
    
  3. 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; }
  4. 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:

    1. 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.
    2. Bestenfalls wird das eingebundene amp-script lokal gehostet, damit
      kein amp-script Hash im <head> platziert werden muss.

Jetzt unverbindlich testen

Unverbindliche Testphase, endet automatisch nach 30 Tagen