애드센스 반응형 광고 태그 활용 방법

  애드센스 반응형 광고를 상단에 고정하여 사용하는 분들 중에 광고가 글을 아예 막아버려 이탈이 늘어나는 케이스가 있습니다. 예전에 관련 내용을 작성했었는데, 문제가 되는 원인은 아래 링크에서 체크해보시기 바랍니다. 광고가 글을 막는 케이스를 막기 위한 여러가지 방법이 있지만, 애드센스 반응형 광고의 태그 매개변수를 변경해 모바일과 PC버전에서의 사이즈 조절하는 방법을 작성합니다.

• 애드센스 상단 광고 때문에 빠져나가는 유입자들 - Google Analytics & Google Adsense

사전에 확인해야할 통계

  블로그 또는 웹사이트에 방문하는 수 많은 사람들이 어떤 디바이스로 유입되는지 반드시 확인해야 합니다. 현재 이 블로그의 경우 최근 PC가 60% 이상을 차지 하고, 일부 글은 PC만 들어오는 상황입니다. 따라서 되도록이면 PC에 유리한 반응형 광고단위로 애드센스 코드를 바꾸기 위해 노력해야합니다.

구글 애널리틱스에서 확인한 유입 디바이스 통계

  하지만 모바일 유입도 무시할 수 없기 때문에 모바일과 데스크탑에서 각각 정상적으로 작동하는 애드센스가 될 수 있도록 고려해야하죠. 이를 위해 광고의 모양과 모바일 폭을 조절하는 태그에 대해 정리합니다.

 

가로모양 광고를 지정하는 광고코드 (데스크탑 전용)

광고 코드 중 data-ad-format을 변경해 가로, 세로, 직사각형으로 지정할 수 있습니다

  애드센스에서 반응형 광고 코드를 가져오면, 위와 같은 형태를 띄게 됩니다. 여기서 data-ad-format 코드는 광고의 형태를 지정하는데, 크게 가로(horizontal)와 세로(vertical)로 지정할 수 있고, 이와 함께 직사각형 배너모양으로 지정하는 rectangle을 콤마 이후에 같이 넣어 2가지 속성을 지정할 수 있습니다. 지정하지 않을 경우, 자동(auto)로 두고 활용하셔도 큰 문제는 없습니다.

 

<data-ad-format="horizontal, rectangle"> --> 가로, 직사각형
<data-ad-format="vertical, rectangle"> -->세로, 직사각형

 

모바일화면을 가리는 반응형 광고 조정

  모바일 환경에서 블로그에 접속하는 경우, 반응형 광고의 기본 세팅은 가로폭에 최대한 맞추는 큰 모양으로 광고를 내보냅니다. 이를 조정해서 광고의 사이즈를 조절하고, 컨텐츠가 바로 보이도록 세팅이 가능합니다.

 

data-full-width-responsive를 true로 두면 화면 가득, false로 두면 원래 광고 사이즈로 나타납니다.

  위 코드에서 data-full-width-responsive를 제어하게 되는데, 기본 세팅은 true입니다. 즉, 모바일이나 태블릿 기기에서 가로폭 최대로 맞춰 광고를 내보내게 되죠. 이렇게 되면 기존에 제가 썼던 글 처럼 광고가 너무 커서 글이 안보이는 상황이 발생합니다. 따라서 이런 상황을 바꾸기 위해서는 코드를 false로 변경해 줘야 합니다.

 

data-full-width-responsive를 true(좌)로 설정한 광고와 false(우)로 설정한 광고

  위 사진에서 보면 쉽게 이해가 되실 겁니다. 왼쪽 화면은 전에 운영하던 다른 블로그의 반응형 광고 기본 세팅 상태입니다. data-full-width-responsive가 true로 설정되에 화면의 절반을 차지하고 있으며, 이로 인해 글이 보이지 않는 현상이 생깁니다. 그래서 현재의 블로그에는 이 부분을 false로 적용했고, 오른쪽 화면 같이 광고의 크기가 줄어들어 글 노출이 원활하게 이뤄지고 있습니다.

 

  이에 따라 접속자들은 컨텐츠가 존재한다는 사실을 확인할 수 있고, 아래로 스크롤을 내리게 되는거죠.

 

반응형 광고를 내 입맛대로 커스터마이징 하기

  여기서 한발 더 나아가, 디스플레이 별로 광고의 크기를 우리가 조정할 수도 있습니다. 물론 구글 애드센스에서 허용한 사항이며, 이 방법들을 활용해 좀더 효과적인 광고사이즈를 찾아낼 수도 있겠죠.

 

