[블로그] PC와 모바일 인피드광고 서로 다르게 출력하는 방법 (with 애드센스)

기술의 발달함에 있어 인터넷에 접속하는 디바이스가 점차 다양해지고 있습니다. 디바이스가 다양해 지는만큼 접속하는 디바이스의 크기도 다양한데요. 각각의 디바이스에는 최적의 UI가 서로 다를것입니다. 그렇기에 웹사이트도 고정형이 아닌 거의 모든 웹페이지를 반응형 웹페이지로 만듭니다. 반응형 사이트는 접속한 디바이스의 크기에 따라 UI가 바뀌는데 여기서 블로그의 카테고리 목록도 크기가 바뀌게 됩니다. 애드센스에는 카테고리에 글 목록인것처럼 해서 들어가는 광고유형이 있습니다. 인피드 광고라고 하는 광고 유형입니다. 인피드 광고는 구글 애드센스에서 인피드광고를 만들때 접속 디바이스가 PC냐 모바일이냐를 구분하여 자연스럽게 만들어줍니다. 이 인피드광고의 장점은 글 목록과 광고가 매우 흡사하여 마치 글 목록인것처럼 보여지는데 있습니다. 하지만 문제는 PC기준에서 제작한 인피드광고를 모바일에서 출력하면 너무 크게보이고 모바일기준에서 제작한 인피드광고를 PC에서 출력하면 너무 작게보이는 문제가 생깁니다. 인피드 광고는 글 목록과 비슷할때 가장 클릭률이 높습니다. 그렇기에 PC로 접속했을때는 PC기준으로 제작한 인피드광고가 출력이 되어야하고 모바일로 접속했을때는 모바일기준으로 제작한 인피드광고가 출력되게 하는것이 좋습니다.

 

접속 디바이스별 인피드광고 서로 다르게 적용하기

1. 구글 애드센스 -> 광고 -> 개요 -> 데스크톱용과 모바일용으로 인피드 광고를 각각 만듭니다. 페이지 스캔을 하면 최대한 글 목록과 최대한 비슷하게 만들어주니 적극 활용하도록 합시다.

 

<!-- 인피드광고-->
<script>
if(window.innerWidth<660){
	// 모바일 인피드 광고 단위 삽입
	InfeedCount ++;if ( InfeedCount % 5 == 1 )
            {document.write("<hr style='padding: 0; margin: 0; height: 0.5px; border: 0 none; color: #f5f5f5; background-color: #DADADA;'>");
            document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="★" data-ad-client="★" data-ad-slot="★" data-language="ko"></ins>'); 
            (adsbygoogle = window.adsbygoogle || []).push({}); }
}
else {
	// PC 인피드 광고 단위 삽입
	InfeedCount ++;if ( InfeedCount % 5 == 1 )
            {document.write("<hr style='padding: 0; margin: 0; height: 0.5px; border: 0 none; color: #f5f5f5; background-color: #DADADA;'>");
	    document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="★" data-ad-client="★" data-ad-slot="★" data-language="ko"></ins>'); 
            (adsbygoogle = window.adsbygoogle || []).push({}); } 
}
</script>

2. 위의 소스를 복사하여 ★에 자신이 만든 인피드 광고의 정보로 바꿔넣습니다. if{ }안이 모바일이고 else{ }안이 PC입니다. 구분선의 style과 목록당 광고의 숫자도 변경하실분은 변경하셔도 됩니다.

소스 간략 설명
1. data-ad-layout-key : 인피드 광고의 스타일 코드
2. data-ad-client : 자신의 애드센스 ID 코드
3. data-ad-slot : 생성된 애드센스 코드 번호
4. window.innerWidth<660 : 접속한 디바이스의 크기 (위 예제는 660미만이면 모바일로 인식)
5. infeedCount % 5 == 1 : 목록당 광고 숫자 (위 예제는 목록 5개 당 광고 1개 삽입)
6. <hr style ~> 인피드 광고만 출력하면 목록별 선이 없어 어색하게 보입니다. 그래서 임의로 수평선을 하나 그었습니다. (hr style 뒤의 값을 변경하여 자신의 스킨에 맞게끔 바꿔주세요)

 

<!--  애드센스 인피드광고 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> var InfeedCount = 0; </script>

3. 티스토리 관리자모드 -> 스킨편집 -> html편집에 <head> </head>안에 위의 코드를 삽입합니다.

 

4. </s_index_article_rep>을 검색하여 </s_index_article_rep> 바로 위의 </div>안에 설정한 인피드광고의 소스코드를 삽입합니다. 스킨마다 인피드광고를 넣는 위치는 상이할 수 있습니다. 

 

광고배치 결과(PC & 모바일)

 

댓글(5)

  • 2020.08.09 19:39 신고

    자세한 설명 감사합니다. 블로그 초보라서 많이 헤매다가 겨우 찾았네요.
    그런데 스킨편집 미리보기에서는 잘 보이는데
    제가 속도 때문에 모바일 웹 자동연결을 해놨더니 거기서는 안보이네요.
    자동연결을 해지해야 하나요??
    암튼 넘넘 도움 되었어요.

  • 2020.09.10 01:30 신고

    다 적용을 했는데 아무 반응이 없네요 ㅜ

  • 방문자
    2020.09.29 12:26

    안녕하세요. 자세하게 설명을 해주셔서 PC 인피드 광고 게재는 성공을 했는데요. 모바일에서는 인피드가 계속 안 먹히고 있어요. 혹시 창 폭을 조정하면 해결할 수 있는지요? 바쁘시겠지만 모바일 인피드 설정 방법 설명 좀 부탁드려도 될까요?

  • 2020.10.06 22:32 신고

    제가 잘몰라서 댓글달앗습니다
    https://imgur.com/a/RDB7h8U
    https://imgur.com/a/D3TvTwm
    애드센스 광고 이제달라고하는데요
    https://imgur.com/a/mDDriVQ
    https://imgur.com/a/YRPcBR1 <- 컴퓨터로 볼때 모바일로 이렇게볼라고하는데 스킨편집할라고하는데 잘모르겠습니다
    이렇게 달라고하는데 애드센스광고 달는방법알려주세요

    • 2020.10.09 12:33 신고

      스킨마다 소스가 달라 여기저기 소스를 수정해 시행착오 겪어가며 확인하는수밖에 없을거같아요

Designed by JB FACTORY