Wie nutzt man Headless-Commerce-Plattformen für Marketingkampagnen?

Was sind Headless-Commerce-Plattformen?

Headless E-Commerce-Plattformen oder API-basierte Plattformen – Software, bei der das Frontend (oder der „Kopf“) entkoppelt oder vollständig entfernt wurde, sodass nur das Backend übrig bleibt.

Das architektonische Konzept, das diesen Plattformen zugrunde liegt, begann mit der CMS-Welt. Durch die Trennung von Ebenen wollten Unternehmen Hindernisse auf dem Weg zu einer schnelleren Bereitstellung von Inhalten auf immer neueren Marketingkanälen bekämpfen – wobei das Smartphone die erste Geige spielte.

Bei der traditionellen CMS-Software sind die Low-Level-Probleme, mit denen Entwickler konfrontiert waren:

• das Design wird durch veraltete Frameworks eingeschränkt, nur vordefinierte Erfahrungssätze sind verfügbar;
• Kleine Front-End-Änderungen können Änderungen in der Datenbank und im Back-End-Code erfordern, was die Testzeit und damit die Gesamtkosten der Aufgabe erhöht;
• Änderungen am Back-End-Code können unerwartete Fehler im Front-End verursachen;

haben sich angesammelt und im Laufe der Zeit in Handbremse für Unternehmen übersetzt:

• wenig oder kein Raum für Personalisierung;
• Verwirrung und gegenseitiges Missverständnis darüber, warum kleine Softwareänderungen ewig dauern, bis sie abgeschlossen sind;
• neue Marketingkanäle ungenutzt oder umgangen Software mit niedriger Priorität, die zu spät kommt.

Infolgedessen sind „API-first“, „API-based“ oder „headless CMS“ in vollem Gange. Aber das weitete sich bald auf andere digitale Bereiche aus, darunter E-Commerce und Marketing.

Wenn Sie zum ersten Mal auf Headless-Plattformen stoßen, finden Sie vielleicht meinen letzten Artikel interessant: API-basierte Plattformen verstehen. Außerdem zeigt Paul in seiner Introduction to Headless eCommerce einige reale Beispiele von Anwendungen, die mit API-basierten Tools erstellt wurden.

Headless-Plattformen – von der Idee zum produktionsreifen POC in 1 Tag

Lassen Sie uns prüfen, ob wir wirklich so schnell flexible Software bauen können. Wir werden eine Marketingstrategie nachbauen, die heutzutage von Top-Marken verwendet wird. Kurz gesagt wird es:

• Kunden geolokalisieren.
• Weisen Sie ihnen einen personalisierten Rabattgutschein zu.
• Liefern Sie einen eindeutigen Gutscheincode mit einer Push-Benachrichtigung.

Es ist nicht schwer vorstellbar, dass Unternehmen wie Uber ein Dutzend Entwickler-Mannmonate oder sogar mehr in diese Software investiert haben müssen.

Was wie die einfachste Aufgabe aussehen mag – die Zuweisung eines zufälligen Rabattcodes – ist mit Vorbehalten behaftet. Ich habe das auf die harte Tour gelernt, weil unser Team jetzt seit 3 ​​Jahren daran arbeitet. Die Zahl der neuen Corner Cases, die immer größer werden, und der Verwaltungsaufwand können sogar etwas verbrennen, das wie ein einfaches System aussieht.

Glücklicherweise sind die kopflosen Plattformen hier, um uns zu helfen.

Wir verwenden drei entwicklerfreundliche SaaS-Plattformen, um eine funktionierende Lösung zu erstellen:

• Radar - Geolokalisierungs-API
• Voucherify - Promotion-Management-API
• Braze - Benachrichtigungs-API

Mal sehen, wie wir sie zusammenführen können, um Ihre Kunden mit wirklich personalisierten Werbeaktionen zu beeindrucken, die durch einen Headless-Ansatz bereitgestellt werden.

Hinweis: Die folgende Lösung setzt voraus, dass Sie ein aktives Konto bei Radar, Voucherify und Braze haben. Außerdem sollten sie alle mit Ihrer Kundendatenbank gefüllt sein, einschließlich eines Felds, das zur eindeutigen Identifizierung einer Person verwendet werden kann.

Erkennen Sie den Moment, in dem ein Kunde Ihre Wohnung betritt, mit Radar – Headless Geolocation

Das Konzept hinter Radar ist einfach. Die Plattform geolokalisiert Apps mithilfe von 3 Kontexttypen:

• Geofence – Radar ist stolz darauf, leistungsfähiger als natives iOS- oder Android-Geofencing zu sein, mit plattformübergreifender Unterstützung für unbegrenzte Geofences, Polygon-Geofencing und Stopperkennung. Dies liegt daran, dass die gesamte Geofencing- und Ereignisgenerierung serverseitig erfolgt.
• Orte - Radar kann eine umfangreiche Liste von Orten erkennen, da es die Facebook-Datenbank verwendet. Und das Coolste daran ist, dass Sie mit eingebauten Kategorien (z. B. große Flughäfen) oder Ketten (z. B. Starbucks) arbeiten können.
• Einblicke – Ihre Standort-Engine kann auch lernen, wie ein Benutzer das Haus und das Büro betritt/verlässt.

