ネイティブ広告

警告

2020 年 6 月 1 日以降、Windows UWP アプリ用の Microsoft の広告の収益化プラットフォームはシャットダウンされます。 詳細情報

ネイティブ広告は、コンポーネント ベースの広告形式で、各広告クリエイティブ (タイトル、画像、説明、行動喚起テキストなど) が個々の要素としてアプリに配信されます。 独自のフォント、色、アニメーション、その他の UI コンポーネントを使用してこれらの要素をアプリに統合して、アプリの外観に合った目立たないユーザー エクスペリエンスを組み合わせ、広告から高い収益を得ることができます。

広告主の場合、ネイティブ広告は高パフォーマンスの配置を提供します。広告エクスペリエンスはアプリに緊密に統合されているため、ユーザーはこれらの種類の広告とより多くの対話を行う傾向があるためです。

Note

ネイティブ広告は現在、Windows 10 および Windows 11 用の XAML ベースの UWP アプリでのみサポートされています。 HTML と JavaScript を使用して記述された UWP アプリのサポートは、Microsoft Advertising SDK の今後のリリースで予定されています。

前提条件

ネイティブ広告をアプリに統合する

次の手順に従って、ネイティブ広告をアプリに統合し、ネイティブ広告の実装にテスト広告が表示されていることを確認します。

  1. Visual Studio でプロジェクトを開くか、新しいプロジェクトを作ります。

    Note

    既存のプロジェクトを使用している場合は、プロジェクトで Package.appxmanifest ファイルを開き、 Internet (クライアント) 機能が選択されていることを確認します。 アプリでは、テスト広告とライブ広告を受け取るためにこの機能が必要です。

  2. プロジェクトのターゲットが [Any CPU] (任意の CPU) になっている場合は、アーキテクチャ固有のビルド出力 (たとえば、[x86]) を使うようにプロジェクトを更新します。 プロジェクトのターゲットが Any CPU の場合、次の手順で Microsoft Advertising SDK への参照を正常に追加することはできません。 詳しくは、「プロジェクトのターゲットを "Any CPU" に設定すると参照エラーが発生する」をご覧ください。

  3. プロジェクトで Microsoft Advertising SDK への参照を追加します。

    1. [ソリューション エクスプローラー] ウィンドウで、[参照設定] を右クリックし、[参照の追加] を選択します。
    2. Reference Managerで、Universal Windowsを展開し、Extensionsをクリックし、XAML 用 Microsoft Advertising SDK (バージョン 10.0) の横にあるチェック ボックス選択します。
    3. [参照マネージャー] で、[OK] をクリックします。
  4. アプリの適切なコード ファイル (たとえば、MainPage.xaml.csまたは他のページのコード ファイル) に、次の名前空間参照を追加します。

    using Microsoft.Advertising.WinRT.UI;
    using Windows.UI.Xaml.Media.Imaging;
    
  5. アプリ内の適切な場所 ( MainPage やその他のページなど) で、 NativeAdsManagerV2 オブジェクトと、ネイティブ広告のアプリケーション ID と広告ユニット ID を表す複数の文字列フィールドを宣言します。 次のコード例では、ネイティブ広告のテスト値にmyAppIdフィールドとmyAdUnitId フィールドを割り当てます。

    Note

    すべての NativeAdsManagerV2 には対応する adユニットがあり ネイティブ広告コントロールに広告を配信するために使用され、すべての広告ユニットは adユニットIDアプリケーションIDで構成されています。 これらの手順では、テスト広告ユニット ID とアプリケーション ID の値をコントロールに割り当てます。 これらのテスト値は、テスト バージョンのアプリでのみ使用できます。 ストアにアプリを公開する前に、これらのテスト値をパートナー センターから取得した実際の値に置き換える 必要があります。

    NativeAdsManagerV2 myNativeAdsManager = null;
    string myAppId = "d25517cb-12d4-4699-8bdc-52040c712cab";
    string myAdUnitId = "test";
    
  6. 起動時に実行されるコード (ページのコンストラクターなど) では、 NativeAdsManagerV2 オブジェクトをインスタンス化し、オブジェクトの AdReady イベントと ErrorOccurred イベントのイベント ハンドラーを接続します。

    myNativeAdsManager = new NativeAdsManagerV2(myAppId, myAdUnitId);
    myNativeAdsManager.AdReady += MyNativeAd_AdReady;
    myNativeAdsManager.ErrorOccurred += MyNativeAdsManager_ErrorOccurred;
    
  7. ネイティブ広告を表示する準備ができたら、 RequestAd メソッドを呼び出して広告を取得します。

    myNativeAdsManager.RequestAd();
    
  8. アプリのネイティブ広告の準備ができたら、 AdReady イベント ハンドラーが呼び出され、ネイティブ広告を表す NativeAdV2 オブジェクトが e パラメーターに渡されます。 NativeAdV2 プロパティを使用してネイティブ広告の各要素を取得し、ページにこれらの要素を表示します。 ネイティブ広告のコンテナーとして機能する UI 要素を登録するには、必ず RegisterAdContainer メソッドを呼び出してください。これは、広告のインプレッションとクリックを適切に追跡するために必要です。

    Note

    ネイティブ広告の一部の要素は必須であり、常にアプリに表示する必要があります。 詳細については、ネイティブ広告の ガイドラインを参照してください

    たとえば、次の StackPanel を含むMainPage (またはその他のページ) がアプリに含まれているとします。 このStackPanelには、タイトル、説明、画像、応答、テキスト、呼び出しテキストを表示するボタンなど、ネイティブ広告のさまざまな要素を表示する一連のコントロールが含まれています。

    <StackPanel x:Name="NativeAdContainer" Background="#555555" Width="Auto" Height="Auto"
                Orientation="Vertical">
        <Image x:Name="AdIconImage" HorizontalAlignment="Left" VerticalAlignment="Center"
               Margin="20,20,20,20"/>
        <TextBlock x:Name="TitleTextBlock" HorizontalAlignment="Left" VerticalAlignment="Center"
               Text="The ad title will go here" FontSize="24" Foreground="White" Margin="20,0,0,10"/>
        <TextBlock x:Name="DescriptionTextBlock" HorizontalAlignment="Left" VerticalAlignment="Center"
                   Foreground="White" TextWrapping="Wrap" Text="The ad description will go here"
                   Margin="20,0,0,0" Visibility="Collapsed"/>
        <Image x:Name="MainImageImage" HorizontalAlignment="Left"
               VerticalAlignment="Center" Margin="20,20,20,20" Visibility="Collapsed"/>
        <Button x:Name="CallToActionButton" Background="Gray" Foreground="White"
                HorizontalAlignment="Left" VerticalAlignment="Center" Width="Auto" Height="Auto"
                Content="The call to action text will go here" Margin="20,20,20,20"
                Visibility="Collapsed"/>
        <StackPanel x:Name="SponsoredByStackPanel" Orientation="Horizontal" Margin="20,20,20,20">
            <TextBlock x:Name="SponsoredByTextBlock" Text="The ad sponsored by text will go here"
                       FontSize="24" Foreground="White" Margin="20,0,0,0" HorizontalAlignment="Left"
                       VerticalAlignment="Center" Visibility="Collapsed"/>
            <Image x:Name="IconImageImage" Margin="40,20,20,20" HorizontalAlignment="Left"
                   VerticalAlignment="Center" Visibility="Collapsed"/>
        </StackPanel>
    </StackPanel>
    

    次のコード例は、StackPanel コントロール内のネイティブ広告の各要素を表示し RegisterAdContainer メソッドを呼び出してStackPanelを登録するAdReady イベント ハンドラーを示しています。 このコードは、 StackPanel を含むページの分離コード ファイルから実行されることを前提としています。

    void MyNativeAd_AdReady(object sender, NativeAdReadyEventArgs e)
    {
        NativeAdV2 nativeAd = e.NativeAd;
    
        // Show the ad icon.
        if (nativeAd.AdIcon != null)
        {
            AdIconImage.Source = nativeAd.AdIcon.Source;
    
            // Adjust the Image control to the height and width of the 
            // provided ad icon.
            AdIconImage.Height = nativeAd.AdIcon.Height;
            AdIconImage.Width = nativeAd.AdIcon.Width;
        }
    
        // Show the ad title.
        TitleTextBlock.Text = nativeAd.Title;
    
        // Show the ad description.
        if (!string.IsNullOrEmpty(nativeAd.Description))
        {
            DescriptionTextBlock.Text = nativeAd.Description;
            DescriptionTextBlock.Visibility = Visibility.Visible;
        }
    
        // Display the first main image for the ad. Note that the service
        // might provide multiple main images. 
        if (nativeAd.MainImages.Count > 0)
        {
            NativeImage mainImage = nativeAd.MainImages[0];
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.UriSource = new Uri(mainImage.Url);
            MainImageImage.Source = bitmapImage;
    
            // Adjust the Image control to the height and width of the 
            // main image.
            MainImageImage.Height = mainImage.Height;
            MainImageImage.Width = mainImage.Width;
            MainImageImage.Visibility = Visibility.Visible;
        }
    
        // Add the call to action string to the button.
        if (!string.IsNullOrEmpty(nativeAd.CallToActionText))
        {
            CallToActionButton.Content = nativeAd.CallToActionText;
            CallToActionButton.Visibility = Visibility.Visible;
        }
    
        // Show the ad sponsored by value.
        if (!string.IsNullOrEmpty(nativeAd.SponsoredBy))
        {
            SponsoredByTextBlock.Text = nativeAd.SponsoredBy;
            SponsoredByTextBlock.Visibility = Visibility.Visible;
        }
    
        // Show the icon image for the ad.
        if (nativeAd.IconImage != null)
        {
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.UriSource = new Uri(nativeAd.IconImage.Url);
            IconImageImage.Source = bitmapImage;
    
            // Adjust the Image control to the height and width of the 
            // icon image.
            IconImageImage.Height = nativeAd.IconImage.Height;
            IconImageImage.Width = nativeAd.IconImage.Width;
            IconImageImage.Visibility = Visibility.Visible;
        }
    
        // Register the container of the controls that display
        // the native ad elements for clicks/impressions.
        nativeAd.RegisterAdContainer(NativeAdContainer);
    }
    
  9. ネイティブ広告に関連するエラーを処理するために、 ErrorOccurred イベントのイベント ハンドラーを定義します。 次の例では、テスト中に Visual Studio Output ウィンドウにエラー情報を書き込みます。

    private void MyNativeAdsManager_ErrorOccurred(object sender, NativeAdErrorEventArgs e)
    {
        System.Diagnostics.Debug.WriteLine("NativeAd error " + e.ErrorMessage +
            " ErrorCode: " + e.ErrorCode.ToString());
    }
    
  10. アプリをコンパイルして実行し、テスト広告でアプリを表示します。

