많은 서비스에서 자사 서비스 유입을 위해 '배너 광고'를 많이 사용합니다.
그중 프로모션 이벤트 형식의 자사 제품 광고를 할 때 관련 이미지나 정보를 직접 하드코딩하여 배포하는 경우가 많습니다.
이때 단순 반복 작업은 개발 리소스 낭비이기에 배포가 아닌 광고 서비스를 많이 사용하는데요.
이번 글에서는 그중 흔하게 사용되는 Google Ad Manager 적용과정을 개발자 관점에서 작성하려 합니다.
우선 Google Ad Manager와 쓰이는 용어를 간단히 설명하고, 고정된 크기의 광고를 설정하는 법, HTML & CSS를 이용해서 반응형 광고를 설정하고 React에서 적용하는 방법들을 설명하도록 하겠습니다.
Google Ad Manager 란?
Google Ad Manager는 광고주와 발행사가 디지털 광고를 관리하고 최적화하기 위한 플랫폼이며 아래와 같은 장점을 가지고 있습니다.
- 광고 인벤토리 관리: 광고를 인벤토리 단위로 효율적으로 관리하고 광고 슬롯을 설정할 수 있습니다.
- 광고 캠페인 관리: 광고주들이 광고 캠페인을 만들고 관리할 수 있으며 예산 설정, 광고 형식, 타게팅 옵션 설정 등 다양한 기능이 있습니다.
- 광고 수익 최적화: 광고 수익을 극대화하기 위해 다양한 도구를 활용할 수 있으며, 자동화된 가격 설정 기능을 사용하여 최적의 광고 가격을 설정할 수 있습니다.
- 광고 데이터 분석: 광고 성과를 추적하고 분석할 수 있는 도구를 제공하며, 이를 통해 광고주와 발행사는 광고 성과를 실시간으로 모니터링하고 개선할 수 있습니다.
- 다양한 광고 형식 지원: 이미지, 동영상, 텍스트 등 다양한 광고 형식을 지원하며, 이를 통해 다양한 채널과 플랫폼에서 광고를 게재할 수 있습니다.
이제 가장 중요한 Delivery 항목을 살펴보겠습니다.
Delivery 섹션은 광고주와 발행사가 광고 캠페인을 관리하고 실행하는 데 사용되는 요소들을 포함하며, 각 항목에 대한 설명은 아래와 같습니다.
- Orders: 주문은 광고주가 발행사에게 광고를 구매하는 요청을 나타냅니다. 주문은 광고 캠페인의 상위 수준 구성 요소로서 여러 개의 라인 아이템을 포함할 수 있습니다.
- Line Items: 라인 아이템은 특정 광고주의 광고 캠페인의 세부 사항을 정의합니다. 예를 들어, 특정 기간 동안 특정 광고 슬롯에 특정한 광고를 표시하도록 설정될 수 있습니다. 라인 아이템은 주문의 하위 수준 구성 요소입니다.
- Creatives: 창작물은 실제로 광고 캠페인에서 표시되는 광고 자료입니다. 이미지, 동영상, HTML5 등 다양한 형식의 광고가 포함될 수 있습니다.
- Native: 네이티브는 사용자 경험을 개선하고 광고 효과를 향상하기 위해 콘텐츠와 자연스럽게 통합되는 형태의 광고입니다.
그 이외에 Inventory 항목은 광고를 게재할 수 있는 광고 슬롯 또는 광고 공간이며 웹사이트, 앱 등 기타 플랫폼에서 광고를 게재할 수 있는 실제 공간을 의미합니다.
그 안의 Ad Units는 쉽게 계층 구조로 설명할 수 있는데, 새 광고 단위는 기본으로 '최상위 수준'이며 광고 단위로 이동하여 현재 수준과 동일하거나 그 아래에 광고 단위를 만들 수 있습니다. 그리고 하위 광고 단위는 상위 광고 단위 또는 기본 네트워크 설정의 속성을 상속받을 수 있으며 하위 항목에서 이러한 속성을 재정의 할 수 있습니다.
여기서 가져가야 할 핵심 개념은 Order와 Line Items의 상하 관계(>)가 있으며 하나의 Order가 여러 Line Items을 가질 수 있다는 점입니다.
Line Items을 세팅할 때 Top level (Ad units)을 설정 가능합니다.
사이즈는 '숫자 x 숫자' 형식으로 원하는 크기로 설정 가능할 수 있으며, 중간에 영어 소문자 x가 들어갑니다.
이때 중요한 점은 여기서 설정한 크기와 업로드할 이미지(광고)의 크기와 정확히 일치해야 세팅을 완료할 수 있으며
Add creative 부분에서 업로드할 이미지와 세팅을 완료하면 preview 부분에서 확인할 수 있습니다.
다음은 프로젝트에 연동해 보겠습니다. 를 통해 쉽게 테스트도 가능합니다.
React 프로젝트에 Google Publisher Tag 설정하기
프로젝트에 세팅하는 과정은 어렵지 않습니다. (링크 참고)
아래 형식으로 설정 가능하며 테스트 링크를 통해 쉽게 테스트도 가능합니다.
...
<title>Display a test ad</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
// Define an ad slot for div with id "banner-ad".
googletag
.defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
.addService(googletag.pubads());
// Enable the PubAdsService.
googletag.enableServices();
});
</script>
</head>
<body>
<div id="banner-ad" style="width: 300px; height: 250px"></div>
<script>
googletag.cmd.push(() => {
// Request and render an ad for the "banner-ad" slot.
googletag.display("banner-ad");
});
</script>
...
여기서 주의 깊게 봐야 하는 부분은 이 부분입니다.
defineSlot('ad-unit-path', [width, height], 'div-id')
ad-unit-path 부분은 아래 사진에 있는 계정 번호 + Code (ex. "/23456281572/TEST")를 넣고 알맞은 크기와 광고를 적용할 컴포넌트 아이디를 추가하면 됩니다. (계정 정보와 Code 위치는 아래 사진 참고)
저는 리액트로 프로젝트를 구성하기에 다음과 같이 설정했습니다.
...
export function GoogleAdManager() {
const initAdManagerScript = () => {
window.googletag = window.googletag || { cmd: [] };
window.googletag.cmd.push(() => {
window.googletag
.defineSlot(AD_UNIT, ["fluid"], AD_SLOT)
.addService(window.googletag.pubads())
.setCollapseEmptyDiv(true);
window.googletag.enableServices();
});
displayDefaultWallpaper();
};
const displayDefaultWallpaper = () => {
const script = document.createElement("script");
script.innerText = `window.googletag.cmd.push(function() { window.googletag.display('${AD_SLOT}'); });`;
if (document.getElementById(AD_SLOT)) {
document.getElementById(AD_SLOT)!.appendChild(script);
}
};
useEffect(() => {
initAdManagerScript();
}, []);
return (
<Wrapper>
<div id={AD_SLOT} />
...
</Wrapper>
);
}
이제 AD_SLOT과 AD_UNIT에 적절한 값을 넣어주면 광고가 보이는 걸 확인할 수 있습니다.
반응형 광고 (Fluid 형식) 설정하기
광고가 항상 고정된 크기가 아니거나, 페이드 인 같은 애니메이션 효과를 주고 싶을 때에는 Fluid 형식을 사용해야 합니다.
우선 포맷(Native formats) 설정을 해야 합니다.
포맷을 쉽게 설명하자면 이미지 파일, 이동할 URL링크 등 개발 프로젝트에서 직접 정의하지 않은 '변수'들을 정의하는 부분입니다.
다양한 변수를 추가할 수 있으며, 각 변수별 적절한 세팅을 할 수 있습니다.
그리고 여기서 정의한 변수는 HTML & CSS editor에서 불러와서 사용할 수 있습니다.
포맷 설정이 끝나면 Native styles를 설정해야 합니다.
다른 선택지가 있지만 우리 개발자들에게 익숙한 HTML & CSS editor로 진행하겠습니다.
광고 크기는 Fluid로 설정하고 아까 설정했던 포맷을 적용시켜 줍니다.
그리고 관련 HTML과 CSS를 설정해 주면 됩니다.
프로젝트에 적용하는 방법은 위에서 고정된 광고를 설정하는 방법과 같은데 크기 부분만 'fluid'로 설정하면 됩니다.
* 여기서 꿀팁 *
스타일이나 이미지 파일 변경은 바로 적용이 안될 수 있습니다.
빠른 적용을 원하신다면, 스타일의 active 상태를 inactive 상태로 변경 후 원복하거나 그보다 상위 개체(ex. line items)의 active 상태를 변경하면 빠르게 바뀐 내용을 확인할 수 있습니다.
끝
------------------------------------------------
24.04.1 추가
위 내용대로 광고를 설정하면 클릭 이벤트의 집계가 되지 않는 것을 확인할 수 있다.
(클릭 횟수 확인 방법은 Creative 부분에서 clicks 부분을 확인하거나 report 기능을 이용하면 된다.)
이유는 공식문서에 잘 나와 있으며, 이 링크에서 확인할 수 있다.
해결 방법은 아래 코드와 같이 ‘%%CLICK_URL_UNESC%%’ 매크로를 이동을 원하는 링크와 같이 사용하면 된다.
ad.addEventListener(“click”, function (e) {
e.stopPropagation();
...
if (redirectLink.length) {
window.open(‘%%CLICK_URL_UNESC%%’ + redirectLink, ‘_blank’);
} else {
...
}
...
간단한 설명을 덧붙이자면 redirectLink는 Native Format에서 추가로 설정했던 redirect 용 URL이다.
만약, 아래 사진의 Destination에서 설정했던 Click-through URL로 이동하길 원한다면, 아래 코드를 참고하면 된다.
function openLandingPage() {
...
// CLICK_URL_UNESC 와 DEST_URL_ESC 를 함께 사용한다.
window.open(‘%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%’, ‘_blank’);
}'WEB > React, JS, TS 및 기타' 카테고리의 다른 글
| [Git] Could not read from remote repository 에러 해결하기 (0) | 2024.04.16 |
|---|---|
| [JS] 고인물처럼 로그 찍기 (1) | 2024.03.12 |
| React Children API 알아보기 + 덜 사용하기 (4) | 2024.01.26 |
| Lighthouse로 서비스 성능 개선하기 (0) | 2023.11.13 |
| SSH 키를 사용할 때마다 passphrase를 입력 안하도록 설정하기 (0) | 2023.10.31 |
