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

ネイティブ テンプレートのダウンロード

キーポイント: このガイドに進む前に、ネイティブ広告を読み込む方法をご確認ください。ネイティブ広告について詳しくは、ネイティブ広告ハンドブックをご覧ください。

ネイティブ広告を使用すると、広告をカスタマイズして、質の高いユーザー エクスペリエンスを提供することができます。ユーザー エクスペリエンスが向上すると、エンゲージメントが促進され、全体的な収益の拡大にもつながります。

ネイティブ広告を最大限に活用するには、アプリに自然にマッチするように広告レイアウトのスタイルを設定することが重要です。簡単に始められるように、ネイティブ テンプレートが用意されています。

ネイティブ テンプレートとは、ネイティブ広告として使用できるビューであり、コーディングが完成された状態で提供されるため、実装と変更を簡単に行えます。ネイティブ テンプレートを使うと、初めてのネイティブ広告をわずか数分で実装でき、大量のコードを使わずにデザインを簡単にカスタマイズできます。このテンプレートは、ニュース フィード内で使用する TableView やダイアログなど、アプリ内のどこにでも好きな場所に配置できます。

注: 独自のネイティブ レイアウトをゼロから作成する場合は、ネイティブ アドバンスのドキュメントをご覧ください。

このガイドでは、iOS アプリにネイティブ テンプレートをダウンロードして追加、使用する方法について説明します。SDK を使用してネイティブ広告をすでに読み込んでいることを前提としています。

テンプレートのサイズ

テンプレートのサイズには、小と中の 2 種類があります。それぞれのテンプレートは、クラスは GADTSmallTemplateView と GADTMediumTemplateView です。どちらのクラスも GADTTemplateView を拡張します。どちらのテンプレートもアスペクト比は固定されており、addHorizontalConstraintsToSuperviewWidth を呼び出した場合にのみ親ビューの幅に合わせてスケーリングされます。addHorizontalConstraintsToSuperviewWidth を呼び出さない場合、各テンプレートはデフォルトのサイズで表示されます。

GADTSmallTemplateView

小サイズのテンプレートは、UICollectionView や UITableView のセルに最適です。たとえば、インフィード広告や、細長い長方形の広告ビューが必要な場所で使用できます。このテンプレートのデフォルトのサイズは、高さ 91 ポイント、幅 355 ポイントです。

GADTMediumTemplateView

中サイズのテンプレートは、ページビューの大きさの 1/2～3/4 に相当します。ランディング ページやスプラッシュ ページに適していますが、UITableViews に含めることもできます。このテンプレートのデフォルトのサイズは、高さ 370 ポイント、幅 355 ポイントです。

どのテンプレートでも自動レイアウトがサポートされていますので、プレースメントを自由にお試しください。もちろん、要件に合わせてソースコードと xib ファイルを変更することもできます。

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

ネイティブ広告テンプレートをインストールするには、その zip をダウンロードして XCode プロジェクトにドラッグします。その際は、[Copy items if needed] チェックボックスがオンになっていることを確認してください。

ネイティブ広告テンプレートの使用

プロジェクトにフォルダを追加し、関連するクラスをファイルに追加したら、次のレシピに従ってテンプレートを使用します。なお、フォントとスタイルのプロパティを変更するには、必ずスタイル ディクショナリをご使用ください。現在のところ、xib 自体に設定されたスタイルはすべてオーバーライドされます。

Objective-C

/// Step 1: Import the templates that you need.
#import "NativeTemplates/GADTSmallTemplateView.h"
#import "NativeTemplates/GADTTemplateView.h"
...

// STEP 2: Initialize your template view object.
GADTSmallTemplateView *templateView =
    [[NSBundle mainBundle] loadNibNamed:@"GADTSmallTemplateView" owner:nil options:nil]
      .firstObject;

// STEP 3: Template views are just GADNativeAdViews.
_nativeAdView = templateView;
nativeAd.delegate = self;

// STEP 4: Add your template as a subview of whichever view you'd like.
// This must be done before calling addHorizontalConstraintsToSuperviewWidth.
// Please note: Our template objects are subclasses of GADNativeAdView so
// you can insert them into whatever type of view you’d like, and don’t need to
// create your own.
[self.view addSubview:templateView];

// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary
// on the template property. A default dictionary is created for you if you do
// not set this. Note - templates do not currently respect style changes in the
// xib.

NSString *myBlueColor = @"#5C84F0";
NSDictionary *styles = @{
    GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCallToActionBackgroundColor :
        [GADTTemplateView colorFromHexString:myBlueColor],
    GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,
    GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],
};

templateView.styles = styles;

// STEP 6: Set the ad for your template to render.
templateView.nativeAd = nativeAd;

// STEP 7 (Optional): If you'd like your template view to span the width of your
// superview call this method.
[templateView addHorizontalConstraintsToSuperviewWidth];
[templateView addVerticalCenterConstraintToSuperview];

スタイル辞書のキー

次のキーを使ってディクショナリを作成すると、テンプレートをすばやくカスタマイズできます。

Objective-C

/// Call to action font. Expects a UIFont.
GADTNativeTemplateStyleKeyCallToActionFont

/// Call to action font color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionFontColor;

/// Call to action background color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionBackgroundColor;

/// The font, font color and background color for the first row of text in the
/// template.

/// All templates have a primary text area which is populated by the native ad's
/// headline.

/// Primary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFont;

/// Primary text font color. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFontColor;

/// Primary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyPrimaryBackgroundColor;

/// The font, font color and background color for the second row of text in the
/// template.

/// All templates have a secondary text area which is populated either by the
/// body of the ad, or by the rating of the app.

/// Secondary text font. Expects a UIFont.
GADTNativeTemplateStyleKeySecondaryFont;

/// Secondary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryFontColor;

/// Secondary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryBackgroundColor;

/// The font, font color and background color for the third row of text in the
/// template. The third row is used to display store name or the default
/// tertiary text.

/// Tertiary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyTertiaryFont;

/// Tertiary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryFontColor;

/// Tertiary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryBackgroundColor;

/// The background color for the bulk of the ad. Expects a UIColor.
GADTNativeTemplateStyleKeyMainBackgroundColor;

/// The corner rounding radius for the icon view and call to action. Expects an
/// NSNumber.
GADTNativeTemplateStyleKeyCornerRadius;

よくある質問

テンプレート オブジェクトをインスタンス化しようとすると、例外が発生するのはなぜですか？

これは、xib ファイルでビューのサイズを変更したが、サブクラスの setup メソッドで作成されたフレームのサイズを変更していない場合に発生することがあります。

これらのテンプレートをさらにカスタマイズするにはどうすればよいですか？

これらのテンプレートは、iOS アプリの開発で使用可能な他の xib やカスタムのビュークラスと同様に、関連付けられたビューのオブジェクトを含む xib にすぎません。ネイティブ広告をゼロから作成する場合は、ネイティブ アドバンス ガイドをご覧ください。

xib でスタイルを設定しても、スタイルが更新されません。なぜですか？

現在のところ、xib のすべてのスタイルは、GADTTemplateView.m のデフォルトのスタイル ディクショナリによってオーバーライドされます。

投稿

ネイティブ広告を簡単に開発できるようにネイティブ テンプレートを作成しました。 ぜひ皆様も新しいテンプレートや機能を GitHub レポジトリに投稿してください。プルリクエストを送っていただければ確認いたします。