Wenn Radar erkennt, dass Ihr Benutzer den Ort besucht oder verlässt, können Sie Ihre Anwendung mit einem Webhook benachrichtigen.

Alles, was Sie als Entwickler tun müssen, ist, eines der Software-Entwicklungskits (iOS, Android, Web) zu verwenden, um Tracking-Optionen zu authentifizieren und zu konfigurieren und zu optimieren - z. B. wenn Sie im Hintergrund oder Vordergrund verfolgen möchten.

Sehen wir uns dann die kopflose Radar-Plattform in Aktion an!

1. Richten Sie Ihr Konto ein

Gehen Sie zu radar.io und melden Sie sich für ein Konto an. Verwenden Sie dann Test-API-Schlüssel, um das Radar-Widget wie unten gezeigt zu initialisieren:

{{CODE}}

<script src="https://js.radar.io/v1.0.0/radar.min.js" integrity="sha384-TFQktvQ2F2ST3MCcepqaOHqwc36jDy7r/gAj7dOvU6VXtJ4m4Dj2hByxZ59d4MjK" crossorigin="anonymous"></script>

<script type="text/javascript">

Radar.initialize("YOUR_KEY");

</script>{{ENDCODE}}

2.Benutzer verfolgen

Der letzte Schritt besteht darin, zu überprüfen, ob das Tracking funktioniert. Dazu verwenden wir die trackOnce- Methode, die aufgerufen wird, wenn Radar Änderungen am Standort erkennt.

Lassen Sie uns den Code ausführen und sehen, welche Informationen Radar bereitstellt (denken Sie daran, die Standortverfolgung in Ihrem Browser zuzulassen):

{{CODE}}

Radar.trackOnce(function(status, location, user, events) { console.log({ status, location, user, events });});

{{ENDCODE}}

Ausgabe:

{{CODE}}

Veranstaltungen: [] (0)

Ort: Koordinaten {Breitengrad: 50.25462479999998, Längengrad: 19.061743829999994, Höhe: null, Genauigkeit: 165, Höhengenauigkeit: null, …}

Status: "ERFOLG"

user: {userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) Ap… (KHTML, like Gecko) Version/12.1 Safari/605.1.15", IP: "93.179.216.18", locationAccuracy: 165, deviceType: "Web", gestoppt: wahr, …}

{{ENDCODE}}

OK - Radar hat unser Versteck gefunden. Aber ohne den Kontext weiß es nicht, was es mit diesen Informationen anfangen soll. Lass uns an Radars Informationen arbeiten.

Wir geben dem Ort, an dem Sie eingecheckt haben, einen Namen – im Allgemeinen (auch in Radar) wird dieser Standortkontext als Geofence bezeichnet. So geht's:

• Gehen Sie zum Geofence-Ersteller.
• Wählen Sie einen entsprechenden Quellentyp aus, ich gehe zu Ort und geben Sie meine Firma als Abfrage ein.
• Als Ergebnis sucht Radar nach den Geokoordinaten und schlägt eine Geofence-Grenze vor.

• Wenn der Standort für Sie funktioniert, bestätigen Sie den Geofence mit CREATE.

Lassen Sie uns nun die Seite aktualisieren und die Konsole beobachten. Das Radar sendet uns nun einige Ereignisse :

{{CODE}}

{

"createdAt": "2019-04-16T16:08:49.645Z",

"leben": falsch,

"type": "user.entered_geofence",

"Lage":{

"Koordinaten":[

19.062212,

50.254927099999996

],

"type": "Punkt"

},

"locationGenauigkeit": 20,

"Vertrauen":3,

"actualCreatedAt": "2019-04-16T16:08:49.645Z",

"Benutzer":{

"_id": "5cb5f2ba36581b002a3534ca",

"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, wie Gecko) Chrome/73.0.3683.103 Safari/537.36",

"deviceId": "a96ec0db-969c-4a77-996c-361a0530660a"

},

"Geofence": {

"_id": "5cb5f7d3a60e95002b009ebd",

"Beschreibung": "Perspektive",

"typ": "Kreis",

"GeometrieRadius": 100,

"GeometrieZentrum":{

"type": "Punkt",

"Koordinaten":[

19.062346299999945,

50.25495069999999

]

}

},

"_id": "5cb5fe117cd3430025b9ee0d"

}

{{ENDCODE}}

Es scheint, als ob es versteht, dass wir unseren neu erstellten Geofence betreten haben. Da wir an derselben Stelle sitzen, sollten nachfolgende Aktualisierungen keine neuen Ereignisse bringen. Aber wenn wir den Standort ändern, wird Radar dies ebenfalls erkennen.

Um es zu testen, schnappen Sie sich Ihre Maschine, verlassen Sie den Geofence-Bereich und melden Sie sich dort erneut an. Oder ... Sie können Sensoren aus den Chrome Tools verwenden.

