Come utilizzare le piattaforme di commercio senza testa per le campagne di marketing?

Pubblicato: 2022-04-18

Cosa sono le piattaforme di commercio senza testa?

Piattaforme di e-commerce headless o piattaforme basate su API - software in cui il front-end (o la "testa") è stato disaccoppiato o completamente rimosso, lasciando solo il back-end.

Il concetto architettonico alla base di queste piattaforme è iniziato con il mondo CMS. Separando i livelli, le aziende volevano combattere i blocchi stradali nel loro percorso verso una distribuzione più rapida dei contenuti su canali di marketing sempre nuovi, con lo smartphone al primo posto.

Con il software CMS tradizionale, i problemi di basso livello che gli sviluppatori hanno dovuto affrontare:

il design è vincolato da framework legacy, set predefinito di esperienze disponibili solo;
piccole modifiche al front-end possono richiedere modifiche al database e al codice back-end, aumentando i tempi di test e quindi il costo totale dell'attività;
le modifiche al codice back-end possono causare errori imprevisti nel front-end;

hanno accumulato e tradotto nel tempo in freno a mano per le imprese:

poco o nessun margine di personalizzazione;
confusione e incomprensioni reciproche sul motivo per cui piccole modifiche al software richiedono anni per essere completate;
nuovi canali di marketing non sfruttati o ignorati software a bassa priorità che arriva troppo tardi.

Di conseguenza, "API-first", "API-based" o "headless CMS" sono esplosi. Ma presto si è esteso ad altre aree digitali, tra cui l'e-commerce e il marketing.

Se è la prima volta che incontri piattaforme senza testa, potresti trovare interessante il mio ultimo articolo: Capire le piattaforme basate su API. Inoltre, Paul, nella sua Introduzione all'eCommerce senza testa, mostra alcuni esempi reali di applicazioni create con strumenti basati su API.

Piattaforme senza testa: da un'idea a un POC pronto per la produzione in 1 giorno

Verifichiamo se siamo davvero in grado di creare software flessibili così velocemente. Ricreeremo una strategia di marketing utilizzata dai migliori marchi in questi giorni. In poche parole:

Geolocalizza i clienti.
Assegna loro un buono sconto personalizzato.
Fornisci un codice coupon univoco con una notifica push.

Non è difficile immaginare che aziende come Uber abbiano investito una dozzina di mesi-uomo per sviluppatori o anche di più in questo software.

Quello che potrebbe sembrare il compito più semplice, l'assegnazione di un codice sconto casuale, è gravato da avvertimenti. L'ho imparato a mie spese perché il nostro team ci lavora da 3 anni ormai. Il numero di nuovi casi d'angolo in aumento e il sovraccarico di gestione possono bruciare anche qualcosa che sembra un sistema semplice.

Fortunatamente, le piattaforme senza testa sono qui per aiutarci.

Utilizzeremo tre piattaforme SaaS adatte agli sviluppatori per creare una soluzione funzionante:

Radar - API di geolocalizzazione
Voucherify - API di gestione delle promozioni
Braze - API di notifica

Vediamo come possiamo fonderli insieme per stupire i tuoi clienti con promozioni davvero personalizzate fornite attraverso un approccio headless.

Nota: la soluzione seguente presuppone che tu abbia un account attivo su Radar, Voucherify e Braze. Inoltre, tutti dovrebbero essere popolati con il database dei clienti, incluso un campo che può essere utilizzato per identificare in modo univoco una persona.

Rilevare il momento in cui un cliente entra nella tua casa con Radar - geolocalizzazione senza testa

Il concetto alla base di Radar è semplice. La piattaforma geolocalizza le app utilizzando 3 tipi di contesto:

Geofence - Il radar è orgoglioso di essere più potente del geofencing nativo di iOS o Android, con supporto multipiattaforma per geofence illimitati, geofence poligonali e rilevamento degli arresti. Questo perché tutto il geofencing e la generazione di eventi avvengono lato server.
Luoghi: il radar è in grado di riconoscere un ampio elenco di luoghi perché utilizza il database di Facebook. E la cosa più interessante è che puoi lavorare con categorie integrate (ad esempio, i principali aeroporti) o catene (ad esempio Starbucks).
Approfondimenti - Il loro motore di localizzazione può anche imparare come approssimare un utente che entra/esce da casa e dall'ufficio.

