Tutorial: Crear un buzón de entrada con Content Cards
Sigue el código de ejemplo de este tutorial para crear un buzón de entrada con Content Cards de Braze.
Requisitos previos
Antes de poder utilizar esta característica, tendrás que integrar el SDK de Android Braze.
Crear un buzón de entrada con Content Cards para Android (Compose)
Estamos probando este nuevo formato de tutorial. Dinos qué opinan — sus comentarios nos ayudan a mejorar las guías futuras.
1. Habilitar depuración (opcional) {#1-enable-debugging-optional}
Para facilitar la solución de problemas durante el desarrollo, considera habilitar la depuración.
2. Crear una vista de interfaz de usuario {#2-build-a-ui-view}
Para Jetpack Compose, usa un LazyColumn para mostrar Content Cards en una lista desplazable.
3. Suscribirse a las actualizaciones de Content Cards {#3-subscribe-to-content-card-updates}
Usa un DisposableEffect para administrar el ciclo de vida de la suscripción, asegurándote de que se realice una limpieza adecuada cuando el composable salga de la composición.
4. Crear una interfaz de usuario personalizada para el buzón de entrada {#4-build-a-custom-inbox-ui}
El uso de los atributos de Content Cards, como title, description y url, te permite crear Content Cards que se adapten a tus requisitos específicos de interfaz de usuario. En este caso, estamos creando un buzón de entrada con los composables Card y Column de Jetpack Compose.
5. Realizar el seguimiento de impresiones y clics {#5-track-impressions-and-clicks}
Puedes registrar impresiones y clics utilizando los métodos logImpressions y logClick disponibles para Content Cards.
Las impresiones solo deben registrarse una vez cuando el usuario ve una tarjeta. Usa LaunchedEffect para registrar las impresiones cuando una tarjeta se hace visible. Ten en cuenta que es posible que debas considerar el ciclo de vida de la vista de tu aplicación, así como el caso de uso, para garantizar que las impresiones se registren correctamente.
Crear un buzón de entrada con Content Cards para Android (RecyclerView)
1. Habilitar depuración (opcional)
Para facilitar la solución de problemas durante el desarrollo, considera habilitar la depuración.
2. Crear una vista de interfaz de usuario
En este tutorial, usamos RecyclerView de Android para mostrar Content Cards, pero te recomendamos crear una interfaz de usuario con clases y componentes que se adapten a tu caso de uso. Braze proporciona la interfaz de usuario de forma predeterminada, pero este tutorial te guía para crear una vista personalizada con el fin de personalizar la apariencia y el comportamiento.
3. Suscribirse a las actualizaciones de Content Cards
Usa subscribeToContentCardsUpdates para permitir que tu interfaz de usuario responda cuando haya nuevas Content Cards disponibles. Aquí, los suscriptores se registran y eliminan dentro de los hooks del ciclo de vida de la actividad.
4. Crear una interfaz de usuario personalizada para el buzón de entrada
El uso de los atributos de Content Cards, como title, description y url, te permite crear Content Cards que se adapten a tus requisitos específicos de interfaz de usuario. En este caso, estamos creando un buzón de entrada con el RecyclerView nativo de Android.
5. Realizar el seguimiento de impresiones y clics
Puedes registrar impresiones y clics utilizando los métodos logImpressions y logClick disponibles para Content Cards.
Las impresiones solo deben registrarse una vez cuando el usuario ve una tarjeta. Aquí usamos un mecanismo sencillo para evitar registros duplicados con un indicador por tarjeta. Ten en cuenta que es posible que debas considerar el ciclo de vida de la vista de tu aplicación, así como el caso de uso, para garantizar que las impresiones se registren correctamente.
Requisitos previos
Antes de poder utilizar esta característica, tendrás que integrar el SDK de Swift Braze. También necesitarás habilitar los mensajes dentro de la aplicación para Swift.
Crear un buzón de entrada con Content Cards para Swift
Estamos probando este nuevo formato de tutorial. Dinos qué opinan — sus comentarios nos ayudan a mejorar las guías futuras.
1. Habilitar depuración (opcional)
Para facilitar la solución de problemas durante el desarrollo, considera habilitar la depuración.
2. Crear una vista de interfaz de usuario
En este tutorial, usamos UITableViewController de Swift, pero te recomendamos crear una interfaz de usuario con clases y componentes que se adapten a tu caso de uso.
3. Suscribirse a las actualizaciones de Content Cards
Suscríbete al listener de Content Cards para recibir las últimas actualizaciones y, a continuación, llama a requestRefresh() para solicitar las Content Cards más recientes para ese usuario.
4. Crear una interfaz de usuario personalizada para el buzón de entrada
El uso de los atributos de Content Cards, como title, description e imageUrl, te permite crear Content Cards que se adapten a tus requisitos específicos de interfaz de usuario. En este caso, estamos creando un buzón de entrada con las API nativas de tablas de Swift.
5. Realizar el seguimiento de impresiones y clics
Puedes registrar impresiones y clics utilizando los métodos logClick(using:) y logImpression(using:) disponibles para una tarjeta de contenido.
Además, puedes usar logDismissed(using:) para los descartes.
Las impresiones solo deben registrarse una vez cuando el usuario las ve. Aquí se usa un mecanismo sencillo con un Set y willDisplay para lograrlo. Ten en cuenta que es posible que debas considerar el ciclo de vida de la interfaz de usuario de tu aplicación, así como el caso de uso, para garantizar que las impresiones se registren correctamente.
Requisitos previos
Antes de poder utilizar esta característica, tendrás que integrar el SDK de Web Braze. Sin embargo, no es necesario realizar ninguna configuración adicional.
Crear un buzón de entrada con Content Cards para Web
Estamos probando este nuevo formato de tutorial. Dinos qué opinan — sus comentarios nos ayudan a mejorar las guías futuras.
1. Habilitar depuración (opcional)
Para facilitar la solución de problemas durante el desarrollo, considera habilitar la depuración. Opcionalmente, también puedes ejecutar métodos del SDK Web de Braze en la consola.
2. Crear la interfaz de usuario {#2-build-the-ui}
Crea una interfaz de usuario para la página del buzón de entrada. Aquí estamos creando una página HTML básica, que incluye un div con el ID cards-list. Se usa como contenedor de destino para renderizar Content Cards.
3. Suscribirse a las actualizaciones de Content Cards
Suscríbete al listener de Content Cards para recibir las últimas actualizaciones y, a continuación, llama a requestContentCardsRefresh() para solicitar las Content Cards más recientes para ese usuario. Como alternativa, llama al suscriptor antes de openSession() para una actualización automática al inicio de la sesión.
4. Crear los elementos del buzón de entrada {#4-build-the-inbox-elements}
El uso de los atributos de Content Cards, como title, description y url, te permite mostrar Content Cards que se adapten a tus requisitos específicos de interfaz de usuario.
5. Realizar el seguimiento de impresiones y clics
Puedes registrar impresiones y clics utilizando los métodos logContentCardImpressions y logContentCardClick disponibles para Content Cards.
Además, puedes usar logCardDismissal para los descartes.
Las impresiones solo deben registrarse una vez cuando el usuario las ve. Aquí, un IntersectionObserver junto con un Set indexado por card.id evita los registros duplicados. Ten en cuenta que es posible que debas considerar el ciclo de vida de la interfaz de usuario de tu aplicación, así como el caso de uso, para garantizar que las impresiones se registren correctamente.