Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Annonces natives sur le Réseau Display

Lorsqu'une annonce native se charge, votre application reçoit un objet d'annonce contenant des composants d'annonce, tels que les images, le texte et les vidéos de l'annonce. Votre application est chargée d'afficher les composants d'annonce dans une mise en page de vue d'annonce native. Pour afficher des annonces natives de manière conforme, Google Mobile Ads SDK for React Native fournit les composants suivants :

Pour savoir comment diffuser des annonces natives de manière conforme, consultez Annonces natives utilisant le format natif avancé.

Cette page explique comment afficher les composants d'annonce native, configurer le contenu multimédia et gérer les événements d'annonce à l'aide de Google Mobile Ads SDK for React Native.

Prérequis

Avant de continuer, procédez comme suit :

Définir le composant de vue d'annonce native

Le composant NativeAdView est le conteneur de premier niveau de la mise en page de votre annonce native. Ce composant encapsule toutes les vues d'assets individuelles et les associe à l'instance NativeAd chargée.

L'encapsulation de vos éléments dans le composant NativeAdView permet d'effectuer les opérations suivantes :

Enregistrez les impressions lorsque l'annonce s'affiche à l'écran.
Enregistrez les clics et gérez la navigation lorsqu'un utilisateur appuie sur des assets interactifs.
Affichez et positionnez la superposition "Choisir sa pub".

Attribution d'annonce et Choisir sa pub

L'attribution d'annonce et la superposition "Choisir sa pub" sont des exigences obligatoires du règlement pour toutes les implémentations d'annonces natives Google.

Lorsque vous encapsulez votre mise en page dans NativeAdView, Google Mobile Ads SDK for React Native affiche automatiquement l'icône Choisir sa pub en haut à droite de la vue de l'annonce par défaut. Vous n'avez pas besoin d'ajouter de code personnalisé ni de vues de composants pour que l'icône s'affiche.

Pour personnaliser l'emplacement de l'icône dans un angle, consultez Définir des fonctionnalités natives avancées.

Renseigner et enregistrer des vues d'éléments

Pour enregistrer des vues de composants avec Google Mobile Ads SDK for React Native, encapsulez chaque composant d'asset avec un wrapper NativeAdView.Asset et spécifiez le type d'asset à l'aide de l'objet NativeAdAssetNames. Chaque wrapper NativeAdView.Asset doit contenir un seul élément hôte React Native, tel que Text, Image ou View, qui accepte la propriété nativeID. Pour en savoir plus sur les propriétés d'éléments disponibles, consultez Classe NativeAd.

Le tableau suivant liste les types d'assets disponibles, les propriétés cibles et des exemples d'enregistrement des vues d'assets :