Quando Radar rileva le visite dei tuoi utenti o lascia il luogo, ti consente di notificare la tua applicazione con un webhook.

Tutto ciò che devi fare, come sviluppatore, è utilizzare uno dei kit di sviluppo software (iOS, Android, Web) per autenticare, configurare e perfezionare le opzioni di tracciamento, ad esempio se desideri tracciare in background o in primo piano.

Allora vediamo la piattaforma senza testa Radar in azione!

1. Configura il tuo account

Vai su radar.io e crea un account, quindi utilizza le chiavi API di test per inizializzare il widget Radar come mostrato di seguito:

Radar.initialize("LA TUA_CHIAVE");

</script>{{ENDCODE}}

2. Tieni traccia degli utenti

Il passaggio finale è verificare se il monitoraggio funziona. Per fare ciò, utilizzeremo il metodo trackOnce che viene invocato se Radar rileva eventuali modifiche alla posizione.

Eseguiamo il codice e vediamo quali informazioni fornisce Radar (ricorda di consentire il rilevamento della posizione nel tuo browser):

{{CODICE}}

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

Produzione:

eventi: [] (0)

posizione: coordinate {latitudine: 50.254624799999998, longitudine: 19.061743829999994, altitudine: nulla, accuratezza: 165, altitudinePrecisione: nulla, …}

stato: "SUCCESSO"

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", fermo: vero, …}

OK - Il radar ha trovato il nostro nascondiglio. Ma senza il contesto, non sa cosa fare con queste informazioni. Lavoriamo sulle informazioni di Radar.

Daremo un nome al luogo da cui hai effettuato il check-in - in generale (anche in Radar) questo contesto di posizione è chiamato geofence. Ecco come farlo:

Vai al creatore di geofence.
Seleziona un rispettivo tipo di fonte, andrò su Place e digiterò la mia azienda come query.
Di conseguenza, Radar cerca le coordinate geografiche e suggerisce un confine di geofence.

Se la posizione funziona per te, conferma il geofence con CREATE.

Ora, aggiorniamo la pagina e guardiamo la console. Il radar ora ci invia alcuni eventi :

