티스토리 반응형스킨에 구글 애드센스 광고 삽입하기

안녕하세요~ 지난 시간에, 구글 애드센스 가입하는 방법에 대해서 소개해드렸는데, 계정승인은 잘 받으셨나요? ^^

• 2016/07/15 - [작은설탕 IT/Blog Tips] - 구글 애드센스 가입하기

이번 시간엔, 여러분의 티스토리 블로그에 애드센스 광고를 삽입하는 방법에 대해서 소개해드리려고 해요. 제일 관심있는 내용이시죠? ^^ 티스토리 블로그의 스킨에 따라서 애드센스 광고를 삽입하는 방법이 조금씩은 다를 수 있기 때문에, 이번 포스팅에서는 제가 사용중인 "티스토리 반응형 스킨 #1"을 기준으로 설명드림을 알려드립니다.

애드센스 광고유형 알아보기

애드센스 가입이 완료되었으면, 우선 광고부터 생성해야겠죠? 애드센스 규정에 따르면, 하나의 페이지 당 3개의 이미지/텍스트 광고, 3개의 링크광고, 2개의 검색창을 설정할 수 있습니다.

• 이미지/텍스트 광고 : 흔히들 컨텐츠 광고 라고 부르는 "이미지/텍스트 광고"란, 특정 크기로 제작된 이미지 혹은 텍스트 광고를 말합니다. 요즘엔 "리치 미디어" 라고 하는 움직이는 영상(?)으로 구성된 광고도 게시되고 있어요. 광고 사이즈는 매우 다양한데요 가로세로 비율에 따라 가로 배너형, 수직 배너형, 직사각형 등의 유형이 있구요. 요즘엔 반응형 웹디자인이 대세라서 "반응형 광고" 유형도 생겨났습니다.
• 링크 광고 : 링크광고란, 텍스트로만 이루어진 광고 3개정도를 링크로 생성하여 게시하는 형태의 광고인데요. 포스팅 본문의 문맥내용을 근거로 한다던지, 방문자의 관심사를 근거로 광고를 선정하여 3개정도의 링크광고를 구성하고 있어서, 글을 꼼꼼히 읽는 방문자들의 광고 클릭율이 높은 편이예요. 하지만, 텍스트 크기가 작은편이라 눈에 잘 띄지 않는다는 단점이 있죠.
• 검색창 : 애드센스 검색창은 많이 못 들어보셨을꺼예요. 검색창은 말 그대로, 본인의 사이트(블로그)에 구글 검색창을 다는건데요. 이 검색창을 통해서 검색이 이루어지면, 일정부분의 검색 수익을 구글로부터 받는 형식입니다.

이렇게 애드센스 광고는 크게 세가지 유형으로 나눌 수 있는데요. 티스토리 블로그를 운영하면서 애드센스를 이용해보신 분들이라면 아시겠지만, 거의 대부분의 수익은 "이미지/텍스트 광고"에서 발생합니다. 메인 광고라고 보시면 되시구요. 그 다음으로 부수적으로 "링크 광고"에서 소소한 수익이 발생하는 정도죠.

그럼 본격적으로 광고를 생성하는 방법을 알아볼까요?

광고 생성하기

우선 애드센스 홈페이지로 접속해서 본인의 애드센스 계정으로 로그인 합니다. 혹시, 애드센스 계정을 생성하고 이제 막 승인이 떨어진 분들이라면, 아래 화면을 보실 수 있으실꺼예요. 계정 승인은 되었지만 아직 검토중이라는 거죠.

• 애드센스 홈페이지 : https://www.google.com/adsense/app

화면 중간에 보이는 "시작하기"버튼을 클릭해줍니다.

"+새 광고 단위"라는 버튼이 보이시죠? 이 버튼을 눌러서 새 광고 단위를 생성하러 가보죠.

여기에선 설명을 좀 드려야겠네요. 맨 위에 "이름"란엔 해당 광고 단위에 대한 이름(?)을 부여하시면 되요. 저같은 경우엔 추후 광고 수익이 어느 광고에서 많이 발생했는지 추적을 쉽게 하기 위해서 "사이트이름-게재위치-광고유형" 의 형식으로 이름을 부여하고 있어요. 혹시, 하나의 블로그만 운영하시는 분들은 "사이트이름"은 빼셔도 되는데요. 블로그를 하나 이상 운영하시는 분들은 해당 광고가 어느 블로그에 삽입된건지 분간하기 위해서 사이트 이름까지 넣어주면 유용하답니다.