Täuschen Sie Ihren Standort vor, indem Sie einen weit genug entfernten Standort auswählen und die Seite erneut aktualisieren. Jetzt zeigt Radar das user.exited_geofence

Sie können Geolokalisierungsereignisse für alle registrierten und nicht registrierten Benutzer mit dem praktischen Radar-Dashboard in Echtzeit verfolgen:

Benachrichtigung externer Apps durch Headless Messaging

Das Tracking von Radar versteht jetzt also unseren Standortkontext. Aber um es für unser Szenario zu nutzen, muss Radar es mit der Außenwelt teilen. Und das in vielerlei Hinsicht. Eine davon ist die Verwendung von Webhooks.

Ein Webhook ist ein API-Konzept, das es einer Anwendung ermöglicht, andere Anwendungen mit Echtzeitinformationen zu versorgen.

Laut Segment, einer Plattform, die hilft, Kundendaten über viele Systeme hinweg zu sammeln und auszutauschen, wächst die Popularität von Webhooks schnell.

Eine typische Webhook-Implementierung ermöglicht es einem Benutzer einer Anwendung:

• Benachrichtigen Sie ein externes System (oder viele Systeme)
• mit API-Aufruf(en)
• in dem Moment, in dem ein bestimmtes Ereignis eingetreten ist.

Mit einem solchen Mechanismus muss ein App-Benutzer nicht häufig Daten abrufen, um Änderungen in Echtzeit zu erfassen.

Das Senden einer Anfrage an eine externe API ist nur eine Seite des Prozesses. Um den Webhook-Zyklus abzuschließen, muss der empfangende Client ihn erfolgreich nutzen.

In der HTTP-Welt bedeutet dies normalerweise, mit dem Status 2** zu antworten. Wenn dies nicht der Fall ist, versucht es die Webhook-Engine später erneut (eine Wiederholungsrichtlinie hängt von den definierten Richtlinienautoren ab).

In unserem Fall sendet Radar die Ereignisnutzlast, die wir gesehen haben, als wir unseren Standort geändert haben, an einen bereitgestellten Endpunkt. Lassen Sie uns einen hinzufügen, um die Webhooks in Aktion zu sehen.

1. Gehen Sie zu Integrationen.
2. Wählen Sie die Testumgebung und die Einzelereignisbereitstellung aus .
3. Geben Sie einen zu benachrichtigenden Endpunkt an. Sie haben hier ein paar Möglichkeiten. Sie können:

• Drehen Sie einen einfachen Webserver auf Ihrem Computer aus und verwenden Sie ngrok, um den Datenverkehr zu kanalisieren.
• Verwenden Sie Glitch, um Ihren Endpunkt sofort bereitzustellen,
• Tippen Sie auf einen der Online-Webhook-Catcher wie: webhook.site oder requestbin

4. Fügen Sie Ihre eindeutige URL in das Formular ein und bestätigen Sie.
   

5. Klicken Sie in der Spalte AKTIONEN auf Test, um Ihr erstes Ereignis auszulösen. Wenn Sie es richtig eingerichtet haben, sollten Sie die Webhook-Nutzlast sehen, wie im Bild unten gezeigt:

So weit, ist es gut. Das Ergebnis ist ziemlich vielversprechend, nicht wahr? Mit etwas Kopieren und Einfügen und einem JavaScript-Snippet haben wir den Geolokalisierungsteil unseres Anwendungsfalls abgedeckt. Zum jetzigen Zeitpunkt kann Radar Benutzer nur anhand einer in Cookies gespeicherten Geräte-ID identifizieren. Um es robuster zu machen, identifizieren wir den Benutzer mit einer E-Mail. Mit dem SDK von Radar ist es ein Einzeiler:

{{CODE}}

Radar.setUserId("[email protected]");

{{ENDCODE}}

Sie können die neue ID sofort im Dashboard sehen:

Jetzt müssen wir also eine persönliche Rabattanforderung angehen - einen eindeutigen Gutscheincode.

Verbinden von Radar und Voucherify Headless Promo Engine

Ähnlich wie Radar bietet Ihnen Voucherify mit seiner API eine flexible Couponing-Funktion für einen Bruchteil der Kosten, die Ihnen entstehen würden, wenn Sie von Grund auf neu starten würden.

Wie wir bald erfahren werden, unterstützt es andere Werbekampagnen wie Rabatte, Empfehlungs- oder Treueprogramme, die mit jedem aktuellen oder zukünftigen Marketingkanal geliefert werden können.

Um die Personalisierungsfunktionen von Voucherify nutzen zu können, müssen Sie zuerst die Daten der Benutzer importieren und sie synchron halten.

Voucherify speichert Kundendaten in Kundenobjekten, die nach persönlichen Attributen, Standort und Voucherify-Interaktionsverlauf in Segmente gruppiert werden können.

