반응형 DFP 광고 단위를 만드는 방법

게시 됨: 2016-01-22
google dfp 반응형 광고 - doubleclick 태그 예

이 게시물은 2021년 8월 31일에 가장 최근에 업데이트되었습니다.

따라서 반응형 테마가 있고 이제 애드센스에서 Google Ad Manager(GAM)로 이동하려고 합니다. 가장 먼저 보게 되는 것은 일반적으로 애드센스에서 볼 수 있는 것과 같은 반응형 광고 단위가 더 이상 없다는 것입니다.

Google의 지원 안내는 다소 까다롭거나 복잡할 수 있습니다. 그래서 오늘은 몇 가지 간단한 단계로 반응형 GAM 코드를 만드는 방법을 보여드리겠습니다.

DFP 코드를 맞춤설정하여 Google Ad Manager 반응형 광고를 만드는 것은 쉬운 일이 아닙니다.코딩 경험이 없다면 전문가가 처음부터 올바르게 코딩하도록 하는 것이 더 현명할 것입니다.광고 수익을 잃을 위험을 감수하고 싶지 않습니다!

도움이 필요하면 여기로 문의하십시오.

시작하기 전에 다음을 수행하십시오.

  1. 인벤토리를 설정합니다. 광고 단위당 모든 관련 크기를 구성합니다. 읽기: Adsense 및 GAM 통합 모범 사례
  2. 여기에서 여러 Ad Manager 태그를 생성하는 방법에 대한 튜토리얼을 확인하세요. https://youtu.be/s74dMDzczyc
  3. 이제 두 개의 텍스트 파일을 만들고 저장합니다. 좋은 텍스트 편집기를 사용하십시오(저는 무료이고 작업하기 쉽기 때문에 Notepad++를 선호합니다).
  4. 하나는 머리용으로, 다른 하나는 본문 태그용으로 만드십시오.
  5. 본문 태그를 저장합니다.
  6. 만든 head.txt 파일을 엽니다.

head 태그를 반응형으로 만들기

1단계: Notepad ++에서 head.txt를 엽니다.먼저 차근차근 해보자. 헤더 코드는 다음과 같습니다.

<!– GPT 태그 시작 –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<스크립트>

window.googletag = window.googletag || {명령: []};

