다음은 데스크톱 및 모바일 구현을 위한 GPT(Google 게시자 태그)를 만드는 데 필요한 전체 코드의 샘플입니다. Google 태그 생성기를 사용하여 태그를 자동으로 생성합니다.
개발자 및 GPT의 고급 구현이 필요한 개발자는 API 참조 문서 및 샘플 구현(예: 지연 로드)을 참조하세요.
Google 게시자 태그 예시 코드
GPT용으로 구현된 코드에는 두 개의 섹션이 있습니다.
- GPT의 구성은 웹페이지의
<head>에 배치됩니다. - 각 특정 광고 슬롯에 대한 호출은
<body>의 관련 섹션에 들어갑니다.
이 샘플은 정보 제공을 목적으로 하며, 개발자가 웹사이트에서 코드를 구현하도록 하는 것이 좋습니다.
GPT 구성
다음 코드 예시에는 GPT JavaScript 라이브러리 호출, 광고 슬롯 정의, 키-값 타겟팅 등이 포함되어 있습니다.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
3~6행: Ad Manager에서 사용한 GPT 라이브러리를 SSL/HTTPS를 사용하여 비동기식으로 로드합니다. 여기에서 비동기식으로 처리할 함수 목록(일반적으로 광고 호출)을 처리하는 명령 대기열이 만들어집니다. 이 코드 섹션은 수정할 필요가 없습니다. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
9행:
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
11, 14, 15행: GPT로 타겟팅 및 크기를 설정하는 방법 자세히 알아보기 |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
16행: 페이지 수준 키-값으로 타겟팅을 설정하는 경우 모든 광고 슬롯에 이 타겟팅이 상속됩니다. 슬롯 수준 키-값과 마찬가지로 하나의 키에 여러 값을 연결할 수 있습니다( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
17행: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
23행(선택사항): 여러 크기의 태그를 사용하는 경우 이를 생략하거나(이 경우 요소의 크기는 렌더링 시 선택한 광고 소재의 크기를 사용함) 가장 적합한 광고 소재를 포함할 수 있도록 두 측정기준을 크게 설정하는 것이 좋습니다. 단일 크기 광고 태그의 경우 이 매개변수를 사용하여 광고 소재가 로드될 때까지 컨테이너 요소를 확장하세요. 이렇게 하면 광고 소재가 렌더링될 때 다른 페이지 요소가 바뀌지 않습니다. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
8, 25, 32행: 함수 호출이 명령 대기열에 추가되어 페이지가 로드될 때 비동기적으로 처리됩니다. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
9, 12, 23, 26, 30, 33행: 여기에서 임의의 숫자가 사용되지만, GPT는 이것을 사용해 광고 요청을 고유하게 식별하지는 않습니다. 광고 요청 식별은 GPT 라이브러리를 사용하여 보이지 않게 이루어집니다. 또한 이러한 이름은 동일한 페이지에서 동일한 div 이름을 여러 번 사용하지 않는 한 페이지마다 같을 수 있습니다. 인벤토리 개요에서 Ad Manager 인벤토리 구조, 광고 단위 계층 구조, 광고 단위에 타겟팅이 상속되는 방법 등을 자세히 알아보세요. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
웹페이지의 헤더를 수정할 수 없는 경우
웹사이트의 <header>를 수정하지 않고 GPT를 사용할 수 있습니다.
옵션 1: 인라인 GPT
페이지 헤더보다는 인라인 태그를 사용하여 페이지에서 광고 단위가 표시될 위치를 정의하세요. 인라인 태그를 사용하면 GPT 라이브러리 로딩을 포함하여 전체 GPT 광고 슬롯 정의 및 요청이 하나의 <script> 태그 안에 포함됩니다.
광고 태그는 GPT 자바 스크립트 라이브러리를 사용하므로 광고 태그 코드를 포함하기 전에 라이브러리를 로드하는 코드를 포함해야 합니다.
이러한 인라인 GPT 예는 SRA를 지원하지 않습니다.
GPT 자바스크립트 라이브러리 호출
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
샘플 인라인 광고 태그
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("Gender", "Male");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
옵션 2: 웹페이지 본문에 모든 코드 입력
일반적인 GPT 구현 방법을 사용할 수 있지만, 광고 슬롯 정의를 HTML의 헤더에 입력하지 않고 본문에 입력합니다.
라이브러리를 로드하고 광고 슬롯을 정의하는 코드가 호출된 후에 이러한 슬롯에 광고를 요청해야 합니다. 이 방법은 코드가 페이지의 헤더와 본문으로 분류되지 않으며 코드의 순서를 관리해야 하기 때문에 더 복잡할 수 있지만 SRA를 유연하게 사용할 수 있습니다.
JavaScript 없이 태그 없는 요청 만들기
광고 태그 대신 태그 없는 요청을 사용하여 Ad Manager에서 트래피킹되는 원시 광고 소재 코드를 요청할 수 있습니다. 태그 없는 요청은 일반적으로 맞춤 파싱 및 디스플레이가 필요한 경우에 사용됩니다(예: 셋톱 박스 또는 기타 Google 태그나 SDK가 지원되지 않는 환경).