ライブ広告でアプリをリリースする

ネイティブ広告の実装でテスト広告が正常に表示されることを確認したら、次の手順に従って、実際の広告を表示するようにアプリを構成し、更新したアプリをストアに提出します。

  1. ネイティブ広告の実装が、ネイティブ広告の ガイドに従っていることを確認してください

  2. パートナー センターで [アプリ内広告] に進み、広告ユニットを作成します。 広告ユニットの種類として、 Native を指定します。 広告ユニット ID とアプリケーション ID の両方をメモしておきます。

    Note

    テスト広告ユニットとライブ UWP 広告ユニットでは、アプリケーション ID の値の形式が異なります。 テスト アプリケーション ID の値は GUID です。 パートナー センターでライブ UWP 広告ユニットを作成する場合、広告ユニットのアプリケーション ID の値は、アプリのストア ID と常に一致します (9NBLGGH4R315 はストア ID の例です)。

  3. 必要に応じて、ネイティブ広告の広告仲介を有効にするには、[In-app ads] ページの [Mediation settings] セクションで設定を構成します。 広告仲介を使用すると、複数の広告ネットワークからの広告を表示することで、広告の収益とアプリのプロモーション機能を最大化できます。

  4. コードで、広告ユニットのテスト値 (NativeAdsManagerV2 コンストラクターの applicationId パラメーターと adUnitId パラメーター) を、パートナー センターで生成した実際の値に置き換えます。

  5. パートナー センターを使用してストアにアプリを申請します。

  6. パートナー センターで広告パフォーマンス レポートを確認します。

アプリで複数のネイティブ広告の広告ユニットを管理する

1 つのアプリで複数のネイティブ広告配置を使用できます。 このシナリオでは、ネイティブ広告の配置ごとに異なる広告ユニットを割り当てることをお勧めします。 ネイティブ広告に異なる広告ユニットを使用すると、仲介設定を個別に 構成し コントロールごとに個別の レポート データ を取得できます。 また、これにより、Microsoft のサービスはアプリに提供する広告を最適化できます。

重要

各広告ユニットは 1 つのアプリのみで使用できます。 同じ広告ユニットを複数のアプリで使うと、その広告ユニットには広告が配信されません。