Cartes de contenu
Découvrez les cartes de contenu pour le SDK de Braze, notamment les différents modèles de données et les propriétés spécifiques aux cartes disponibles pour votre application.
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
This guide uses code samples from the Braze Web SDK 4.0.0+. To upgrade to the latest Web SDK version, see SDK Upgrade Guide.
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.
Flux de cartes
Le SDK Braze comprend un flux de cartes par défaut. Pour afficher le flux de cartes par défaut, vous pouvez utiliser la méthode launchContentCards()
. Cette méthode gère l’ensemble des activités de suivi des analyses, de rejets et de rendu des cartes de contenu d’un utilisateur.
Cartes de contenu
Vous pouvez utiliser ces méthodes supplémentaires pour créer un flux de cartes de contenu personnalisé dans votre application :
Méthode | Description |
---|---|
requestContentCardsRefresh() |
Envoie une requête en arrière-plan pour demander les dernières cartes de contenu au serveur SDK de Braze. |
getContentCardsFromServer(successCallback, errorCallback) |
Récupère les cartes de contenu du SDK Braze Cette fonction demande les dernières cartes de contenu au serveur et renvoie la liste des cartes terminées. |
getContentCardsFromCache(successCallback, errorCallback) |
Récupère les cartes de contenu du SDK Braze Cette fonction renvoie la dernière liste de cartes du cache local, qui a été actualisée lors de la dernière actualisation. |
logContentCardClicked(cardId) |
Enregistre un clic pour l’ID de carte de contenu donné. |
logContentCardImpression(cardId) |
Enregistre une impression pour l’ID de carte de contenu donné. |
logContentCardDismissed(cardId) |
Enregistre un rejet pour l’ID de carte de contenu donné. |
À propos des cartes de contenu de Flutter
Le SDK Braze comprend un flux de cartes par défaut pour vous permettre de vous lancer dans les cartes de contenu. Pour afficher le flux de carte, vous pouvez utiliser la méthode braze.launchContentCards()
. Le flux de cartes par défaut inclus avec le SDK Braze traitera tous les suivis, les masquages et le rendu des cartes de contenu d’un utilisateur.
Conditions préalables
Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK de Flutter Braze.
Méthodes de carte
Vous pouvez utiliser ces méthodes supplémentaires pour créer un flux de cartes de contenu personnalisé dans votre application en utilisant les méthodes suivantes disponibles sur l’interface publique du plugin:
Méthode | Description |
---|---|
braze.requestContentCardsRefresh() |
Demande les dernières cartes de contenu au serveur Braze SDK. |
braze.logContentCardClicked(contentCard) |
Enregistre un clic pour l’objet de carte de contenu donné. |
braze.logContentCardImpression(contentCard) |
Enregistre une impression pour l’objet de carte de contenu donné. |
braze.logContentCardDismissed(contentCard) |
Enregistre un abandon pour l’objet de carte de contenu donné. |
Réception des données de cartes de contenu
Pour recevoir des données de cartes de contenu dans votre application Flutter, le BrazePlugin
prend en charge l’envoi de données de cartes de contenu à l’aide de Dart Streams.
L’objet BrazeContentCard
prend en charge un sous-ensemble de champs disponibles dans les objets du modèle natif, y compris description
, title
, image
, url
, extras
et plus encore.
Étape 1 : Écoutez les données de la carte de contenu dans la couche Dart
Pour recevoir les données de cartes de contenu dans la couche Dart, utilisez le code ci-dessous pour créer un StreamSubscription
et appeler braze.subscribeToContentCards()
. N’oubliez pas de cancel()
l’abonnement au flux lorsqu’il n’est plus nécessaire.
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();
Consultez main.dart dans notre exemple d’application.
Étape 2 : Transférer les données de la carte de contenu depuis la couche native
Pour recevoir les données dans la couche Dart à partir de l’étape 1, ajoutez le code suivant pour transférer les données de la carte de contenu des couches natives.
Les données de la carte de contenu sont automatiquement transférées depuis la couche Android.
-
Implémentez
contentCards.subscribeToUpdates
pour vous abonner aux mises à jour des cartes de contenu comme décrit dans la documentation subscribeToUpdates. -
Votre implémentation de fonction de rappel
contentCards.subscribeToUpdates
doit appelerBrazePlugin.processContentCards(contentCards)
.
Consultez AppDelegate.swift dans notre exemple d’application.
Rejouer la fonction de rappel pour les cartes de contenu
Pour enregistrer n’importe quelle carte de contenu déclenchée avant que la fonction de rappel soit disponible et la rejouer une fois qu’elle est définie, ajoutez l’entrée suivante à la map customConfigs
lors de l’initialisation du 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.
Conditions préalables
Avant de pouvoir utiliser les cartes de contenu, vous devez intégrer le SDK Swift de Braze dans votre application. Vous devrez ensuite suivre les étapes de configuration de votre application tvOS.
Gardez à l’esprit que vous devrez implémenter votre propre interface utilisateur personnalisée, car les cartes de contenu sont prises en charge par une interface utilisateur Headless à l’aide du SDK Swift, qui n’inclut pas d’interface utilisateur ou de vues par défaut pour tvOS.
Configurer votre application tvOS
Étape 1 : Créer une nouvelle application iOS
Dans Braze, sélectionnez Paramètres > Paramètres des applications, puis Ajouter une application. Saisissez un nom pour votre application tvOS, sélectionnez iOS, et non tvOS, puis sélectionnez Ajouter une application.
Si vous cochez la case tvOS, vous ne pourrez pas personnaliser les cartes de contenu pour tvOS.
Étape 2 : Obtenir la clé API de votre application
Dans les paramètres de votre application, sélectionnez votre nouvelle appli tvOS, puis prenez note de la clé API de votre appli. Vous utiliserez cette clé pour configurer votre application dans Xcode.
Étape 3 : Intégrer BrazeKit
Utilisez la clé API de votre application pour intégrer le SDK Braze Swift à votre projet tvOS dans Xcode. Il vous suffit d’intégrer BrazeKit à partir du SDK Swift de Braze.
Étape 4 : Créez votre interface utilisateur personnalisée
Braze ne proposant pas d’interface utilisateur par défaut pour les cartes de contenu sur tvOS, vous devrez la personnaliser vous-même. Pour une description complète, consultez notre tutoriel étape par étape : Personnalisation des cartes de contenu pour tvOS. Pour obtenir un exemple de projet, consultez les exemples du SDK Swift de Braze.
Conditions préalables
Avant de pouvoir utiliser cette fonctionnalité, vous devez intégrer le SDK d’Unity Braze.
Affichage natif des cartes de contenu
Vous pouvez afficher l’interface utilisateur par défaut pour les cartes de contenu à l’aide de l’appel suivant :
1
Appboy.AppboyBinding.DisplayContentCards();
Réception des données de carte de contenu dans Unity
Vous pouvez lister des objets de jeu Unity pour être avertis des cartes de contenu entrantes. Nous recommandons de définir des auditeurs d’objets de jeu à partir de l’éditeur de configuration Braze.
Si vous devez configurer votre auditeur d’objet de jeu lors de l’exécution, utilisez AppboyBinding.ConfigureListener()
et spécifiez BrazeUnityMessageType.CONTENT_CARDS_UPDATED
.
Notez que vous devrez également appeler AppboyBinding.RequestContentCardsRefresh()
pour commencer à recevoir des données dans votre auditeur d’objet de jeu sur iOS.
Analyse des cartes de contenu
Les messages de type string
entrants reçus dans votre rappel d’objet de jeu de cartes de contenu peuvent être analysés dans notre objet de modèle ContentCard
pré-fourni pour plus de commodité.
L’analyse des cartes de contenu nécessite une analyse JSON, voir l’exemple suivant pour plus de détails :
Exemple de fonction de rappel des cartes de contenu
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.");
}
}
Rafraîchir les cartes de contenu
Pour actualiser les cartes de contenu de Braze, appelez l’une des méthodes suivantes :
1
2
3
4
// results in a network request to Braze
AppboyBinding.RequestContentCardsRefresh()
AppboyBinding.RequestContentCardsRefreshFromCache()
Analyse
Les clics et les impressions doivent être enregistrés manuellement pour les cartes de contenu non affichées directement par Braze.
Utilisez LogClick()
et LogImpression()
sur Contentcardable pour enregistrer les clics et les impressions pour des cartes spécifiques.
À propos des cartes de contenu Xamarin
Le SDK Xamarin de Braze inclut un flux de cartes par défaut pour vous permettre de démarrer avec les cartes de contenu. Le flux de cartes par défaut inclus avec le SDK Braze traitera tous les suivis d’analyse, les rejets et le rendu des cartes de contenu d’un utilisateur.
Conditions préalables
Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Xamarin Braze.
Types de cartes et propriétés
Le SDK Xamarin de Braze dispose de trois types de cartes de contenu uniques qui partagent un modèle de base : Bannière, Image légendée et Classique. Chaque type hérite des propriétés communes d’un modèle de base et possède les propriétés supplémentaires suivantes.
Modèle de carte de base
Propriété | Description |
---|---|
idString |
L’ID de la carte est défini par Braze. |
created |
L’horodatage UNIX du moment de création de la carte depuis Braze. |
expiresAt |
L’horodatage UNIX du moment d’expiration de la carte. Lorsque la valeur est inférieure à 0, cela signifie que la carte n’expire jamais. |
viewed |
Si la carte est lue ou non par l’utilisateur. Ceci ne permet pas d’enregistrer les analyses. |
clicked |
Si la carte a été cliquée par l’utilisateur. |
pinned |
Si la carte est épinglée. |
dismissed |
Indique si l’utilisateur a fermé la carte de contenu. Marquer comme rejetée une carte qui l’a déjà été n’est pas possible. |
dismissible |
Détermine si la carte peut être ou non rejetée par l’utilisateur. |
urlString |
(Facultatif) Chaîne de caractères de l’URL associée à l’action de clic sur la carte. |
openUrlInWebView |
Indique si les URL de cette carte doivent être ouvertes dans le WebView de Braze ou non. |
isControlCard |
Si cette carte est une carte de contrôle. Les cartes de contrôle ne doivent pas être montrées à l’utilisateur. |
extras |
Mappage des suppléments clé-valeur pour cette carte. |
isTest |
Que cette carte soit une carte de test. |
Pour une référence complète de la carte de base, consultez la documentation Android et iOS.
Bannière
Les cartes de bannière sont des images cliquables et de taille réelle.
Propriété | Description |
---|---|
image |
L’URL de l’image de la carte. |
imageAspectRatio |
Le rapport hauteur/largeur de l’image de la carte. Il sert d’indice avant que le chargement de l’image ne soit terminé. Veuillez noter que la propriété peut ne pas être fournie dans certaines circonstances. |
Pour une référence complète de la carte bannière, consultez la documentation Android et iOS (désormais renommée en image uniquement).
Image avec légende
Les cartes d’images légendées sont des images cliquables en taille réelle accompagnées d’un texte descriptif.
Propriété | Description |
---|---|
image |
L’URL de l’image de la carte. |
imageAspectRatio |
Le rapport hauteur/largeur de l’image de la carte. Il sert d’indice avant que le chargement de l’image ne soit terminé. Veuillez noter que la propriété peut ne pas être fournie dans certaines circonstances. |
title |
Le texte du titre pour la carte. |
cardDescription |
Texte de description de la carte. |
domain |
(Facultatif) Texte du lien pour l’URL de propriété, par exemple, "braze.com/resources/" . Il peut être affiché sur l’interface utilisateur de la carte pour indiquer l’action/la direction du clic sur la carte. |
Pour une référence complète de la carte d’image sous-titrée, consultez la documentation Android et iOS.
Classique
Les cartes classiques comportent un titre, une description et une image facultative à gauche du texte.
Propriété | Description |
---|---|
image |
(Facultatif) L’URL de l’image de la carte. |
title |
Le texte du titre pour la carte. |
cardDescription |
Texte de description de la carte. |
domain |
(Facultatif) Texte du lien pour l’URL de propriété, par exemple, "braze.com/resources/" . Il peut être affiché sur l’interface utilisateur de la carte pour indiquer l’action/la direction du clic sur la carte. |
Pour une référence complète de la carte de contenu classique (annonce textuelle), consultez la documentation Android et iOS. Pour une référence complète de la carte d’image classique (courte nouvelle), consultez la documentation Android et iOS.
Méthodes de carte
Vous pouvez utiliser ces méthodes supplémentaires pour créer un flux de cartes de contenu personnalisé dans votre application :
Méthode | Description |
---|---|
requestContentCardsRefresh() |
Demande les dernières cartes de contenu au serveur Braze SDK. |
getContentCards() |
Récupère les cartes de contenu du SDK Braze Cela renverra la dernière liste de cartes du serveur. |
logContentCardClicked(cardId) |
Enregistre un clic pour l’ID de carte de contenu donné. Cette méthode est uniquement utilisée pour les analyses. |
logContentCardImpression(cardId) |
Enregistre une impression pour l’ID de carte de contenu donné. |
logContentCardDismissed(cardId) |
Enregistre un rejet pour l’ID de carte de contenu donné. |