Tarjetas de contenido
Obtén información sobre las tarjetas de contenido para el SDK de Braze, incluidos los distintos modelos de datos y las propiedades específicas de las tarjetas disponibles para tu aplicación.
Prerequisites
Before you can use Braze Content Cards, you’ll need to integrate the Braze Android SDK into your app. However, no additional setup is required.
Google fragments
In Android, the Content Cards feed is implemented as a fragment available in the Braze Android UI project. The ContentCardsFragment
class will automatically refresh and display the contents of the Content Cards and log usage analytics. The cards that can appear in a user’s ContentCards
are created on the Braze dashboard.
To learn how to add a fragment to an activity, see Google’s fragments documentation.
Card types and properties
The Content Cards data model is available in the Android SDK and offers the following unique Content Card types. Each type shares a base model, which allows them to inherit common properties from the base model, in addition to having their own unique properties. For full reference documentation, see com.braze.models.cards
.
Base card model
The base card model provides foundational behavior for all cards.
Property | Description |
---|---|
getId() |
Returns the card’s ID set by Braze. |
getViewed() |
Returns a boolean reflects if the card is read or unread by the user. |
getExtras() |
Returns a map of key-value extras for this card. |
getCreated() |
Returns the unix timestamp of the card’s creation time from Braze. |
isPinned |
Returns a boolean that reflects whether the card is pinned. |
getOpenUriInWebView() |
Returns a boolean that reflects whether Uris for this card should be opened in the Braze WebView or not. |
getExpiredAt() |
Gets the expiration date of the card. |
isRemoved() |
Returns a boolean that reflects whether the end user has dismissed this card. |
isDismissibleByUser() |
Returns a boolean that reflects whether the card is dismissible by the user. |
isClicked() |
Returns a boolean that reflects the clicked state of this card. |
isDismissed() |
Returns a boolean if this card has been dismissed. |
isControl() |
Returns a boolean if this card is a control card and should not be rendered. |
Image only
Image only cards are clickable full-sized images.
Property | Description |
---|---|
getImageUrl() |
Returns the URL of the card’s image. |
getUrl() |
Returns the URL that will be opened after the card is clicked. It can be a HTTP(s) URL or a protocol URL. |
getDomain() |
Returns link text for the property URL. |
Captioned image
Captioned image cards are clickable, full-sized images with accompanying descriptive text.
Property | Description |
---|---|
getImageUrl() |
Returns the URL of the card’s image. |
getTitle() |
Returns the title text for the card. |
getDescription() |
Returns the body text for the card. |
getUrl() |
Returns the URL that will be opened after the card is clicked. It can be a HTTP(s) URL or a protocol URL. |
getDomain() |
Returns the link text for the property URL. |
Classic
A classic card without an image included will result in a text announcement card. If an image is included, you will receive a short news card.
Property | Description |
---|---|
getTitle() |
Returns the title text for the card. |
getDescription() |
Returns the body text for the card. |
getUrl() |
Returns the URL that will be opened after the card is clicked. It can be a HTTP(s) URL or a protocol URL. |
getDomain() |
Returns the link text for the property URL. |
getImageUrl() |
Returns the URL of the card’s image, applies only to the classic Short News Card. |
Card methods
All Card
data model objects offer the following analytics methods for logging user events to Braze servers.
Method | Description |
---|---|
logImpression() |
Manually log an impression to Braze for a particular card. |
logClick() |
Manually log a click to Braze for a particular card. |
setIsDismissed() |
Manually log a dismissal to Braze for a particular card. If a card is already marked as dismissed, it cannot be marked as dismissed again. |
Prerequisites
Before you can use Content Cards, you’ll need to integrate the Braze Swift SDK into your app. However, no additional setup is required.
View controller contexts
The default Content Cards UI can be integrated from the BrazeUI
library of the Braze SDK. Create the Content Cards view controller using the braze
instance. If you wish to intercept and react to the Content Card UI lifecycle, implement BrazeContentCardUIViewControllerDelegate
as the delegate for your BrazeContentCardUI.ViewController
.
For more information about iOS view controller options, refer to the Apple developer documentation.
The BrazeUI
library of the Swift SDK provides two default view controller contexts: navigation or modal. This means you can integrate Content Cards in these contexts by adding a few lines of code to your app or site. Both views offer customization and styling options as described in the customization guide. You can also create a custom Content Card view controller instead of using the standard Braze one for even more customization options—refer to the Content Cards UI tutorial for an example.
To handle control variant Content Cards in your custom UI, pass in your Braze.ContentCard.Control
object, then call the logImpression
method as you would with any other Content Card type. The object will implicitly log a control impression to inform our analytics of when a user would have seen the control card.
Navigation
A navigation controller is a view controller that manages one or more child view controllers in a navigation interface. Here is an example of pushing a BrazeContentCardUI.ViewController
instance into a navigation controller:
1
2
3
4
5
6
7
func pushViewController() {
guard let braze = AppDelegate.braze else { return }
let contentCardsController = BrazeContentCardUI.ViewController(braze: braze)
// Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
contentCardsController.delegate = self
self.navigationController?.pushViewController(contentCardsController, animated: true)
}
1
2
3
4
5
6
- (void)pushViewController {
BRZContentCardUIViewController *contentCardsController = [[BRZContentCardUIViewController alloc] initWithBraze:self.braze];
// Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
[contentCardsController setDelegate:self];
[self.navigationController pushViewController:contentCardsController animated:YES];
}
Modal
Use modal presentations to create temporary interruptions in your app’s workflow, such as prompting the user for important information. This model view has a navigation bar on top and a Done button on the side of the bar. Here is an example of pushing a BrazeContentCard.ViewController
instance into a modal controller:
1
2
3
4
5
6
7
func presentModalViewController() {
guard let braze = AppDelegate.braze else { return }
let contentCardsModal = BrazeContentCardUI.ModalViewController(braze: braze)
// Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
contentCardsModal.viewController.delegate = self
self.navigationController?.present(contentCardsModal, animated: true, completion: nil)
}
1
2
3
4
5
6
- (void)presentModalViewController {
BRZContentCardUIModalViewController *contentCardsModal = [[BRZContentCardUIModalViewController alloc] initWithBraze:AppDelegate.braze];
// Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
[contentCardsModal.viewController setDelegate:self];
[self.navigationController presentViewController:contentCardsModal animated:YES completion:nil];
}
For example usage of BrazeUI
view controllers, check out the corresponding Content Cards UI samples in our Examples app.
Base card model
The Content Cards data model is available in the BrazeKit
module of the Braze Swift SDK. This module contains the following Content Card types, which are an implementation of the Braze.ContentCard
type. For a full list of Content Card properties and their usage, see ContentCard
class.
- Image only
- Captioned image
- Classic
- Classic image
- Control
To access the Content Cards data model, call contentCards.cards
on your braze
instance. See Logging analytics for more information on subscribing to card data.
Keep in mind, BrazeKit
offers an alternative ContentCardRaw
class for Objective-C compatibility.
Card methods
Each card is initialized with a Context
object, which contains various methods for managing your card’s state. Call these methods when you want to modify the corresponding state property on a particular card object.
Method | Description |
---|---|
card.context?.logImpression() |
Log the content card impression event. |
card.context?.logClick() |
Log the content card click event. |
card.context?.processClickAction() |
Process a given ClickAction input. |
card.context?.logDismissed() |
Log the content card dismissed event. |
card.context?.logError() |
Log an error related to the content card. |
card.context?.loadImage() |
Load a given content card image from a URL. This method can be nil when the content card does not have an image. |
For more details, refer to the Context
class documentation
Esta guía utiliza ejemplos de código del SDK Web de Braze 4.0.0+. Para actualizar a la última versión del SDK Web, consulta la Guía de actualización del SDK.
Prerequisites
Before you can use Content Cards, you’ll need to integrate the Braze Web SDK into your app. However, no additional setup is required. To build your own UI instead, see Content Card Customization Guide.
Standard feed UI
To use the included Content Cards UI, you’ll need to specify where to show the feed on your website.
In this example, we have a <div id="feed"></div>
in which we want to place the Content Cards feed. We’ll use three buttons to hide, show, or toggle (hide or show based on its current state) the feed.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<button id="toggle" type="button">Toggle Cards Feed</button>
<button id="hide" type="button">Hide Cards Feed</button>
<button id="show" type="button">Show Cards Feed</button>
<nav>
<h1>Your Personalized Feed</h1>
<div id="feed"></div>
</nav>
<script>
const toggle = document.getElementById("toggle");
const hide = document.getElementById("hide");
const show = document.getElementById("show");
const feed = document.getElementById("feed");
toggle.onclick = function(){
braze.toggleContentCards(feed);
}
hide.onclick = function(){
braze.hideContentCards();
}
show.onclick = function(){
braze.showContentCards(feed);
}
</script>
When using the toggleContentCards(parentNode, filterFunction)
and showContentCards(parentNode, filterFunction)
methods, if no arguments are provided, all Content Cards will be shown in a fixed-position sidebar on the right-hand side of the page. Otherwise, the feed will be placed in the specified parentNode
option.
Parameters | Description |
---|---|
parentNode |
The HTML node to render the Content Cards into. If the parent node already has a Braze Content Cards view as a direct descendant, the existing Content Cards will be replaced. For example, you should pass in document.querySelector(".my-container") . |
filterFunction |
A filter or sort function for cards displayed in this view. Invoked with the array of Card objects, sorted by {pinned, date} . Expected to return an array of sorted Card objects to render for this user. If omitted, all cards will be displayed. |
See the SDK reference docs for more information on Content Card toggling.
Card types and properties
The Content Cards data model is available in the Web SDK and offers the following Content Card types: ImageOnly, CaptionedImage, and ClassicCard. Each type inherits common properties from a base model Card and has the following additional properties.
To log Content Card data, see Logging analytics.
Base card model
All Content Cards have these shared properties:
Property | Description |
---|---|
expiresAt |
The UNIX timestamp of the card’s expiration time. |
extras |
(Optional) Key-value pair data formatted as a string object with a value string. |
id |
(Optional) The id of the card. This will be reported back to Braze with events for analytics purposes. |
pinned |
This property reflects if the card was set up as “pinned” in the dashboard. |
updated |
The UNIX timestamp of when this card was last modified. |
viewed |
This property reflects whether the user viewed the card or not. |
isControl |
This property is true when a card is a “control” group within an A/B test. |
Image only
ImageOnly cards are clickable full-sized images.
Property | Description |
---|---|
aspectRatio |
The aspect ratio of the card’s image and serves as a hint before image loading completes. Note that the property may not be supplied in certain circumstances. |
categories |
This property is purely for organization in your custom implementation; these categories can be set in the dashboard composer. |
clicked |
This property indicates whether this card has ever been clicked on this device. |
created |
The UNIX timestamp of the card’s creation time from Braze. |
dismissed |
This property indicates if this card has been dismissed. |
dismissible |
This property reflects if the user can dismiss the card, removing it from view. |
imageUrl |
The URL of the card’s image. |
linkText |
The display text for the URL. |
url |
The URL that will be opened after the card is clicked on. |
Captioned image
CaptionedImage cards are clickable, full-sized images with accompanying descriptive text.
Property | Description |
---|---|
aspectRatio |
The aspect ratio of the card’s image and serves as a hint before image loading completes. Note that the property may not be supplied in certain circumstances. |
categories |
This property is purely for organization in your custom implementation; these categories can be set in the dashboard composer. |
clicked |
This property indicates whether this card has ever been clicked on this device. |
created |
The UNIX timestamp of the card’s creation time from Braze. |
dismissed |
This property indicates if this card has been dismissed. |
dismissible |
This property reflects if the user can dismiss the card, removing it from view. |
imageUrl |
The URL of the card’s image. |
linkText |
The display text for the URL. |
title |
The title text for this card. |
url |
The URL that will be opened after the card is clicked on. |
Classic
The ClassicCard model can contain an image with no text or a text with image.
Property | Description |
---|---|
aspectRatio |
The aspect ratio of the card’s image and serves as a hint before image loading completes. Note that the property may not be supplied in certain circumstances. |
categories |
This property is purely for organization in your custom implementation; these categories can be set in the dashboard composer. |
clicked |
This property indicates whether this card has ever been clicked on this device. |
created |
The UNIX timestamp of the card’s creation time from Braze. |
description |
The body text for this card. |
dismissed |
This property indicates if this card has been dismissed. |
dismissible |
This property reflects if the user can dismiss the card, removing it from view. |
imageUrl |
The URL of the card’s image. |
linkText |
The display text for the URL. |
title |
The title text for this card. |
url |
The URL that will be opened after the card is clicked on. |
Control group
If you use the default Content Cards feed, impressions and clicks will be automatically tracked.
If you use a custom integration for Content Cards, you need need log impressions when a Control Card would have been seen. As part of this effort, make sure to handle Control cards when logging impressions in an A/B test. These cards are blank, and while they aren’t seen by users, you should still log impressions in order to compare how they perform against non-Control cards.
To determine if a Content Card is in the Control group for an A/B test, check the card.isControl
property (Web SDK v4.5.0+) or check if the card is a ControlCard
instance (card instanceof braze.ControlCard
).
Card methods
Method | Description |
---|---|
logContentCardImpressions |
Logs an impression event for the given list of cards. This is required when using a customized UI and not the Braze UI. |
logContentCardClick |
Logs an click event for a given card. This is required when using a customized UI and not the Braze UI. |
showContentCards |
Display the user’s Content Cards. |
hideContentCards |
Hide any Braze Content Cards currently showing. |
toggleContentCards |
Display the user’s Content Cards. |
getCachedContentCards |
Get all currently available cards from the last Content Cards refresh. |
subscribeToContentCardsUpdates |
Subscribe to Content Cards updates. The subscriber callback will be called whenever Content Cards are updated. |
dismissCard |
Dismiss the card programmatically (available in v2.4.1). |
For more details, refer to the SDK reference documentation
Using Google Tag Manager
Google Tag Manager works by injecting the Braze CDN (a version of our Web SDK) directly into your website code, which means that all SDK methods are available just as if you had integrated the SDK without Google Tag Manager, except when implementing Content Cards.
Setting up Content Cards
For a standard integration of the Content Card feed, you can use a Custom HTML tag in Google Tag Manager. Add the following to your Custom HTML tag, which will activate the standard Content Card feed:
1
2
3
<script>
window.braze.showContentCards();
</script>
For more freedom over customizing the appearance of Content Cards and their feed, you can directly integrate Content Cards into your native website. There are two approaches you can take with this: using the standard feed UI or creating a custom feed UI.
When implementing the standard feed UI, Braze methods must have window.
added to the start of the method. For example, braze.showContentCards
should instead be window.braze.showContentCards
.
For custom feed styling, the steps are the same as if you had integrated the SDK without GTM. For example, if you want to customize the width of the Content Card feed, you can paste the following into your CSS file:
1
2
3
body .ab-feed {
width: 800px;
}
Upgrading templates
To upgrade to the latest version of the Braze Web SDK, take the following three steps in your Google Tag Manager dashboard:
- Update tag template
Go to the Templates page within your workspace. Here you should see an icon indicating an update is available.
Click that icon and after reviewing the change, click to Accept Update. - Update version number
Once your tag template has been updated, edit the Braze Initialization Tag, and update the SDK version to the most recentmajor.minor
version. For example, if the latest version is4.1.2
, enter4.1
. You can view a list of SDK versions in our changelog. - QA and publish
Verify the new SDK version is working using Google Tag Manager’s debugging tool prior to publishing an update to your tag container.
Troubleshooting
Enable tag debugging
Each Braze tag template has an optional GTM Tag Debugging checkbox which can be used to log debug messages to your web page’s JavaScript console.
Enter debug mode
Another way to help debug your Google Tag Manager integration is using Google’s Preview mode feature.
This will help identify what values are being sent from your web page’s data layer to each triggered Braze tag and will also explain which tags were or were not triggered.
Enable verbose logging
To allow Braze technical support to access logs while testing, you can enable verbose logging on your Google Tag Manager integration. These logs will appear in the Console tab of your browser’s developer tools.
In your Google Tag Manager integration, navigate to your Braze Initialization Tag and select Enable Web SDK Logging.
Prerequisites
Before you can use this feature, you’ll need to integrate the Cordova Braze SDK.
Fuentes de tarjetas
El SDK de Braze incluye una fuente de tarjetas predeterminada. Para mostrar la fuente de tarjetas predeterminada, puedes utilizar el método launchContentCards()
. Este método gestiona todo el seguimiento de análisis, los descartes y la representación de las tarjetas de contenido de un usuario.
Tarjetas de contenido
Puedes utilizar estos métodos adicionales para crear una fuente personalizada de tarjetas de contenido dentro de tu aplicación:
Método | Descripción |
---|---|
requestContentCardsRefresh() |
Envía una petición en segundo plano para solicitar las últimas tarjetas de contenido al servidor del SDK de Braze. |
getContentCardsFromServer(successCallback, errorCallback) |
Recupera tarjetas de contenido del SDK Braze. Esto solicitará las últimas tarjetas de contenido al servidor y devolverá la lista de tarjetas al finalizar. |
getContentCardsFromCache(successCallback, errorCallback) |
Recupera tarjetas de contenido del SDK Braze. Esto devolverá la última lista de tarjetas de la caché local, que se actualizó en la última actualización. |
logContentCardClicked(cardId) |
Registra un clic para el ID de tarjeta de contenido dado. |
logContentCardImpression(cardId) |
Registra una impresión para el ID de tarjeta de contenido dado. |
logContentCardDismissed(cardId) |
Registra un descarte para el ID de tarjeta de contenido dado. |
Acerca de las tarjetas de contenido de Flutter
El SDK de Braze incluye una fuente de tarjetas predeterminada para que empieces a utilizar las tarjetas de contenido. Para mostrar la fuente de la tarjeta, puedes utilizar el método braze.launchContentCards()
. La fuente predeterminada de tarjetas incluida en el SDK de Braze gestionará todos los análisis de seguimiento, descarte de tarjetas y representación de las tarjetas de contenido de un usuario.
Requisitos previos
Antes de poder utilizar esta característica, tendrás que integrar el SDK de Flutter Braze.
Métodos de tarjeta
Puedes utilizar estos métodos adicionales para crear una fuente de tarjetas de contenido personalizada dentro de tu aplicación utilizando los siguientes métodos disponibles en la interfaz pública del complemento:
Método | Descripción |
---|---|
braze.requestContentCardsRefresh() |
Solicita las últimas tarjetas de contenido al servidor SDK de Braze. |
braze.logContentCardClicked(contentCard) |
Registra un clic para el objeto Tarjeta de contenido dado. |
braze.logContentCardImpression(contentCard) |
Registra una impresión para el objeto Tarjeta de contenido dado. |
braze.logContentCardDismissed(contentCard) |
Registra el despido del objeto Tarjeta de contenido dado. |
Recepción de datos de la tarjeta de contenido
Para recibir datos de la tarjeta de contenido en tu aplicación Flutter, BrazePlugin
admite el envío de datos de la tarjeta de contenido mediante Dart Streams.
El objeto BrazeContentCard
admite un subconjunto de campos disponibles en los objetos del modelo nativo, como description
, title
, image
, url
, extras
, etc.
Paso 1: Escucha los datos de la tarjeta de contenido en la capa Dart
Para recibir los datos de la tarjeta de contenido en la capa Dart, utiliza el código siguiente para crear un StreamSubscription
y llamar a braze.subscribeToContentCards()
. Recuerda cancel()
la suscripción de streaming cuando ya no la necesites.
1
2
3
4
5
6
7
8
9
// Create stream subscription
StreamSubscription contentCardsStreamSubscription;
contentCardsStreamSubscription = braze.subscribeToContentCards((List<BrazeContentCard> contentCards) {
// Handle Content Cards
}
// Cancel stream subscription
contentCardsStreamSubscription.cancel();
Para ver un ejemplo, consulta main.dart en nuestra aplicación de ejemplo.
Paso 2: Transmite los datos de la tarjeta de contenido de la capa nativa
Para recibir los datos de la capa Dart del paso 1, añade el siguiente código para reenviar los datos de la tarjeta de contenido desde las capas nativas.
Los datos de la tarjeta de contenido se envían automáticamente desde la capa de Android.
-
Implementa
contentCards.subscribeToUpdates
para suscribirte a las actualizaciones de las tarjetas de contenido como se describe en la documentación subscribeToUpdates. -
Tu implementación de devolución de llamada a
contentCards.subscribeToUpdates
debe llamar aBrazePlugin.processContentCards(contentCards)
.
Para ver un ejemplo, consulta AppDelegate.swift en nuestra aplicación de ejemplo.
Repetición de la devolución de llamada para tarjetas de contenido
Para almacenar las tarjetas de contenido desencadenadas antes de que esté disponible la devolución de llamada y reproducirlas una vez establecida, añade la siguiente entrada al mapa customConfigs
al inicializar BrazePlugin
:
1
BrazePlugin braze = new BrazePlugin(customConfigs: {replayCallbacksConfigKey: true});
About React Native Content Cards
The Braze SDKs include a default card feed to get you started with Content Cards. To show the card feed, you can use the Braze.launchContentCards()
method. The default card feed included with the Braze SDK will handle all analytics tracking, dismissals, and rendering for a user’s Content Cards.
Prerequisites
Before you can use this feature, you’ll need to integrate the React Native Braze SDK.
Cards methods
To build your own UI, you can get a list of available cards, and listen for updates to cards:
1
2
3
4
5
6
7
8
9
10
11
// Set initial cards
const [cards, setCards] = useState([]);
// Listen for updates as a result of card refreshes, such as:
// a new session, a manual refresh with `requestContentCardsRefresh()`, or after the timeout period
Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, async (update) => {
setCards(update.cards);
});
// Manually trigger a refresh of cards
Braze.requestContentCardsRefresh();
If you choose to build your own UI to display cards, you must call logContentCardImpression
in order to receive analytics for those cards. This includes control
cards, which must be tracked even though they are not displayed to the user.
You can use these additional methods to build a custom Content Cards Feed within your app:
Method | Description |
---|---|
launchContentCards() |
Launches the Content Cards UI element. |
requestContentCardsRefresh() |
Requests the latest Content Cards from the Braze SDK server. The resulting list of cards is passed to each of the previously registered content card event listeners. |
getContentCards() |
Retrieves Content Cards from the Braze SDK. This returns a promise that resolves with the latest list of cards from the server. |
getCachedContentCards() |
Returns the most recent Content Cards array from the cache. |
logContentCardClicked(cardId) |
Logs a click for the given Content Card ID. This method is used only for analytics. To execute the click action, call processContentCardClickAction(cardId) in addition. |
logContentCardImpression(cardId) |
Logs an impression for the given Content Card ID. |
logContentCardDismissed(cardId) |
Logs a dismissal for the given Content Card ID. |
processContentCardClickAction(cardId) |
Perform the action of a particular card. |
Card types and properties
The Content Cards data model is available in the React Native SDK and offers the following Content Cards card types: Image Only, Captioned Image, and Classic. There’s also a special Control card type, which is returned to users that are in the control group for a given card. Each type inherits common properties from a base model in addition to its own unique properties.
Base card model
The base card model provides foundational behavior for all cards.
Property | Description |
---|---|
id |
The card’s ID set by Braze. |
created |
The UNIX timestamp of the card’s creation time from Braze. |
expiresAt |
The UNIX timestamp of the card’s expiration time. When the value is less than 0, it means the card never expires. |
viewed |
Whether the card is read or unread by the user. This does not log analytics. |
clicked |
Whether the card has been clicked by the user. |
pinned |
Whether the card is pinned. |
dismissed |
Whether the user has dismissed this card. Marking a card as dismissed that has already been dismissed will be a no-op. |
dismissible |
Whether the card is dismissible by the user. |
url |
(Optional) The URL string associated with the card click action. |
openURLInWebView |
Whether URLs for this card should be opened in the Braze WebView or not. |
isControl |
Whether this card is a control card. Control cards should not be displayed to the user. |
extras |
The map of key-value extras for this card. |
For a full reference of the base card, see the Android and iOS documentation.
Image only
Image only cards are clickable, full-sized images.
Property | Description |
---|---|
type |
The Content Card type, IMAGE_ONLY . |
image |
The URL of the card’s image. |
imageAspectRatio |
The aspect ratio of the card’s image. It is meant to serve as a hint before image loading completes. Note that the property may not be supplied in certain circumstances. |
For a full reference of the image only card, see the Android and iOS documentation.
Captioned image
Captioned image cards are clickable, full-sized images with accompanying descriptive text.
Property | Description |
---|---|
type |
The Content Card type, CAPTIONED . |
image |
The URL of the card’s image. |
imageAspectRatio |
The aspect ratio of the card’s image. It is meant to serve as a hint before image loading completes. Note that the property may not be supplied in certain circumstances. |
title |
The title text for the card. |
cardDescription |
The description text for the card. |
domain |
(Optional) The link text for the property URL, for example, "braze.com/resources/" . It can be displayed on the card’s UI to indicate the action/direction of clicking on the card. |
For a full reference of the captioned image card, see the Android and iOS documentation.
Classic
Classic cards have a title, description, and an optional image on the left of the text.
Property | Description |
---|---|
type |
The Content Card type, CLASSIC . |
image |
(Optional) The URL of the card’s image. |
title |
The title text for the card. |
cardDescription |
The description text for the card. |
domain |
(Optional) The link text for the property URL, for example, "braze.com/resources/" . It can be displayed on the card’s UI to indicate the action/direction of clicking on the card. |
For a full reference of the classic (text announcement) Content Card, see the Android and iOS documentation. For the classic image (short news) card, see the Android and iOS documentation.
Control
Control cards include all of the base properties, with a few important differences. Most importantly:
- The
isControl
property is guaranteed to betrue
. - The
extras
property is guaranteed to be empty.
For a full reference of the control card, see the Android and iOS documentation.
Requisitos previos
Antes de poder utilizar las tarjetas de contenido, tendrás que integrar el SDK de Braze Swift en tu aplicación. A continuación, tendrás que completar los pasos para configurar tu aplicación tvOS.
Ten en cuenta que tendrás que implementar tu propia interfaz de usuario personalizada, ya que las tarjetas de contenido se admiten a través de una interfaz de usuario sin cabeza utilizando el SDK de Swift, que no incluye ninguna interfaz de usuario ni vistas predeterminadas para tvOS.
Configuración de tu aplicación tvOS
Paso 1: Crear una nueva aplicación iOS
En Braze, selecciona Configuración > Configuración de la aplicación y, a continuación, Añadir aplicación. Introduce un nombre para tu aplicación de tvOS, selecciona iOS (no_tvOS) y_luego selecciona Añadir aplicación.
Si seleccionas la casilla tvOS, no podrás personalizar las tarjetas de contenido para tvOS.
Paso 2: Obtén la clave de API de tu aplicación
En la configuración de tu aplicación, selecciona tu nueva aplicación para tvOS y toma nota de la clave de API de tu aplicación. Utilizarás esta clave para configurar tu aplicación en Xcode.
Paso 3: Integrar BrazeKit
Utiliza la clave de API de tu aplicación para integrar el SDK de Braze Swift en tu proyecto de tvOS en Xcode. Solo tienes que integrar BrazeKit desde el SDK Swift de Braze.
Paso 4: Crea tu interfaz de usuario personalizada
Como Braze no proporciona una interfaz predeterminada para las tarjetas de contenido en tvOS, tendrás que personalizarla tú mismo. Para un recorrido completo, consulta nuestro tutorial paso a paso: Personaliza las tarjetas de contenido para tvOS. Para ver un proyecto de ejemplo, consulta los ejemplos del SDK Swift de Braze.
Requisitos previos
Antes de poder utilizar esta característica, tendrás que integrar el SDK Braze de Unity.
Mostrar tarjetas de contenido de forma nativa
Puedes mostrar la IU predeterminada para las tarjetas de contenido utilizando la siguiente llamada:
1
Appboy.AppboyBinding.DisplayContentCards();
Recepción de datos de la tarjeta de contenido en Unity
Puedes registrar objetos del juego Unity para que se te notifique la llegada de tarjetas de contenido. Recomendamos configurar los oyentes del objeto del juego desde el editor de configuración de Braze.
Si necesitas configurar la escucha de tu objeto del juego en tiempo de ejecución, utiliza AppboyBinding.ConfigureListener()
y especifica BrazeUnityMessageType.CONTENT_CARDS_UPDATED
.
Nota, además tendrás que hacer una llamada a AppboyBinding.RequestContentCardsRefresh()
para empezar a recibir datos en tu receptor de objetos del juego en iOS.
Análisis sintáctico de tarjetas de contenido
Los mensajes entrantes de string
recibidos en tu devolución de llamada al objeto del juego Tarjetas de contenido pueden analizarse en nuestro ContentCard
para mayor comodidad.
El análisis de las tarjetas de contenido requiere el análisis JSON, consulta el siguiente ejemplo para obtener más detalles:
Ejemplo de devolución de llamada de tarjetas de contenido
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
void ExampleCallback(string message) {
try {
JSONClass json = (JSONClass)JSON.Parse(message);
// Content Card data is contained in the `mContentCards` field of the top level object.
if (json["mContentCards"] != null) {
JSONArray jsonArray = (JSONArray)JSON.Parse(json["mContentCards"].ToString());
Debug.Log(String.Format("Parsed content cards array with {0} cards", jsonArray.Count));
// Iterate over the card array to parse individual cards.
for (int i = 0; i < jsonArray.Count; i++) {
JSONClass cardJson = jsonArray[i].AsObject;
try {
ContentCard card = new ContentCard(cardJson);
Debug.Log(String.Format("Created card object for card: {0}", card));
// Example of logging Content Card analytics on the ContentCard object
card.LogImpression();
card.LogClick();
} catch {
Debug.Log(String.Format("Unable to create and log analytics for card {0}", cardJson));
}
}
}
} catch {
throw new ArgumentException("Could not parse content card JSON message.");
}
}
Actualizar tarjetas de contenido
Para actualizar las tarjetas de contenido desde Braze, llama a cualquiera de los siguientes métodos:
1
2
3
4
// results in a network request to Braze
AppboyBinding.RequestContentCardsRefresh()
AppboyBinding.RequestContentCardsRefreshFromCache()
Análisis
Los clics y las impresiones deben registrarse manualmente para las tarjetas de contenido no mostradas directamente por Braze.
Utiliza LogClick()
y LogImpression()
en ContentCard para registrar los clics y las impresiones de tarjetas concretas.
Acerca de las tarjetas de contenido de Xamarin
El SDK de Xamarin de Braze incluye una fuente de tarjetas predeterminada para que empieces a utilizar las tarjetas de contenido. La fuente predeterminada de tarjetas incluida en el SDK de Braze gestionará todos los análisis de seguimiento, descarte de tarjetas y representación de las tarjetas de contenido de un usuario.
Requisitos previos
Antes de poder utilizar esta característica, tendrás que integrar el SDK de Xamarin Braze.
Tipos de tarjeta y propiedades
El SDK de Xamarin de Braze tiene tres tipos únicos de tarjetas de contenido que comparten un modelo base: Banner, Imagen subtitulada y Clásico. Cada tipo hereda propiedades comunes de un modelo base y tiene las siguientes propiedades adicionales.
Modelo de tarjeta base
Propiedad | Descripción |
---|---|
idString |
El ID de la tarjeta configurado por Braze. |
created |
La marca de tiempo UNIX de la hora de creación de la tarjeta desde Braze. |
expiresAt |
La fecha UNIX de caducidad de la tarjeta. Cuando el valor es inferior a 0, significa que la tarjeta no caduca nunca. |
viewed |
Si el usuario ha leído o no la tarjeta. Esto no registra análisis. |
clicked |
Si el usuario ha hecho clic en la tarjeta. |
pinned |
Si la tarjeta está anclada. |
dismissed |
Si el usuario ha descartado esta tarjeta. Marcar como descartada una tarjeta que ya ha sido descartada será un no-op. |
dismissible |
Si la tarjeta es descartable por el usuario. |
urlString |
(Opcional) La cadena de URL asociada a la acción de clic en la tarjeta. |
openUrlInWebView |
Si las URL de esta tarjeta deben abrirse en la Vista Web de Braze o no. |
isControlCard |
Si esta tarjeta es una tarjeta de control. Las tarjetas de control no deben mostrarse al usuario. |
extras |
El mapa de extras clave-valor de esta tarjeta. |
isTest |
Si esta tarjeta es una tarjeta de prueba. |
Para una referencia completa de la tarjeta base, consulta la documentación de Android e iOS.
Banner
Las tarjetas banner son imágenes de tamaño completo en las que se puede hacer clic.
Propiedad | Descripción |
---|---|
image |
La URL de la imagen de la tarjeta. |
imageAspectRatio |
La relación de aspecto de la imagen de la tarjeta. Sirve como pista antes de que se complete la carga de la imagen. Ten en cuenta que la propiedad puede no suministrarse en determinadas circunstancias. |
Para una referencia completa de la tarjeta banner, consulta la documentación de Android e iOS (ahora renombrada a sólo imagen).
Imagen subtitulada
Las tarjetas de imágenes con subtítulos son imágenes de tamaño completo en las que se puede hacer clic y que van acompañadas de un texto descriptivo.
Propiedad | Descripción |
---|---|
image |
La URL de la imagen de la tarjeta. |
imageAspectRatio |
La relación de aspecto de la imagen de la tarjeta. Sirve como pista antes de que se complete la carga de la imagen. Ten en cuenta que la propiedad puede no suministrarse en determinadas circunstancias. |
title |
El texto del título de la tarjeta. |
cardDescription |
El texto descriptivo de la tarjeta. |
domain |
(Opcional) El texto del enlace para la URL de la propiedad, por ejemplo, "braze.com/resources/" . Se puede mostrar en la interfaz de usuario de la tarjeta para indicar la acción/dirección de hacer clic en la tarjeta. |
Para una referencia completa de la tarjeta de imagen subtitulada, consulta la documentación de Android e iOS.
Clásica
Las tarjetas clásicas tienen un título, una descripción y una imagen opcional a la izquierda del texto.
Propiedad | Descripción |
---|---|
image |
(Opcional) La URL de la imagen de la tarjeta. |
title |
El texto del título de la tarjeta. |
cardDescription |
El texto descriptivo de la tarjeta. |
domain |
(Opcional) El texto del enlace para la URL de la propiedad, por ejemplo, "braze.com/resources/" . Se puede mostrar en la interfaz de usuario de la tarjeta para indicar la acción/dirección de hacer clic en la tarjeta. |
Para una referencia completa de la tarjeta de contenido clásica (anuncio de texto), consulta la documentación de Android e iOS. Para una referencia completa de la tarjeta de imagen clásica (noticias breves), consulta la documentación de Android e iOS.
Métodos de tarjeta
Puedes utilizar estos métodos adicionales para crear una fuente personalizada de tarjetas de contenido dentro de tu aplicación:
Método | Descripción |
---|---|
requestContentCardsRefresh() |
Solicita las últimas tarjetas de contenido al servidor SDK de Braze. |
getContentCards() |
Recupera tarjetas de contenido del SDK Braze. Esto devolverá la última lista de tarjetas del servidor. |
logContentCardClicked(cardId) |
Registra un clic para el ID de tarjeta de contenido dado. Este método sólo se utiliza para análisis. |
logContentCardImpression(cardId) |
Registra una impresión para el ID de tarjeta de contenido dado. |
logContentCardDismissed(cardId) |
Registra un descarte para el ID de tarjeta de contenido dado. |