ネイティブ テンプレート

ネイティブ テンプレートをダウンロードする

ネイティブ広告を使用すると、広告をカスタマイズして、より優れたユーザー エクスペリエンスを提供することができます。ユーザー エクスペリエンスが向上すると、エンゲージメントが向上し、全体的な収益が向上します。

ネイティブ広告を最大限に活用するには、広告レイアウトがアプリの自然な拡張のように見えるようにスタイルを設定することが重要です。ネイティブ テンプレートが用意されています。

ネイティブ テンプレートは、ネイティブ広告をコードとして完成させるビューで、実装と変更を簡単に行えるよう設計されています。ネイティブ テンプレートを使用すると、初めてのネイティブ広告をわずか数分で実装でき、多くのコードを使わずにデザインをすばやくカスタマイズできます。これらのテンプレートは、ニュース フィードで使用するリサイクラー ビューやダイアログなど、アプリ内のどこにでも配置できます。

Google のネイティブ テンプレートは Android Studio モジュールとして提供されているため、簡単にプロジェクトに組み込んで、自由に使用できます。

テンプレートのサイズ

テンプレートは、小規模と中規模の 2 種類です。どちらも TemplateView クラスを使用し、アスペクト比は固定されています。親ビューの幅いっぱいに拡大縮小されます。

テンプレート（小）

@layout/gnt_small_template_view

小型テンプレートは、リサイクラー ビューや、長い長方形の広告ビューが必要な場合に最適です。たとえばインフィード広告に

中サイズのテンプレート

@layout/gnt_medium_template_view

中サイズのテンプレートは、ページビューが 2 ～ 4 分の 3 に及ぶことを想定していますが、フィードでも使用できます。ランディング ページやスプラッシュ ページに適しています。

さまざまなプレースメントを試してください。もちろん、要件に合わせてソースコードと XML ファイルを変更することもできます。

ネイティブ広告テンプレートのインストール

ネイティブ テンプレートをインストールするには、zip ファイルをダウンロード（GitHub の [Clone or download] オプションを使用）して、既存の Android Studio プロジェクトにモジュールをインポートするだけです。

  1. [File] > [New] > [Import Module] を選択します。

  2. nativetemplates フォルダを選択します。

    ネイティブ テンプレートをインポート

  3. アプリレベルの build.gradle ファイルに次の行を追加します。

    dependencies {
        ...
        implementation project(':nativetemplates')
        ...
}

ネイティブ広告テンプレートを使用する

他のビューグループと同様に、テンプレートは任意のレイアウト XML ファイル内で使用できます。

レイアウトにテンプレートを追加

テンプレートの使用は、次の 2 段階のプロセスで行います。

  1. まず、レイアウトの一部としてテンプレートを含める必要があります。

    <LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"
   tools:showIn="@layout/activity_main" >

<!--  This is your template view -->
<com.google.android.ads.nativetemplates.TemplateView
   android:id="@+id/my_template"
   <!-- this attribute determines which template is used. The other option is
    @layout/gnt_medium_template_view -->
   app:gnt_template_type="@layout/gnt_small_template_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

...
</LinearLayout>

  2. 次に、読み込み時にテンプレートにネイティブ広告を表示する必要があります。

    MobileAds.initialize(this);
AdLoader adLoader = new AdLoader.Builder(this, "/6499/example/native")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            NativeTemplateStyle styles = new
              NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
            TemplateView template = findViewById(R.id.my_template);
            template.setStyles(styles);
            template.setNativeAd(nativeAd);
        }
     })
     .build();

adLoader.loadAd(new AdManagerAdRequest.Builder().build());

スタイル辞書のキー

テンプレートのスタイルを設定するには、従来のレイアウト XML を使用する方法と、NativeTemplateStyle.Builder オブジェクトを使用する方法の 2 つがあります。上記のコードサンプルは、NativeTemplateStyle.Builder オブジェクトを使用してメインの背景色を設定する方法を示したものですが、他にもさまざまなオプションがあります。利用可能なすべてのビルダー メソッドは次のとおりです。ビルダーは、XML レイアウトのスタイル設定をオーバーライドする NativeTemplateStyle オブジェクトを返します。XML レイアウトの gnt_small_template.xml と gnt_medium_template.xml では、使い慣れているものと同じ Android スタイル設定パラメータが使用されます。

ネイティブ テンプレート スタイルのビルダー メソッド
withCallToActionTextTypeface Typeface callToActionTextTypeface

行動を促すフレーズの書体。
withCallToActionTextSize float callToActionTextSize

行動を促すフレーズのテキストのサイズ。
withCallToActionTypefaceColor int callToActionTypefaceColor

行動を促すフレーズのテキストの色。
withCallToActionBackgroundColor ColorDrawable callToActionBackgroundColor

行動を促すフレーズの背景色。
withPrimaryTextTypeface Typeface primaryTextTypeface

テキストの 1 行目の書体。
withPrimaryTextSize float primaryTextSize

1 行目のテキストのサイズ。
withPrimaryTextTypefaceColor int primaryTextTypefaceColor

1 行目のテキストの色。
withPrimaryTextBackgroundColor ColorDrawable primaryTextBackgroundColor

1 行目のテキストの背景色。
withSecondaryTextTypeface Typeface secondaryTextTypeface

2 行目のテキストの書体。
withSecondaryTextSize float secondaryTextSize

2 行目のテキストのサイズ。
withSecondaryTextTypefaceColor int secondaryTextTypefaceColor

2 行目のテキストの色。
withSecondaryTextBackgroundColor ColorDrawable secondaryTextBackgroundColor

2 行目のテキストの背景色。
withTertiaryTextTypeface Typeface tertiaryTextTypeface

3 行目のテキストの書体。
withTertiaryTextSize float tertiaryTextSize

3 行目のテキストのサイズ。
withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

3 行目のテキストの色。
withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

3 行目のテキストの背景色。
withMainBackgroundColor ColorDrawable mainBackgroundColor

メインの背景色。

投稿

ネイティブ広告をすばやく作成できるように、ネイティブ テンプレートを作成しました。 GitHub リポジトリに投稿して、新しいテンプレートや機能の追加をぜひご検討ください。pull リクエストを送信していただければ こちらでお調べいたします