ネイティブ広告を使用すると、広告をカスタマイズして、より優れたユーザー エクスペリエンスを提供することができます。ユーザー エクスペリエンスが向上すると、エンゲージメントが向上し、全体的な収益が向上します。
ネイティブ広告を最大限に活用するには、広告レイアウトがアプリの自然な拡張のように見えるようにスタイルを設定することが重要です。ネイティブ テンプレートが用意されています。
ネイティブ テンプレートは、ネイティブ広告をコードとして完成させるビューで、実装と変更を簡単に行えるよう設計されています。ネイティブ テンプレートを使用すると、初めてのネイティブ広告をわずか数分で実装でき、多くのコードを使わずにデザインをすばやくカスタマイズできます。これらのテンプレートは、ニュース フィードで使用するリサイクラー ビューやダイアログなど、アプリ内のどこにでも配置できます。
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 プロジェクトにモジュールをインポートするだけです。
[File] > [New] > [Import Module] を選択します。
nativetemplates
フォルダを選択します。アプリレベルの
build.gradle
ファイルに次の行を追加します。dependencies { ... implementation project(':nativetemplates') ... }
ネイティブ広告テンプレートを使用する
他のビューグループと同様に、テンプレートは任意のレイアウト XML ファイル内で使用できます。
テンプレートの使用は、次の 2 段階のプロセスで行います。
まず、レイアウトの一部としてテンプレートを含める必要があります。
<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>
次に、読み込み時にテンプレートにネイティブ広告を表示する必要があります。
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 リクエストを送信していただければ こちらでお調べいたします