Como usar plataformas de comércio sem cabeça para campanhas de marketing?

Publicados: 2022-04-18

O que são plataformas de comércio sem cabeça?

Plataformas de e-commerce sem cabeça ou plataformas baseadas em API - software em que o front-end (ou o “head”) foi desacoplado ou completamente removido, deixando apenas o back-end.

O conceito de arquitetura que sustenta essas plataformas começou com o mundo CMS. Ao separar as camadas, as empresas queriam combater os obstáculos no caminho para uma entrega de conteúdo mais rápida em canais de marketing cada vez mais recentes - com o smartphone tocando o primeiro violino.

Com o software CMS tradicional, os problemas de baixo nível que os desenvolvedores enfrentaram:

o design é limitado por estruturas legadas, apenas um conjunto predefinido de experiências disponíveis;
pequenas alterações no front-end podem exigir alterações no banco de dados e no código de back-end, aumentando o tempo de teste e, portanto, o custo total da tarefa;
alterações no código de back-end podem causar erros inesperados no front-end;

acumularam e traduziram ao longo do tempo em freio de mão para os negócios:

pouco ou nenhum espaço para personalização;
confusão e mal-entendidos mútuos sobre por que pequenas mudanças de software levam séculos para serem concluídas;
novos canais de marketing inexplorados ou softwares de baixa prioridade ignorados que chegam tarde demais.

Como resultado, “API-first”, “API-based” ou “headless CMS” explodiram. Mas isso logo se expandiu para outras áreas digitais, incluindo comércio eletrônico e marketing.

Se esta é a primeira vez que você conhece plataformas headless, pode achar meu último artigo interessante: Entendendo as plataformas baseadas em API. Além disso, Paul, em seu Introduction to Headless eCommerce, mostra alguns exemplos reais de aplicativos criados com ferramentas baseadas em API.

Plataformas sem cabeça – de uma ideia a um POC pronto para produção em 1 dia

Vamos verificar se podemos realmente construir um software flexível tão rápido. Vamos recriar uma estratégia de marketing usada por grandes marcas nos dias de hoje. Em poucas palavras vai:

Geolocalizar clientes.
Atribua um cupom de desconto personalizado a eles.
Entregue um código de cupom exclusivo com uma notificação push.

Não é difícil imaginar que empresas como a Uber devem ter investido uma dúzia de meses de desenvolvedores ou até mais nesse software.

O que pode parecer a tarefa mais simples - atribuir um código de desconto aleatório - está repleto de ressalvas. Aprendi isso da maneira mais difícil porque nossa equipe está trabalhando nisso há 3 anos. O número de novos casos de canto crescendo e a sobrecarga de gerenciamento podem queimar até mesmo algo que parece um sistema simples.

Felizmente, as plataformas sem cabeça estão aqui para nos ajudar.

Usaremos três plataformas SaaS amigáveis ao desenvolvedor para criar uma solução funcional:

Radar - API de geolocalização
Voucherify - API de gerenciamento de promoções
Braze - API de notificação

Vamos ver como podemos combiná-los para impressionar seus clientes com promoções verdadeiramente personalizadas entregues por meio de uma abordagem sem cabeça.

Observação: a solução a seguir pressupõe que você tenha uma conta ativa no Radar, Voucherify e Braze. Além disso, todos eles devem ser preenchidos com seu banco de dados de clientes, incluindo um campo que pode ser usado para identificar exclusivamente uma pessoa.

Detectando o momento em que um cliente entra em seu local com Radar - geolocalização sem cabeça

O conceito por trás do Radar é direto. A plataforma geolocaliza aplicativos usando 3 tipos de contexto:

