다음을 통해 공유


중간 광고

경고

2020년 6월 1일부로 Windows UWP 앱용 Microsoft 광고 수익 창출 플랫폼이 종료됩니다. 더 알아보기

이 연습은 Windows 10 및 Windows 11 UWP(Universal Windows Platform) 앱 및 게임에 중간 광고를 포함하는 방법을 보여 줍니다. C# 및 C++를 사용하여 JavaScript/HTML 앱 및 XAML 앱에 중간 광고를 추가하는 방법을 보여 주는 전체 샘플 프로젝트는 GitHub의 광고 샘플을 참조하세요.

중간 광고란?

앱 또는 게임에서 UI의 일부로 제한되는 표준 배너 광고와 달리 중간 광고는 전체 화면에 표시됩니다. 게임에서는 두 가지 기본 양식이 자주 사용됩니다.

  • Paywall 광고를 사용하면 사용자는 정기적으로 광고를 시청해야 합니다. 예를 들어 게임 수준 간,

    whatisaninterstitial

  • 보상 기반 광고를 사용하면 사용자는 레벨을 완료하기 위한 힌트나 추가 시간 등의 혜택을 명시적으로 원하며 앱의 사용자 인터페이스를 통해 광고를 초기화합니다.

앱과 게임에 사용하도록 중간 동영상 광고중간 배너 광고의 두 가지 유형의 중간 광고를 제공합니다.

참고

중간 광고용 API는 동영상 재생 시를 제외하고 어떠한 사용자 인터페이스도 처리하지 않습니다. 앱에서 중간 광고를 통합하는 방법을 고려할 때 수행할 작업 및 방지에 대한 지침은 중간 모범 사례를 참조하세요.

필수 조건

앱에 중간 광고를 통합하기

앱에 중간 광고를 표시하려면 프로젝트 형식에 대한 지침을 따릅니다.

XAML/.NET