Nehmen wir an, Sie haben Ihren Testkunden bereits in Voucherify importiert und jetzt sehen wir uns an, wie Sie seinen Standort mit Radar synchronisieren – ohne den Code.

Zapier – der Klebstoff des Webs

Stellen Sie sich vor, alle Plattformen, die Webhooks verfügbar machen, wären in einem einzigen Verzeichnis aufgelistet, mit einer einheitlichen Struktur und der Möglichkeit, sie wie Blöcke zu verbinden – treffen Sie auf Zapier.

Zapier verbindet mehr als 1000 Web-Apps und ermöglicht ihnen, im Hintergrund zusammenzuarbeiten.

Jeder Zap beginnt mit dem Auslösen eines Ereignisses in einer Ihrer Apps, das Ihren Workflow startet. Hier sind einige Beispiele aus Zapiers Dokumenten:

• Automatisieren Sie Ihre Social-Media-Präsenz, indem Sie neue RSS-Elemente als Posts an Facebook senden;
• Organisieren Sie Projekte, indem Sie neue Trello-Karten in Evernote kopieren;
• Bleiben Sie mit Interessenten in Kontakt, indem Sie Formularbefragte von Typeform zu Ihrer Mailingliste in MailChimp hinzufügen;
• Stellen Sie sicher, dass Ihr Team kein Meeting verpasst, indem Sie einen Kanal in Slack über bevorstehende Google Kalender-Ereignisse benachrichtigen;
• …und viele mehr!

Sie werden jetzt wahrscheinlich fragen: „Kann Zapier uns helfen?“. Ja, kann es! Lassen Sie uns mit einigen Zaps herumspielen, um Geolokalisierungsänderungen an Voucherify zu aktualisieren.

1. Klicken Sie auf Make a Zap und wählen Sie Webhooks aus.
2. Mit dieser Option kann Zapier einen Endpunkt (ähnlich wie webhook.site) erstellen, den wir verwenden können, um den Webhook von Radar zu nutzen. Wählen Sie dazu Catch Hook.
3. In der nächsten Ansicht erhalten Sie eine Endpunkt-URL, die die alte im Radar-Webhook-Setup ersetzt.

4. Fügen Sie den Link zu Radar ein und lösen Sie den Test erneut aus. Wenn Radar den neuen Endpunkt mit einem grünen Blinkbalken bestätigt, fahren Sie mit dem nächsten Schritt in Zapier fort.
5. Auf dem nächsten Bildschirm sollten Sie die Nutzlast Ihrer Testanforderung sehen

6. Bestätigen Sie das Formular und der erste Schritt des Zap – Trigger – ist fertig.

Jetzt müssen wir konsumierte Nachrichten in die Arbeit umsetzen. Um den Zap abzuschließen, benötigen wir mindestens eine Aktion (Sie können mehrere Plattformen mit einem einzigen Zap verketten).

1. Wählen Sie Voucherify aus dem Aktions-Explorer. Hinweis Voucherify Zap ist „auf Einladung“ verfügbar, hier ist der Link, um es zu bekommen.

2. Wählen Sie die Option „ Kunden aktualisieren“ und fahren Sie mit dem Formular „Vorlage einrichten“ fort.
3. Dies ist ein wichtiger Teil. Auf diesem Formular können Sie mit Zapier die Eingabe der Ausgabe zuordnen. Der Editor ist sowohl leistungsstark als auch intuitiv. Es verfügt über ein intelligentes Suchfeld, mit dem Sie den eingehenden JSON sowohl nach Schlüsseln als auch nach Werten durchsuchen können. Sie können auch problemlos zwei oder mehr Eingabefelder zu einem Ausgang verketten.

In unserem Fall möchten wir den Kunden nur anhand der source_id identifizieren und ein benutzerdefiniertes Feld „rspectiveHQ“ entsprechend dem Ereignis aktualisieren, sodass die Zuordnung wie folgt aussieht:

Voucherify: Quell-ID - Radar: Benutzer-ID
Voucherify: Metadaten -> rspectiveHQ - Radar: Ereignistyp

4. Überspringen Sie den Test und füllen Sie das Formular aus – der ZAP ist eingeschaltet und wartet!
   

Wir haben den Webhook von Radar konfiguriert und Voucherify Zap aktiviert. Lassen Sie uns testen, ob die gesamte Pipeline funktioniert. Gehen Sie zu unserer Web-App und versuchen Sie erneut, den Standort zu ändern, um den Detektor von Radar zu benachrichtigen.

Folgendes sollte folgen:

• Radar verfolgt 2 Ereignisse, der Benutzer geht aus und in den Geofence.
• Zapier fängt entsprechend 2 Webhooks ab.
• Voucherify-Tracks zu Kundenprofil-Updates.

Zapier ist mehr als das. Wenn Sie sich die Optionen der Workflow-Konfiguration ansehen, werden Sie Rädchen bemerken, mit denen Sie ziemlich komplexe Prozesse erstellen können. Hilfsschritte wie Bedingungen, Filter oder Verzögerungen sind hilfreich, um Eingabedaten zu verarbeiten und zu verdauen und die Ausgabe entsprechend zu formatieren.

