HTML 5 및 JavaScript의 AdControl

  • 아티클

Warning

2020년 6월 1일부로 Windows UWP 앱용 Microsoft 광고 수익 창출 플랫폼이 종료됩니다. 자세한 정보

이 연습에서는 AdControl 클래스를 사용하여 Windows 10용 및 Windows 11용 UWP(유니버설 Windows 플랫폼) JavaScript/HTML 앱에 배너 광고를 표시하는 방법을 보여줍니다.

JavaScript/HTML 앱에 배너 광고를 추가하는 방법을 보여주는 샘플 프로젝트 전체는 GitHub 관련 광고 샘플을 참조하세요.

필수 조건

참고 항목

Windows 10 SDK 10.0.14393 버전이나 이후의 Windows SDK 버전이 설치되어 있는 경우, WinJS 라이브러리 또한 설치해야 합니다. 이전 Windows 10용 Windows SDK 버전에는 이 라이브러리가 포함되어 있었지만, 10.0.14393(1주년 업데이트) 버전부터는 라이브러리를 별도로 설치해야 합니다.

앱에 배너 광고 통합

  1. Visual Studio에서 프로젝트를 열거나 새 프로젝트를 생성하세요.

    참고 항목

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

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

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

    1. 솔루션 탐색기 창에서 참조를 마우스 오른쪽 버튼으로 클릭하고 참조 추가를 선택하세요.
    2. 참조 관리자에서 유니버설 Windows를 펼치고 확장을 클릭한 다음, JavaScript용 Microsoft 광고 SDK(버전 10.0) 옆에 있는 확인란을 선택하세요.
    3. 참조 관리자에서 확인을 클릭하세요.

  4. index.html 파일(또는 프로젝트에 적합한 다른 html 파일)을 여세요.

  5. <헤드> 섹션에서 프로젝트의 default.css 및 main.js에 대한 JavaScript 참조 뒤에 ad.js에 대한 참조를 추가하세요.

    <!-- Advertising required references -->
<script src="//Microsoft.Advertising.JavaScript/ad.js"></script>

    참고 항목

    이 줄은 <head> 섹션에서 main.js를 포함한 후에 추가해야 합니다. 그러지 않으면 프로젝트를 빌드할 때 오류가 발생합니다.

  6. default.html 파일(또는 프로젝트에 해당하는 다른 html 파일)의 <body> 섹션을 AdControl에 대한 div를 포함하도록 수정합니다. 테스트 광고 단위 값에 AdControl의 applicationId와 adUnitId 속성을 할당합니다. 또한 배너 광고에 지원되는 광고 크기 중 하나가 되도록 컨트롤의 높이와 너비를 조정합니다.

    참고 항목

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

    <div id="myAd" style="position: absolute; top: 50px; left: 0px; width: 300px; height: 250px; z-index: 1"
    data-win-control="MicrosoftNSJS.Advertising.AdControl"
    data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">
</div>

  7. 앱을 컴파일하고 실행하여 광고와 함께 표시되게 하세요.

다음 예제는 간단한 앱의 완전한 index.html을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AdControlExampleApp</title>
    <!-- WinJS references -->
    <link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
    <script src="lib/winjs-4.0.1/js/base.js"></script>
    <script src="lib/winjs-4.0.1/js/ui.js"></script>
    <!-- AdControlExampleApp references -->
    <link href="css/default.css" rel="stylesheet" />
    <script src="js/main.js"></script>
    <!-- Required reference for AdControl -->
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
</head>
<body>
    <div id="myAd" style="position: absolute; top: 50px; left: 0px; width: 300px; height: 250px; z-index: 1"
      data-win-control="MicrosoftNSJS.Advertising.AdControl"
      data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">
    </div>
    <p>Content goes here</p>
</body>
</html>

JavaScript에서 프로그래밍 방식으로 AdControl 생성하기

이전 단계는 HTML 태그에서 AdControl을 선언하는 방법을 보여줍니다. 또는 JavaScript를 사용하여 프로그래밍 방식으로 AdControl을 만들 수 있습니다. 이 예제에서는 HTML에서 ID가 myAd인 기존 div를 사용하고 있다고 가정합니다.

var adDiv = document.getElementById("myAd");
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
    applicationId: "3f83fe91-d6be-434d-a0ae-7351c5a997f1",
    adUnitId: "test",
});

myAdControl.isAutoRefreshEnabled = false;
myAdControl.onErrorOccurred = myAdError;
myAdControl.onAdRefreshed = myAdRefreshed;
myAdControl.onEngagedChanged = myAdEngagedChanged;

이 예제에서는 사용자가 myAdError, myAdRefreshed, myAdEngagedChanged라는 이벤트 처리기 메서드들을 이미 선언했다고 가정합니다.

이 코드를 사용해도 광고가 표시되지 않는다면 AdControl이 담겨 있는 div에 position:relative 특성을 삽입해 보면 됩니다. 이렇게 하면 IFrame의 기본 설정이 재정의됩니다. 이 특성의 값 때문에 광고가 표시되지 않는 경우를 제외하면 광고가 올바르게 표시됩니다. 새 광고 단위는 최대 30분 동안 사용할 수 없다는 점에 유의하세요.

참고 항목

이 예제에 표시된 applicationId 및 adUnitId 값은 테스트 모드 값입니다. 앱을 제출하기 전에 파트너 센터에서 이러한 값을 라이브 값으로 교체해야 합니다.

라이브 광고와 앱 릴리스

  1. 앱에 사용할 배너 광고는 배너 광고 지침을 따라야 합니다.

  2. 파트너 센터에서 인앱 광고 페이지로 이동하여 광고 단위를 만듭니다. 광고 단위 형식으로 배너를 지정하세요. 광고 단위 ID와 애플리케이션 ID를 모두 적어 두세요.

    참고 항목

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

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

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

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

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

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

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

Important

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