티스토리 애드센스 광고 2개 만드는 방법과 자동으로 적용하기

블로그는 검색자가 원하는 정보와 또 정보를 제공함으로써 얻는 수익을 위한 광고를 제약된 공간 안에 배치를 해야 합니다. 이런 배치를 얼마나 잘하느냐에 따라 클릭률과 직결되기도 하는데, 공간을 효율적으로 활용한 애드센스 광고 2개를 넣는 방법에 대해 알려드리고자 합니다. 

 

 

내가 원하는 정보를 찾아왔는데, 광고가 난무한다면 정말 역효과가 날 수도 있기 때문에 광고 배치는 많은 공부를 해야하는 부분이기도 합니다. 과유불급이란 사자성어가 있듯이 너무 많은 것은 오히려 그렇지 않으니만 못하다란 말처럼 욕심내서 무리하게 배치하지 않는 것이 난잡하게 배치하는 것보다 효과가 더 좋다는 사례는 많이 있습니다. 

애드센스를 하는 사람들 사이에서 광고의 클릭률을 높이기 위해 제약된 공간 안에 1개보다도 2개의 다양한 광고를 보여주는 방식을 사용하는데요. 내 블로그에도 서로 다른 광고를 2개를 나란히 배치하는 방법에 대해 자세히 알려드리겠습니다.

 

사람들이 정보를 찾아 내 블로그까지 들어오게 되면 제일 먼저 접하는 것은 정보 글의 첫 상단일 것입니다. 그러기 때문에 상단에 광고를 배치하게 되면 클릭률을 조금이라도 높일 수가 있기 때문에 상단에 많이들 배치하는데, 여기서도 상단에 배치하는 기준으로 설명드리려고 합니다. 

 

애드센스 광고단위에서 디스플레이 광고를 2개를 먼저 만들어야 합니다. 디스플레이 광고를 만드는 방법에 대해서는 아래의 글을 참고하시기 바랍니다.

디스플레이 애드센스 광고 만드는 방법

 

1. 티스토리 애드센스 광고 2개가 나오도록 만드는 방법

첫번째, 두 번째 광고를 만들 때 두 가지 모두 사각형 타입과 광고 크기는 반응형으로 선택하면 됩니다.

 

 

 

디스플레이 광고를 2개를 만들게 되면 위와 같은 소스코드가 생성됩니다. 여기서 주목해야 할 것은 ㉮와㉯ 두가지입니다.

㉮의 data-ad-client는 애드센스 계정의 고유코드와도 같습니다. 디스플레이 광고든 인피드 광고든 여러 개 만들더라도 항상 동일한 코드로 생성됩니다.  두 번째인 ㉯의 data-ad-slot는 광고의  ID와 같은 의미로 광고를 생성할 때마다 다른 코드로 생성이 됩니다. 즉 광고를 나타내는 고유의 ID라고 이해하시면 됩니다. 

 

그럼 여기서 디스플레이 광고를 두 개를 만들었다면 위의 코드를 비교하면 data-ad-client는 두 광고 모두 동일할 것이고 data-ad-slot는 두 광고 모두 다른 값을 가지고 있을 것입니다. 

 

애드센스 두개 광고.txt

0.00MB

 

위의 광고 코드를 다운로드 후 다른 곳은 변경할 필요 없고 data-ad-Client와 data-ad-slot 두 가지만 변경하면 됩니다.

코드에 대한 부분은 아래에서 설명을 드리도록 하겠습니다.

첫 번째 광고코드와 두 번째 광고코드가 두 군데로 구분되어 위치하고 있음을 볼 수 있습니다. 

 

 

data-ad-client 값은 앞서 말했듯이 애드센스 계정을 가지고 있는 사람에게 부여되는 고유 계정으로 위 코드의 3군데를 자신의 data-ad-client 값으로 변경합니다.

 

 

data-ad-slot는 광고를 만들게 되면 생성되는 코드로 앞서 광고를 두 개를 만들었으니, 여기에도 두 개의 data-ad-slot를 각각 넣어 줍니다. ⓑ에다가는 첫 번째 광고 코드의 data-ad-slot 값을 넣어 주며, ⓒ 부분에는 두 번째 광고 코드의 data-ad-slot을 넣어줍니다.

 

 

이렇게 자신이 생성한 광고 ID를 대체만 해주면 코드 변경은 끝이 나게 되며 이제는 광고 코드를 적용해 주는 것만 남았습니다.

코드가 생성되었으면 티스토리 블로그에 적용을 해주면 되는데, 코드 적용은 서식 같은 곳에 만들어 두고 필요한 곳에서 불러와 사용할 수도 있으며, 스킨에 미리 세팅함으로써 별도 추가 없이 자동으로 적용되도록 할 수도 있습니다.

 

광고를 서식으로 만들어두고 필요할 때마다 불러와서 사용하는 방법은 아래의 글을 참고하시기 바랍니다.

서식을 이용한 애드센스 광고 코드 쉽게 넣는 방법

 

2. 티스토리 애드센스 광고 2개 자동적용 방법

여기에서는 스킨편집을 이용하여 자동으로 상단에 광고가 생성되도록 설정하는 방법에 대해 설명드리도록 하겠습니다. 

티스토리 블로그에서 가장 많이 사용하는 스킨 중 하나인 북클럽 스킨 기준으로 설명을 드리겠습니다. 타 스킨의 경우도 크게 다르지 않으니 아래의 내용을 참고 삼아 확인하시면 쉽게 적용하실 수 있습니다.

 

 

티스토리 블로그의 관리자 모드에서 스킨편집 메뉴를 선택합니다.

 

 

스킨편집 모드에서 html 편집 버튼을 선택합니다.

 

 

html편집 버튼을 누르면 html 편집모드로 나타나며 여기에서 Ctrl+F를 눌러 검색칸이 뜨면 article_rep_desc를 입력 후 Enter키를 누르면 해당 문구가 위치한 곳을 찾아 줍니다. 이때  article_rep_desc 항목이 몇 군데가 검색이 되는데 바로 아래에 s_tag_label이 있는 곳을 찾으면 됩니다. 다른 스킨들도 동일하게 위치를 찾으실 때 참고하시면 됩니다.

 

 

article_rep_desc의 위치를 찾았으면 바로 위쪽에 복사한 광고코드를 붙여 넣기를 합니다. 그리고 마지막으로 적용버튼을 누릅니다. 

 

 

 

 

참고로 2개의 서로 다른 광고가 나타나는 원리에 대해 간단하게 설명드리겠습니다.

첫 번째 광고와 두 번째 광고를 화면에 나타나게 할 것인지에 대한 코드이며, 첫번째 광고는 무조건 화면에서 보이고 두번째 광고는 화면에서 보이지 않도록 설정이 되어있습니다. 이는 애드센스 광고 게재 규정상 모바일에서는 두 개의 광고를 동시에 보이도록 할 수 없도록 하기 때문에 우선적은 한 개의 광고만 보이도록 설정된 코드입니다. 

 

 

min-width:768px는 화면의 최소 사이즈가 768이 되었을 때 광고코드를 두 개로 보이도록 설정해 주는 코드로 이것은 모바일보다 더 큰 사이즈 즉 PC 같은 화면에서는 광고가 두 가지가 동시에 보이도록 하는 코드로 이해하시면 됩니다.

코드를 적용 후 모바일과  PC에서 각각 확인하면 모바일에서는 한개의 광고만 보이고 PC에서는 두개의 광고가 보이는 것은 바로 이 원리로 그렇게 보이는 것입니다.