1. 화면 폭에 따른 광고단위 크기 지정

  블로그에 유입되는 디바이스 경로는 크게 PC, 모바일, 태블릿 입니다. 기기별로 디스플레이의 크기가 모두 다르지만, 최소한의 크기는 이미 나와있는 레퍼런스가 있습니다. 따라서 이 크기에 맞춰 우리는 광고크기를 원하는대로 조정해 내보낼 수 있죠. 애드센스 설명을 따라 아래 조건으로 광고를 출력한다고 가정해봅시다.

• 화면 너비가 500픽셀 이하일 때 : 320X100 광고
• 화면 너비가 500~799픽셀일 때 : 468X60 광고
• 화면 너비가 800픽셀 이상일 때 : 728X90 광고

  화면 너비에 따라서 출력되는 광고가 모두 다른 가로형 배너가 출력이 됩니다. 이를 위한 코드는 아래에서 확인해보세요.

광고단위 명 example_responsive_1을 기본사이즈 320X100으로 두고, 각각의 사이즈별로 광고 크기를 변환

  위 코드를 보면, CSS태그를 사용했고, @media를 통해 화면 폭에 따라 각각 다른 사이즈의 광고가 출력되도록 태그를 입혔습니다. 그리고 바로 구글 애드센스 광고 코드를 붙여놓은 모양입니다. 따라서 해당 광고는 광고단위의 이름만 정확히 기억하고 있으면, 쉽게 변경이 가능하다는 사실을 알 수 있죠. 단, 이렇게 광고코드 변경을 위해서는 광고단위의 이름을 영문으로 작성해야합니다.

 

  ** @media는 CSS3 구문이며, 최신 브라우저에서 지원됩니다.

 

2. 광고의 높이를 고정한 뒤, 폭을 조절하는 방법

  블로그나 웹사이트에서 유입되는 사람들의 디바이스에 따라 동일한 높이의 다른 너비를 갖는 광고를 출력하게도 할 수 있습니다. 위의 방법처럼 CSS를 활용하는 것이 아니라, 구글 광고코드 내의 style 지정을 통해서 가능합니다.

 

높이(height)를 90픽셀로 지정하고, 최소폭과 최대폭을 지정해 광고를 내보내는 방법

  위 코드에서는 style="display:inline-block;에서 최소폭과 최대폭을 지정하고, 높이를 고정해 원하는 광고모양을 만들어 반응형 광고를 내보내도록 조정했습니다. 예를 들어 상단 광고의 높이 폭이 다소 컨텐츠 읽기에 부적합하다면, 광고의 높이를 조정해 컨텐츠가 보이도록 조절이 가능합니다.

 

3. 화면 크기에 따라 광고를 숨기기

  모바일을 타겟으로 한 광고노출이나 PC를 타겟으로 한 광고노출은 다릅니다. 따라서 각각에 맞는 광고를 내보내고, 너무 작은 화면에서는 광고를 내보내지 않도록 조절할 수도 있습니다. 화면 사이즈에 따라 광고 폭을 조절했던 1번 항목을 변형했다고 보시면 이해하시기 편할 것 같아요.

가로 폭 400픽셀 이하에서는 광고가 출력되지 않도록 설정

  @media 구문을 통해 400픽셀 이하에서는 광고를 출력하지 않도록 display: non으로 설정하고, 400픽셀 이상부터는 320X50 광고를, 그 이상에서는 각각 화면 폭에 맞는 광고를 출력하도록 코드가 짜여져있습니다. 따라서 PC버전에 노출을 하고 싶지 않다거나 너무 작은 화면에서는 광고를 출력하고 싶지 않을 때, display:none을 이용해 광고를 송출하지 않을 수 있습니다.

 

반응형 스킨을 사용하는 분들을 위한 팁

  기본적인 반응형 스킨을 사용하시는 경우, 모바일에서 광고의 크기가 너무 클 가능성이 높습니다. 이런 경우는 스킨 변경이나 광고단위 변경이 편합니다. 하지만 스킨을 함부로 바꿨다가는 컨텐츠 노출이 아예 안되는 대 참사가 벌어질 수 있죠. 

 

  이런 상황에서 유용하게 사용할 수 있는 반응형 광고 사이즈 조절 코드들 입니다. 위 내용을 한번 훑어보시고, 자신의 블로그에 맞는 광고 사이즈를 찾아 변경해보면서 클릭률이나 노출률, 수익 등을 비교해보세요. 좀 더 효율적인 방법을 찾을 수 있을 겁니다.