ネイティブ広告

ネイティブ広告は、既存デザインと同じ形式でアプリのマネタイズを行うものです。 AppLovin MAX Flutterプラグインv3.0.0では、広告の個々のアセットにアクセスできます。これにより、広告レイアウトの外観や操作性をアプリのデザインに合わせることができます。画像キャッシュと指標のトラッキングはSDKが自動で行うため、広告表示の方法、時期、場所などの決定に集中して取り組むことができます。

現在、このプラグインは手動による連携のみをサポートしており、ネイティブ広告アセットをカスタムビューに手動でロードできます。連携するには、以下の3つの手順を実行します。

FlutterのUIコンポーネントを宣言する。
ネイティブ広告を更新する。
ネイティブ広告を破棄する。

手動APIを使用するには、Create New Ad Unit画面でManualテンプレートを選択してください。

Template: ☐ Small, ☐ Medium, ☒ Manual

FlutterのUIコンポーネントの宣言

MaxNativeAdViewは、ネイティブ広告のコンポーネントを格納するコンテナです。マウントすると、提供したadUnitId属性のネイティブ広告が自動的にロードされまます。

このプラグインは、ネイティブ広告の多様なアセットをレンダリングする様々なコンポーネントを提供します。これらのコンポーネントのスタイルは、アプリ内の他のコンポーネントと同様に設定できます。AppLovinのポリシーでは、広告にプライバシー情報アイコンを含める必要があります。このアイコンは、重要なプライバシー通知にリンクしており、MaxNativeOptionsViewコンポーネントを使用してバインドできます。

次の表は、ネイティブ広告アセットのレンダリングに役立つさまざまなコンポーネントを示したものです。

コンポーネント	タイプ
`MaxNativeAdAdvertiserView`	`Text`
`MaxNativeAdBodyView`	`Text`
`MaxNativeAdCallToActionView`	`ElevatedButton`
`MaxNativeAdIconView`	`Container`
`MaxNativeAdMediaView`	`Container`
`MaxNativeAdOptionsView`	`Container`
`MaxNativeAdStarRatingView`	`Container`
`MaxNativeAdTitleView`	`Text`

次のコードサンプルは、これらすべてのネイティブ広告コンポーネントを利用したネイティブ広告のサンプルです。AppLovinは、ネットワークが特定のアセットを返すことを保証しません。完全な実装例については、AppLovin-MAX-Flutter GitHubプロジェクトのサンプルアプリを参照してください。

Container(
  margin: const EdgeInsets.all(8.0),
  height: 300,
  child: MaxNativeAdView(
    adUnitId: widget.adUnitId,
    controller: _nativeAdViewController,
    listener: NativeAdListener(onAdLoadedCallback: (ad) {
      logStatus('Native ad loaded from ${ad.networkName}');
      setState(() {
        _mediaViewAspectRatio = ad.nativeAd?.Mediacontentaspectratio ?? _kMediaViewAspectRatio;
      });
    }, onAdLoadFailedCallback: (adUnitId, error) {
      logStatus('Native ad failed to load with error code ${error.code} and message: ${error.message}');
    }, onAdClickedCallback: (ad) {
      logStatus('Native ad clicked');
    }, onAdRevenuePaidCallback: (ad) {
      logStatus('Native ad revenue paid: ${ad.revenue}');
    }),
    child: Container(
      color: const Color(0xffefefef),
      padding: const EdgeInsets.all(8.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                padding: const EdgeInsets.all(4.0),
                child: const MaxNativeAdIconView(
                  width: 48,
                  height: 48,
                ),
              ),
              Flexible(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    MaxNativeAdTitleView(
                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                      maxLines: 1,
                      overflow: TextOverflow.visible,
                    ),
                    MaxNativeAdAdvertiserView(
                      style: TextStyle(fontWeight: FontWeight.normal, fontSize: 10),
                      maxLines: 1,
                      overflow: TextOverflow.fade,
                    ),
                    MaxNativeAdStarRatingView(
                      size: 10,
                    ),
                  ],
                ),
              ),
              const MaxNativeAdOptionsView(
                width: 20,
                height: 20,
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Flexible(
                child: MaxNativeAdBodyView(
                  style: TextStyle(fontWeight: FontWeight.normal, fontSize: 14),
                  maxLines: 3,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Expanded(
            child: AspectRatio(
              aspectRatio: _mediaViewAspectRatio,
              child: const MaxNativeAdMediaView(),
            ),
          ),
          const SizedBox(
            width: double.infinity,
            child: MaxNativeAdCallToActionView(
              style: ButtonStyle(
                backgroundColor: MaterialStatePropertyAll(Color(0xff2d545e)),
                textStyle: MaterialStatePropertyAll(TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
),

広告のリロード

AppLovin Flutterプラグインは、MaxNativeAdViewがマウントされると自動的に最初のネイティブ広告をロードします。マウント後、MaxNativeAdViewControllerのload()メソッドを呼び出すことで、次の広告をロードできます。

final MaxNativeAdViewController _nativeAdViewController = MaxNativeAdViewController();
_nativeAdViewController.loadAd();

アセットのサイズ

AppLovinは、アプリの他の部分がどのように見えるのかということを考慮して、適切なネイティブ要素をできるだけ多く取り入れることを推奨しています。これらの要素には、 TitleやMedia View、Iconなどが含まれます。情報が多ければ、広告をクリックするかどうかをユーザーが判断しやすくなります。

AppLovin Exchangeデマンドの場合、タイトル、説明文、CTAに使用できる最大文字数は以下のとおりです。

アセット	最大文字数数
タイトル	50文字
説明	150文字。149文字の後に省略記号（`…`）を150番目の文字として追加できます。
CTA	15文字

SDKメディエーションネットワークの場合、ネットワークが最大文字数を設定します。

メディアコンテンツのアスペクト比の取得

MediaViewのメディアコンテンツのアスペクト比を adInfoから取得できます。これは onAdLoaded コールバックの引数です。

ad.nativeAd?mediaContentAspectRatio

サポートされているアダプターバージョン

アドネットワーク	アダプターのバージョン
BidMachine	Android 1.9.10.5 / iOS 1.9.5.0.2
Criteo	Android 4.8.1.1 / iOS 4.5.0.6
Google アドマネージャー	Android 22.1.0.1 / iOS 10.3.0.2
Google BiddingおよびGoogle AdMob	Android 22.1.0.1 / iOS 10.3.0.2
InMobi	Android 10.1.2.1 / iOS 10.1.1.1
LINE	Android 2022.2.16.3 / iOS 2.4.20220630.1
Meta Audience Network	Android 6.12.0.1 / iOS 6.12.0.1
Mintegral	Android 16.2.61.2 / iOS 7.2.6.0.1
Pangle	Android 4.8.0.8.2 / iOS 4.7.0.8.2
Smaato	Android 21.8.5.1 / iOS 21.7.8.1
VK Ad Network	Android 5.16.0.1 / iOS 5.16.0.1
Yandex	Android 5.3.0.1のみ

星評価

広告で宣伝したアプリの星評価にアクセスして、レンダリングできます。評価されている場合、値は[0.0, 5.0]の範囲の浮動小数点数となります。

AppLovin MAX Flutterプラグインは、自動的にMaxNativeAdStarRatingViewコンポーネントの星の数をレンダリングします。ネットワークが星評価を提供しない場合、AppLovin MAX Flutterプラグインはこの評価コンポーネントを空のままにします。その場合は、ご自分でレイアウトを調整してください。

ad.nativeAd?starRatingから、現在の広告の星評価を取得できます。

ご利用規約 | プライバシー | EULA | DMCA | Cookie設定