VPAID 2 JavaScript 광고 소재 사용 설정
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
IMA HTML5 SDK는 VPAID 2 JavaScript 광고 소재를 지원합니다. 지원 기능을 사용 설정할 때 VPAID 2 사양과 IMA SDK의 VPAID 2 지원 방식 간에 알아야 할 두 가지 주요 차이점이 있습니다. 이러한 차이는 플레이어나 SDK 구현 코드에는 영향을 미치지 않지만 VPAID 2 JavaScript 광고 소재 작성자에게는 중요합니다. IMA HTML5 SDK로 렌더링될 때 광고 소재에서 오류가 발생하거나 예상대로 작동하지 않을 수 있기 때문입니다.
기본 요건
이 가이드를 따라 진행하려면 다음이 있는 앱으로 시작하세요.
- IMA HTML5 SDK가 통합된 HTML5 동영상 플레이어 계정이 없으면 IMA SDK 설정을 확인하세요.
- VPAID 2 JavaScript 광고 소재를 가리키는 VAST 광고 태그 URL입니다.
유용한 사전 참고 자료
VPAID 2 지원 사용 설정
VPAID 2 JavaScript 지원을 사용 설정하려면 AdDisplayContainer를 초기화하기 전에 다음 메서드를 호출하세요.
google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);
...
var adDisplayContainer = new google.ima.AdDisplayContainer(adContainerElement);
var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
...
사용 가능한 VPAID 모드는 다음과 같습니다.
ENABLED - 기본 설정으로 VPAID 광고를 허용합니다.INSECURE - 비보안 모드에서 VPAID 광고를 허용합니다. 자세한 내용은 IFrame 보안 및 동영상 플레이어 프록시 요소를 참고하세요.DISABLED - VPAID 광고가 재생되지 않습니다. 요청된 광고가 VPAID 광고 소재를 반환하면 오류가 발생합니다.
VPAID 모드에 대한 자세한 내용은 ImaSdkSettings.VpaidMode의 API 문서를 참고하세요.
VPAID 2 지원 주의사항
iframe 보안
기본적으로 IMA SDK는 호환 iframe(동일한 도메인) 또는 인페이지 스크립트 대신 보안 iframe을 사용하여 VPAID 2 JavaScript 광고 소재를 렌더링합니다.
즉, 광고 소재가 상위 페이지의 DOM에 액세스할 것으로 예상하는 경우 오류가 발생할 수 있습니다. 대신 호환 iframe에 광고를 렌더링하려면 다음과 같이 ImaSdkSettings.setVpaidMode(...)을 사용하면 됩니다.
adsLoader.getSettings().setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.INSECURE);
동영상 플레이어 프록시 요소
보안 및 적절한 모바일 기능을 위해 ENABLED 모드에서 IMA HTML5 SDK는 광고에 실제 동영상 요소를 제공하지 않습니다. 대신 일반 동영상 요소의 기능을 대부분 모방하는 프록시 요소를 제공합니다.
지원되는 API 메서드만 호출하는 광고 소재의 경우 광고 소재 렌더링에 동작 변경이 없어야 합니다. VpaidMode.INSECURE 모드에서는 SDK가 프록시 대신 동영상 플레이어 요소를 제공합니다.
동영상 프록시 요소에서 사용할 수 있는 메서드, 리스너, 속성은 다음과 같습니다.
메서드
addEventListenercanPlayTypeloadplaypausesetattribute
addEventListener의 이벤트 유형
abortcanplaycanplaythroughclickdurationchangeemptiedendederrorloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangesuspendseekedseekingtimeupdatewaiting
속성
currentTimedurationendedpausedplaybackRatesrctype
FAQ
- iOS 또는 Android SDK에서 VPAID 2 JavaScript 광고 소재가 지원되나요?
-
IMA HTML5 SDK는 VPAID 2 JavaScript 광고 소재를 지원하는 유일한 IMA SDK 플랫폼입니다.
- 이렇게 하면 IMA HTML5 SDK에서 VPAID 광고 소재가 사용 설정되나요?
- 예, IMA HTML5 SDK는 VPAID 2 JavaScript 광고 소재를 지원합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-08-31(UTC)
[null,null,["최종 업데이트: 2025-08-31(UTC)"],[[["\u003cp\u003eThe IMA HTML5 SDK supports VPAID 2 JavaScript creatives, requiring a simple setup process outlined in the guide.\u003c/p\u003e\n"],["\u003cp\u003eKey differences exist between the VPAID 2 spec and the IMA SDK's implementation, primarily impacting creative authors.\u003c/p\u003e\n"],["\u003cp\u003eBy default, the SDK uses a secure iframe for rendering VPAID 2 creatives, but you can switch to a friendly iframe for DOM access.\u003c/p\u003e\n"],["\u003cp\u003eA video proxy element is used for security and mobile functionality, providing a subset of video element functionalities to the ad.\u003c/p\u003e\n"],["\u003cp\u003eVPAID 2 JavaScript creative support is currently exclusive to the IMA HTML5 SDK, not available in the iOS or Android SDKs.\u003c/p\u003e\n"]]],[],null,["# Enable VPAID 2 JavaScript creatives\n\nThe IMA HTML5 SDK supports VPAID 2 JavaScript creatives. Enabling support is easy, but there are two differences to be aware of between the [VPAID 2 spec](//iabtechlab.com/standards/video-player-ad-interface-definition-vpaid/) and the way the IMA SDK supports VPAID 2. These differences do not impact player or SDK implementation code, but they are important for VPAID 2 JavaScript creative authors, as creatives may throw errors or not work as expected when rendered by the IMA HTML5 SDK.\n\nPrerequisites\n-------------\n\n- HTML5 video player with the IMA HTML5 SDK integrated. If you don't have one, check out [Set up the IMA SDK](/interactive-media-ads/docs/sdks/html5/client-side).\n- A VAST ad tag URL that points to a VPAID 2 JavaScript creative.\n\nHelpful primers\n---------------\n\n- If you're not familiar with VPAID 2, you can read more at [IAB's VPAID page](//iabtechlab.com/standards/video-player-ad-interface-definition-vpaid/).\n\nEnabling VPAID 2 support\n------------------------\n\nTo enable VPAID 2 JavaScript support, call the following method before initializing your [AdDisplayContainer](/interactive-media-ads/docs/sdks/html5/client-side/reference/class/google.ima.AdDisplayContainer): \n\n```gdscript\n google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);\n ...\n var adDisplayContainer = new google.ima.AdDisplayContainer(adContainerElement);\n var adsLoader = new google.ima.AdsLoader(adDisplayContainer);\n ...\n```\n\nThe available VPAID modes are as follows:\n\n- `ENABLED` - Allows VPAID ads with the default settings.\n- `INSECURE` - Allows VPAID ads in insecure mode. For more information, see [IFrame security](#iframe-security) and [Video player proxy element](#proxyelement).\n- `DISABLED` - VPAID ads do not play. If a requested ad returns a VPAID creative, an error is thrown.\n\nFor more information on VPAID modes, see the API documentation for [ImaSdkSettings.VpaidMode](/interactive-media-ads/docs/sdks/html5/client-side/reference/namespace/google.ima.ImaSdkSettings#google.ima.ImaSdkSettings.VpaidMode).\n\nVPAID 2 support caveats\n-----------------------\n\n### IFrame security\n\nBy default, the IMA SDK uses a secure iframe instead of a friendly iframe (same domain) or an in-page script to render VPAID 2 JavaScript creatives. This means that if a creative expects to access the DOM of the parent page, it could potentially cause an error. To render your ad in a friendly iframe instead, you can use `ImaSdkSettings.setVpaidMode(...)` like so: \n\n```text\nadsLoader.getSettings().setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.INSECURE);\n```\n\n\u003cbr /\u003e\n\n### Video player proxy element\n\nFor security and proper mobile functionality, in `ENABLED` mode the IMA HTML5 SDK doesn't provide the actual video element to the ad; instead it provides a proxy element that mimics much of the functionality of the normal video element. For ad creatives that call only supported API methods, there should be no behavior changes in the rendering of the creatives. With `VpaidMode.INSECURE` mode, the SDK provides the video player element instead of the proxy.\n\nHere are the methods, listeners and attributes available on the video proxy element:\n\n#### Methods\n\n- `addEventListener`\n- `canPlayType`\n- `load`\n- `play`\n- `pause`\n- `setattribute`\n\n#### Event types for addEventListener\n\n- `abort`\n- `canplay`\n- `canplaythrough`\n- `click`\n- `durationchange`\n- `emptied`\n- `ended`\n- `error`\n- `loadeddata`\n- `loadedmetadata`\n- `loadstart`\n- `pause`\n- `play`\n- `playing`\n- `progress`\n- `ratechange`\n- `suspend`\n- `seeked`\n- `seeking`\n- `timeupdate`\n- `waiting`\n\n#### Attributes\n\n- `currentTime`\n- `duration`\n- `ended`\n- `paused`\n- `playbackRate`\n- `src`\n- `type`\n\nFAQ\n---\n\nAre VPAID 2 JavaScript creatives supported in the iOS or Android SDKs?\n: The IMA HTML5 SDK is the only IMA SDK platform that currently supports VPAID 2 JavaScript creatives.\n\nDoes this enable VPAID creatives in the IMA HTML5 SDK?\n: Yes, the IMA HTML5 SDK supports VPAID 2 JavaScript creatives."]]