Sie können sogar benutzerdefinierten Code (in JavaScript und Python) schreiben, wenn Sie bei einem der Schritte mehr Flexibilität benötigen. Habe ich Ihnen bereits gesagt, dass Sie eine Reihe von Auslöser-Aktions-Paaren verketten können?

Geben Sie der Schnellstartdokumentation von Zapier die Möglichkeit, zu verstehen, welche Art von Zeitersparnis es ist.

Generieren eines einzigartigen Gutscheins für geolokalisierte Benutzer über eine Headless-Promotion-Engine

Eine der wesentlichen Funktionen von Voucherify ist die Personalisierung von Rabatten auf der Grundlage des Kundenprofils in Echtzeit. Dies ist aufgrund der dynamischen Segmente möglich, die Kundenattribute überwachen und was sie in einen Einkaufswagen gelegt haben, und Aktionen gemäß einigen Geschäftsregeln auslösen.

In unserem Fall werden wir ein Segment erstellen, das unser benutzerdefiniertes Feld (rspectiveHQ) überprüft, das wiederum die Informationen speichert, ob ein Kunde den Geofence betreten hat. Wir können dies über einen einzigen Endpunkt der Voucherify-API erreichen, aber der schnellste Weg ist einfach die Verwendung des Dashboards.

Gehen Sie zu Kunden und öffnen Sie den Segmentersteller. Filtern Sie nun den Kunden über ein entsprechendes Metadatenfeld wie im Bild unten heraus:

Bestätigen Sie den Filter, klicken Sie auf „Neu laden “ und Sie sehen alle Kunden, die dem Segment entsprechen. Sie können Ihren Testbenutzer „bitten“, den Geofence zu verlassen und das Segment neu zu laden, um zu sehen, ob die Integration wie erwartet funktioniert.

Wenn das, was Sie sehen, die Realität widerspiegelt, speichern Sie das Segment.

Der nächste Schritt besteht darin, die Informationen zum Standort zu verwenden, um den Rabatt anzupassen.

Aber bevor wir uns damit befassen, möchte ich, dass Sie einen Moment innehalten und analysieren , wie viel wir bisher erreicht haben, ohne einen einzigen Back-End-Code zu schreiben . Gleichzeitig haben wir unsere Lösung nicht für Änderungen geschlossen, da sowohl Radar als auch Voucherify eine reichhaltige API und Headless-Architektur bieten, die Sie bei Bedarf anschließen können.

Der letzte Schritt besteht darin, eine Distribution einzurichten, die:

• Senden Sie einen eindeutigen Gutscheincode
• an einen erkannten Kunden
• mit dem vordefinierten Kanal

Lassen Sie uns zunächst einen eindeutigen Promo-Code für jeden Benutzer generieren. Lassen Sie es einen Rabatt von 10 % sein. Gehen Sie zum Kampagnenersteller, wählen Sie die Option Massencodes und folgen Sie den Schritten, in denen Sie Folgendes definieren:

• Art und Höhe des Rabatts,
• Zeitfenster,
• Codemuster einschließlich Länge, Präfix, Suffix und Zeichensatz,
• anfängliche Anzahl von Codes,
• und andere Details.

Besonders interessant ist die 4. Stufe des Erstellers – die Validierungsregeln. Hier legen Sie fest, wer und unter welchen Bedingungen den Code einlösen kann. Denken Sie daran, dass wir die Einlösung nur auf diejenigen Kunden beschränken möchten, die unseren Geofence besucht haben. Wir verwenden unser Segment, um diesen Schritt abzuschließen.

Dieses Tool bietet Ihnen viel mehr Filteroptionen. Wenn Sie zufällig an Kundenakquisitions- oder Kundenbindungskampagnen arbeiten, sollten Sie sich die Referenz zu den Validierungsregeln ansehen, da Sie dadurch eine Menge Codezeilen sparen können.

Wenn Voucherify die Massengenerierung abgeschlossen hat, sollten Sie sie aufgelistet sehen:

Wir haben die Segment- und Promo-Codes, jetzt stecken wir sie in unseren ausgehenden Marketingkanal!

Sie können es mit der Voucherify-API und Webhooks implementieren, aber es gibt einen schnelleren Weg – Lernen Sie Distributionen kennen.

Mit dieser Funktion können Sie einen neuen Kunden erkennen, der ein Segment betreten (oder verlassen) hat, ihm einen eindeutigen Gutscheincode zuweisen und ihn per E-Mail, SMS, Push-Benachrichtigung, Live-Chat oder Social-Media-Anzeigen versenden. Darüber hinaus hilft Ihnen ein visueller Editor bei der Erstellung einer personalisierten Werbekopie.

Jeder Kanal hat seine eigene spezifische Vorlage für die Nachricht. Mal sehen, wie es für Push-Benachrichtigungen aussieht. Aber um fortzufahren, müssen wir uns für ein Braze-Konto anmelden und es mit Voucherify mit dem API-Schlüssel verbinden.