광고 크기를 선택하는 부분에서는 "반응형"을 선택해주세요. 앞서 말씀드렸다시피, 이번 포스팅에서는 티스토리 반응형 스킨 #1을 기준으로 광고를 생성/삽입하는 방법을 설명드릴꺼라서 반응형 광고를 선택해줍니다.

반응형 광고란?

웹페이지의 가로폭의 변화에 따라서 그에 대응하는 크기로 자동으로 바뀌는 광고를 말하는데요. 우리가 사용하는 반응형 스킨 #1이 반응형 웹디자인이기 때문에, 광고도 반응형으로 생성하는 것이 편합니다. 반응형 스킨을 사용하지 않는 분들은 데스크탑용 광고와 모바일용 광고를 따로 생성해서, 데스크탑 스킨과 모바일 스킨에 각각 설정을 해줘야 하거든요.

다음으로 "광고 유형"부분은 "텍스트 및 디스플레이 광고"로 설정해 놓았는데요. 이부분은 사용자마다 호불호가 갈려요. 현재 설정대로 하면 해당 광고 게재위치에 텍스트로 된 광고도 보여지고, 이미지로 된 광고도 보여지는데요. 혹자는 이미지 광고가 클릭율이 높아서 광고 수익에 도움이 된다고 하는 반면, 구글에서 권장하기로는 "텍스트 및 디스플레이 광고"로 설정하는 것이 수익 향상에 더욱 도움이 된다고 합니다. (이 부분은 여러분의 선택에 맡길게요. ^^)

모든 설정이 끝났으면 "저장 및 코드 생성" 버튼을 눌러줍니다.

이렇게 광고가 생성이 되면, 위에 표시한 광고 코드를 복사( Ctrl + C )해 주세요. 이제 광고를 삽입하러 블로그로 가볼까요? 자신의 블로그의 관리자 페이지로 이동해주세요. 이때 애드센스 페이지는 닫지 말아주세요. 잠시후 하단광고도 생성해야하거든요.

관리자페이지 좌측 메뉴에 "플러그인 설정" 메뉴를 클릭하면 오른쪽에 여러 플러그인들이 보여지는데요. 여기서 "Google AdSense (반응형)" 을 클릭해 주신 다음에, 오른쪽에 톱니모양 버튼을 눌러주세요. 티스토리에서는 애드센스 플러그인을 총 세 종(반응형 / 데스크탑 웹용 / 모바일용)을 제공하고 있어요. 우리는 "반응형"을 사용할꺼예요.

톱니모양 버튼을 누르면, 해당 플러그인 설정 화면이 열리는데요, 위에 이미지에 표시한대로, 광고1과 광고2가 위아래로 배치된 유형을 선택해줍니다. 그럼 광고코드 넣는란이 두개 열리는데요. "광고1 (상단)"에 방금 우리가 복사한 광고코드를 붙여넣기(Ctrl + V)합니다.

그리고 아까 애드센스 페이지로 돌아가서 하단광고에 삽입할 광고를 다시 생성해줍니다. 방법은 아까 상단 광고 만들때와 동일하게 만들어주세요. 광고를 생성하셨으면, 다시 광고코드를 복사해서 이번에는 "광고2 (하단)" 칸에 코드를 붙여넣기 해주세요.

그리고 중요한 포인트!! 상단/하단 광고를 모두 넣어주었으면, 마우스 스크롤을 조금 내려보세요. 그럼 "저장" 버튼이 보이실 꺼예요. 이 "저장"버튼을 꼭 눌러주셔야 설정이 저장/반영됩니다.

광고 확인

반응형 광고를 삽입했으면, 데스크탑과 모바일에서 광고가 어떻게 보여지는가 확인을 해야겠죠? 먼저 데스크탑에서 블로그에 접속했을 때의 모습입니다.

위의 사진이 상단 광고, 아래 사진이 하단에 삽입된 광고입니다. 데스크탑에서는 화면 사이즈가 크기때문에 광고도 그에 맞게 넓은 광고가 삽입되요.

그럼 모바일 화면에서는??

이렇게 페이지 가로폭 사이즈에 맞춰서 직사각형의 광고가 삽입됩니다.

여기까지, 티스토리 반응형 스킨에 애드센스 반응형 광고를 삽입하는 방법에 대해서 알려드렸어요. 하지만, 이렇게 상단/하단 광고만 넣으면, 애드센스 허용범위가 3개까지인데 한개의 광고가 비잖아요? 그래서 다음번 포스팅에서는 본문에 애드센스를 삽입하는 방법에 대해서 소개해 드릴까 해요. 그리고 연이어서 링크형 광고를 삽입하는 방법도 포스팅할게요. 기대 많이 해주세요~