Es gibt zwei Möglichkeiten, wie man das Web Push Opt-in gestalten kann: mit dem nativen Opt-in Layer oder mit einem eigenen Layer davor. Der native Opt-in Layer ist der Standard-Dialog, den der Browser anzeigt, um die Zustimmung der Nutzer einzuholen. Ein eigener Layer davor ist eine zusätzliche Option, die man auf seiner Website einbauen kann, um die Nutzer zu überzeugen, sich für Web Push anzumelden.

Die Vor- und Nachteile dieser beiden Optionen sind:

Der native Opt-in Layer ist einfach und schnell zu implementieren, da er vom Browser bereitgestellt wird. Die Nutzer geben mit einem Klick ihr Opt-in. Allerdings hat er auch einige Nachteile: Er ist nicht anpassbar, er kann von den Nutzern leicht übersehen oder abgelehnt werden. Zudem trackt Google die Opt-in Rate auf diesen Banner. Sollte diese eine gewisse Schwelle unterschreiten, wird dieser Banner nicht mehr ausgespielt.

Ein eigener Layer davor ist flexibler und kreativer, da man ihn nach seinen eigenen Vorstellungen gestalten kann. Er kann auch die Conversion Rate erhöhen, indem er den Nutzen und Wert von Web Push hervorhebt und die Nutzer neugierig macht. Zudem kann Google die Opt-Rate auf diesen noch nicht mit tracken und wird so immer eine gute Opt-in Rate für den nativen Layer feststellen.

Zwar sind mit dem eigenen Layer zwei Klicks erforderlich,  jedoch zeigt sich das langfristig die Abonnentenbasis davon positiv profitiert.

Der Beitrag Web Push Opt-in – Nativ vs. Individuell erschien zuerst auf CleverPush.

Der Beitrag Was muss ich hinsichtlich des Datenschutzes zu beachten? erschien zuerst auf CleverPush.

2. Klicke auf Projekteinstellungen (Zahnrad oben links) > Dienstkonten in der Firebase Konsole und dann auf Neuen privaten Schlüssel generieren.

3. Aktiviere „Firebase Cloud Messaging API“ in der Google Cloud Konsole für das zuvor erstellte Firebase Projekt.

Achte beim Klick auf die Verlinkung, dass auch das richtige Google-Konto ausgewählt ist, solltest du mehrere haben. Du kannst das Konto bei Bedarf oben rechts ändern.

3.1. Bitte stelle sicher, dass der Service Account folgende Berechtigungen hat:

• cloudmessaging.messages.create
• firebase.projects.get

Diese Berechtigungen sollten standardmäßig für neue Firebase-Projekte aktiviert sein. Wenn du einen benutzerdefinierten Service Account mit eingeschränkten Berechtigungen verwendest, kannst du diese Berechtigungen hinzufügen, indem du ihm die folgenden Rollen zuweist:

• roles/firebasemessaging.admin (beinhaltet cloudmessaging.messages.create)
• roles/firebase.viewer (beinhaltet firebase.projects.get)

4. Lade den Service Account JSON Datei in den CleverPush Kanal Einstellungen unter Allgemein > Android hoch.
Solltest du den entsprechenden Button für den Upload nicht finden, aktiviere bitte „V1“, wie im Bild unten.

Nachdem du die o.g. Schritte durchgeführt hast, besteht eine Verknüpfung von FireBase zu CleverPush. Nun kannst du damit beginnen, die App in unserem System zu bauen und später im Google Play Store hochzuladen. Dazu folgen künftig weitere Support-Artikel.

Wusstest du schon? – Wir beraten und unterstützen dich auf Wunsch auch gerne bei deinem App-Projekt. Kontaktiere dafür einfach unseren CleverPush-Support via support@cleverpush.com oder deinen persönlichen Ansprechpartner bei uns.

Der Beitrag Wie kann ich eigene FCM Daten (Firebase Cloud Messaging) hinterlegen? erschien zuerst auf CleverPush.

Auch CleverPush stellt eine Integration für Zapier zur Verfügung. So lassen sich bei einem selbst definiertem Trigger automatisch Push Nachrichten über CleverPush versenden.

So funktioniert es:

1. Treten Sie der CleverPush Beta App bei Zapier bei: https://zapier.com/developer/public-invite/199550/04c7661319ef904cdd79cbe7fc3888f1/
2. Erstellen Sie einen neuen Zap: https://zapier.com/app/editor
3. Richten Sie den Trigger ein
4. Neue Action mit der App „CleverPush“ einrichten
   
5. CleverPush Account mit den API Daten aus den CleverPush Einstellungen verbinden
6. Template einrichten: Hier den gewünschten CleverPush Kanal auswählen und die Benachrichtigung gestalten
   
7. Zap aktivieren

Der Beitrag Kann ich CleverPush und Zapier verbinden? erschien zuerst auf CleverPush.

Schritt 1: WordPress Plugin installieren

Navigieren Sie in WordPress zu „Plugins -> Installieren“

Geben Sie anschließend in der Suche rechts oben „CleverPush“ ein. Installieren und aktivieren Sie das CleverPush Plugin.

Schritt 2: API-Daten eingeben

Navigieren Sie in WordPress anschließend zu „Einstellungen -> CleverPush“

Geben Sie hier die API-Zugangsdaten, welche im CleverPush Backoffice unter Einstellungen -> API zu finden sind, ein und speichern Sie diese ab.

Anschließend wählen Sie den gewünschten Kanal aus dem Dropdown-Menü aus und speichern erneut ab.