Senden eines Promo-Codes per Push-Benachrichtigung mit Braze

Braze (ehemals AppBoy) ist einer der führenden Anbieter von mobilen Marketing-Tools. Wir werden nur einen Bruchteil ihrer Möglichkeiten nutzen, daher empfehle ich, ihre Dokumente zu überprüfen, um mehr über ihr Angebot zu erfahren.

Die Konfiguration unseres Szenarios erfordert 3 Schritte:

• Erstellen einer Push-Benachrichtigungskampagne;
• Senden von Gutscheincodes von Voucherify an Braze;
• Konfigurieren einer Web-Push-Benachrichtigung in unserer App.

Push-Benachrichtigungskampagne

Ähnlich wie Voucherify kann Braze einige Aktionen basierend auf Echtzeitänderungen an den Attributen des Kunden auslösen. In diesem speziellen Fall legt die von uns in Voucherify erstellte Verteilung ein benutzerdefiniertes Feld fest, das mit einem eindeutigen Code aus der Massencode-Kampagne gefüllt ist.

Wir werden die Braze-Kampagne so definieren, dass sie diese Änderung erkennt und eine Push-Benachrichtigung an eine App-Instanz sendet, bei der ein Kunde angemeldet ist.

1. Öffnen Sie App-Gruppe verwalten, um einen App-Kontext zu definieren.
2. Wählen Sie eine Web-App aus, um einen öffentlichen API-Schlüssel zu erhalten.
   

3. Jetzt können Sie zu Kampagnen gehen und eine neue Push-Benachrichtigungskampagne erstellen.
4. Verfassen Sie eine Nachricht, die den Gutscheincode {{custom_attribute.${coupon}}} enthält, wählen Sie die Registerkarte „Test“ und verwenden Sie „Test an mich selbst senden“. Wenn Sie Webbenachrichtigungen zulassen, sollten Sie oben rechts eine Nachricht bemerken.

5. Der Gutscheincode in der Testnachricht ist leer, da wir dieses benutzerdefinierte Attribut keinem der Benutzer hinzugefügt haben. Lassen Sie uns den Entwurf der Kampagne speichern und manuell einen Testbenutzer mit dem Code erstellen.
   
   Erstellen Sie eine einfache CSV-Datei nach dem Schema:

{{CODE}}

externe_id, gutschein

[email protected], xyz

{{ENDCODE}}

Und gehen Sie zu Benutzerimport, um es hochzuladen.

6. Nachdem wir nun die Testdaten und die Option „Attribute des Empfängers überschreiben…“ aktiviert haben, können wir die ersetzte Variable sehen.
7. Ändern Sie auf der Registerkarte Lieferung den Typ der Lieferung in Aktionsbasiert und wählen Sie Auslöser für benutzerdefinierten Attributwert ändern aus, wie in der Abbildung unten gezeigt:

8. Tragen Sie im nächsten Schritt „Alle Nutzer“ in die Kampagne ein und lassen Sie andere Einstellungen unverändert. Wenn Sie fertig sind, klicken Sie unten rechts auf Kampagne starten.

Bereitstellung von Gutscheincodes für Braze

Das ist der Moment, in dem wir Voucherify an Braze anschließen sollten. Glücklicherweise unterstützt Voucherify Braze mit einer nativen Integration. Um diese beiden Marketingplattformen zu verbinden, müssen Sie nur noch zu Integrationen gehen, Braze auswählen und den API-Endpunkt und -Schlüssel angeben.

Jetzt können Sie den Entwurf unserer Distribution erneut öffnen und den letzten Schritt abschließen. Geben Sie die Namen der benutzerdefinierten Felder an, unter denen Voucherify einen eindeutigen Code und seinen Wert zuweist:

Und schalte es live. Von nun an weist Voucherify diesem Kunden jedes Mal, wenn Radar ein Geofence-Ereignis erkennt und somit das Kundensegment aktualisiert, einen Gutscheincode zu und veröffentlicht ihn im Benutzerprofil in Braze.

Die Braze-Kampagne erkennt die neue Feldänderung und versucht, eine Webbenachrichtigung zu senden.

Push-Benachrichtigung erhalten

Wir sind fast da! Der allerletzte Schritt zum Abschluss unserer Aktionskette besteht darin, Push-Benachrichtigungen in unsere App einfließen zu lassen.

Wie bei Headless-Plattformen üblich, muss es nicht manuell implementiert werden. Braze bietet als echte Developer-First-Plattform ein Open-Source-SDK für das Web.

Um es zum Laufen zu bringen, müssen Sie ein kurzes Snippet einfügen und es mit dem öffentlichen API-Schlüssel füllen.

{{CODE}}

<script type="text/javascript">

const test_user = {

vorname : "Mike",

Nachname : "Sedzielewski",

E-Mail: "[email protected]"

}

