Natywne

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

Reklamy natywne to zasoby reklam wyświetlane użytkownikom za pomocą komponentów interfejsu natywnych na platformie. Są wyświetlane w tych samych widokach, w których tworzysz już układy, i mogą być sformatowane pod kątem wyglądu i sposobu obsługi interfejsu. Zgodnie z zasadami kodowania po załadowaniu reklamy natywnej aplikacja otrzymuje obiekt reklamy natywnej, który zawiera swoje zasoby, a za wyświetlanie reklam odpowiada aplikacja (a nie pakiet SDK do reklam mobilnych Google).

Ogólnie rzecz biorąc, skuteczne reklamy natywne składają się z 2 etapów: wczytywania reklamy za pomocą pakietu SDK i wyświetlania treści reklamy w aplikacji. Ten przewodnik dotyczy korzystania z pakietu SDK do wczytywania reklam natywnych.

Konfiguracja platformy

Reklamy natywne są wyświetlane użytkownikom za pomocą komponentów UI natywnych na platformie (np. View w Androidzie i UIView w iOS).

Reklamy natywne wymagają komponentów interfejsu natywnych na platformie, dlatego ta funkcja wymaga dodatkowej konfiguracji na Androida i iOS:

Android

Implementacja wtyczki Google Ads na Androida wymaga klasy, która używa NativeAdFactory. Aby odwołać się do tego interfejsu API z projektu na Androida, dodaj te wiersze do settings.gradle:

def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
    pluginsFile.withInputStream { stream -> plugins.load(stream) }
}

plugins.each { name, path ->
    def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
    include ":$name"
    project(":$name").projectDir = pluginDirectory
}

NativeAdFactory zawiera metodę, która przyjmuje metodę NativeAd i zwraca wartość NativeAdView. Element NativeAdView jest wyświetlany w aplikacji.

Możesz go zaimplementować w MainActivity.java lub utworzyć oddzielną klasę w tym samym katalogu co MainActivity.java:

package my.app.path;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

class NativeAdFactoryExample implements NativeAdFactory {
  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    // Create NativeAdView
  }
}

Każdy NativeAdFactory musi być zarejestrowany z factoryId unikalnym identyfikatorem String, w MainActivity.configureFlutterEngine(FlutterEngine)A NativeAdFactory może być zaimplementowany i zarejestrowany dla każdego unikalnego układu reklamy natywnej używanego przez Twoją aplikację albo jeden może obsługiwać wszystkie układy.

Urządzenie NativeAdFactory powinno być też wyrejestrowane w lokalizacji cleanUpFlutterEngine(engine) podczas tworzenia kreacji za pomocą funkcji dodaj do aplikacji.

MainActivity.java powinien wyglądać podobnie do tego:

package my.app.path;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new GoogleMobileAdsPlugin());
   super.configureFlutterEngine(flutterEngine);

    GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "adFactoryExample", NativeAdFactoryExample());
  }

  @Override
  public void cleanUpFlutterEngine(FlutterEngine flutterEngine) {
    GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "adFactoryExample");
  }
}

Podczas tworzenia NativeAd w Dart factoryId musi być zgodny z tym, który został użyty do dodania fabryki do GoogleMobileAdsPlugin. W powyższym fragmencie kodu adFactoryExample jest nazwą elementu factoryId. Oto przykład właściwości NativeAdFactory:

package io.flutter.plugins.googlemobileadsexample;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

/**
 * my_native_ad.xml can be found at
 * //github.com/googleads/googleads-mobile-flutter/tree/master/packages/google_mobile_ads/example/android/app/src/main/res/layout
 */
class NativeAdFactoryExample implements NativeAdFactory {
  private final LayoutInflater layoutInflater;

  NativeAdFactoryExample(LayoutInflater layoutInflater) {
    this.layoutInflater = layoutInflater;
  }

  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    final NativeAdView adView =
        (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);
    final TextView headlineView = adView.findViewById(R.id.ad_headline);
    final TextView bodyView = adView.findViewById(R.id.ad_body);

    headlineView.setText(nativeAd.getHeadline());
    bodyView.setText(nativeAd.getBody());

    adView.setBackgroundColor(Color.YELLOW);

    adView.setNativeAd(nativeAd);
    adView.setBodyView(bodyView);
    adView.setHeadlineView(headlineView);
    return adView;
  }
}

iOS

Instalacja wtyczki do reklam mobilnych Google na iOS wymaga klasy, która implementuje FLTNativeAdFactory. FLTNativeAdFactory zawiera metodę, która przyjmuje metodę GADNativeAd i opcje niestandardowe. Zwraca GADNativeAdView. Pole GADNativeAdView jest wyświetlane w aplikacji.

Protokół FLTNativeAdFactory może zaimplementować AppDelegate lub można utworzyć osobną klasę:

/* AppDelegate.m */
#import "FLTGoogleMobileAdsPlugin.h"
@interface NativeAdFactoryExample : NSObject<FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create GADNativeAdView
}
@end