이 섹션에서는 C# 예제를 제공하지만 XAML/.NET 프로젝트에도 Visual Basic 및 C++가 지원됩니다. 전체 C# 코드 예시는 C#의 중간 광고 샘플 코드를 참조하세요.

  1. Visual Studio에서 새 프로젝트를 엽니다.

    참고

    기존 프로젝트를 사용하고 있는 경우 프로젝트에서 Package.appxmanifest 파일을 열고 인터넷(클라이언트) 기능이 선택되었는지 확인합니다. 앱에서 테스트 광고와 라이브 광고를 수신하려면 이 기능이 필요합니다.

  2. 프로젝트가 모든 CPU를 대상으로 하는 경우, 아키텍처별 빌드 출력(예: x86)을 사용하도록 프로젝트를 업데이트하세요. 프로젝트의 대상이 모든 CPU인 경우에는 다음 단계에서 Microsoft 광고 라이브러리에 대한 참조를 추가할 수 없게 됩니다. 자세한 내용은 프로젝트의 모든 CPU를 대상으로 지정하여 발생한 참조 오류를 참조하세요.

  3. Microsoft Advertising SDK 참조를 프로젝트에 추가합니다.

    1. 솔루션 탐색기 창에서 참조를 마우스 오른쪽 단추로 클릭하고, 참조 추가…를 선택합니다.
    2. 참조 관리자에서 유니버설 Windows를 확장하고, 확장을 클릭한 다음, XAML용 Microsoft Advertising SDK(버전 10.0) 옆에 있는 확인란을 선택합니다.
    3. 참조 관리자에서 확인을 클릭합니다.
  4. 앱의 적절한 코드 파일(예: MainPage.xaml.cs 또는 다른 페이지의 코드 파일)에 다음의 네임스페이스 참조를 추가합니다.

    using Microsoft.Advertising.WinRT.UI;
    
  5. 앱의 적절한 위치(예: MainPage 또는 다른 페이지)에서 InterstitialAd 개체를 비롯하여 중간 광고에 대한 애플리케이션 ID 및 광고 단위 ID를 나타내는 여러 문자열 필드를 선언합니다. 다음의 코드 예시에서는 myAppIdmyAdUnitId 필드를 중간 광고에 대한 테스트 값에 할당합니다.

    참고

    모든 InterstitialAd에 컨트롤 할 광고를 지원하는 서비스가 사용하는 해당 광고 단위가 있으며, 모든 광고 단위는 광고 단위 ID애플리케이션 ID로 구성됩니다. 이 단계에서 컨트롤에 테스트 광고 단위 ID와 애플리케이션 ID 값을 할당합니다. 이 테스트 값은 앱 테스트 버전에서만 사용할 수 있습니다. 앱을 Store에 게시하기 전에 파트너 센터에서 이러한 테스트 값을 라이브 값으로 변경해야 합니다.

    InterstitialAd myInterstitialAd = null;
    string myAppId = "d25517cb-12d4-4699-8bdc-52040c712cab";
    string myAdUnitId = "test";
    
  6. 시작할 때 실행되는 코드에서(예를 들면 해당 페이지에 대한 생성자에서), InterstitialAd 개체를 인스턴스화하고, 이벤트에 이벤트 처리기를 연결합니다.

    myInterstitialAd = new InterstitialAd();
    myInterstitialAd.AdReady += MyInterstitialAd_AdReady;
    myInterstitialAd.ErrorOccurred += MyInterstitialAd_ErrorOccurred;
    myInterstitialAd.Completed += MyInterstitialAd_Completed;
    myInterstitialAd.Cancelled += MyInterstitialAd_Cancelled;
    
  7. 동영상 중간 광고를 표시하려는 경우, 중간 광고가 필요한 시점에서 약 30~60초 전에 RequestAd 메서드를 사용하여 광고를 미리 가져옵니다. 이렇게 하면 표시되기 전에 광고 요청 및 준비에 충분한 시간이 허용됩니다. 광고 형식으로는 AdType.Video를 지정합니다.

    myInterstitialAd.RequestAd(AdType.Video, myAppId, myAdUnitId);
    

    배너 중간 광고를 표시하려는 경우, 중간 광고가 필요한 시점에서 약 5~8초 전에 RequestAd 메서드를 사용하여 광고를 미리 가져옵니다. 이렇게 하면 표시되기 전에 광고 요청 및 준비에 충분한 시간이 허용됩니다. 광고 형식으로 AdType.Display를 지정합니다.

    myInterstitialAd.RequestAd(AdType.Display, myAppId, myAdUnitId);
    
  8. 동영상 또는 배너 중간 광고를 게재하려는 코드 지점에서 InterstitialAd를 게재할 준비가 되었는지 확인한 다음, Show 메서드를 사용하여 게재합니다.

    if (InterstitialAdState.Ready == myInterstitialAd.State)
    {
        myInterstitialAd.Show();
    }
    
  9. InterstitialAd 개체에 대한 이벤트 처리기를 정의합니다.

    void MyInterstitialAd_AdReady(object sender, object e)
    {
        // Your code goes here.
    }
    
    void MyInterstitialAd_ErrorOccurred(object sender, AdErrorEventArgs e)
    {
        // Your code goes here.
    }
    
    void MyInterstitialAd_Completed(object sender, object e)
    {
        // Your code goes here.
    }
    
    void MyInterstitialAd_Cancelled(object sender, object e)
    {
        // Your code goes here.
    }
    
  10. 앱을 빌드하고 테스트하여 테스트 광고가 표시되는지 확인합니다.

HTML/JavaScript

