비동기 애드센스 최적화 삽입

Posted by Readiz
2014.05.13 23:59 반응형 티스토리/Tistory



  간단한 포스팅입니다. 요지는 이것입니다. 비동기애드센스를 페이지에 여러개 넣을 때, 중복되는 script가 들어가므로 이걸 최소화 시키고, 확실하게 스크립트를 나중에 실행시키도록 해서 페이지 로딩에 지장을 안주게 하자는 것입니다. 원래 애드센스 구조는 아래처럼 되어 있습니다.


	
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script>
<!-- XXX -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client=""
     data-ad-slot=""></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> 
	


  애드센스 광고를 비동기로 3개 쓴다 하면, 스크립트가 중복됩니다. 또한 물론 script에 async가 붙어 있긴 하지만, 확실하게 나중에 로딩시키는 방법은 페이지의 끝부분에 가서 스크립트를 로딩시키는 것입니다. 따라서 광고를 출력하고자 하는 부분에는 <ins>태그만 넣어두고, 스크립트 부분을 제거한 뒤 페이지 끝부분에서 광고를 일괄적으로 넣도록 하면 확실하게 비동기식으로 작동하게 할 수 있습니다.


	
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
$('.adsbygoogle').each(function(){(adsbygoogle = window.adsbygoogle || []).push({});});
</script> 
	


  <body>의 끝부분에 위의 애드센스 삽입 코드를 넣는 것입니다. jQuery를 사용하고 계시지 않다면 jQuery를 먼저 삽입해주셔야 합니다. 나중에 adsense관련 script와 push코드를 로딩하게 함으로써(또한 스크립트가 중복이 안되게) 최적화 시키는 방법입니다. 페이지의(티스토리라면 skin.html) 전체적인 모습은 다음처럼 될 것입니다.


	
<html>
	<head>
	...제목 등의 head...
	jQuery 삽입
	</head>
	<body>
		...
		<ins class="adsbygoogle" ~></ins>
		...
		...
		<ins class="adsbygoogle" ~></ins>
		...
		...
		<ins class="adsbygoogle" ~></ins>
		...
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<script>
		$('.adsbygoogle').each(function(){(adsbygoogle = window.adsbygoogle || []).push({});});
		</script>
	</body>
</html>  
	

 

  이렇게 하면 redundancy를 최소화 시킬 수 있습니다.



구글 FAQ



https://support.google.com/adsense/answer/3221666?hl=ko


  구글에서도 비동기 광고단위를 구현하면서 이 점에 대해 생각해본 것 같습니다. 공식 질의 첨부하니 위 링크 들어가보세요. script를 중복을 피하는 식의 구현은 정당한 광고단위 구현입니다. 저번에 보니 구글에서 제공해주는 코드를 수정하면 안되는거지 않냐고 하시는 분들이 계시던데, 위 방법은 로딩 순서만 바꾸는 것이므로 해당되지 않습니다. (script 코드를 수정하는 것이 아니기 때문에)



