스플 웹에서는 Google Ad Manager와의 직접 계약을 통해 보상형 동영상 광고를 트래피킹하고있습니다. 웹에 보상형 동영상 광고를 트래피킹하기 위해서는 구글 애드매니저 웹사이트에서의 일련의 설정 과정과 코드단에서의 작업이 필요합니다.
이번 포스팅에서는 구글 애드매니저 웹사이트에서 광고를 보상형 광고를 설정하고, 코드단에서의 작업을 통해 웹사이트에 광고를 보여주는 전체 과정을 공유합니다.

결과

보상형 광고와 관련된 기본 개념

• DFP(DoubleClick for Publishers)
  • Google Ad Manager로 리브랜딩되었습니다. 둘 다 같은 의미로, 두 단어 모두 쓰이고 있습니다.
  • 인벤토리를 정의하고 광고 캠페인을 생성, 관리, 보고하는 솔루션입니다.
• Ad Exchange: 구글 광고 네트워크
• Google Ad Manager(DFP와 Ad Exchange가 통합되어 리브랜딩 됨)
  • 광고 게시자가 광고 인벤토리를 판매, 예약, 전달, 및 관리할 수 있는 광고 플랫폼입니다.
  • GA, Adsense와 연동되어 유용하고 강력한 기능을 제공합니다.
  • 접 광고 물량을 진행하는 매체(publisher)가 애드센스와 애드 익스체인지(ad exchange) 등의 다양한 광고 네트워크를 데스크톱, 모바일웹, 앱에서 관리할 수 있도록 돕는 통합 광고 플랫폼(서버)입니다.
  • 무료 광고 서버를 이용해 직접광고가 부족한 잔여 인벤토리를 구글 광고 네트워크로 채울 수 있습니다.
  • 구글 광고 네트워크와 제3자 광고 네트워크를 경쟁시켜 애드센스 하나만 운영하는 것보다 더 높은 광고 CPM을 얻을 수 있습니다.
• Ad Unit(광고 단위)
  • 광고 소재를 게재할 수 있는 공간/영역
  • 광고 단위를 기반으로 GPT 태그를 만들어 소스코드에 추가합니다.
• Line item(광고 항목)
  • 광고가 나가는 시기와 방법 및 타게팅(광고 인벤토리, 국가, 플랫폼 등)을 결정합니다.
• Creatives(광고 소재)
  • 실제 광고에 노출될 광고 소재로, 이미지, 텍스트, 동영상 등 유저가 실제로 보게 될 광고 소재입니다.

구글 애드매니저 설정

1. 광고 단위(Ad unit) 설정하기

✅ 왼쪽 카테고리 중 Inventory ⇒ Ad units ⇒ “New ad unit” 버튼 클릭

• name: 광고 단위의 이름
• code: 고유한 광고 단위의 코드(편의상 광고 단위의 이름과 동일하게 설정)
• description: 광고 단위에 대한 설명

• sizes는 fixed size로 설정한 후 따로 추가하지 않음
  • 광고 단위의 크기는 웹용 보상형 광고에 대한 광고 게재에 영향을 주지 않는다.

• target window: 새 창에서 띄우는 것이 아닌 해당 페이지 내에서 광고를 보여주기 위해 _top으로 세팅

• reward: reward는 기본값 유지

• placements: 기본 값 유지

• AdSense: Google AdExchange를 사용하므로 이 항목은 체크 해제

• frequency caps, refrech rate: 둘 다 기본값 유지

2. 주문(Order) 추가하기

✅ 왼쪽 카테고리 중 Delivery ⇒ Orders ⇒ New order

• Name: 광고 주문 이름
• Advertiser: (광고주) thingsflow

3. 광고항목(Line item) 설정하기

• Ad type: 왼쪽 Display 선택

• Name: 광고 항목

• (중요) Line item type: Ad Exchange로 설정

• Expected creatives: line item의 size라고 생각하면 됨. 이 광고 항목을 보여줄 ad unit과 매칭되어야 함.

• Start time: 광고 게재를 시작할 날짜
• End time: 광고 게재를 종료할 날짜

• Add targeting: 광고를 보여줄 광고 단위를 설정

• Ad Exchange를 이용하는 경우, creative를 자동으로 생성함. (Automatically generate creative 버튼 클릭)

4. 코드단에 GPT(Google Publisher Tag) 태그 삽입

✅ Inventory → Ad unit → Tags 탭

• 필요에 따라 이것 저것 설정해서 tag 코드 만들기 → 소스코드에 삽입

5. GPT 태그를 소스코드에 삽입하기

구글 애드매니저 가이드 문서에서 제공하는 예시 코드(바닐라 자바스크립트)를 Nextjs 흐름에 맞게 변형하여 광고 노출 코드를 어플리케이션 내에 구현하면 광고 게재가 완료됩니다.

Nextjs 라이브러리에서 GPT 태그를 이용해 리워드형 광고를 삽입한 소스코드는 아래 링크를 참고해주세요.

https://github.com/eunbin20/display-rewarded-ad-in-nextjs/blob/main/components/Advertisement.tsx

그러나, 위 단계대로 설정하였으나 GPT 태그를 웹사이트에 삽입하여도 페이지에 리워드 광고가 게재되지 않았습니다.

생성한 광고 주문과 광고 항목의 상태가 “Ready” 상태로 일주일 이상 머물러있었습니다.

구글 애드매니저 관계자분께 메일로 문의 드린 결과,

애드센스(&애드매니저) 계정 Verification(주소 확인) 절차가 완료되지 않아 광고가 게재되지 않고 있었습니다.

라는 답변을 받았고, 해당 절차 완료 후에 광고를 정상적으로 게재되는 것을 확인하였습니다 🎉

짧은 회고

이번 작업은 기존에 웹에 리워드형 동영상 광고를 삽입한 레퍼런스가 거의 없었고, 구글 애드매니저 자체도 이런 형태의 광고 게재에 대한 명확한 기반이 마련되어 있지 않아 생각했던 것보다 험난한 여정이었습니다. 광고 계약과 관련된 모든 커뮤니케이션을 담당자님과 메일로 주고받으며 해결하는 과정에서 우여곡절도 많았지만, 그만큼 배운 것도 많았던 작업이었습니다. 무엇보다, 프로덕트에 새로운 비즈니스 가치를 창출할 수 있는 수단을 만들어냈다는 점에서 큰 보람을 느낄 수 있었습니다. ☺️

참고

https://developers.google.com/publisher-tag/samples/display-rewarded-ad?hl=ko https://medium.com/@vishaltajpm/adding-google-publisher-tag-ads-in-next-js-f17dc859af05