Geofence - O Radar se orgulha de ser mais poderoso do que o geofencing nativo do iOS ou Android, com suporte multiplataforma para geofences ilimitados, geofences de polígonos e detecção de parada. Isso ocorre porque todas as geofencing e geração de eventos acontecem no lado do servidor.
Locais - O radar pode reconhecer uma extensa lista de locais porque usa o banco de dados do Facebook. E o mais legal disso é que você pode trabalhar com categorias embutidas (por exemplo, grandes aeroportos) ou cadeias (por exemplo, Starbucks).
Insights - Seu mecanismo de localização também pode aprender como aproximar um usuário que entra/sai de casa e do escritório.

Quando o Radar detecta as visitas do seu usuário ou sai do local, ele permite que você notifique seu aplicativo com um webhook.

Tudo o que você precisa fazer, como desenvolvedor, é usar um dos kits de desenvolvimento de software (iOS, Android, Web) para autenticar, configurar e ajustar as opções de rastreamento - por exemplo, se você deseja rastrear em segundo plano ou primeiro plano.

Vamos ver a plataforma sem cabeça Radar em ação então!

1. Configure sua conta

Acesse radar.io e inscreva-se em uma conta, depois use as chaves de API de teste para inicializar o widget Radar, conforme mostrado abaixo:

Radar.initialize("YOUR_KEY");

</script>{{ENDCODE}}

2. Rastrear usuários

A etapa final é verificar se o rastreamento funciona. Para fazer isso, usaremos o método trackOnce que é invocado se o Radar detectar alguma alteração na localização.

Vamos executar o código e ver quais informações o Radar fornece (lembre-se de permitir o rastreamento de localização em seu navegador):

{{CÓDIGO}}

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

Saída:

eventos: [] (0)

localização: Coordenadas {latitude: 50.25462479999998, longitude: 19.061743829999994, altitude: null, precisão: 165, altitudePrecisão: null, …}

estado: "SUCESSO"

user: {userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) Ap… (KHTML, como Gecko) Versão/12.1 Safari/605.1.15", ip: "93.179.216.18", locationAccuracy: 165, deviceType: "Web", parado: verdadeiro, …}

OK - Radar encontrou nosso esconderijo. Mas sem o contexto, não sabe o que fazer com essa informação. Vamos trabalhar nas informações do Radar.

Vamos dar um nome para o local de onde você fez o check-in - em geral (no Radar também) esse contexto de localização é chamado de cerca geográfica. Veja como fazer isso:

Vá para o criador de geofence.
Selecione um tipo de fonte respectivo, vou para Local e digite minha empresa como uma consulta.
Como resultado, o Radar procura as coordenadas geográficas e sugere uma borda de cerca geográfica.

Se o local funcionar para você, confirme a cerca geográfica com CREATE.

Agora, vamos atualizar a página e observar o console. O radar agora nos envia alguns eventos :

