☕ Blog Story / / 2021. 3. 1. 16:37

반응형 '인피드 광고'로 PC와 모바일에서 보기좋게 만드는 법

반응형

구글 애드센스 광고 중에 '인피드 광고'라는 게 있습니다. 사이트 디자인과 어울리게 보여서 광고인지 포스트인지 잘 모르게 사이트 디자인과 비슷하게 출력이 되는 광고입니다. 아무래도 광고라는 생각을 못하고 클릭하기 때문에 다른 광고에 비해 클릭률이 높을 것이라고 생각합니다.

▲애드센스 광고 단위 기준에 나온 인피드광고 설명

인피드 광고 코드를 넣고 확인해 보면 일반 디스플레이 배너광고가 출력되는 경우가 종종 있습니다.

이유는 인피드 광고를 만들 때 '선택한 디스플레이 광고 허용'이 체크가 되도록 기본 설정이 되어있기 때문에 체크를 해제하지 않아서 그렇습니다. 체크를 해제하게 되면 인피드 광고 형태로만 출력이 됩니다.

그럼 또 여기서 문제가 생깁니다. 인피드 광고 코드를 넣고 디스플레이 광고 허용을 해제하면 PC 화면용으로 만든 인피드 광고의 사이즈가 모바일 화면과 맞지 않아서 PC에서 보는 인피드 광고는 잘 어울리는데 모바일에서 보면 그리드가 맞지 않아서 인피드 광고스럽지 않게 보입니다.

 

예를 들면 아래와 같은 경우입니다. 좌측의 PC 화면에서는 인피드 광고가 의도한 대로 그리드를 벗어나지 않아서 기존의 글들과 자연스럽게 섞여있습니다. 반면 우측의 모바일 화면에서는 썸네일 이미지가 커져서 그리드가 깨졌습니다. 이제 누가 봐도 광고로 보이기 때문에 인피드 광고의 목적성이 조금 떨어져 보입니다.

▲빨간 네모박스가 인피드 광고영역임

반응형 인피드 광고 만들기

이런 문제 때문에 인피드 광고를 넣을 때 가변형으로 만들어 사용 중입니다.

아래에서 좌측에 있는 이미지는 PC 화면이고 우측은 스마트폰 화면입니다. 위에서 언급한 문제가 없이 둘 다 그리드가 살아있습니다. 언뜻 보면 광고인지 모르겠지요? 인피드 광고 스타일이 그대로 살아있습니다.

이렇게 적용하려면 애드센스에서 인피드 광고를 PC용과 모바일용 각각 2개를 만들어야 합니다.

그리고 코드를 넣을 때 html에서 if문을 활용하여 PC와 모바일 화면 중 맞는 것을 출력하도록 해줘야 합니다.

▲빨간 네모박스가 인피드 광고영역임

<!--- 인피드광고 가변형 --->
<script> InfeedCount ++;if ( InfeedCount % 3 == 1 )
if ( window.matchMedia( '( min-width: 681px )' ).matches == true ) 
{ 
document.write( '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="■■■■■■■" data-ad-client="■■■■■■■" data-ad-slot="■■■■■■■"></ins>' ); 
} 
</script>	
<script> InfeedCount ++;if ( InfeedCount % 3 == 1 )
if ( window.matchMedia( '( max-width: 680px )' ).matches == true ) 
{ 
document.write( '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="■■■■■■■" data-ad-client="■■■■■■■" data-ad-slot="■■■■■■■"></ins>' ); 
} 
</script>																
<!--- 인피드광고 가변형// --->

위 코드에서 위쪽은 PC용 인피드 광고를 출력하고 아래쪽은 모바일용 인피드 광고를 출력합니다. 

인피드 광고 생성 후 상단에서 data-ad-layout-key="■" data-ad-client="■" data-ad-slot="■" 값을 자신의 인피드 광고값으로 바꿔주면 됩니다.

 

코드는 위와 같지만 어려운 것은 인피드 광고를 만들 때 위치를 딱 맞추는 게 쉽지가 않습니다.

해보고 맞을 때까지 'data-ad-layout-key'값을 여러 번 바꿔줘야 합니다. 

사이트에 맞게 인피드 광고를 만드는 것은 상당한 노가다가 필요합니다.

 

반응형