jQuery 이용한 애드센스 광고 본문 내 원하는 위치 이동하기

jQuery 이용한 애드센스 광고 위치 이동 방법

설명은 티스토리 블로그를 기준으로 진행하도록 하겠습니다.

다른 블로그나 사이트를 운영하시는 분들도 각자 환경에 맞게 응용하시면 크게 어렵지 않으리라 봅니다.

일단 jQuery를 이용하기 위해서는 관련 파일이 필요한데요.

제 경우를 예로 들면, 저는 현재 ‘ jquery-1.11.0.min.js ‘ 파일과 ‘ jquery-2.1.0.min.js ‘ 파일을 사용하고 있어요.

애드센스 광고를 이동시키는 코드가 실행되기 전에 먼저 위의 두 파일 중 하나가 읽혀져야 정상적으로 작동이 되니 주의하세요.

1 : <script src=”./images/jquery-1.11.0.min.js”></script> <– 이런 식으로 먼저 읽어들임

이후….

2 : [ 애드센스 이동 코드 ] 실행

무슨 말인지 대충 아시겠죠?

뭔소린지 모르겠다 하시는 분들은 자신의 블로그에 파일 업로드 하신 다음 위의 1번과 같이 파일 경로를 <head>와 </head> 사이에 넣으세요.

jQuery 파일 다운로드는 아래 링크를 통해 받으시면 되네요.

다운로드

그럼 여기까지 모두 이해하셨으리라 믿고 계속 설명을 진행하도록 할께요.

별로 어려운 건 없어요.

기본적인 문법이랑 함수 몇 개 정도 알면 되어요.

function adsenseMove() {
   if (targetDiv == 1) {
       $(“#adPos”).append($(“#adCode”));
   } else {
       $(“#adCode”).remove();
   };
};
$(document).ready(adsenseMove());
</script>

애드센스 광고를 본문 내 위치시키고자 하는 곳에 ‘<div id=”adPos”></div>’를 넣구요.

그 다음 순으로 ‘<script> ~ </script>’를 넣어야 해요.

‘<div id=”adCode”>자신의 애드센스 코드</div>’는 어느 위치든 상관 없지만 반드시 ‘<script> ~ </script> 앞에 넣어야 해요.

순서 바뀌면 에러나서 정상 작동 안하니 주의하세요.

위 코드의 기능은 본문 내 자신이 원하는 위치로 애드센스 광고를 이동시키는 것은 물론 본문 이외의 페이지, 즉 ‘<div id=”adPos”></div>’이 삽입되지 않은 페이지에 접속하면 애드센스 광고 자체를 삭제해 노출되지 않게 만드는 거에요.

그런데, 테스트를 해보니 약간의 문제가 발생하더군요.

애드센스 코드를 넣지 않은 상태에서는 정상적으로 작동이 되는데, 애드센스 코드만 넣었다면 문제가 생기더라구요.

1. 광고 3개 이동시 2개만 정상 노출되고 하나는 공백 상태로 나온다.

요건 브라우저 버전과 종류에 따라 차이가 있더군요.

2개만 이동시키니 크롬, 파이어폭스, 익스플로러에서 3개 모두 정상 노출되네요.

2. remove() 때문에 익스플로러 8 버전에서 스크립트 오류 발생으로 심한 버벅거림과 먹통 증상 발생하네요.

요건 remove() 제거하니 정상 작동하네요.

테스트하면서 문제 해결하는 것만 신경쓰느라 정리를 안해놔서 저도 기억이 가물가물 오락가락 헷갈리네요.

암튼 대충 이렇거든요.

function adsenseMove() {
if (targetDiv == 1) $(“#adPos”).append($(“#adCode”));
};
$(document).ready(adsenseMove());
</script>

저는 문제를 위와 같이 해결했네요.

위처럼 스킨에서 ‘<div class=”article”>’ 바로 밑에 애드센스 코드를 넣었어요.

저렇게 해놓으면 어짜피 본문에서만 광고가 노출될테니 굳이 삭제할 필요가 없겠죠?

이상으로 jQuery를 이용해 애드센스 광고를 본문 내 원하는 위치로 이동시키는 방법에 대한 설명을 마칠께요.

jQuery 이용한 애드센스 광고 위치 이동 방법

답글 남기기 응답 취소