다음의 지침에서 사용자가 Visual Studio에서 JavaScript용 Universal Windows 프로젝트를 만들었으며 특정 CPU를 대상으로 한다고 가정합니다. 전체 코드 샘플은 JavaScript의 중간 광고 샘플 코드를 참조하세요.

  1. Visual Studio에서 새 프로젝트를 엽니다.

  2. 프로젝트가 모든 CPU를 대상으로 하는 경우 아키텍처별 빌드 출력(예: x86)을 사용하도록 프로젝트를 업데이트합니다. 프로젝트의 대상이 모든 CPU인 경우에는 다음 단계에서 Microsoft 광고 라이브러리에 대한 참조를 추가할 수 없게 됩니다. 자세한 내용은 프로젝트의 모든 CPU를 대상으로 지정하여 발생한 참조 오류를 참조하세요.

  3. Microsoft Advertising SDK 참조를 프로젝트에 추가합니다.

    1. 솔루션 탐색기 창에서 참조를 마우스 오른쪽 버튼으로 클릭하고 참조 추가를 선택하세요.
    2. 참조 관리자에서 유니버설 Windows를 펼치고 확장을 클릭한 다음, JavaScript용 Microsoft 광고 SDK(버전 10.0) 옆에 있는 확인란을 선택하세요.
    3. 참조 관리자에서 확인을 클릭합니다.
  4. 프로젝트의 HTML 파일 <헤드> 섹션에서 프로젝트의 default.css 및 default.js 대한 JavaScript 참조 뒤, ad.js 참조를 추가합니다.

    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
    
  5. 프로젝트의 .js 파일에서 중간 광고의 애플리케이션 ID 및 광고 단위 ID를 포함하는 InterstitialAd 개체 및 여러 필드를 선언합니다. 다음의 코드 예시에서는 applicationIdadUnitId 필드를 중간 광고에 대한 테스트 값에 할당합니다.

    참고

    모든 InterstitialAd에 컨트롤 할 광고를 지원하는 서비스가 사용하는 해당 광고 단위가 있으며, 모든 광고 단위는 광고 단위 ID애플리케이션 ID로 구성됩니다. 이 단계에서 컨트롤에 테스트 광고 단위 ID와 애플리케이션 ID 값을 할당합니다. 이 테스트 값은 앱 테스트 버전에서만 사용할 수 있습니다. 앱을 Store에 게시하기 전에 파트너 센터에서 이러한 테스트 값을 라이브 값으로 변경해야 합니다.

    var interstitialAd = null;
    var applicationId = "d25517cb-12d4-4699-8bdc-52040c712cab";
    var adUnitId = "test";
    
  6. 시작할 때 실행되는 코드에서(예를 들면 해당 페이지에 대한 생성자에서), InterstitialAd 개체를 인스턴스화하고, 이벤트 처리기를 연결합니다.

    interstitialAd = new MicrosoftNSJS.Advertising.InterstitialAd();
    interstitialAd.onErrorOccurred = errorOccurredHandler;
    interstitialAd.onAdReady = adReadyHandler;
    interstitialAd.onCancelled = cancelledHandler;
    interstitialAd.onCompleted = completedHandler;
    
  7. 동영상 중간 광고를 표시하려는 경우, 중간 광고가 필요한 시점에서 약 30~60초 전에 RequestAd 메서드를 사용하여 광고를 미리 가져옵니다. 이렇게 하면 표시되기 전에 광고 요청 및 준비에 충분한 시간이 허용됩니다. 광고 형식으로 InterstitialAdType.video를 지정합니다.

    if (interstitialAd) {
        interstitialAd.requestAd(MicrosoftNSJS.Advertising.InterstitialAdType.video, applicationId, adUnitId);
    }
    

    배너 중간 광고를 표시하려는 경우, 중간 광고가 필요한 시점에서 약 5~8초 전에 RequestAd 메서드를 사용하여 광고를 미리 가져옵니다. 이렇게 하면 표시되기 전에 광고 요청 및 준비에 충분한 시간이 허용됩니다. 광고 형식으로 InterstitialAdType.display를 지정합니다.

    if (interstitialAd) {
        interstitialAd.requestAd(MicrosoftNSJS.Advertising.InterstitialAdType.display, applicationId, adUnitId);
    }
    
  8. 코드에서 광고를 표시할 지점에 InterstitialAd를 표시할 준비가 되었는지 확인한 다음, Show 메서드를 사용하여 표시합니다.

    if (interstitialAd && interstitialAd.state === MicrosoftNSJS.Advertising.InterstitialAdState.ready) {
        interstitialAd.show();
    }
    
  9. InterstitialAd 개체에 대한 이벤트 처리기를 정의합니다.

    function adReadyHandler(sender) {
      // Your code goes here.
    }
    
    function errorOccurredHandler(sender, args) {
      // Your code goes here.
    }
    
    function completedHandler(sender) {
      // Your code goes here.
    }
    
    function cancelledHandler(sender) {
      // Your code goes here.
    }
    
  10. 앱을 빌드하고 테스트하여 테스트 광고가 표시되는지 확인합니다.

C++(DirectX Interop)