{

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

"vivo":falso,

"type":"user.entered_geofence",

"localização":{

"coordenadas":[

19.062212,

50.254927099999996

"type":"Ponto"

"precisão de localização":20,

"confiança":3,

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

"do utilizador":{

"_id":"5cb5f2ba36581b002a3534ca",

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

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

"geocerca":{

"_id":"5cb5f7d3a60e95002b009ebd",

"descrição":"rspective",

"tipo":"círculo",

"geometriaRadius": 100,

"geometriaCenter":{

"type":"Ponto",

"coordenadas":[

19.062346299999945,

50.25495069999999

]

}

"_id":"5cb5fe117cd3430025b9ee0d"

}

Parece que entende que entramos em nossa cerca geográfica recém-criada. Como estamos sentados no mesmo lugar, as atualizações subsequentes não devem trazer novos eventos. Mas quando mudamos a localização, o Radar também detecta.

Para testá-lo, pegue sua máquina, saia da área de geofence e faça login novamente. Ou... você pode usar os Sensores das Ferramentas do Chrome.

Falsifique sua localização selecionando qualquer distância suficiente e atualize a página novamente. Agora o Radar mostra que user.exited_geofence

Você pode rastrear eventos de geolocalização para todos os usuários registrados e não registrados com o conveniente painel do Radar, em tempo real:

Notificando aplicativos externos por meio de mensagens headless

Portanto, o rastreamento do Radar entende agora nosso contexto de localização. Mas para utilizá-lo em nosso cenário, o Radar precisa compartilhá-lo com o mundo exterior. E o faz de muitas maneiras. Uma delas é usando webhooks.

Um webhook é um conceito de API que permite que um aplicativo forneça a outros aplicativos informações em tempo real.

De acordo com a Segment, uma plataforma que ajuda a coletar e trocar dados de clientes em vários sistemas, a popularidade dos webhooks está crescendo rapidamente.

Uma implementação típica de webhook permite que um usuário de um aplicativo:

notificar um sistema externo (ou muitos sistemas)
com uma(s) chamada(s) de API
momento em que um determinado evento ocorreu.

Com esse mecanismo em vigor, um usuário de aplicativo não precisa pesquisar dados com frequência para detectar alterações em tempo real.

Enviar uma solicitação para uma API externa é apenas um lado do processo. Para concluir o ciclo do webhook, o cliente receptor deve consumi-lo com êxito.

No mundo HTTP, isso geralmente significa responder com status 2**. Caso contrário, o mecanismo de webhook tentará novamente mais tarde (uma política de repetição depende dos autores da política definidos).

No nosso caso, o Radar envia a carga útil do evento que vimos quando alteramos nossa localização para um endpoint fornecido. Vamos adicionar um para ver os webhooks em ação.

Acesse Integrações.
Selecione o ambiente de teste e a entrega de evento único .
Forneça um endpoint a ser notificado. Você tem algumas opções aqui. Você pode:

gire um servidor web simples em sua máquina e use o ngrok para canalizar o tráfego,
use glitch para implantar seu endpoint imediatamente,
toque em um dos coletores de webhook online como: webhook.site ou requestbin

Cole seu URL exclusivo no formulário e confirme.

Clique em Testar na coluna AÇÕES para disparar seu primeiro evento. Se você configurar corretamente, deverá ver a carga útil do webhook, conforme mostrado na imagem abaixo:

Até agora tudo bem. O resultado é bastante promissor, não é? Com um pouco de copiar e colar e um trecho de JavaScript, cobrimos a parte de geolocalização do nosso caso de uso. No estágio atual, o Radar não pode identificar usuários que não tenham um ID de dispositivo armazenado em cookies. Para torná-lo mais robusto, vamos identificar o usuário com um email. Com o SDK do Radar, é uma linha única:

Radar.setUserId(“[email protected]”);

Você pode ver imediatamente o novo ID no painel:

Então, agora precisamos lidar com um requisito de desconto pessoal - um código de cupom exclusivo.

Conectando o mecanismo promocional sem cabeça de Radar e Voucherify

Da mesma forma que o Radar, o Voucherify com sua API oferece um recurso de cupom flexível por uma fração do custo que você incorreria se começasse do zero.

Como aprenderemos em breve, ele suporta outras campanhas promocionais, como descontos, indicações ou programas de fidelidade, que podem ser entregues com qualquer canal de marketing atual ou futuro.

Para acessar os recursos de personalização do Voucherify, você precisa primeiro importar os dados dos usuários e mantê-los sincronizados.

O Voucherify armazena os dados dos clientes em Customer Objects que podem ser agrupados em segmentos de acordo com os atributos pessoais, localização e histórico de interação do Voucherify.

Vamos supor que você já importou seu cliente de teste para o Voucherify e agora veremos como sincronizar sua localização com o Radar - sem o código.

Zapier – a cola da web

Imagine se todas as plataformas que expõem webhooks fossem listadas em um único diretório, com estrutura unificada e capacidade de conectá-los como blocos - conheça o Zapier.

O Zapier conecta mais de 1.000 aplicativos da web e permite que eles trabalhem juntos em segundo plano.

Todo Zap começa com um acionador de um evento em um de seus aplicativos que inicia seu fluxo de trabalho. Aqui estão alguns exemplos dos documentos do Zapier:

Automatize sua presença nas mídias sociais enviando novos itens RSS para o Facebook como postagens;
Mantenha os projetos organizados copiando novos cartões do Trello para o Evernote;
Mantenha contato com os clientes em potencial adicionando respondentes de formulário do Typeform à sua lista de e-mails no MailChimp;
Certifique-se de que sua equipe nunca perca uma reunião notificando um canal no Slack sobre os próximos eventos do Google Agenda;
…e muitos mais!

Você provavelmente vai perguntar agora: “O Zapier pode nos ajudar?”. Sim pode! Vamos brincar com alguns Zaps para atualizar as alterações de geolocalização do Voucherify.

Clique em Fazer um Zap e selecione Webhooks.
Com esta opção, o Zapier pode criar um endpoint (semelhante ao webhook.site) que podemos usar para consumir o webhook do Radar. Para fazer isso, escolha Pegar Gancho.
A próxima exibição fornecerá um URL de ponto de extremidade que substituirá o antigo na configuração do webhook do Radar.

Cole o link no Radar e dispare o teste novamente. Se o Radar confirmar o novo endpoint com uma barra verde, vá para a próxima etapa no Zapier.
Na próxima tela, você deve observar a carga útil da sua solicitação de teste

Confirme o formulário e o primeiro passo do Zap - gatilho - está pronto.

Agora precisamos colocar as mensagens consumidas no trabalho. Para completar o Zap, precisamos de pelo menos uma ação (você pode encadear várias plataformas com um único Zap).

Escolha Voucherify no Action explorer. Obs. O Voucherify Zap está disponível “por convite”, aqui está o link para obtê-lo.

Selecione a opção Atualizar cliente e prossiga para o formulário Configurar modelo .
Esta é uma parte fundamental. Neste formulário, o Zapier permite mapear a entrada para a saída. O editor é poderoso e intuitivo. Ele possui um campo de pesquisa inteligente que permite navegar no JSON de entrada por chaves e valores. Você também pode concatenar facilmente dois ou mais campos de entrada em um de saída.

No nosso caso, queremos apenas identificar o cliente pelo source_id e atualizar um campo customizado “rspectiveHQ” de acordo com o evento, para que o mapeamento fique assim:

Voucherify: Source ID - Radar: User ID
Voucherify: Metadata -> rspectiveHQ - Radar: Event Type

Pule o teste e preencha o formulário - o ZAP está ON e esperando!

Configuramos o webhook do Radar e ativamos o Voucherify Zap. Vamos testar se todo o pipeline funciona. Acesse nosso aplicativo da web e tente alterar a localização novamente para notificar o detector do Radar.

Aqui está o que deve seguir:

O radar rastreia 2 eventos, o usuário sai e entra na cerca geográfica.
Zapier pega 2 webhooks de acordo.
Voucherify rastreia as atualizações do perfil do cliente.

Zapier é mais do que isso. Ao observar as opções de configuração do fluxo de trabalho, você notará engrenagens que permitem construir processos bastante complexos. Etapas auxiliares, como condições, filtros ou atrasos, serão úteis para processar e digerir os dados de entrada e formatar a saída de acordo.

Você pode até escrever código personalizado (em JavaScript e Python) se precisar de mais flexibilidade em uma das etapas - eu já disse que você pode encadear uma série de pares de ação de gatilho?

Dê à documentação de início rápido do Zapier uma chance de entender que tipo de economia de tempo ela economiza.

Gerando um cupom exclusivo para usuários geolocalizados por meio do mecanismo de promoção headless

Uma das funcionalidades essenciais do Voucherify é personalizar os descontos com base no perfil do cliente, em tempo real. Isso é possível devido aos segmentos dinâmicos que monitoram os atributos dos clientes e o que eles colocam em um carrinho de compras e acionam ações de acordo com algumas regras de negócios.

No nosso caso, vamos construir um segmento que verifica nosso campo personalizado (rspectiveHQ) que, por sua vez, armazena as informações se um cliente entrou na geofence. Podemos alcançá-lo por um único endpoint da API Voucherify, mas a maneira mais rápida é simplesmente usar o painel.

Vá para Clientes e abra o criador do segmento. Agora filtre o cliente usando um campo de metadados correspondente como na imagem abaixo:

Confirme o filtro, aperte o reload e você verá todos os clientes que correspondem ao segmento. Você pode “pedir” ao seu usuário de teste para sair da cerca geográfica e recarregar o segmento para ver se a integração funciona conforme o esperado.

Se o que você vê reflete a realidade, salve o segmento.

O próximo passo é usar as informações de localização para adaptar o desconto.

Mas antes de mergulharmos nisso, quero que você pare por um momento e analise o quanto alcançamos até agora sem escrever um único código de back-end . Ao mesmo tempo, não fechamos nossa solução para mudanças porque Radar e Voucherify expõem APIs ricas e arquiteturas headless que você pode conectar sempre que precisar.

A etapa final é configurar uma Distribuição que:

envie um código de cupom exclusivo
para um cliente detectado
com o canal predefinido

Para começar, vamos gerar um código promocional exclusivo para cada usuário. Que seja um desconto de 10%. Vá até o criador da campanha, escolha a opção Bulk Codes e siga os passos onde você irá definir:

tipo e valor do desconto,
prazo,
padrão de códigos incluindo comprimento, prefixo, sufixo e charset,
número inicial de códigos,
e outros detalhes.

A 4ª etapa do criador - regras de validação - é particularmente interessante. Este é um lugar onde você pode definir quem e em que condições pode resgatar o código. Lembre-se de que queremos limitar o resgate apenas aos clientes que visitaram nossa cerca geográfica. Usaremos nosso segmento para concluir esta etapa.

Esta ferramenta oferece muito mais opções de filtragem. Se você estiver trabalhando em campanhas de aquisição ou retenção de clientes, confira a referência de regras de validação, pois isso pode economizar uma tonelada de linhas de código.

Quando o Voucherify terminar a geração em massa, você deverá vê-los listados:

Temos o segmento e os códigos promocionais, agora vamos ligá-lo ao nosso canal de saída de marketing!

Você pode implementá-lo com a API Voucherify e webhooks, mas há uma maneira mais rápida - conheça as distribuições.

Esse recurso permite detectar um novo cliente que entrou (ou saiu) de um segmento, atribuir a ele um código de cupom exclusivo e enviá-lo por e-mail, SMS, notificação por push, bate-papo ao vivo ou anúncios de mídia social. Além disso, um editor visual ajuda você a criar uma cópia de promoção personalizada.

Cada canal tem seu próprio modelo específico de mensagem, vamos ver como fica as notificações push. Mas para prosseguir, precisamos nos inscrever em uma conta Braze e conectá-la ao Voucherify com a chave da API.

Enviando um código promocional via notificação push com Braze

Braze (anteriormente AppBoy) é um dos líderes em ferramentas de marketing móvel. Usaremos apenas uma fração de seus recursos, por isso recomendo verificar seus documentos para saber mais sobre sua oferta.

A configuração do nosso cenário requer 3 passos:

Criação de uma campanha de notificação push;
Envio de códigos de cupom do Voucherify para o Braze;
Configurando uma notificação por push da Web em nosso aplicativo.

Campanha de notificação push

Da mesma forma que o Voucherify, o Braze pode acionar algumas ações baseadas em mudanças em tempo real nos atributos do cliente. Nesse caso específico, a distribuição que criamos no Voucherify definirá um campo personalizado preenchido com um código exclusivo da campanha de código em massa.

Definiremos a campanha Braze de forma que detecte essa alteração e dispare uma notificação por push para uma instância de aplicativo na qual o cliente esteja conectado.

Abra Gerenciar Grupo de Aplicativos para definir um contexto de aplicativo.
Selecione um aplicativo Web para obter uma chave pública de API.

Agora você pode ir para Campanhas e criar uma nova campanha de notificação por push.
Escreva uma mensagem que inclua o código de cupom {{custom_attribute.${coupon}}}, selecione a guia Teste e use Enviar teste para mim. Se você permitir a notificação da Web, deverá notar uma mensagem deslizando no canto superior direito.

O código do cupom na mensagem de teste estará vazio porque não adicionamos esse atributo personalizado a nenhum dos usuários. Vamos salvar o rascunho da campanha e criar um usuário de teste com o código manualmente.

Crie um arquivo CSV simples ao longo das linhas:

external_id, cupom

[email protected], xyz

E vá para User Import para carregá-lo.

Agora que temos os dados de teste e a opção “Substituir atributos dos destinatários…” marcadas, podemos ver a variável substituída.
Na guia Entrega, altere o tipo de entrega para baseado em ação e selecione Alterar acionador de valor de atributo personalizado como na imagem abaixo:

Inscreva "Todos os usuários" na campanha na próxima etapa e deixe de fora outras configurações inalteradas. Quando estiver pronto, clique em Launch Campaign no canto inferior direito.

Fornecendo Braze com códigos de cupom

Esse é o momento em que devemos conectar o Voucherify ao Braze. Felizmente, o Voucherify suporta o Braze com uma integração nativa. A única coisa que resta para conectar essas duas plataformas de marketing é acessar Integrações, selecionar Braze e fornecer o endpoint e a chave da API.

Agora você pode reabrir o rascunho de nossa distribuição e concluir a última etapa. Forneça os nomes dos campos personalizados sob os quais o Voucherify atribui um código exclusivo e seu valor:

E colocá-lo ao vivo. A partir de agora, toda vez que o Radar detectar um evento de geofence e, portanto, atualizar o segmento de cliente, o Voucherify atribuirá a esse cliente um código de cupom e o publicará no perfil do usuário no Braze.

A campanha Braze detectará a nova alteração de campo e tentará enviar uma notificação pela web.

Recebendo notificação push

Estamos quase lá! A última etapa para finalizar nossa cadeia de promoção é permitir que as notificações push fluam em nosso aplicativo.

Como de costume no caso de plataformas headless, não há necessidade de implementá-lo manualmente. O Braze como uma verdadeira plataforma que prioriza o desenvolvedor oferece um SDK de código aberto para a web.

Para colocá-lo em funcionamento, você precisa colar um pequeno snippet e preenchê-lo com a chave de API pública.

const test_user = {

first_name : "Mike",

last_name : "Sedzielewski",

e-mail: "[email protected]"

}

+função(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 logFeedExibido logContentCardsExibido

logInAppMessageImpression logInAppMessageClick

logInAppMessageButtonClick logInAppMessageHtmlClick

subscribeToNewInAppMessages removeSubscription

removeAllSubscriptions logCustomEvent logA compra éPushSupported

isPushBlocked isPushGranted isPushPermissionConcedido

registrarAppboyPushMessages cancelar o registroAppboyPushMessages

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 display display.automaticallyShowNewInAppMessages

display.showInAppMessage display.showFeed display.destroyFeed

display.toggleFeed display.showContentCards display.hideContentCards

display.toggleContentCards sharedLib.split("

"),i=0;i<s.length;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("função de retorno

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

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)}(wi

ndow,documento,'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>

E registre um service-worker.js:

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

Quando estiver em vigor, execute outro teste com o usuário “text@example” na entrada “Add Individual Users”. Seu aplicativo deve receber uma notificação com o código promocional "xyz".

Agora, vamos testar se a campanha aciona uma mensagem push quando você altera o campo de cupom .

Primeiro, verifique se sua campanha está ativa e se o aplicativo da web foi lançado. Em segundo lugar, baixe a coleção Braze Postman, abra o catálogo de dados do usuário e selecione User Track - Attributes Example. (Se você não conhece o Postman, pode acompanhar aqui)

Altere o URL do endpoint para aquele ao qual você está atribuído, no meu caso é: https://rest.iad-03.braze.com/

E a carga útil da solicitação para:

{{CÓDIGO}}{

"api_key":"YOUR_KEY",

"atributos":[

{

"external_id":"[email protected]",

"cupom":"123"

}

]

} {{ENDCODE}}

Envie a solicitação e espere outra mensagem com o código do cupom atualizado.

Testando todos os blocos de construção sem cabeça

Para garantir que o fluxo de trabalho faça o que pedimos, basta abrir seu aplicativo e usar o Sensor para “localizar” um local diferente e depois voltar para a cerca geográfica. Em alguns segundos, você deverá ver a notificação personalizada na sua tela!

Agora o usuário pode pegar seu código e colocá-lo na caixa de cupom validada pelo Voucherify no backend.

Vamos resumir as vitórias das plataformas headless aqui:

Em cerca de uma hora, entregamos uma solução funcional para um cenário de negócios bastante complexo.
A base de código é super curta e simples - o que se traduz em menos sobrecarga de manutenção.
Embora não tenhamos 100% de controle sobre a solução, ela ainda está aberta para personalização graças ao acesso à API.
A falta de propriedade total é equilibrada com o suporte das equipes dos fornecedores e melhor qualidade das ferramentas.
Com webhooks e ferramentas como o Zapier, você conecta e entrelaça vários departamentos e sistemas em pouco tempo.

Uma coisa que você precisa prestar atenção ao usar vários fornecedores de SaaS é o fallback. Às vezes, uma plataforma está inativa e você precisa instruir seu sistema sobre como reagir - por exemplo, como armazenar e enfileirar as ações. Plataformas amigáveis ao desenvolvedor, no entanto, expõem interfaces que você pode usar para monitorar sua disponibilidade de API e reagir a tempo.

Por outro lado, fallbacks super robustos não são necessários para aplicativos no estágio POC, afinal.

Como a abordagem sem cabeça pode me ajudar?

Em poucas palavras, aprendendo como você pode alavancar plataformas headless para construir algo de valor rapidamente e com custo reduzido, você se tornará mais valioso no mercado de trabalho.

Não são as linguagens de programação ou frameworks que representam a vantagem competitiva hoje. Muitas vezes é bem diferente - é como as empresas podem usar as ferramentas disponíveis para resolver seus problemas com a menor quantidade possível de código. Em outras palavras, estas são as coisas que contam mais do que dominar uma determinada pilha ou pilhas de tecnologia:

Saber como reduzir o time to market;
Visão geral das técnicas de redução de custo de manutenção;
Capacidade de reduzir dependências de tecnologias individuais;
Visão geral das tecnologias atuais que suportam as três acima.

Onde procurar mais plataformas de comércio sem cabeça?

Um bom ponto de partida pode ser esta lista:

Promoções

Voucher
Giftbit
Vauchar

Catálogo e inventário

Recombe
Canaleta
Cristalizar

Carrinho

Snipcart
Foxy

Pagamento

Listra
Vencimento
Quadrado

Mensagens

Camada
Empurrador
Pubnum

Reservas e eventos

Timekit
Entrada

Envio

Shippo
Nuvem de navio
Lob

Em geral

Elástico
Snipcart
Moltin
OrderCloud
Ferramentas de comércio

Mas se você quiser ir além do comércio eletrônico sem cabeça, sugiro visitar https://www.programmableweb.com e se aprofundar. Outra maneira de iniciar sua pesquisa é navegar pelas integrações do Zapier.

Ainda outra é ir para a rede da API Postman.

Recursos:

Código fonte de demonstração em falha