Bei der Veröffentlichung neuer Beiträge können Sie nun außerdem über die Sidebar mit einem Klick rechts Push Benachrichtigungen verschicken.

Schritt 3: Dateien platzieren (bei HTTPS-Seiten)

Läuft Ihre Webseite über HTTPS, navigieren Sie bitte in Ihrem CleverPush Backoffice zu Kanälen -> (Kanal auswählen).

Sie finden dort die Betriebsmodus Einstellung. Setzen Sie diese Option auf Eigene Domain (HTTPS).

Anschließend kann die Datei cleverpush-worker.js über einen Klick auf den Button heruntergeladen werden.

Diese Datei muss nun in das Hauptverzeichnis Ihres Webservers gelegt werden. Sie sollte also unter https://ihre-domain.com/cleverpush-worker.js erreichbar sein.

Der Beitrag Wie nutze ich CleverPush mit WordPress? erschien zuerst auf CleverPush.

Die Bestätigungsmeldung über die eigene Domain anzeigen zu lassen, hat viele Vorteile:

• Gesendete Benachrichtigungen laufen komplett über ihre Domain, der Nutzer sieht keine CleverPush Subdomain
• Höhere Opt-In Raten, da der Nutzer weniger klicken muss

Bitte beachten Sie, dass bisherige gesammelte Abonnenten nicht auf die neue Domain „übertragen“ werden können. Sie können selbstverständlich weiterhin Nachrichten an diese versenden, allerdings wird dann weiterhin die CleverPush Subdomain bei diesen Nutzern erscheinen.

Auch sollten Sie beachten, dass eine Weiterleitung von HTTP zu HTTPS auf Ihrer Seite eingerichtet sein sollte, da es bei parallelem Betrieb zu Problemen mit CleverPush kommen kann.

Falls Ihre Seite nicht über HTTPS läuft, können wir Ihnen den DNS Anbieter CloudFlare empfehlen, welcher Ihnen komplett kostenlos ein HTTPS Zertifikat auf Ihrer Seite zur Verfügung stellt. Setzen Sie sich bei Fragen zur DNS Umstellung am besten mit Ihrem Domain Anbieter / Webhoster in Verbindung.

Einrichtung

Läuft Ihre Webseite über HTTPS, navigieren Sie bitte in Ihrem CleverPush Backoffice zu Kanälen -> (Kanal auswählen).

Sie finden dort die Betriebsmodus Einstellung. Setzen Sie diese Option auf Eigene Domain (HTTPS).

Anschließend kann die Datei cleverpush-worker.js über einen Klick auf den Button heruntergeladen werden.

Diese Datei muss nun in das Hauptverzeichnis Ihres Webservers gelegt werden. Sie sollte also unter https://ihre-domain.com/cleverpush-worker.js erreichbar sein.

Hinweis: Sollten Sie keine Möglichkeit haben, die Datei in das Hauptverzeichnis Ihrer Webseite zu legen, so können Sie unter der Betriebsmodus Einstellung eigene Dateipfade festlegen.

Damit ist die Einrichtung Ihrer eigenen Domain bei CleverPush abgeschlossen.

Der Beitrag Wie kann ich meine eigene Domain benutzen? erschien zuerst auf CleverPush.

Schritte:

1. Huawai Developer Account registrieren

2. App bei Huawai AppGallery Connect erstellen

3. PushKit für die erstellte App aktivieren

4. HMS Daten bei CleverPush speichern.

Die nötigen Daten (App ID + Secret) finden sich bei Huawei AppGallery Connect -> App auswählen -> Distribute -> App Information.

Die App ID & App Secret bitte unter CleverPush -> Kanäle -> Huawei abspeichern.

Der Beitrag Wie kann ich HMS (Huawei Mobile Services) einrichten? erschien zuerst auf CleverPush.

Der Beitrag Wie binde ich CleverPush in Webseiten ein? erschien zuerst auf CleverPush.

• Google Chrome (Desktop, Android)
• Mozilla Firefox (Desktop, Android)
• Safari (Desktop)
• Opera (Desktop, Android)
• Samsung Internet (Android)
• UCWeb (Android)
• Microsoft Edge (Desktop)
• Vivaldi und andere auf Chromium basierende Browser (Desktop, Android)

Außerdem unterstützen wir iOS, Android, Cordova & React Native in nativen mobilen Applikationen (mehr dazu hier).

Spezialfälle

Privater Modus:

• Push Benachrichtigungen sind im Privaten/Inkognito Modus aus technischen Gründen nicht verfügbar.

Mozilla Firefox Cookies Bug:

• Wenn die Einstellung „Datenschutz & Sicherheit“ -> „Chronik“ auf „nach benutzerdefinierten Einstellungen anlegen“ gesetzt wurde, muss die Einstellung „Cookies von Websites akzeptieren“ aktiv sein und darf NICHT auf „Behalten, bis Firefox geschlossen wird“ stehen, sondern muss auf „Behalten, bis sie nicht mehr gültig sind“ stehen. Mehr Infos zu diesem Bug gibt es hier.

Mozilla Firefox ESR:

• Extended Support Releases (ESR) von Firefox, die an einigen Arbeitsplätzen oder öffentlichen Einrichtungen verwendet werden, unterstützen aktuell keine Push Benachrichtigungen.

Der Beitrag Welche Browser unterstützt CleverPush? erschien zuerst auf CleverPush.

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.

Der Beitrag AMP Web Push einrichten erschien zuerst auf CleverPush.