Każdy rejestr FLTNativeAdFactory musi być zarejestrowany za pomocą factoryId (unikalnego identyfikatora String) w: registerNativeAdFactory:factoryId:nativeAdFactory:.

Tag FLTNativeAdFactory można zaimplementować i zarejestrować w każdym unikalnym układzie reklamy natywnej wykorzystywanym przez aplikację. Jeden system może obsługiwać wszystkie układy. W tym celu importuje tag FLTGoogleMobileAdsPlugin.h i wywołuje metodę registerNativeAdFactory:factoryId:nativeAdFactory: z unikalnym identyfikatorem fabryki (FlutterPluginRegistry). Do fabryki należy dodać po wywołaniu GeneratedPluginRegistrant registerWithRegistry:self];.

Adres powinien wyglądać mniej więcej tak: AppDelegate.m

#import "FLTGoogleMobileAdsPlugin.h"

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                          factoryId:@"adFactoryExample"
                                    nativeAdFactory:nativeAdFactory];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Podczas tworzenia NativeAd w Dart factoryID musi być zgodny z tym, który został użyty do dodania fabryki do FLTGoogleMobileAdsPlugin. W powyższym fragmencie kodu adFactoryExample jest nazwą elementu factoryID. Oto przykład właściwości FLTNativeAdFactory:

/**
 * The example NativeAdView.xib can be found at
 * //github.com/googleads/googleads-mobile-flutter/blob/master/packages/google_mobile_ads/example/ios/Runner/NativeAdView.xib
 */
@interface NativeAdFactoryExample : NSObject <FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create and place ad in view hierarchy.
  GADNativeAdView *adView =
      [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  adView.nativeAd = nativeAd;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)adView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)adView.bodyView).text = nativeAd.body;
  adView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)adView.callToActionView) setTitle:nativeAd.callToAction
                                         forState:UIControlStateNormal];
  adView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

  ((UIImageView *)adView.iconView).image = nativeAd.icon.image;
  adView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UILabel *)adView.storeView).text = nativeAd.store;
  adView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)adView.priceView).text = nativeAd.price;
  adView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)adView.advertiserView).text = nativeAd.advertiser;
  adView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  adView.callToActionView.userInteractionEnabled = NO;

  return adView;
}
@end

Zawsze testuj z reklamami testowymi

Tworząc i testując aplikacje, upewnij się, że używasz reklam testowych zamiast produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.

Najłatwiejszym sposobem wczytywania reklam testowych jest użycie specjalnego identyfikatora jednostki testowej na potrzeby reklam natywnych:

Testowe jednostki reklamowe są skonfigurowane tak, by zwracać reklamy testowe dla każdego żądania. Możesz ich używać we własnych aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, aby zastąpić je własnymi jednostkami reklamowymi, zanim opublikujesz aplikację.

Utwórz instancję reklamy

NativeAd wymaga adUnitId, factoryId, AdRequest i NativeAdListener.Ten przykład pokazuje instancję reklamy natywnej:

final NativeAd myNative = NativeAd(
  adUnitId: '<ad unit id>',
  factoryId: 'adFactoryExample',
  request: AdRequest(),
  listener: NativeAdListener(),
);

Identyfikator fabryki

factoryId musi być taki sam jak ten dodany w przypadku GoogleMobileAdsPlugin na urządzeniu z Androidem lub FLTGoogleMobileAdsPlugin na iOS. Z tej samej właściwości factoryId mogą korzystać obie platformy, a każda z nich może mieć własną.

Zdarzenia reklam natywnych

Dzięki tagowi NativeAdListener możesz wykrywać zdarzenia cyklu życia, np. gdy reklama się wczytuje. Poniższy przykład implementuje każdą metodę i rejestruje komunikat w konsoli:

final NativeAdListener listener = NativeAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
 // Called when a click is recorded for a NativeAd.
 onNativeAdClicked: (NativeAd ad) => print('Ad clicked.'),
);

Załaduj reklamę

Po wywołaniu elementu NativeAd musisz wywołać metodę load(), aby mogła się wyświetlić na ekranie.

myNative.load();

Reklama displayowa

Aby wyświetlić element NativeAd jako widżet, po wywołaniu elementu load() musisz utworzyć instancję AdWidget z obsługiwaną reklamą. Możesz utworzyć widżet przed wywołaniem strony load(), ale musisz najpierw wywołać metodę load(), zanim dodasz ją do drzewa widżetu.

final AdWidget adWidget = AdWidget(ad: myBanner);

Element AdWidget dziedziczy z klasy Widget Flutter i może być używany jak każdy inny widżet. W systemie iOS umieść widżet w kontenerze o określonej szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlać.

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: 500,
  height: 500,
);

Gdy reklama wywołuje metodę load(), musi wywołać metodę dispose(), gdy dostęp do niej nie jest już potrzebny. Sprawdzoną metodą wywołania dispose() jest usunięcie elementu AdWidget z drzewa widżetów lub wywołania zwrotnego AdListener.onAdFailedToLoad.

Dobrze. Możesz już wyświetlać reklamy natywne w swojej aplikacji.

Dalsze kroki