저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 좋은정보네요
    혹시나 해서 좀그런게잇었는데 날잡아서 싹수정해야겟네요
    adsbygoogle.js는 한 번만 로드할 수 있습니다 이부분이 맘에 드네요 '';;
    • 애드센스가 굉장히.. 느리게 합니다 페이지를.
      그걸 최소화 시킬 수 있는 방안을 찾는게 좋은 것 같아요.
  2. 저도 위와 같은 방법을 사용하고 있습니다.
    $('.adsbygoogle').each(function(){(adsbygoogle = window.adsbygoogle || []).push({});}); 이렇게 간편한 방법도 있었군요 ^^
    전 광고 클래스 갯수만큼 실행할 수 있도록 for 구문을 사용했었습니다 ㅠㅠ... 지금은 너무 늦었고 나중에 바꿔봐야겠군요 !

    여담으로 최적화는 정말 중요한 것 같습니다.
    전 티스토리가 아니라서 조금 더 수정할 수 있는데, 그래서 모든 자바스크립트를 HTML 로드 후에 불러오는 것으로 하였더니 컨텐츠 로드 속도가 훨씬 빨라졌더라구요. 방문자에게는 좋은 것이겠죠..
    • 아하.. 글 읽어보았는데 for문이네요. 어차피 each도 내부적으로 for문이니까 속도면에서 크게 차이는 없을 듯 합니다.
      사이트 좌우 크기를 줄이니까 사이드바가 버튼을 누르면 왼쪽에서 나오는 아이디어 잘 봤습니다. ㅎㅎ
  3. 오호.. 애드센스 떄문에 느렸는데 바꿔봐야겠네요.
    • 특히 스마트폰에서 좀 더 빨라진 것 같아요. 기분 탓일 수도 있지만..
  4. 소스코드를 변경하면 안되는줄로만 알았는데 FAQ에는 괜찮다고 나와있었네요 ㅎㅎ
    항상 좋은정보만 얻고 갑니다~
  5. 올려주신 포스팅들 참고하여 지난주에 애드센스 코드를 넣었는데 아직까지 배너가 노출이 안되는 것 같아요. 혹시 제가 코드를 잘 못 넣은 것일까요??
    - 제가 입력한 코드를 댓글로 남기려고 했더니 차단된 사용자라고 뜨며 등록이 안되네요 ㅠ
    • 티스토리가 댓글에 영문자가 많이 들어가면 스팸으로 인식합니다.
      블로그 잠깐 방문하였는데, 원래 애드센스가 승인되기 전에도 흰색 바탕으로 빈 공간이라도 생성되어야 정상입니다.
      일단 구글에서 제공하는 애드센스 코드를 삽입하신 뒤에 뜨는지 확인부터 해보셔야 할 것 같습니다.
  6. http://blogparty.co.kr/category/%EB%B8%94%EB%A1%9C%EA%B7%B8Tip

    카테고리를 누르니까... 구글 애드센스광고가 4개가 한 곳에 몰려있네요... ㅋ

    위의 링크 누르시고 첫 번재 글에 광고가... 몰리고 다른 글들은 광고가 안나옵니다 ㅠㅠ;;
    • 이 방법은 본문을 여러개를 쓰시게되면 적용되지 않습니다.
      아쉽지만 화면출력 설정에서 목록만으로 사용하시는게 제일 깔끔합니다.
  7. 반응형 광고단위엔 안 먹히겠죠??
    • 굳이 사용하실 필요가 없는거죠 ㅎㅎ
    • 2014.06.16 09:10
    비밀댓글입니다
    • 넵 제보 감사합니다. 중간에 스페이스바가 들어가야 줄비꿈이 되기 때문이에요.
    • 행보ㅗㄱ
    • 2014.06.17 11:21 신고
    안녕하세요

    죄송하지만 본문 상단에 반응형 애드센스 네모박스 두개 로 위의 비동기식 을 사용해서 만드려면
    어떻게해야 하는지요?.
  8. 안녕하세요. FastBoot v1.6.1버전 스킨 사용하고 있는데요.
    제가 방명록에도 광고를 두개 넣었는데 데스크톱에서도 모바일에서도
    방명록 글을 쓰고 난후엔 제대로 광고가 보이는데
    글을 수정하거나 삭제하고 나오면
    (adsbygoogle = window.adsbygoogle || []).push({});
    }
    </script> 코드가 보이면서 이상해집니다.
    해결할 수 있는 방법이 있을까요? ㅠ.ㅠ
  9. 실수로 Text인 문서를 Hex
  10. 지금까지 페이지는 그냥 둔 채로 이제부터 작성하는 페이지에 이런 식으로 광고코드를 넣어도 될까요?
    아님 전부 싹 바꿔야되나요
  11. 앞선 애드센스 포스팅을 보고 상단 우측에 비동기식(모바일 및 pc 출력)과 다른글 보고 좌측에 비동기식 설치 애드센스 포스팅을 보고 적용했습니다. 다만 이 글의 코드표에는 스크립트에 역슬러쉬(" \ ") 가 들어가 있는데, 여기 설명에는 그 역슬러쉬가 없습니다. 앞 선 포스팅으로 적용된 블로그를 위 포스팅 내용으로 고쳐주면 되는건가요??(역슬러쉬의 기능에 대해 궁금하지만, 깊어질 내용일 것 같아.. 역슬러쉬를 써서 적용된 블로그에 굳이 위 코드를 적용 할 필요가 있는지 유무에 대한 질의라고 보시면 되겠습니다.)
  12. 플러그인으로 적용하면 안되나요?
    • 좋은 정보네요
    • 2017.09.06 18:18 신고
    애드센스 다는거 오래걸리고 복잡하죠.

    그러다가 2차승인까지 난 다음에 광고를 막 달다간 정지먹을 수도 있구요.

    애드센스 광고가 되게 까다로워서 진짜 안전한 곳만 달아두는게 좋아요.

    안그러다가 한순간에 가는 경우가 많아서 ㅋㅋㅋㅋ

    그래서 안달리는 경우엔 국내 CPC나 CPI 같은 배너를 다는 경우가 많더라구요.

    저는 그나마 애드박스라고 어플로 되어 있는 곳에서 CPI 배너 받아서 대체하고 있어요.

    단가가 다른데보다 조금 더 쌔더라구요 배너도 직접 주는데다가

    애드센스처럼 승인도 필요한게 아니라서 병행해서 써야할 때 있으시면 한 번 써보셔도 좋을 것 같네요.

    https://goo.gl/YwYLLh 여기서 한 번 다운받아서 써보세요 도움이 되었으면 좋겠네요.

티스토리 툴바