{

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

"vivere": falso,

"type":"user.entered_geofence",

"Posizione":{

"coordinate":[

19.062212,

50.254927099999996

"tipo": "Punto"

"precisione posizione":20,

"fiducia":3,

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

"utente":{

"_id":"5cb5f2ba36581b002a3534ca",

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

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

"geofence":{

"_id":"5cb5f7d3a60e95002b009ebd",

"description": "prospettiva",

"tipo": "cerchio",

"geometryRadius":100,

"geometryCenter":{

"tipo": "Punto",

"coordinate":[

19.062346299999945,

50.25495069999999

]

}

"_id":"5cb5fe117cd3430025b9ee0d"

}

Sembra che capisca che siamo entrati nel nostro geofence appena creato. Dato che siamo nello stesso posto, i successivi aggiornamenti non dovrebbero comportare nuovi eventi. Ma quando cambiamo la posizione, anche Radar la rileverà.

Per testarlo, prendi la tua macchina, esci dall'area del geofence e accedi nuovamente lì Oppure... puoi utilizzare i sensori degli strumenti di Chrome.

Falsa la tua posizione selezionando una posizione abbastanza distante e aggiorna di nuovo la pagina. Ora Radar mostra che user.exited_geofence

Puoi monitorare gli eventi di geolocalizzazione per tutti gli utenti registrati e non registrati con la comoda dashboard di Radar, in tempo reale:

Notifica ad app esterne tramite messaggistica headless

Quindi il monitoraggio di Radar ora comprende il contesto della nostra posizione. Ma per utilizzarlo per il nostro scenario, Radar deve condividerlo con il mondo esterno. E lo fa in molti modi. Uno di questi è l'utilizzo di webhook.

Un webhook è un concetto API che consente a un'applicazione di fornire ad altre applicazioni informazioni in tempo reale.

Secondo Segment, una piattaforma che aiuta a raccogliere e scambiare i dati dei clienti su molti sistemi, la popolarità dei webhook sta crescendo rapidamente.

Una tipica implementazione webhook consente a un utente di un'applicazione di:

notificare un sistema esterno (o più sistemi)
con una o più chiamate API
momento in cui si è verificato un particolare evento.

Con un tale meccanismo in atto, un utente dell'app non ha bisogno di eseguire frequentemente il polling dei dati per rilevare le modifiche in tempo reale.

L'invio di una richiesta a un'API esterna è solo un aspetto del processo. Per completare il ciclo del webhook, il client ricevente deve consumarlo correttamente.

Nel mondo HTTP, questo di solito significa rispondere con lo stato 2**. In caso contrario, il motore webhook tenterà di nuovo in un secondo momento (una politica di ripetizione dipende dagli autori della politica definiti).

Nel nostro caso, Radar invia il payload dell'evento che abbiamo visto quando abbiamo cambiato la nostra posizione a un endpoint fornito. Aggiungiamone uno per vedere i webhook in azione.

Vai a Integrazioni.
Seleziona l'ambiente di test e la consegna di un singolo evento .
Fornire un endpoint da notificare. Hai un paio di opzioni qui. Puoi:

crea un semplice server web sulla tua macchina e usa ngrok per incanalare il traffico,
usa glitch per distribuire immediatamente il tuo endpoint,
tocca uno dei raccoglitori di webhook online come: webhook.site o requestbin

Incolla il tuo URL univoco nel modulo e conferma.

Fai clic su Test dalla colonna AZIONI per attivare il tuo primo evento. Se lo hai impostato correttamente, dovresti vedere il payload del webhook come mostrato nell'immagine qui sotto:

Fin qui tutto bene. Il risultato è abbastanza promettente, vero? Con un po' di copia e incolla e uno snippet di JavaScript, abbiamo coperto la parte della geolocalizzazione del nostro caso d'uso. Allo stato attuale, Radar non può identificare gli utenti se non con un ID dispositivo memorizzato nei cookie. Per renderlo più robusto, identifichiamo l'utente con un'e-mail. Con l'SDK di Radar, è una riga:

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

Puoi vedere immediatamente il nuovo ID nella dashboard:

Quindi, ora dobbiamo affrontare un requisito di sconto personale: un codice coupon univoco.

Collegamento del motore promozionale senza testa Radar e Voucherify

Analogamente a Radar, Voucherify con la sua API ti offre una funzione di couponing flessibile per una frazione del costo che dovresti sostenere se iniziassi da zero.

Come impareremo presto, supporta altre campagne promozionali come sconti, referral o programmi fedeltà che possono essere forniti con qualsiasi canale di marketing attuale o futuro.

Per sfruttare le funzionalità di personalizzazione di Voucherify, devi prima importare i dati degli utenti e mantenerli sincronizzati.

Voucherify archivia i dati dei clienti in Customer Objects che possono essere raggruppati in segmenti in base agli attributi personali, alla posizione e alla cronologia delle interazioni di Voucherify.

Supponiamo che tu abbia già importato il tuo cliente di prova in Voucherify e ora vedremo come sincronizzare la sua posizione con Radar, senza il codice.

Zapier – la colla del web

Immagina se tutte le piattaforme che espongono webhook fossero elencate in un'unica directory, con una struttura unificata e la capacità di connetterle come blocchi: ecco Zapier.

Zapier connette più di 1000 app Web e consente loro di lavorare insieme in background.

Ogni Zap inizia con l'attivazione di un evento in una delle tue app che dà il via al tuo flusso di lavoro. Ecco alcuni esempi dai documenti di Zapier:

Automatizza la tua presenza sui social media inviando nuovi elementi RSS a Facebook come post;
Mantieni i progetti organizzati copiando le nuove carte Trello in Evernote;
Rimani in contatto con i potenziali clienti aggiungendo i rispondenti ai moduli da Typeform alla tua mailing list in MailChimp;
Assicurati che il tuo team non perda mai una riunione notificando a un canale in Slack i prossimi eventi di Google Calendar;
…e tanti altri!

Probabilmente ora ti starai chiedendo: “Zapier può aiutarci?”. Sì, può! Giochiamo con alcuni Zap per aggiornare le modifiche alla geolocalizzazione su Voucherify.

Fai clic su Crea uno Zap e seleziona Webhook.
Con questa opzione, Zapier può creare un endpoint (simile a webhook.site) che possiamo utilizzare per consumare il webhook da Radar. Per farlo, scegli Catch Hook.
La vista successiva ti fornirà un URL dell'endpoint che sostituirà quello vecchio nella configurazione del webhook Radar.

Incolla il collegamento a Radar e avvia nuovamente il test. Se Radar conferma il nuovo endpoint con una barra lampeggiante verde, vai al passaggio successivo in Zapier.
Nella schermata successiva, dovresti notare il carico utile della tua richiesta di test

Conferma il modulo e il primo passaggio dello Zap - trigger - è pronto.

Ora dobbiamo mettere al lavoro i messaggi consumati. Per completare lo Zap, abbiamo bisogno di almeno un'azione (puoi concatenare più piattaforme con un solo Zap).

Scegli Voucherify da Esplora azioni. Nota Voucherify Zap è disponibile “su invito”, ecco il link per ottenerlo.

Seleziona l'opzione Aggiorna cliente e procedi al modulo Imposta modello .
Questa è una parte fondamentale. In questo modulo, Zapier ti consente di mappare l'input sull'output. L'editor è potente e intuitivo. Ha un campo di ricerca intelligente che ti consente di sfogliare il JSON in entrata sia per chiavi che per valori. Puoi anche concatenare facilmente due o più campi di input in uno in uscita.

Nel nostro caso, vogliamo solo identificare il cliente tramite source_id e aggiornare un campo personalizzato "rspectiveHQ" in base all'evento, quindi la mappatura appare come segue:

Voucherify: ID sorgente - Radar: ID utente
Voucherify: Metadata -> rspectiveHQ - Radar: Tipo di evento

Salta il test e completa il modulo: lo ZAP è attivo e sta aspettando!

Abbiamo configurato il webhook di Radar e abbiamo attivato Voucherify Zap. Proviamo se l'intera pipeline funziona. Vai alla nostra app web e prova a cambiare nuovamente la posizione per avvisare il rilevatore radar.

Ecco cosa dovrebbe seguire:

Il radar tiene traccia di 2 eventi, l'utente esce e nel geofence.
Zapier cattura 2 webhook di conseguenza.
Voucherifica le tracce per gli aggiornamenti del profilo del cliente.

Zapier è più di questo. Quando guardi le opzioni di configurazione del flusso di lavoro, noterai ingranaggi che ti consentono di creare processi abbastanza complessi. I passaggi di supporto come condizioni, filtri o ritardi saranno utili per elaborare e digerire i dati di input e formattare l'output di conseguenza.

Puoi persino scrivere codice personalizzato (in JavaScript e Python) se hai bisogno di maggiore flessibilità in uno dei passaggi: ti ho già detto che puoi concatenare una serie di coppie trigger-azione?

Dai alla documentazione di avvio rapido di Zapier la possibilità di capire che tipo di risparmio di tempo è.

Generazione di un coupon unico per utenti geolocalizzati tramite motore di promozione headless

Una delle caratteristiche essenziali di Voucherify è la personalizzazione degli sconti in base al profilo del cliente, in tempo reale. Ciò è possibile grazie ai segmenti dinamici che monitorano gli attributi dei clienti e ciò che hanno inserito nel carrello degli acquisti e attivano azioni in base ad alcune regole aziendali.

Nel nostro caso, costruiremo un segmento che controlla il nostro campo personalizzato (rspectiveHQ) che, a sua volta, memorizza le informazioni se un cliente è entrato nel geofence. Possiamo raggiungerlo da un singolo endpoint dall'API Voucherify, ma il modo più veloce è semplicemente utilizzare la dashboard.

Vai su Clienti e apri il creatore del segmento. Ora filtra il cliente utilizzando un campo di metadati corrispondente come nell'immagine seguente:

Conferma il filtro, premi il ricarica e vedrai tutti i clienti corrispondenti al segmento. Puoi "chiedere" al tuo utente di prova di lasciare il geofence e ricaricare il segmento per vedere se l'integrazione funziona come previsto.

Se ciò che vedi riflette la realtà, salva il segmento.

Il passaggio successivo consiste nell'utilizzare le informazioni sulla posizione per adattare lo sconto.

Ma prima di approfondire, voglio che ti fermi un momento e analizzi quanto abbiamo ottenuto finora senza scrivere un singolo codice di back-end . Allo stesso tempo, non abbiamo chiuso la nostra soluzione per la modifica perché sia Radar che Voucherify espongono API avanzate e un'architettura headless che puoi collegare ogni volta che ne hai bisogno.

Il passaggio finale consiste nell'istituire una distribuzione che:

invia un codice coupon univoco
a un cliente rilevato
con il canale predefinito

Per cominciare, generiamo un codice promozionale univoco per ogni utente. Lascia che sia uno sconto del 10%. Vai al creatore della campagna, scegli l'opzione Codici in blocco e segui i passaggi in cui definirai:

tipo e importo dello sconto,
lasso di tempo,
modello di codici inclusi lunghezza, prefisso, suffisso e set di caratteri,
numero iniziale di codici,
e altri dettagli.

Particolarmente interessante è la 4a fase del creatore - regole di convalida. Questo è un luogo in cui puoi definire chi e a quali condizioni può riscattare il codice. Ricorda che vogliamo limitare il riscatto solo a quei clienti che hanno visitato il nostro geofence. Useremo il nostro segmento per completare questo passaggio.

Questo strumento ti offre molte più opzioni di filtro. Se ti capita di lavorare su campagne di acquisizione o fidelizzazione dei clienti, potresti voler controllare il riferimento alle regole di convalida perché può farti risparmiare un sacco di righe di codice.

Quando Voucherify termina la generazione in blocco, dovresti vederli elencati:

Abbiamo il segmento e i codici promozionali, ora colleghiamolo al nostro canale di marketing in uscita!

Puoi implementarlo con l'API Voucherify e i webhook, ma c'è un modo più rapido: soddisfare le distribuzioni.

Questa funzione ti consente di rilevare un nuovo cliente entrato (o uscito) da un segmento, assegnargli un codice coupon univoco e inviarlo con e-mail, SMS, notifiche push, chat dal vivo o annunci sui social media. Inoltre, un editor visivo ti aiuta a creare una copia promozionale personalizzata.

Ogni canale ha il suo modello specifico del messaggio, vediamo come cerca le notifiche push. Ma per procedere, dobbiamo registrarci per un account Braze e collegarlo a Voucherify con la chiave API.

Invio di un codice promozionale tramite notifica push con Braze

Braze (ex AppBoy) è uno dei leader degli strumenti di marketing mobile. Utilizzeremo solo una parte delle loro capacità, quindi ti consiglio di controllare i loro documenti per saperne di più sulla loro offerta.

La configurazione del nostro scenario richiede 3 passaggi:

Creazione di una campagna di notifiche push;
Invio di codici coupon da Voucherify a Braze;
Configurazione di una notifica push web nella nostra app.

Campagna di notifiche push

Analogamente a Voucherify, Braze può attivare alcune azioni basate su modifiche in tempo reale agli attributi del cliente. In questo caso particolare, la distribuzione che abbiamo creato in Voucherify imposterà un campo personalizzato riempito con un codice univoco dalla campagna di codice collettivo.

Definiremo la campagna Braze in modo che rilevi questa modifica e invii una notifica push a un'istanza dell'app a cui un cliente ha effettuato l'accesso.

Apri Gestisci gruppo di app per definire un contesto di app.
Seleziona un'app Web per ottenere una chiave pubblica API.

Ora puoi andare su Campagne e creare una nuova campagna di Notifiche Push.
Scrivi un messaggio che includa il codice coupon {{custom_attribute.${coupon}}}, seleziona la scheda Test e usa Invia test a me stesso. Se consenti la notifica web, dovresti notare un messaggio che scorre in alto a destra.

Il codice coupon sul messaggio di prova sarà vuoto perché non abbiamo aggiunto questo attributo personalizzato a nessuno degli utenti. Salviamo la bozza della campagna e creiamo un utente di prova con il codice manualmente.

Crea un semplice file CSV sulla falsariga:

external_id, coupon

[email protected], xyz

E vai su Importazione utente per caricarlo.

Ora che abbiamo i dati di prova e l'opzione "Sostituisci attributi destinatari..." selezionata, possiamo vedere la variabile sostituita.
Nella scheda Consegna, cambia il tipo di consegna in Basato sull'azione e seleziona Modifica trigger valore attributo personalizzato come nell'immagine seguente:

Iscrivi "Tutti gli utenti" alla campagna nel passaggio successivo e lascia invariate le altre impostazioni. Quando sei pronto, fai clic su Avvia campagna in basso a destra.

Fornire a Braze codici coupon

Questo è il momento in cui dovremmo collegare Voucherify a Braze. Fortunatamente, Voucherify supporta Braze con un'integrazione nativa. L'unica cosa rimasta per connettere queste due piattaforme di marketing è andare su Integrazioni, selezionare Braze e fornire l'endpoint e la chiave dell'API.

Ora puoi riaprire la bozza della nostra distribuzione e completare l'ultimo passaggio. Fornisci i nomi dei campi personalizzati in base ai quali Voucherify assegna un codice univoco e il relativo valore:

E impostalo dal vivo. D'ora in poi, ogni volta che Radar rileva un evento di geofence e quindi aggiorna il segmento dei clienti, Voucherify assegnerà a questo cliente un codice coupon e lo pubblicherà nel profilo utente in Braze.

La campagna Braze rileverà la nuova modifica del campo e proverà a inviare una notifica web.

Ricezione di notifiche push

Ci siamo quasi! L'ultimo passaggio per finalizzare la nostra catena di promozione è consentire alle notifiche push di fluire nella nostra app.

Come di consueto in caso di piattaforme headless, non è necessario implementarlo manualmente. Braze come una vera piattaforma per sviluppatori offre un SDK open source per il Web.

Per farlo funzionare, devi incollare un breve snippet e riempirlo con la chiave API pubblica.

const test_user = {

nome : "Mike",

cognome : "Sedzielewski",

email : "[email protected]"

}

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

s="initialize destroy getDeviceId toggleAppboyLogging setLogger

openSession changeUser requestImmediateDataFlush requestFeedRefresh

SubscribeToFeedUpdates requestContentCardsRefresh

SubscribeToContentCardsUpdates logCardImpressions logCardClick

logCardDismissal logFeedDisplayed logContentCardsDisplayed

logInAppMessageImpression logInAppMessageClick

logInAppMessageButtonClick logInAppMessageHtmlClick

SubscribeToNewInAppMessages removeSubscription

removeAllSubscriptions logCustomEvent logPurchase isPushSupported

isPushBlocked isPushGranted isPushPermissionGranted

registerAppboyPushMessages annulla la registrazioneAppboyPushMessages

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.setGender

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 visualizza display.automaticallyShowNewInAppMssage

display.showInAppMessage display.showFeed display.destroyFeed

display.toggleFeed display.showContentCards display.hideContentCards

display.toggleContentCards sharedLib.split("

"),i=0;i<s.lunghezza;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]

]=(new Function("funzione di ritorno

"+m.replace(/\./g,"_")+"(){appboyQueue.push(argomenti); Restituzione

true}"))()}appboy.getUser=function(){restituire nuovo

appboy.ab.User};appboy.getCachedFeed=funzione(){ritorno nuovo

appboy.ab.Feed};appboy.getCachedContentCards=function(){ritorno nuovo

appboy.ab.ContentCards};(y=p.createElement(P)).type='testo/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)}(wi

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.automaticallyShowNewInAppMssage();

appboy.openSession();

</script>

E registra un service-worker.js:

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

Quando è a posto, esegui un altro test con l'utente "testo@esempio" nell'input "Aggiungi utenti individuali". La tua app dovrebbe ricevere una notifica con il codice promozionale "xyz".

Ora, proviamo se la campagna attiva un messaggio push quando modifichi il campo del coupon .

Innanzitutto, assicurati che la tua campagna sia attiva e che l'app web sia avviata. In secondo luogo, scarica la raccolta Braze Postman, apri il catalogo Dati utente e seleziona Traccia utente - Esempio di attributi. (Se non conosci Postman, puoi recuperare qui)

Cambia l'URL dell'endpoint con quello a cui sei assegnato, nel mio caso è: https://rest.iad-03.braze.com/

E il payload della richiesta a:

{{CODICE}}{

"api_key":"LA TUA_CHIAVE",

"attributi":[

{

"id_esterno":"[email protected]",

"buono": "123"

}

]

} {{CODICE FINALE}}

Invia la richiesta e aspetta un altro messaggio con il codice coupon aggiornato.

Testare tutti i mattoni senza testa

Per assicurarti che il flusso di lavoro esegua ciò che abbiamo chiesto, apri l'app e utilizza il sensore per "localizzare" in un luogo diverso e quindi di nuovo nel geofence. Tra pochi secondi dovresti vedere la notifica personalizzata sul tuo schermo!

Ora l'utente può prendere il proprio codice e inserirlo nella casella coupon convalidata da Voucherify sul back-end.

Riassumiamo qui le vittorie delle piattaforme senza testa:

In circa un'ora abbiamo fornito una soluzione funzionante per uno scenario aziendale abbastanza complesso.
La base di codice è super breve e semplice, il che si traduce in meno spese generali di manutenzione.
Anche se non abbiamo il controllo al 100% sulla soluzione, è ancora disponibile per la personalizzazione grazie all'accesso API.
La mancanza di piena proprietà è bilanciata dal supporto dei team dei fornitori e da una migliore qualità degli strumenti.
Con webhook e strumenti come Zapier connetti e intreccia vari dipartimenti e sistemi in un batter d'occhio.

Una cosa a cui devi prestare attenzione quando utilizzi più fornitori SaaS è il fallback. A volte una piattaforma è inattiva e devi istruire il tuo sistema su come reagire, ad esempio come archiviare e mettere in coda le azioni. Le piattaforme adatte agli sviluppatori, tuttavia, espongono interfacce che puoi utilizzare per monitorare la disponibilità delle API e reagire in tempo.

D'altra parte, dopotutto, non sono necessari fallback super robusti per le applicazioni nella fase POC.

In che modo l'approccio senza testa può aiutarmi?

In poche parole, imparando come sfruttare le piattaforme headless per costruire qualcosa di valore in modo rapido e con costi ridotti, diventerai più prezioso sul mercato del lavoro.

Non sono i linguaggi di programmazione o i framework a rappresentare oggi il vantaggio competitivo. Spesso è molto diverso: è così che le aziende possono utilizzare gli strumenti disponibili per risolvere i loro problemi con la minor quantità possibile di codice. In altre parole, queste sono le cose che contano più del padroneggiare uno o più stack tecnologici:

Saper ridurre il time to market;
Panoramica delle tecniche di riduzione dei costi di manutenzione;
Capacità di ridurre le dipendenze dalle singole tecnologie;
Panoramica delle attuali tecnologie a supporto delle tre precedenti.

Dove cercare altre piattaforme di commercio senza testa?

Un buon punto di partenza può essere questo elenco:

Promozioni

Buono
Giftbit
Vauchar

Catalogo e inventario

Ricomponi
Channelape
Cristallizzare

Carrello

Snipcart
Foxy

Pagamento

Banda
Dovuto
Quadrato

Messaggistica

Strato
spintore
Pubnum

Prenotazioni ed eventi

Timekit
Ingresso

Spedizione

Shippo
Nuvola di navi
Pallonetto

Generale

Elastico
Snipcart
Moltin
OrderCloud
Strumenti di commercio

Ma se vuoi andare oltre l'e-commerce senza testa, ti suggerisco di visitare https://www.programmableweb.com e di approfondire. Un altro modo per iniziare la tua ricerca è sfogliare le integrazioni di Zapier.

Un altro ancora è andare alla rete API Postman.

Risorse:

Codice sorgente demo su glitch