Affichage d'un format d'annonce native défini par le système
Lorsqu'une annonce native se charge, votre application reçoit un objet d'annonce native via l'un des messages du protocole GADAdLoaderDelegate
. Votre application est alors responsable
l'affichage de l'annonce (mais pas nécessairement immédiatement).
Pour faciliter l'affichage des formats d'annonces définis par le système, le SDK propose des
ressources.
GADNativeAdView
Pour GADNativeAd
, il existe un "visionnage de l'annonce" correspondant.
classe:
GADNativeAdView
Cette classe de visionnage d'annonce est une UIView
que les éditeurs doivent utiliser pour diffuser l'annonce.
Par exemple, un seul GADNativeAdView
peut afficher une seule instance d'un GADNativeAd
. Chacun des objets UIView
utilisés pour afficher les composants de cette annonce doit être une sous-vue de cet objet GADNativeAdView
.
Si vous affichez une annonce dans un UITableView
, par exemple, la hiérarchie des vues pour l'une des cellules peut se présenter comme suit :
La classe GADNativeAdView
fournit également IBOutlets
, qui permet d'enregistrer la vue utilisée pour chaque élément individuel, ainsi qu'une méthode permettant d'enregistrer l'objet GADNativeAd
lui-même. Cet enregistrement des vues permet au SDK de
gèrent des tâches telles que:
- Enregistrement des clics.
- Enregistrement des impressions (lorsque le premier pixel est visible à l'écran)
- Affichage de la superposition "Choisir sa pub".
Superposition "Choisir sa pub"
Pour les annonces natives indirectes (diffusées via Ad Manager) ou via Ad Exchange ou AdSense), une superposition "Choisir sa pub" est ajoutée le SDK. Laissez l'espace de votre choix d'angle de la vue de votre annonce native pour le logo "Choisir sa pub" inséré automatiquement. Faites également la superposition "Choisir sa pub" doit s'afficher sur du contenu qui permet à l'icône d'être facilement visible. Pour en savoir plus sur l'apparence et le fonctionnement de la superposition, consultez les Consignes d'implémentation des annonces natives programmatiques.
Attribution des annonces pour les annonces natives programmatiques
Lorsque vous diffusez des annonces natives programmatiques, vous devez afficher une attribution d'annonce pour indiquer que la vue est une publicité. Pour en savoir plus, consultez nos consignes relatives aux règles.Exemple de code
Voyons comment diffuser des annonces natives à l'aide de vues chargées dynamiquement.
à partir de fichiers xib. Cette approche peut s'avérer très utile lorsque vous utilisez GADAdLoaders
configuré pour demander plusieurs formats.
Mettre en page les UIViews
La première étape consiste à mettre en page le UIViews
qui affichera les composants d'annonces natives.
Vous pouvez le faire dans Interface Builder comme vous le feriez pour n'importe quelle autre
xib. Voici à quoi peut ressembler la mise en page d'une annonce native :
Notez la valeur de la classe personnalisée en haut à droite de l'image. Il est défini sur
GADNativeAdView
.
Il s'agit de la classe d'affichage d'annonces utilisée pour afficher une GADNativeAd
.
Vous devez également définir la classe personnalisée pour GADMediaView
, qui est utilisée
pour afficher la vidéo ou l'image associée à l'annonce.
Associer des points de vente à des vues
Une fois que les vues sont en place et que vous avez attribué la bonne classe de visionnage d'annonce
la mise en page, associez les sorties des assets de l'affichage de l'annonce au UIViews
que vous avez créé.
Voici comment vous pouvez associer les sorties des composants du visionnage de l'annonce à l'UIViews
créée
pour une annonce:
Dans le panneau des prises, les prises de l'appareil GADNativeAdView
ont été associées à
le UIViews
présenté dans Interface Builder. Cela permet
au SDK savoir quelle UIView
affiche quel élément.
N'oubliez pas non plus que ces canaux représentent les vues cliquables dans l'annonce.
Afficher l'annonce
Une fois la mise en page terminée et les points de vente associés, ajoutez le code suivant à votre application pour afficher une annonce une fois qu'elle a été chargée :
Swift
// Mark: - GADNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
print("Received native ad: \(nativeAd)")
refreshAdButton.isEnabled = true
// Create and place ad in view hierarchy.
let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first
guard let nativeAdView = nibView as? GADNativeAdView else {
return
}
setAdView(nativeAdView)
// Set ourselves as the native ad delegate to be notified of native ad events.
nativeAd.delegate = self
// Populate the native ad view with the native ad assets.
// The headline and mediaContent are guaranteed to be present in every native ad.
(nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
// This app uses a fixed width for the GADMediaView and changes its height to match the aspect
// ratio of the media it displays.
if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 {
let heightConstraint = NSLayoutConstraint(
item: mediaView,
attribute: .height,
relatedBy: .equal,
toItem: mediaView,
attribute: .width,
multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio),
constant: 0)
heightConstraint.isActive = true
}
// These assets are not guaranteed to be present. Check that they are before
// showing or hiding them.
(nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
nativeAdView.bodyView?.isHidden = nativeAd.body == nil
(nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil
(nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
nativeAdView.iconView?.isHidden = nativeAd.icon == nil
(nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(
fromStarRating: nativeAd.starRating)
nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil
(nativeAdView.storeView as? UILabel)?.text = nativeAd.store
nativeAdView.storeView?.isHidden = nativeAd.store == nil
(nativeAdView.priceView as? UILabel)?.text = nativeAd.price
nativeAdView.priceView?.isHidden = nativeAd.price == nil
(nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil
// For the SDK to process touch events properly, user interaction should be disabled.
nativeAdView.callToActionView?.isUserInteractionEnabled = false
// Associate the native ad view with the native ad object. This is
// required to make the ad clickable.
// Note: this should always be done after populating the ad views.
nativeAdView.nativeAd = nativeAd
}
SwiftUI
Créer un modèle de vue
Créer un ViewModel qui charge une annonce native et en publie les données modifications:
import GoogleMobileAds
class NativeAdViewModel: NSObject, ObservableObject, GADNativeAdLoaderDelegate {
@Published var nativeAd: GADNativeAd?
private var adLoader: GADAdLoader!
func refreshAd() {
adLoader = GADAdLoader(
adUnitID: "ca-app-pub-3940256099942544/3986624511",
// The UIViewController parameter is optional.
rootViewController: nil,
adTypes: [.native], options: nil)
adLoader.delegate = self
adLoader.load(GADRequest())
}
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
// Native ad data changes are published to its subscribers.
self.nativeAd = nativeAd
nativeAd.delegate = self
}
func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: Error) {
print("\(adLoader) failed with error: \(error.localizedDescription)")
}
}
Créer un UIViewRepresentable
Créez un
UIViewRepresentable
pour GADNativeView
, et vous abonner aux modifications de données dans ViewModel
classe:
private struct NativeAdView: UIViewRepresentable {
typealias UIViewType = GADNativeAdView
// Observer to update the UIView when the native ad value changes.
@ObservedObject var nativeViewModel: NativeAdViewModel
func makeUIView(context: Context) -> GADNativeAdView {
return
Bundle.main.loadNibNamed(
"NativeAdView",
owner: nil,
options: nil)?.first as! GADNativeAdView
}
func updateUIView(_ nativeAdView: GADNativeAdView, context: Context) {
guard let nativeAd = nativeViewModel.nativeAd else { return }
// Each UI property is configurable using your native ad.
(nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
(nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
(nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
(nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(from: nativeAd.starRating)
(nativeAdView.storeView as? UILabel)?.text = nativeAd.store
(nativeAdView.priceView as? UILabel)?.text = nativeAd.price
(nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
(nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
// For the SDK to process touch events properly, user interaction should be disabled.
nativeAdView.callToActionView?.isUserInteractionEnabled = false
// Associate the native ad view with the native ad object. This is required to make the ad
// clickable.
// Note: this should always be done after populating the ad views.
nativeAdView.nativeAd = nativeAd
}
Ajouter la vue à la hiérarchie des vues
Le code suivant montre comment ajouter UIViewRepresentable
à la hiérarchie des vues :
struct NativeContentView: View {
// Single source of truth for the native ad data.
@StateObject private var nativeViewModel = NativeAdViewModel()
var body: some View {
ScrollView {
VStack(spacing: 20) {
NativeAdView(nativeViewModel: nativeViewModel) // Updates when the native ad data changes.
.frame(minHeight: 300) // minHeight determined from xib.
Objective-C
#pragma mark GADNativeAdLoaderDelegate implementation
- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
NSLog(@"Received native ad: %@", nativeAd);
self.refreshButton.enabled = YES;
// Create and place ad in view hierarchy.
GADNativeAdView *nativeAdView =
[[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;
[self setAdView:nativeAdView];
// Set the mediaContent on the GADMediaView to populate it with available
// video/image asset.
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
// Populate the native ad view with the native ad assets.
// The headline is present in every native ad.
((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;
// These assets are not guaranteed to be present. Check that they are before
// showing or hiding them.
((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;
[((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction
forState:UIControlStateNormal];
nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;
((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;
((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating];
nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES;
((UILabel *)nativeAdView.storeView).text = nativeAd.store;
nativeAdView.storeView.hidden = nativeAd.store ? NO : YES;
((UILabel *)nativeAdView.priceView).text = nativeAd.price;
nativeAdView.priceView.hidden = nativeAd.price ? NO : YES;
((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser;
nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;
// In order for the SDK to process touch events properly, user interaction
// should be disabled.
nativeAdView.callToActionView.userInteractionEnabled = NO;
// Associate the native ad view with the native ad object. This is
// required to make the ad clickable.
nativeAdView.nativeAd = nativeAd;
}
Exemple complet sur GitHub
Consultez l'exemple complet d'intégration d'annonces natives dans Swift, SwiftUI et Objective-C en suivant le lien GitHub correspondant.
Exemple d'affichage personnalisé Swift Exemple d'annonces natives SwiftUI Exemple d'affichage personnalisé Objective-C
GADMediaView
Les composants image et vidéo sont présentés aux utilisateurs via
GADMediaView
Il s'agit d'un UIView
qui peut être défini dans un fichier xib ou construit de manière dynamique.
Il doit être placé dans la hiérarchie des vues d'un élément GADNativeAdView
, comme
toute autre vue d'élément.
Comme pour toutes les vues d'élément, la vue multimédia doit comporter du contenu
renseignés. Cette valeur est définie à l'aide de la propriété mediaContent
sur GADMediaView
. La propriété mediaContent
de GADNativeAd
contient du contenu multimédia pouvant être transmis à un GADMediaView
.
Voici un extrait de l'exemple de rendu personnalisé (Swift | Objective-C) qui montre comment renseigner GADMediaView
avec les composants d'annonces natives à l'aide de GADMediaContent
à partir de GADNativeAd
:
Swift
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Objective-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
Dans le fichier de l'outil de création d'interface de votre vue d'annonce native, assurez-vous que la classe personnalisée des vues est définie sur GADMediaView
et que vous l'avez connectée à la prise mediaView
.
Modification du mode de contenu des images
La classe GADMediaView
respecte les UIView
contentMode
lors de l'affichage d'images. Si vous souhaitez modifier l'ajustement d'une image dans GADMediaView
, définissez le UIViewContentMode
correspondant sur la propriété contentMode
de GADMediaView
.
Par exemple, pour remplir GADMediaView
lorsqu'une image est affichée (l'annonce n'a pas de vidéo) :
Swift
nativeAdView.mediaView?.contentMode = .aspectFill
Objective-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
GADMediaContent
contient les données liées au contenu multimédia de l'annonce native,
affiché à l'aide de la classe GADMediaView
. Si défini sur GADMediaView
Propriété mediaContent
:
Si un asset vidéo est disponible, il est mis en mémoire tampon et sa lecture commence
GADMediaView
Pour savoir si un asset vidéo est disponible, consultezhasVideoContent
Si l'annonce ne contient aucun asset vidéo, l'asset
mainImage
est téléchargé et placé dansGADMediaView
à la place.
Étapes suivantes
En savoir plus sur la confidentialité des utilisateurs