Type d'élément	Description et exemples
`ADVERTISER`	Propriété cible : `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	Propriété cible : `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	Propriété cible : `NativeAd.callToAction` {/* Action button text such as "Install" or "Shop Now" (optional). */} {ad.callToAction && ( <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}> <View> <Text>{ad.callToAction}</Text> </View> </NativeAdView.Asset> )}
`HEADLINE`	Propriété cible : `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	Propriété cible : `NativeAd.icon` {/* The advertiser logo or app icon (optional). */} {ad.icon && ( <NativeAdView.Asset type={NativeAdAssetNames.ICON}> <Image source={{uri: ad.icon.uri}} /> </NativeAdView.Asset> )}
`PRICE`	Propriété cible : `NativeAd.price` {/* Price string for products or paid apps (optional). */} {ad.price && ( <NativeAdView.Asset type={NativeAdAssetNames.PRICE}> <Text>{ad.price}</Text> </NativeAdView.Asset> )}
`STAR_RATING`	Propriété cible : `NativeAd.starRating` {/* App rating score from 0 to 5 (optional). */} {ad.starRating !== undefined && ad.starRating > 0 && ( <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}> <Text>★ {ad.starRating.toFixed(1)}</Text> </NativeAdView.Asset> )}
`STORE`	Propriété cible : `NativeAd.store` {/* App store source such as "Google Play" or "App Store" (optional). */} {ad.store && ( <NativeAdView.Asset type={NativeAdAssetNames.STORE}> <Text>{ad.store}</Text> </NativeAdView.Asset> )}

Affichez toujours de manière conditionnelle les vues d'assets facultatives suivantes :

ad.icon
ad.body
ad.advertiser
ad.price
ad.store
ad.starRating

Lorsqu'une annonce omet des composants facultatifs, votre application ne doit pas afficher d'éléments d'interface utilisateur vides.

Afficher le contenu multimédia

Le composant NativeAdMediaView affiche l'asset visuel de l'annonce, comme les vidéos et les images. Si l'annonce contient du contenu vidéo, la vue multimédia met en mémoire tampon et lit la vidéo. Si l'annonce ne contient que du contenu illustré, la vue multimédia affiche l'image principale à la place.

Appliquer le mode de redimensionnement du contenu multimédia

Pour contrôler la mise à l'échelle des images dans le conteneur de vue multimédia, appliquez la propriété resizeMode au composant NativeAdMediaView :

      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

Les valeurs ResizeMode disponibles sont les suivantes :

Définir le format du média

Pour demander des créations qui correspondent au format de votre mise en page de vue multimédia, spécifiez la propriété aspectRatio sur l'instance NativeAdRequest.

L'exemple suivant demande une annonce native avec un format média paysage, renvoie l'annonce chargée en cas de réussite et consigne un message d'erreur en cas d'échec :

export async function loadNativeAdWithAspectRatio(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      aspectRatio: NativeMediaAspectRatio.LANDSCAPE,
    });
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

Les valeurs NativeMediaAspectRatio disponibles sont les suivantes :

Écouter les événements d'annonce

Pour être informé des événements du cycle de vie des annonces, tels que les impressions ou les clics, transmettez des rappels d'événements au composant NativeAdView. Pour connaître tous les rappels disponibles, consultez AdEventCallback.

L'exemple suivant transmet des rappels d'événements pour les événements d'annonce, tels que l'affichage ou la fermeture de contenu en plein écran, au composant NativeAdView :

export function NativeAdWithEvents({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView
      ad={ad}
      // Called when the user taps the ad.
      onAdClicked={() => {
        console.log('Native ad was clicked.');
      }}
      // Called when an impression is recorded.
      onAdImpression={() => {
        console.log('Native ad recorded an impression.');
      }}
      // Called when the ad presents full-screen content.
      onAdShowedFullScreenContent={() => {
        console.log('Native ad showed full screen content.');
      }}
      // Called when full-screen content is dismissed.
      onAdDismissedFullScreenContent={() => {
        console.log('Native ad dismissed full screen content.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue: AdValue) => {
        console.log(
          `Native ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
    />
  );
}

Voir l'exemple complet

Cette section présente un exemple complet de création d'un composant de fiche d'annonce native réutilisable.

L'exemple suivant définit le composant NativeAdCard, qui affiche un badge d'attribution d'annonce, affiche et enregistre de manière conditionnelle des composants d'annonce native individuels, et affiche le contenu multimédia avec le composant NativeAdMediaView :

export function NativeAdCard({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView ad={ad}>
      {/* 1. Ad Attribution Badge */}
      <View>
        <Text>Ad</Text>
      </View>

      {/* 2. Header: Icon, Headline, Advertiser, and Star Rating */}
      <View>
        {/* The advertiser logo or app icon (optional). */}
        {ad.icon && (
          <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
            <Image source={{uri: ad.icon.uri}} />
          </NativeAdView.Asset>
        )}

        <View>
          {/* The main title of the ad (required). */}
          <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
            <Text>{ad.headline}</Text>
          </NativeAdView.Asset>

          {/* The advertiser or sponsor name (optional). */}
          {ad.advertiser && (
            <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
              <Text>{ad.advertiser}</Text>
            </NativeAdView.Asset>
          )}

          {/* App rating score from 0 to 5 (optional). */}
          {ad.starRating !== undefined && ad.starRating > 0 && (
            <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
              <Text>★ {ad.starRating.toFixed(1)}</Text>
            </NativeAdView.Asset>
          )}
        </View>
      </View>

      {/* 3. Media Content */}
      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

      {/* 4. Body Text */}
      {/* Detailed description text (optional). */}
      {ad.body && (
        <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
          <Text>{ad.body}</Text>
        </NativeAdView.Asset>
      )}

      {/* 5. Footer: Price, Store, and Call To Action */}
      <View>
        {/* Price string for products or paid apps (optional). */}
        {ad.price && (
          <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
            <Text>{ad.price}</Text>
          </NativeAdView.Asset>
        )}

        {/* App store source such as "Google Play" or "App Store" (optional). */}
        {ad.store && (
          <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
            <Text>{ad.store}</Text>
          </NativeAdView.Asset>
        )}

        {/* Action button text such as "Install" or "Shop Now" (optional). */}
        {ad.callToAction && (
          <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
            <View>
              <Text>{ad.callToAction}</Text>
            </View>
          </NativeAdView.Asset>
        )}
      </View>
    </NativeAdView>
  );
}

Annonces natives sur le Réseau Display Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.