Tutorial: Criando uma caixa de entrada com Content Cards
Acompanhe o código de exemplo neste tutorial para criar uma caixa de entrada com Content Cards da Braze.
Pré-requisitos
Antes de usar este recurso, você precisará integrar o SDK Android da Braze.
Criando uma caixa de entrada com Content Cards para Android (Compose)
Estamos testando este novo formato de tutorial. Diga-nos o que você acha — seus comentários nos ajudam a melhorar os guias futuros.
1. Ativar depuração (opcional) {#1-enable-debugging-optional}
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Construir uma visualização de UI {#2-build-a-ui-view}
Para Jetpack Compose, use um LazyColumn para exibir Content Cards em uma lista rolável.
3. Inscrever-se em eventos de Content Cards {#3-subscribe-to-content-card-events}
Use um DisposableEffect para gerenciar o ciclo de vida da inscrição, garantindo a limpeza adequada quando o composable sai da composição. subscribeToContentCardsEvents entrega um handshake CacheReplay imediatamente com o que está em cache e, em seguida, CacheLoad ou DataUpdated quando o cache muda.
Para a lista completa de eventos que você pode receber, consulte Inscrever-se para atualizações de cartões.
4. Construir uma UI de caixa de entrada personalizada {#4-build-a-custom-inbox-ui}
Usar os atributos do cartão de conteúdo, como title, description e url, permite que você construa Content Cards que atendam aos seus requisitos específicos de UI. Neste caso, estamos construindo uma caixa de entrada com os composables Card e Column do Jetpack Compose.
5. Rastrear impressões e cliques {#5-track-impressions-and-clicks}
Você pode registrar impressões e cliques usando os métodos logImpressions e logClick disponíveis para Content Cards.
As impressões devem ser registradas apenas uma vez quando um cartão é visualizado pelo usuário. Use LaunchedEffect para registrar impressões quando um cartão se torna visível. Observe que pode ser necessário considerar o ciclo de vida da visualização do seu app, assim como o caso de uso, para garantir que as impressões sejam registradas corretamente.
Criando uma caixa de entrada com Content Cards para Android (RecyclerView)
1. Ativar depuração (opcional)
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Construir uma visualização de UI
Neste tutorial, usamos o RecyclerView do Android para exibir Content Cards, mas recomendamos construir uma UI com classes e componentes que se adequem ao seu caso de uso. A Braze fornece a UI por padrão, mas este tutorial orienta você a criar uma visualização personalizada para customizar a aparência e o comportamento.
3. Inscrever-se em eventos de Content Cards
Use subscribeToContentCardsEvents para permitir que sua UI responda quando novos Content Cards estiverem disponíveis. Aqui, os assinantes são registrados e removidos dentro dos hooks do ciclo de vida da atividade.
Para a lista completa de eventos que você pode receber, consulte Inscrever-se para atualizações de cartões.
4. Construir uma UI de caixa de entrada personalizada
Usar os atributos do Content Card, como title, description e url, permite que você construa Content Cards que correspondam aos seus requisitos específicos de UI. Neste caso, estamos construindo uma caixa de entrada com o RecyclerView nativo do Android.
5. Rastrear impressões e cliques
Você pode registrar impressões e cliques usando os métodos logImpressions e logClick disponíveis para Content Cards.
As impressões devem ser registradas apenas uma vez quando um cartão é visualizado pelo usuário. Aqui, usamos um mecanismo simples para evitar registros duplicados com uma flag por cartão. Observe que pode ser necessário considerar o ciclo de vida da visualização do seu app, assim como o caso de uso, para garantir que as impressões sejam registradas corretamente.
Pré-requisitos
Antes de poder usar esse recurso, você precisará integrar o Braze Swift SDK. Você também precisará ativar mensagens no app para Swift.
Criando uma caixa de entrada com Content Cards para Swift
Estamos testando este novo formato de tutorial. Diga-nos o que você acha — seus comentários nos ajudam a melhorar os guias futuros.
1. Ativar depuração (opcional)
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Construir uma visualização de UI
Neste tutorial, usamos o UITableViewController do Swift, mas recomendamos construir uma UI com classes e componentes que se adequem ao seu caso de uso.
3. Inscrever-se em eventos de Content Cards
Inscreva-se em eventos de Content Cards para receber as atualizações mais recentes e, em seguida, chame requestRefresh() para solicitar os Content Cards mais recentes para esse usuário.
Para a lista completa de eventos que você pode receber, consulte Inscrever-se para atualizações de cartões.
4. Construir uma UI de caixa de entrada personalizada
Usar os atributos do Content Card, como title, description e imageUrl, permite que você construa Content Cards que correspondam aos seus requisitos específicos de UI. Neste caso, estamos construindo uma caixa de entrada com as APIs de tabela nativas do Swift.
5. Rastrear impressões e cliques
Você pode registrar impressões e cliques usando os métodos logClick(using:) e logImpression(using:) disponíveis para um cartão de conteúdo.
Além disso, você pode usar logDismissed(using:) para dispensas.
As impressões devem ser registradas apenas uma vez quando visualizadas pelo usuário. Aqui, um mecanismo simples usando um Set e willDisplay é usado para isso. Observe que pode ser necessário considerar o ciclo de vida da UI do seu app, bem como o caso de uso, para garantir que as impressões sejam registradas corretamente.
Pré-requisitos
Antes de poder usar esse recurso, você precisará integrar o Braze Web SDK. No entanto, nenhuma configuração adicional é necessária.
Criando uma caixa de entrada com Content Cards para web
Estamos testando este novo formato de tutorial. Diga-nos o que você acha — seus comentários nos ajudam a melhorar os guias futuros.
1. Ativar depuração (opcional)
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração. Opcionalmente, você também pode executar métodos do SDK web da Braze no console.
2. Construir a UI {#2-build-the-ui}
Crie uma UI para a página da caixa de entrada. Aqui, estamos construindo uma página HTML básica, que inclui um div com o id cards-list. Ele é usado como o contêiner de destino para renderizar Content Cards.
3. Inscrever-se em eventos de Content Cards
Use subscribeToContentCardsEvents() no SDK web 7.0.0 e versões posteriores para receber os cartões em cache e as atualizações mais recentes e, em seguida, chame requestContentCardsRefresh() para solicitar os Content Cards mais recentes para esse usuário. Como alternativa, chame o assinante antes de openSession() para uma atualização automática no início da sessão.
subscribeToContentCardsUpdates() é o padrão anterior, descontinuado a partir da versão 7.0.0. Para a lista completa de eventos que você pode receber, consulte Inscrever-se para atualizações de cartões.
4. Construir os elementos da caixa de entrada {#4-build-the-inbox-elements}
Usar os atributos do Content Card, como title, description e url, permite que você exiba Content Cards que correspondam aos seus requisitos específicos de UI.
5. Rastrear impressões e cliques
Você pode registrar impressões e cliques usando os métodos logContentCardImpressions e logContentCardClick disponíveis para Content Cards.
Além disso, você pode usar logCardDismissal para dispensas.
As impressões devem ser registradas apenas uma vez quando visualizadas pelo usuário. Aqui, um IntersectionObserver combinado com um Set indexado por card.id evita registros duplicados. Observe que pode ser necessário considerar o ciclo de vida da UI do seu app, bem como o caso de uso, para garantir que as impressões sejam registradas corretamente.