이 샘플에서는 사용자가 Visual Studio에서 C++ DirectX 및 XAML App (Universal Windows) 프로젝트를 만들었으며 특정 CPU 아키텍처를 대상으로 한다고 가정합니다.  

  1. Visual Studio에서 새 프로젝트를 엽니다.

  2. Microsoft Advertising SDK 참조를 프로젝트에 추가합니다.

    1. 솔루션 탐색기 창에서 참조를 마우스 오른쪽 단추로 클릭하고, 참조 추가…를 선택합니다.
    2. 참조 관리자에서 유니버설 Windows를 확장하고, 확장을 클릭한 다음, XAML용 Microsoft Advertising SDK(버전 10.0) 옆에 있는 확인란을 선택합니다.
    3. 참조 관리자에서 확인을 클릭합니다.
  3. 앱에 적합한 헤더 파일(예: DirectXPage.xaml.h)에서 InterstitialAd 개체 및 관련 이벤트 처리기 메서드를 선언합니다.

    Microsoft::Advertising::WinRT::UI::InterstitialAd^ m_interstitialAd;
    void OnAdReady(Object^ sender, Object^ args);
    void OnAdCompleted(Object^ sender, Object^ args);
    void OnAdCancelled(Object^ sender, Object^ args);
    void OnAdError(Object^ sender, Microsoft::Advertising::WinRT::UI::AdErrorEventArgs^ args);
    
  4. 동일한 헤더 파일에서 중간 광고의 애플리케이션 ID 및 광고 단위 ID를 나타내는 여러 문자열 필드를 선언합니다. 다음의 코드 예시에서는 myAppIdmyAdUnitId 필드를 중간 광고에 대한 테스트 값에 할당합니다.

    참고

    모든 InterstitialAd에 컨트롤 할 광고를 지원하는 서비스가 사용하는 해당 광고 단위가 있으며, 모든 광고 단위는 광고 단위 ID애플리케이션 ID로 구성됩니다. 이 단계에서 컨트롤에 테스트 광고 단위 ID와 애플리케이션 ID 값을 할당합니다. 이 테스트 값은 앱 테스트 버전에서만 사용할 수 있습니다. 앱을 Store에 게시하기 전에 파트너 센터에서 이러한 테스트 값을 라이브 값으로 변경해야 합니다.

    Platform::String^ myAppId = L"d25517cb-12d4-4699-8bdc-52040c712cab";
    Platform::String^ myAdUnitId = L"test";
    
  5. 중간 광고 표시 코드를 추가하려는 .cpp 파일에서 다음 네임스페이스 참조를 추가합니다. 다음의 예시에서 앱의 DirectXPage.xaml.cpp 파일에 코드를 추가하는 것으로 가정합니다.

    using namespace Microsoft::Advertising::WinRT::UI;
    
  6. 시작할 때 실행되는 코드에서(예를 들면 해당 페이지에 대한 생성자에서), InterstitialAd 개체를 인스턴스화하고, 이벤트에 이벤트 처리기를 연결합니다. 다음의 예시에서, InterstitialAdSamplesCpp은(는) 프로젝트의 네임스페이스입니다. 이 이름을 코드에 필요한 대로 변경하세요.

    m_interstitialAd = ref new InterstitialAd();         
    m_interstitialAd->AdReady += ref new Windows::Foundation::EventHandler<Platform::Object ^>
        (this, &InterstitialAdSamplesCpp::DirectXPage::OnAdReady);
    m_interstitialAd->Completed += ref new Windows::Foundation::EventHandler<Platform::Object ^>
        (this, &InterstitialAdSamplesCpp::DirectXPage::OnAdCompleted);
    m_interstitialAd->Cancelled += ref new Windows::Foundation::EventHandler<Platform::Object ^>
        (this, &InterstitialAdSamplesCpp::DirectXPage::OnAdCancelled);
    m_interstitialAd->ErrorOccurred += ref new
        Windows::Foundation::EventHandler<Microsoft::Advertising::WinRT::UI::AdErrorEventArgs ^>
        (this, &InterstitialAdSamplesCpp::DirectXPage::OnAdError);
    
  7. 동영상 중간 광고를 표시하려는 경우, 중간 광고가 필요한 시점에서 약 30~60초 전에 RequestAd 메서드를 사용하여 광고를 미리 가져옵니다. 이렇게 하면 표시되기 전에 광고 요청 및 준비에 충분한 시간이 허용됩니다. 광고 형식으로 AdType::Video를 지정합니다.

    m_interstitialAd->RequestAd(AdType::Video, myAppId, myAdUnitId);
    

    배너 중간 광고를 표시하려는 경우, 중간 광고가 필요한 시점에서 약 5~8초 전에 RequestAd 메서드를 사용하여 광고를 미리 가져옵니다. 이렇게 하면 표시되기 전에 광고 요청 및 준비에 충분한 시간이 허용됩니다. 광고 형식으로는 AdType::Display를 지정합니다.

    m_interstitialAd->RequestAd(AdType::Display, myAppId, myAdUnitId);
    
  8. 코드에서 광고를 표시할 지점에 InterstitialAd를 표시할 준비가 되었는지 확인한 다음, Show 메서드를 사용하여 표시합니다.

    if ((InterstitialAdState::Ready == m_interstitialAd->State))
    {
        m_interstitialAd->Show();
    }
    
  9. InterstitialAd 개체에 대한 이벤트 처리기를 정의합니다.

    void DirectXPage::OnAdReady(Object^ sender, Object^ args)
    {
        // Your code goes here.
    }
    
    
    void DirectXPage::OnAdCompleted(Object^ sender, Object^ args)
    {
        // Your code goes here.
    }
    
    void DirectXPage::OnAdCancelled(Object^ sender, Object^ args)
    {
        // Your code goes here.
    }
    
    void DirectXPage::OnAdError(Object^ sender, Microsoft::Advertising::WinRT::UI::AdErrorEventArgs^ args)
    {
        // Your code goes here.
    }
    
  10. 앱을 빌드하고 테스트하여 테스트 광고가 표시되는지 확인합니다.