+function(a,p,P,b,y){appboy={};appboyQueue=[];for(var

s="initialisieren zerstören getDeviceId toggleAppboyLogging setLogger

openSession changeUser requestImmediateDataFlush requestFeedRefresh

SubscribeToFeedUpdates requestContentCardsRefresh

SubscribeToContentCardsUpdates logCardImpressions logCardClick

logCardEntlassung logFeedDisplayed logContentCardsDisplayed

logInAppMessageImpression logInAppMessageClick

logInAppMessageButtonClick logInAppMessageHtmlClick

SubscribeToNewInAppMessages removeSubscription

removeAllSubscriptions logCustomEvent logPurchase isPushSupported

isPushBlocked isPushGranted isPushPermissionGranted

registerAppboyPushMessages unregisterAppboyPushMessages

SubmitFeedback TrackLocation StopWebTracking ResumeWebTracking

wipeData ab ab.DeviceProperties ab.User ab.User.Genders

ab.User.NotificationSubscriptionTypes ab.User.prototype.getUserId

ab.User.prototype.setFirstName ab.User.prototype.setLastName

ab.User.prototype.setEmail ab.User.prototype.setGeschlecht

ab.User.prototype.setDateOfBirth ab.User.prototype.setCountry

ab.User.prototype.setHomeCity ab.User.prototype.setLanguage

ab.User.prototype.setEmailNotificationSubscriptionType

ab.User.prototype.setPushNotificationSubscriptionType

ab.User.prototype.setPhoneNumber ab.User.prototype.setAvatarImageUrl

ab.User.prototype.setLastKnownLocation

ab.User.prototype.setUserAttribute

ab.User.prototype.setCustomUserAttribute

ab.User.prototype.addToCustomAttributeArray

ab.User.prototype.removeFromCustomAttributeArray

ab.User.prototype.incrementCustomUserAttribute

ab.User.prototype.addAlias

ab.User.prototype.setCustomLocationAttribute

ab.InAppMessage ab.InAppMessage.SlideFrom ab.InAppMessage.ClickAction

ab.InAppMessage.DismissType ab.InAppMessage.OpenTarget

ab.InAppMessage.ImageStyle ab.InAppMessage.TextAlignment

ab.InAppMessage.Orientation ab.InAppMessage.CropType

ab.InAppMessage.prototype.subscribeToClickedEvent

ab.InAppMessage.prototype.subscribeToDismissedEvent

ab.InAppMessage.prototype.removeSubscription

ab.InAppMessage.prototype.removeAllSubscriptions

ab.InAppMessage.Button

ab.InAppMessage.Button.prototype.subscribeToClickedEvent

ab.InAppMessage.Button.prototype.removeSubscription

ab.InAppMessage.Button.prototype.removeAllSubscriptions

ab.SlideUpMessage ab.ModalMessage ab.FullScreenMessage

ab.HtmlMessage ab.ControlMessage ab.Feed

ab.Feed.prototype.getUnreadCardCount ab.ContentCards

ab.ContentCards.prototype.getUnviewedCardCount ab.Card

ab.ClassicCard ab.CaptionedImage ab.Banner ab.ControlCard

ab.WindowUtils zeigt display.automaticallyShowNewInAppMessages an

display.showInAppMessage display.showFeed display.destroyFeed

display.toggleFeed display.showContentCards display.hideContentCards

display.toggleContentCards sharedLib".split("

"),i=0;i<s.länge;i++){for(var

m=s[i],k=appboy,l=m.split("."),j=0;j<l.length-1;j++)k=k[l[j]];k[l[ j]

]=(neue Funktion("Rückgabefunktion

"+m.replace(/\./g,"_")+"(){appboyQueue.push(arguments); Rückkehr

true}"))()}appboy.getUser=function(){return new

appboy.ab.User};appboy.getCachedFeed=function(){return new

appboy.ab.Feed};appboy.getCachedContentCards=function(){return new

appboy.ab.ContentCards};(y=p.createElement(P)).type='text/javascript

';y.src='https://js.appboycdn.com/web-sdk/2.3/appboy.min.js';y.async

=1;(b=p.getElementsByTagName(P)[0]).parentNode.insertBefore(y,b)}(mit

ndow,document,'script');

appboy.initialize('YOUR_KEY', {baseUrl:

"https://sdk.iad-03.braze.com/api/v3"});

appboy.toggleAppboyLogging();

appboy.registerAppboyPushMessages()

appboy.changeUser("[email protected]");

appboy.display.automaticallyShowNewInAppMessages();

appboy.openSession();

</script>

{{ENDCODE}}

Und registrieren Sie eine service-worker.js:

{{CODE}}

self.importScripts('https://js.appboycdn.com/web-sdk/2.3/service-worker.js');

{{ENDCODE}}

Wenn es vorhanden ist, führen Sie einen weiteren Test mit dem Benutzer „text@example“ in der Eingabe „Individuelle Benutzer hinzufügen“ durch. Ihre App sollte eine Benachrichtigung mit dem Promo-Code „xyz“ erhalten.

Lassen Sie uns nun testen, ob die Kampagne eine Push-Nachricht auslöst, wenn Sie das Coupon -Feld ändern.

Stellen Sie zunächst sicher, dass Ihre Kampagne aktiv ist und die Web-App gestartet wurde. Zweitens, laden Sie die Braze Postman-Sammlung herunter, öffnen Sie den Benutzerdatenkatalog und wählen Sie User Track – Attributes Example. (Wenn du Postman nicht kennst, kannst du es hier nachholen)

Ändern Sie die Endpunkt-URL in die URL, der Sie zugewiesen sind, in meinem Fall lautet sie: https://rest.iad-03.braze.com/

Und die Anforderungsnutzlast an:

{{CODE}}{

"api_key":"IHR_SCHLÜSSEL",

"Attribute":[

{

"external_id": "[email protected]",

"Gutschein": "123"

}

]

} {{ENDCODE}}

Senden Sie die Anfrage und erwarten Sie eine weitere Nachricht mit dem aktualisierten Gutscheincode.

Testen aller kopflosen Bausteine

Um sicherzustellen, dass der Workflow das tut, worum wir gebeten haben, öffnen Sie einfach Ihre App und verwenden Sie den Sensor, um einen anderen Ort zu „lokalisieren“ und dann zurück zum Geofence. In wenigen Sekunden sollten Sie die personalisierte Benachrichtigung auf Ihrem Bildschirm sehen!

Jetzt kann der Benutzer seinen Code nehmen und ihn in das von Voucherify im Backend validierte Coupon-Feld einfügen.

Fassen wir hier die Vorteile von Headless-Plattformen zusammen:

• In ungefähr einer Stunde haben wir eine funktionierende Lösung für ein ziemlich komplexes Geschäftsszenario geliefert.
• Die Codebasis ist super kurz und einfach – was zu weniger Wartungsaufwand führt.
• Obwohl wir keine 100-prozentige Kontrolle über die Lösung haben, ist sie dank des API-Zugriffs immer noch offen für Anpassungen.
• Der Mangel an vollständiger Eigenverantwortung wird durch die Unterstützung der Teams der Anbieter und eine bessere Qualität der Tools ausgeglichen.
• Mit Webhooks und Tools wie Zapier verbinden und verweben Sie verschiedene Abteilungen und Systeme im Handumdrehen.

Eine Sache, auf die Sie bei der Verwendung mehrerer SaaS-Anbieter achten müssen, ist der Fallback. Manchmal ist eine Plattform ausgefallen und Sie müssen Ihr System anweisen, wie es reagieren soll – zB wie die Aktionen gespeichert und in eine Warteschlange gestellt werden sollen. Entwicklerfreundliche Plattformen bieten jedoch Schnittstellen, mit denen Sie ihre API-Verfügbarkeit überwachen und rechtzeitig reagieren können.

Andererseits sind superrobuste Fallbacks für Anwendungen in der POC-Phase doch nicht notwendig.

Wie kann mir der kopflose Ansatz helfen?

Kurz gesagt, indem Sie lernen, wie Sie Headless-Plattformen nutzen können, um schnell und mit reduzierten Kosten etwas Wertvolles aufzubauen, werden Sie auf dem Arbeitsmarkt wertvoller.

Es sind nicht Programmiersprachen oder Frameworks, die heute Wettbewerbsvorteile ausmachen. Es ist oft ganz anders – so können Unternehmen die verfügbaren Tools nutzen, um ihre Probleme mit möglichst wenig Code zu lösen. Mit anderen Worten, dies sind die Dinge, die mehr zählen als die Beherrschung eines bestimmten Tech-Stacks oder Stacks:

• Wissen, wie man die Markteinführungszeit verkürzt;
• Überblick über Techniken zur Senkung der Wartungskosten;
• Fähigkeit, Abhängigkeiten von einzelnen Technologien zu reduzieren;
• Überblick über aktuelle Technologien, die die drei oben genannten unterstützen.

Wo kann man nach weiteren Headless-Commerce-Plattformen suchen?

Ein guter Ausgangspunkt kann diese Liste sein:

Werbeaktionen

• Gutschein
• Geschenkbit
• Vauchar

Katalog & Inventar

• Recombee
• Kanalape
• Kristallisieren

Wagen

• Snipcart
• Fuchs

Zahlung

• Streifen
• Fällig
• Quadrat

Nachrichten

• Schicht
• Pusher
• Kneipe

Buchung & Veranstaltungen

• Zeitkit
• Eintritt

Versand

• Shippo
• Schiffswolke
• Lob

Allgemein

• Elastisch
• Snipcart
• Moltin
• BestellCloud
• Handelstools

Aber wenn Sie über den kopflosen E-Commerce hinausgehen möchten, schlage ich vor, https://www.programmableweb.com zu besuchen und sich zu vertiefen. Eine andere Möglichkeit, Ihre Recherche zu beginnen, besteht darin, Zapier-Integrationen zu durchsuchen.

Eine weitere Möglichkeit besteht darin, zum Postman-API-Netzwerk zu gehen.

Ressourcen:

Demo-Quellcode auf Glitch