Podziel się opinią o pakiecie SDK nowej generacji do reklam mobilnych Google na kanale #gma-next-gen-sdk na serwerze społeczności Google Advertising and Measurement na Discordzie.

Wyświetlanie reklamy natywnej

Wybierz platformę: Android

Android iOS

Gdy reklama natywna się wczyta, GMA Next-Gen SDK wywoła detektor odpowiedniego formatu reklamy. Twoja aplikacja będzie wtedy odpowiedzialna za wyświetlenie reklamy, ale nie musi tego robić od razu. Aby ułatwić wyświetlanie formatów reklam zdefiniowanych przez system, pakiet SDK oferuje kilka przydatnych zasobów opisanych poniżej.

Zdefiniuj klasę `NativeAdView`

Zdefiniuj klasę NativeAdView. Ta klasa jest klasą ViewGroup i jest kontenerem najwyższego poziomu dla klasy NativeAdView. Każdy widok reklamy natywnej zawiera komponenty reklamy natywnej, takie jak element widoku MediaView lub element widoku Title, które muszą być elementami podrzędnymi obiektu NativeAdView.

Układ XML

Dodaj do projektu element XML NativeAdView:

<com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:orientation="vertical">
        <LinearLayout
        android:orientation="horizontal">
          <ImageView
          android:id="@+id/ad_app_icon" />
          <TextView
            android:id="@+id/ad_headline" />
        </LinearLayout>
        <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdView>

Jetpack Compose

Dołącz folder JetpackCompose Utilities. Ten folder zawiera pomocnicze funkcje do tworzenia obiektu NativeAdView i komponentów.

Utwórz NativeAdView:

  import com.google.android.gms.compose_util.NativeAdAttribution
  import com.google.android.gms.compose_util.NativeAdView

  @Composable
  /** Display a native ad with a user defined template. */
  fun DisplayNativeAdView(nativeAd: NativeAd) {
      NativeAdView {
          // Display the ad attribution.
          NativeAdAttribution(text = context.getString("Ad"))
          // Add remaining assets such as the image and media view.
        }
    }

Obsługa wczytanej reklamy natywnej

Gdy reklama natywna się wczyta, obsłuż zdarzenie wywołania zwrotnego, rozszerz widok reklamy natywnej i dodaj go do hierarchii widoków:

Kotlin

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("/21775744923/example/native", adTypes)
  .build()

val adCallback =
  object : NativeAdLoaderCallback {
    override fun onNativeAdLoaded(nativeAd: NativeAd) {
      activity?.runOnUiThread {

        val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
        val adView = nativeAdBinding.root
        val frameLayout = myActivityLayout.nativeAdPlaceholder

        // Populate and register the native ad asset views.
        displayNativeAd(nativeAd, nativeAdBinding)

        // Remove all old ad views and add the new native ad
        // view to the view hierarchy.
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
      }
    }
  }

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback)

Java

// Build an ad request with native ad options to customize the ad.
List<NativeAd.NativeAdType> adTypes = Arrays.asList(NativeAd.NativeAdType.NATIVE);
NativeAdRequest adRequest = new NativeAdRequest
                                .Builder("/21775744923/example/native", adTypes)
                                .build();

NativeAdLoaderCallback adCallback = new NativeAdLoaderCallback() {
    @Override
    public void onNativeAdLoaded(NativeAd nativeAd) {
      if (getActivity() != null) {
        getActivity()
          .runOnUiThread(() -> {
            // Inflate the native ad view and add it to the view hierarchy.
            NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
            NativeAdView adView = (NativeAdView) nativeAdBinding.getRoot();
            FrameLayout frameLayout = myActivityLayout.nativeAdPlaceholder;

            // Populate and register the native ad asset views.
            displayNativeAd(nativeAd, nativeAdBinding);

            // Remove all old ad views and add the new native ad
            // view to the view hierarchy.
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        });
      }
    }
};

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback);

Pamiętaj, że wszystkie komponenty danej reklamy natywnej powinny być renderowane w układzie NativeAdView. GMA Next-Gen SDK próbuje zarejestrować ostrzeżenie, gdy komponenty natywne są renderowane poza układem widoku reklamy natywnej.

Klasy widoków reklam zawierają też metody służące do rejestrowania widoku używanego w przypadku każdego komponentu oraz metodę rejestrowania samego obiektu NativeAd. Rejestrowanie widoków w ten sposób umożliwia pakietowi SDK automatyczne wykonywanie takich zadań jak:

rejestrowanie kliknięć;
rejestrowanie wyświetleń, gdy pierwszy piksel jest widoczny na ekranie;
wyświetlanie nakładki Informacja w przypadku kreacji natywnych z wypełnienia – obecnie dostępne tylko dla wybranej grupy wydawców.

Wyświetlanie reklamy natywnej

Poniższy przykład pokazuje, jak wyświetlić reklamę natywną:

Kotlin