googletag.cmd.push(기능() {

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</스크립트>

<!– GPT 태그 종료 –>

2단계: 코드 일부를 강조 표시했습니다.

googletag.cmd.push(기능() {

강조 표시된 줄 뒤에 약간의 코드를 추가해야 합니다. 아래는 추가해야 할 주어진 코드입니다. 다음 중에서 선택한 경로에 해당하는 인스턴스(복사본)를 최대한 많이 붙여넣습니다.

  • 크기 맵의 수입니다. 해당하는 경우 여러 광고 단위에서 동일한 크기의 지도를 재사용할 수 있습니다.
  • 가지고 있는 광고 단위의 수
  • 반응형으로 만들 광고 단위 수
var mappingadunitname = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //데스크탑

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //태블릿

addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //이동하는

addSize([0, 0], [[320, 50], [1, 1]]). //다른

짓다();

3단계: 다른 코드를 강조 표시했습니다.이것은 잠시 후에 광고 단위에 전달할 매핑의 이름입니다. 나는 이것을mappingadunitname 과 같이 만드는 것을 선호하므로 위의 예에서 단위당 1개의 크기 맵을 생성하도록 선택합니다. 즉, 4개의 인스턴스가 필요하고 다음 위치에 배치합니다.

googletag.cmd.push(기능() {

4단계: 매핑을 추가한 후 헤더 코드는 다음과 같아야 합니다.

<!– GPT 태그 시작 –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<스크립트>

window.googletag = window.googletag || {명령: []};

googletag.cmd.push(기능() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //데스크탑

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //태블릿

addSize([0, 0], [1, 1]). //다른

짓다();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //데스크탑

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //태블릿

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //이동하는

addSize([0, 0], [[320, 50], [1, 1]]). //다른

짓다();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //데스크톱

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //태블릿

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //이동하는

addSize([0, 0], [[300, 250], [1, 1]]). //다른

짓다();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //데스크탑

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //태블릿

addSize([0, 0], [1, 1]). //다른

짓다();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</스크립트>

<!– GPT 태그 종료 –>

5단계: 이제 마지막 단계입니다. 각 광고 단위에 대한 크기 매핑을 정의하거나 할당해야 합니다.여기서 하나를 선택하고 추가할 항목과 위치를 보여 드리겠습니다.

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

6단계: 이제 위 코드의 파란색 부분과 빨간색 부분 사이에 .defineSizeMapping(mappingadunitname)코드 조각을 추가해야 합니다. 즉, 점 앞에

여기서 중요한 것은 괄호 안의 단어가 광고 단위 내부에 추가하려는 크기 맵과 일치해야 한다는 것입니다. 여기 예에서 RightRail_Ad1의 모양은 다음과 같아야 합니다.

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

7단계: 다른 모든 광고 단위에 유사한 매핑을 추가하면 최종 코드가 제공됩니다.

<!– GPT 태그 시작 –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<스크립트>

window.googletag = window.googletag || {명령: []};

googletag.cmd.push(기능() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //데스크톱

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //태블릿

addSize([0, 0], [1, 1]). //다른

짓다();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //데스크탑

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //태블릿

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //이동하는

addSize([0, 0], [[320, 50], [1, 1]]). //다른

짓다();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //데스크탑

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //태블릿

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //이동하는

addSize([0, 0], [[300, 250], [1, 1]]). //다른

짓다();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //데스크톱

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //태블릿

addSize([0, 0], [1, 1]). //다른

짓다();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.defineSizeMapping(mappingheaderad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.defineSizeMapping(mappingcontentad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.defineSizeMapping(mappingcontentad2).addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</스크립트>

<!– GPT 태그 종료 –>

참고: 어떤 크기 맵이 어떤 광고 단위에 사용되었는지 강조하기 위해 강조 표시된 코드의 일부입니다.

8단계: 이제 크기 매핑을 살펴보겠습니다.

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //데스크탑

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //태블릿

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //이동하는

addSize([0, 0], [[300, 250], [1, 1]]). //다른

짓다();

빨간색 코드는 브라우저의 너비와 높이를 정의합니다. 일반적으로 높이는 위의 코드에서 2줄의 너비가 같을 때만 고려되기 때문에 중요하지 않습니다.

9단계: 이제 첫 번째 줄에서 다음과 같이 말합니다.

  • 브라우저의 너비가 992픽셀 이상인 경우 728×280, 728×90, 336×280, 300×250 또는 1×1 광고 크기를 표시하세요.

그리고 마지막 줄에 다음과 같이 말하고 있습니다.

  • 브라우저의 너비가 320픽셀 이상인 경우 320×50, 320×100, 320×200, 300×250 또는 1×1 광고 크기를 표시하세요.

no.s, 992px, 768px 및 320px는 데스크톱, 태블릿 및 모바일 브라우저의 기존 크기를 따르기 때문에 대부분의 웹사이트에서 작동합니다.

그러나 태블릿 및 모바일 테마가 포함된 웹사이트가 있는 경우 개발자에게 테마 전환이 트리거되는 브라우저 크기를 문의한 다음 각각 768px 및 320px 대신 해당 크기를 추가할 수 있습니다.

2019년 프로그래매틱 수익 전략은 무엇입니까?

MonetizeMore에서는 게시자가 기존 광고 인벤토리에서 더 많은 수익을 얻을 수 있도록 지원합니다.우리는 최고의 Google 게시 파트너이며 고객이 수익 목표를 달성하고 광고 운영 문제를 해결하는 데 도움이 되는 게시자 수익 창출 솔루션 제품군을 보유하고 있습니다.

DFP 반응형 광고 단위를 직접 설정할 수 있지만 기회 비용을 고려하는 것이 중요합니다.잘못된 설정으로 인해 비즈니스 성장에 투자하고 수익 손실 위험을 감수할 수 있는 시간을 투자할 가치가 있습니까?

DFP 반응형 광고 단위 설정에 대한 도움을 받고 싶은 경우.오늘 MonetizeMore에서 프리미엄 계정에 가입하세요!

수익 창출더 많은 프로그래매틱 수익 최적화

관련 읽기:

  • 애드센스는 반응형 광고 단위를 제공합니다.
  • 2016년 최고의 모바일 광고 유형
  • 게시자를 위한 Doubleclick의 Accelerated Mobile Pages의 이점
  • 모바일 광고 지출이 데스크톱을 능가함에 따라 퍼블리셔를 준비시키는 방법
  • 이제 Doubleclick은 모바일 광고주 및 게시자에게 교차 기기 추적 및 기본 광고를 제공합니다.