티스토리 뷰
티스토리 상단 광고
PC에서는 2개,
모바일에서는 1개를
배치하는 법을 알아보자.
나는 HTML 용어에 익숙하지 않은
사람이라서 쩔쩔맸다.
그렇기에 쉽게 설명을 하겠다.
원래 애드센스 광고 규정은
연속으로 두 개의 광고를
동시에 달 수 없었다.
그러나
규정이 바뀌면서
이제 가능해졌다.
그리고 사람들이
상단 광고 2개가
효과가 좋았다기에
나도 따라 해봤다.
위와 같이 상단에 2개의 광고가 송출된다.
상단 광고를 2개 달면
PC 화면에서는 위처럼 보이지만
모바일에서는 화면 폭이 좁기에
위 아래 동시에 광고가 붙어서 송출된다.
이건 정책 위반이다.
그렇기에
PC에서만 상단 광고가 2개가 나오고,
모바일에서는 1개만 나오게
설정을 해야 한다.
나는 현재 티스토리에서 제공하는
반응형 스킨 #1을 사용하고 있다.
먼저 해야 할 것은
티스토리 관리페이지에서
애드센스 플러그인 설정을
바꿔줘야 한다.
보통 반응형으로 위, 아래
광고로 설정했을 것이다.
그러나 우리는
위의 상단 광고는
따로 HTML에서 편집 할 거기 때문에
하단 광고만 선택 하자.
그다음 해야할 것은
애드센스 홈페이지에서
336X280 직사각형
광고 단위를 만들어야 한다.
여러 가지 직사각형 광고 단위가 있으나
PC에서는
336X280이 효과가 제일 좋다더라.
그래서 우리는
336X280 광고 단위를 만든다.
이렇게 광고를 만들고 나면
아래와 같이 나만의 광고 코드가 뜬다.
여기서 잠깐!
광고 코드 형식은 이렇다.
이 중에서
빨간 박스가
본인의 고유한 광고 코드다.
즉
data-ad-client="ca-pub-나의 광고코드"
data-ad-slot= "나의 광고코드"
이렇다.
나머지 코드들은
단순히 직사각형을 만들어 주는
코드라 보면 된다.
우리가 지금 하고자 하는 것이
PC 화면에 상단에서는 광고 2개
모바일 상단에서는 광고 1개
인 광고 형식이 필요하지 않은가?
그 광고 형식 코드가 아래와 같다.
잘 안 보여도 상관없다.
어차피 다운로드 링크 달아뒀다.
대략 설명하자면
화면이 768픽셀 이상(PC)인 경우에는
상단에 광고가 2개 나타나고
화면이 768픽셀 이하(모바일)인 경우에는
상단에 광고가 1개 나타나는 형식이다.
아래 링크를 눌러서
메모장을 다운 받으면 된다.
예시)본문 상단 PC광고 2개,모바일 광고1개.txt
아 참!
그전에 광고단위 형식을 하나 더 만들어줘야 한다.
PC에서는 336X280단위를 만들었지만
모바일에서는 336X280이 너무 크다.
그래서
300X250 직사각형 광고단위를
하나 더 만들어야 한다.
이건 모바일용이다.
그럼 우리는 이제
광고 단위를 2개 만들었다.
1. 직사각형 336X280
2. 직사각형 300X250
이제 다운 받은 메모장을 열어서
"자기광고넣기"
란에는 1번 광고코드를
"모바일광고코드넣기"
란에는 2번 광고코드를
넣으면 된다.
참고로 광고코드에 있는
<!-- PC화면2개, 모바일1개 광고 시작 -->
<!-- PC화면2개, 모바일1개 광고 끝 -->
이것은 코딩에 아무런 영향을
끼치지 않는 문구다.
나중에 광고 코드를 다시 찾을 때
보기 쉬워라고 넣어둔 거다.
이제 마지막 단계다.
우리가 해야 할 것은
만들어진 광고 코드를 HTML에
직접 넣는 것이다.
어디에 넣어야 하냐면
Ctrl+F (검색)을 눌러서
article_rep_desc
위에 넣으면 된다.
나는 반응형 스킨 #1을 쓰기 때문에
article_rep_desc
이 2곳 있다.
두개 중에서 아래
article_rep_desc
위에 광고코드를 삽입하면 된다.
이렇게
이렇게 광고코드를 붙여놓고
저장을 누르면 완료다!
처음에는 몇 분 동안
광고 송출이 안 될 거다.
10분 정도 뒤에
광고가 송출될 것이다.
그럼 이만!