private fun displayNativeAd(nativeAd: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  val nativeAdView = nativeAdBinding.root
  nativeAdView.advertiserView = nativeAdBinding.adAdvertiser
  nativeAdView.bodyView = nativeAdBinding.adBody
  nativeAdView.callToActionView = nativeAdBinding.adCallToAction
  nativeAdView.headlineView = nativeAdBinding.adHeadline
  nativeAdView.iconView = nativeAdBinding.adAppIcon
  nativeAdView.priceView = nativeAdBinding.adPrice
  nativeAdView.starRatingView = nativeAdBinding.adStars
  nativeAdView.storeView = nativeAdBinding.adStore

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.text = nativeAd.advertiser
  nativeAdBinding.adBody.text = nativeAd.body
  nativeAdBinding.adCallToAction.text = nativeAd.callToAction
  nativeAdBinding.adHeadline.text = nativeAd.headline
  nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
  nativeAdBinding.adPrice.text = nativeAd.price
  nativeAd.starRating?.toFloat().let { value ->
    nativeAdBinding.adStars.rating = value
  }
  nativeAdBinding.adStore.text = nativeAd.store

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.visibility = getAssetViewVisibility(nativeAd.advertiser)
  nativeAdBinding.adBody.visibility = getAssetViewVisibility(nativeAd.body)
  nativeAdBinding.adCallToAction.visibility = getAssetViewVisibility(nativeAd.callToAction)
  nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
  nativeAdBinding.adAppIcon.visibility = getAssetViewVisibility(nativeAd.icon)
  nativeAdBinding.adPrice.visibility = getAssetViewVisibility(nativeAd.price)
  nativeAdBinding.adStars.visibility = getAssetViewVisibility(nativeAd.starRating)
  nativeAdBinding.adStore.visibility = getAssetViewVisibility(nativeAd.store)

  // Inform GMA Next-Gen SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return [View.VISIBLE] if the asset is not null, [View.INVISIBLE] otherwise.
*/
private fun getAssetViewVisibility(asset: Any?): Int {
  return if (asset == null) View.INVISIBLE else View.VISIBLE
}

Java

private void displayNativeAd(ad: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  NativeAdView nativeAdView = nativeAdBinding.getRoot();
  nativeAdView.setAdvertiserView(nativeAdBinding.adAdvertiser);
  nativeAdView.setBodyView(nativeAdBinding.adBody);
  nativeAdView.setCallToActionView(nativeAdBinding.adCallToAction);
  nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
  nativeAdView.setIconView(nativeAdBinding.adAppIcon);
  nativeAdView.setPriceView(nativeAdBinding.adPrice);
  nativeAdView.setStarRatingView(nativeAdBinding.adStars);
  nativeAdView.setStoreView(nativeAdBinding.adStore);

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.setText(nativeAd.getAdvertiser());
  nativeAdBinding.adBody.setText(nativeAd.getBody());
  nativeAdBinding.adCallToAction.setText(nativeAd.getCallToAction());
  nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
  if (nativeAd.getIcon() != null) {
      nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.getIcon().getDrawable());
  }
  nativeAdBinding.adPrice.setText(nativeAd.getPrice());
  if (nativeAd.getStarRating() != null) {
      nativeAdBinding.adStars.setRating(nativeAd.getStarRating().floatValue());
  }
  nativeAdBinding.adStore.setText(nativeAd.getStore());

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.setVisibility(getAssetViewVisibility(nativeAd.getAdvertiser()));
  nativeAdBinding.adBody.setVisibility(getAssetViewVisibility(nativeAd.getBody()));
  nativeAdBinding.adCallToAction.setVisibility(getAssetViewVisibility(nativeAd.getCallToAction()));
  nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
  nativeAdBinding.adAppIcon.setVisibility(getAssetViewVisibility(nativeAd.getIcon()));
  nativeAdBinding.adPrice.setVisibility(getAssetViewVisibility(nativeAd.getPrice()));
  nativeAdBinding.adStars.setVisibility(getAssetViewVisibility(nativeAd.getStarRating()));
  nativeAdBinding.adStore.setVisibility(getAssetViewVisibility(nativeAd.getStore()));

  // Inform GMA Next-Gen SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return {@link View#VISIBLE} if the asset is not null, {@link View#INVISIBLE} otherwise.
*/
private int getAssetViewVisibility(Object asset) {
    return (asset == null) ? View.INVISIBLE : View.VISIBLE;
}

Nakładka Informacja

Gdy zwracana jest reklama z uzupełnienia, pakiet SDK dodaje nakładkę Informacja jako wyświetlenie reklamy. Jeśli Twoja aplikacja korzysta z wypełnienia reklamami natywnymi, zostaw miejsce w swoim preferowanym rogu widoku reklamy natywnej na automatycznie wstawiane logo Informacja. Ważne jest też, aby nakładka Informacja była widoczna, dlatego należy odpowiednio dobrać kolory tła i obrazy. Więcej informacji o wyglądzie i działaniu nakładki znajdziesz w wytycznych dotyczących implementacji zautomatyzowanych reklam natywnych.

Oznaczenie reklamy w przypadku zautomatyzowanych reklam natywnych

Podczas wyświetlania zautomatyzowanych reklam natywnych musisz wyświetlać oznaczenie reklamy, aby wskazać, że widok jest reklamą. Więcej informacji znajdziesz w naszych wytycznych dotyczących zasad.

Obsługa kliknięć

Nie implementuj żadnych niestandardowych detektorów kliknięć w widokach nad lub w widoku reklamy natywnej. Pakiet SDK obsługuje kliknięcia komponentów wyświetlenia reklamy, o ile prawidłowo wypełnisz i zarejestrujesz widoki komponentów.

Aby nasłuchiwać kliknięć, zaimplementuj GMA Next-Gen SDK wywołanie zwrotne kliknięcia:

Kotlin

private fun setEventCallback(nativeAd: NativeAd) {
  nativeAd.adEventCallback =
    object : NativeAdEventCallback {
      override fun onAdClicked() {
        Log.d(Constant.TAG, "Native ad recorded a click.")
      }
    }
}

Java

private void setEventCallback(NativeAd nativeAd) {
  nativeAd.setAdEventCallback(new NativeAdEventCallback() {
      @Override
      public void onAdClicked() {
        Log.d(Constant.TAG, "Native ad recorded a click.");
      }
  });
}

ImageScaleType

Podczas wyświetlania obrazów klasa MediaView ma właściwość ImageScaleType. Jeśli chcesz zmienić sposób skalowania obrazu w MediaView, ustaw odpowiedni ImageView.ScaleType za pomocą metody setImageScaleType() klasy MediaView:

Kotlin

nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

Java

nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

MediaContent

Klasa MediaContent zawiera dane związane z treścią multimedialną reklamy natywnej, która jest wyświetlana za pomocą klasy MediaView. Gdy właściwość mediaContent klasy MediaView jest ustawiona na instancję MediaContent:

Jeśli dostępny jest komponent wideo, jest on buforowany i zaczyna odtwarzać się w MediaView. Możesz sprawdzić, czy komponent wideo jest dostępny, za pomocą metody hasVideoContent().
Jeśli reklama nie zawiera komponentu wideo, zamiast niego pobierany jest komponent mainImage i umieszczany w MediaView.

Zniszcz reklamę

Po wyświetleniu reklamy natywnej usuń ją. Poniższy przykład pokazuje, jak usunąć reklamę natywną:

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

Testowanie kodu reklamy natywnej

Reklamy sprzedawane bezpośrednio

Jeśli chcesz przetestować, jak działają reklamy natywne sprzedawane bezpośrednio, możesz użyć tego identyfikatora jednostki reklamowej Ad Managera:

/21775744923/example/native

Jest on skonfigurowany tak, aby wyświetlać przykładowe reklamy promujące instalacje aplikacji i reklamy z treścią, a także niestandardowy format reklamy natywnej z tymi komponentami:

Nagłówek (tekst)
MainImage (obraz)
Podpis (tekst)

Identyfikator szablonu niestandardowego formatu reklamy natywnej to 10063170.

Reklamy natywne z wypełnienia

Wypełnienie z Ad Exchange jest dostępne tylko dla wybranej grupy wydawców. Aby przetestować działanie reklam natywnych z wypełnienia, użyj tej jednostki reklamowej Ad Managera:

/21775744923/example/native-backfill

Wyświetla ona przykładowe reklamy promujące instalacje aplikacji i reklamy z treścią, które zawierają nakładkę Informacja.

Zanim opublikujesz aplikację, pamiętaj, aby zaktualizować kod i użyć w nim rzeczywistych identyfikatorów jednostek reklamowych i szablonów.

Dalsze kroki

Zapoznaj się z tymi tematami:

Prywatność użytkownika

Przykład

Pobierz i uruchom przykładową aplikację , która pokazuje, jak używać GMA Next-Gen SDK.

Wyświetlanie reklamy natywnej Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Zdefiniuj klasę NativeAdView

Układ XML

Jetpack Compose

Obsługa wczytanej reklamy natywnej

Kotlin

Java

Wyświetlanie reklamy natywnej

Kotlin

Java

Nakładka Informacja

Oznaczenie reklamy w przypadku zautomatyzowanych reklam natywnych

Obsługa kliknięć

Kotlin

Java

ImageScaleType

Kotlin

Java

MediaContent

Zniszcz reklamę

Kotlin

Java

Testowanie kodu reklamy natywnej

Reklamy sprzedawane bezpośrednio

Reklamy natywne z wypełnienia

Dalsze kroki

Przykład

Wyświetlanie reklamy natywnej

Zdefiniuj klasę `NativeAdView`