라이브 광고와 앱 릴리스하기

  1. 앱에 사용할 중간 광고는 중간 광고에 대한 지침을 따라야 합니다.

  2. 파트너 센터에서 앱 내 광고 페이지로 이동하여 광고 단위를 생성합니다. 광고 단위 형식의 경우에는 표시하려는 중간 광고의 유형에 따라 동영상 중간 광고 또는 배너 중간 광고를 선택합니다. 광고 단위 ID와 애플리케이션 ID를 모두 기록해 둡니다.

    참고

    테스트 광고 단위와 라이브 UWP 광고 단위의 애플리케이션 ID 값은 형식이 서로 다릅니다. 테스트 애플리케이션 ID 값은 GUID입니다. 파트너 센터에서 라이브 UWP 광고 단위를 만들 때 광고 단위의 애플리케이션 ID 값은 항상 앱의 Store ID와 일치합니다(예: Store ID 값은 9NBLGGH4R315와 비슷한 형식).

  3. 필요에 따라 앱 내 광고 페이지의 조정 설정 섹션에서 설정을 구성하여 InterstitialAd의 광고 조정을 사용하도록 설정하는 방법도 있습니다. 광고 조정을 통해 Taboola 및 Smaato 같은 기타 유료 광고 네트워크와 Microsoft 앱 프로모션 캠페인에 대한 광고 등 여러 광고 네트워크의 광고를 표시하여 광고 수익과 앱 프로모션 기능을 최대화할 수 있습니다.

  4. 코드에서 테스트 광고 단위 값을 파트너 센터에서 생성한 라이브 값으로 바꿉니다.

  5. 파트너 센터를 사용하여 Store에 앱을 제출합니다.

  6. 파트너 센터에서 광고 성과 보고서를 검토합니다.

앱에서 여러 중간 광고 컨트롤에 대한 광고 단위 관리하기

단일 앱에서 여러 InterstitialAd 컨트롤을 사용할 수 있습니다. 이 경우 각 컨트롤에 다른 광고 단위를 할당하는 것이 좋습니다. 다른 광고 단위를 각 컨트롤에 사용하면 별도로 조정 설정을 구성할 수 있고, 각 컨트롤에 대해 별개의 보고 데이터를 가져올 수 있습니다. 이렇게 하면 서비스를 통해 앱에 제공하는 광고를 더 효과적으로 최적화할 수 있습니다.

중요

앱별로 하나의 광고 단위만 사용할 수 있습니다. 특정 광고 단위를 둘 이상의 앱에 사용하면 해당 광고 단위에 광고가 제공되지 않습니다.