네이티브 광고의 코드 추가

네이티브 광고에서 HTML 및 CSS 편집기 옵션을 선택하여 HTML 및 CSS 코드를 추가해 네이티브 광고를 맞춤설정하고 스타일을 지정할 수 있습니다. 이 도움말에서는 코드 추가에 관한 도움말과 샘플을 제공합니다.

이렇게 만들어진 네이티브 광고 소재는 기존 광고(보장 프로그래매틱을 위한 게시자 관리 광고 소재는 유일하게 지원되는 프로그래매틱 광고임)로 게재할 수 있습니다. 네이티브 광고 소재를 기존 광고 및 모든 유형의 프로그래매틱 광고로 모두 게재하려면 친절한 디자인 편집기에서 '템플릿으로 시작하고 맞춤설정' 옵션을 선택하세요.

네이티브 스타일 샘플

다음은 유동적인 인피드 게재위치에 사용하는 네이티브 스타일의 HTML과 CSS 예입니다. 이 네이티브 스타일은 광고 제목, 이미지, 본문 변수가 있는 '스폰서 게시물' 네이티브 광고 형식을 기반으로 합니다.

코드 유형 샘플 코드

변수가 포함된 HTML

코드 유형	샘플 코드
변수가 포함된 HTML	`<div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1> <p>[%Body%]</p> <div class="attribution">SPONSORED</div> </div> </div>`
변수가 포함된 CSS	.sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url([%Image%]); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }


<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>

변수가 포함된 CSS


.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}

이 네이티브 스타일은 다음과 같이 네이티브 광고 소재 구성요소를 변환합니다.

구성요소	예
광고 제목	급성장하고 있는 직업 30개
이미지	jobs.jpg
본문	미국 노동통계국에서는 다음과 같은 직업이 앞으로 10년 간 가장 많이 성장할 것으로 예측하고 있습니다. 여기에는 놀라운 직업이 포함되어 있습니다.

네이티브 광고에는 다음과 같이 표시됩니다.

네이티브 광고의 예

HTML

네이티브 광고가 표시되는 방법을 지정하는 HTML 스니펫을 추가합니다.

웹 또는 앱 개발자와 공동작업하여 코드를 만들어야 할 수도 있습니다.
HTML의 <script> 태그 안에 자바스크립트가 포함될 수 있습니다.
전체 HTML 문서를 포함하면 Internet Explorer를 비롯한 일부 브라우저에서 광고가 표시되지 않으므로 광고 관련 스니펫만 포함하세요. 예를 들어 <doctype> 또는 <html>태그를 포함하지 마세요(위의 예시 참조).
네이티브 광고는 상위 페이지에서 스타일을 상속하지 않지만, HTML의 <link> 태그로 외부 스타일시트와 웹 글꼴을 가져올 수 있습니다.

타겟 창 설정을 사용하면 네이티브 광고를 클릭했을 때 해당 광고가 동일한 탭에서 열릴지 아니면 새 창에서 열릴지 제어할 수 있습니다.

기존 광고는 광고 단위 수준 설정을 상속합니다.
프로그래매틱 광고는 네트워크 수준 설정을 상속합니다.

매크로 삽입

매크로 삽입을 클릭하고 다음과 같은 버튼을 사용하여 HTML을 작성할 수도 있습니다.

CacheBuster: 코드가 실행될 때마다 광고 서버에 새로운 호출이 발생하여 노출수를 정확하게 계산하게 됩니다. CacheBuster에 대해 자세히 알아보세요.
클릭(권장): 코드 스니펫에 특수문자가 없는 경우 클릭수를 추적합니다. 클릭에 대해 자세히 알아보세요.
클릭연결 URL: 사용자가 광고를 클릭할 때 표시되는 광고 소재의 방문 페이지를 지정합니다. 클릭연결 URL에 대해 자세히 알아보세요.
이스케이프 처리된 클릭: 코드 스니펫의 클릭연결 URL에 특수 문자(예: '&', '?', '%')가 포함된 경우 클릭수를 추적합니다. 이스케이프 처리된 클릭에 대해 자세히 알아보세요.
동영상 래퍼 : 네이티브 광고의 동영상 플레이어가 포함된 래퍼입니다. 네이티브 동영상 스타일을 구성하는 방법에 대해 자세히 알아보세요.

CSS

네이티브 광고가 표시되는 방법을 지정하는 CSS 코드를 제공합니다. 위의 예를 참조하세요.

유연한 크기의 네이티브 광고를 트래피킹하는 경우 절대 위치 지정 CSS를 사용하지 마세요.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?

네이티브 광고의 코드 추가

HTML

매크로 삽입

CSS

도움이 되었나요?

도움이 더 필요하신가요?

다음 단계를 시도해 보세요.