인피드 광고를 만든 후에는 피드의 HTML에 코드를 삽입해야 합니다.
인피드 광고 코드의 삽입 위치
피드의 콘텐츠 사이 또는 피드가 시작하거나 끝나는 위치에 인피드 광고 코드를 삽입하세요. 피드의 HTML 코드를 직접 수정하면 되며, 콘텐츠 관리 시스템(CMS)을 사용하고 있다면 코드를 삽입하는 플러그인을 사용할 수 있습니다.
다음은 인피드 광고가 표시되는 모습입니다.
콘텐츠 블록 1: |
|
콘텐츠 블록 2: |
|
네이티브 인피드 광고: |
|
콘텐츠 블록 3: |
|
콘텐츠 블록 4: |
인피드 광고를 삽입하는 방법
일반적으로 CMS에는 1) 콘텐츠를 보관하는 데이터베이스 2) 피드를 만들면서 루프를 통해 콘텐츠를 실행하는 코드가 포함됩니다. 이 코드는 CMS의 템플릿 폴더(일명 '테마 폴더')에 저장되는 템플릿 파일에서 찾을 수 있습니다.
템플릿 파일에서 코드 수정하기
인피드 광고를 삽입하려면 아래의 방법으로 템플릿 파일의 코드를 수정하세요.
- 피드가 삽입된 페이지의 템플릿 파일을 엽니다.
- 피드를 생성하는 루프를 찾습니다. (힌트: 루프 코드에는 'while' 또는 'for each' 명령어가 포함될 가능성이 큽니다.)
- 인피드 광고가 피드 안에 삽입되도록 루프 코드를 수정합니다. 구체적인 방법은 다음과 같습니다.
- 루프에 카운터가 없으면 인피드 광고가 삽입되는 빈도를 설정하는 카운터를 추가하세요.
- 카운터에서 정의한 빈도로 인피드 광고가 게재되도록 하려면 루프 안에 'if' 구문을 추가하세요.
아래에 의사 코드가 일부 나와 있습니다. 실제로 사용하는 코드와 아래에 나온 의사 코드의 구조는 비슷하지만, 사용하는 프로그래밍 언어에 따라 실제 구현은 다를 수 있습니다.
Posts[] posts;
Var count=1; // If your code does not include a counter define one
While (count < posts.length) // Increase the value of "count" by 1 until the final post in the database
{
If (count%3=0) //If the value of "count" equals 3 or 6 or 9 insert the ad
{
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous">
</script>
<ins class="adsbygoogle" style="display:block"
data-ad-format="fluid"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
}
<h3>{{ post.title }}</h3> // for all count values insert the content block title
<p>{{ post.body }}<p> //Insert the content block body
<img src="{{ post.thumbnail}}"> //Insert the content block image
}
중요
광고 코드가 아래에 해당하는 상위 컨테이너(<div>
, <iframe>
, etc.)에 삽입되었는지 확인하세요.
- 유효한 폭. 플로팅 요소와 같이 폭 설정이 명확하지 않은 상위 컨테이너에 광고 코드를 삽입하면 광고가 표시되지 않습니다. 애드센스 시스템은 상위 컨테이너의 폭을 사용해 광고의 폭을 계산합니다. 인피드 광고의 최소 폭이 250픽셀이라는 점에 유의하세요.
- 변수 높이. 높이가 고정된 상위 컨테이너에 광고 코드를 삽입하면 광고가 왜곡된 형태로 나타날 수 있습니다.