자바스크립트 줄이기: 애드센스 광고 효율적으로 게시하는 방법

안녕하세요, 이번 애드센스 광고 효율적으로 게시하는 방법에 대해서 준비했습니다.

항상 저희는 사이트 속도에 민감해합니다. 그리고 그를 확인하러 PageInsight 등 속도를 테스트하는 사이트나 워드프레스를 쓰신다면 Jetpack boost를 통하여 조회하게 되는데요.

조회하고 난 후에 보면 쓸데없는 스크립트 줄이기와 같은 경고 문구나 나오곤합니다.

여기서 애드센스를 호출할 때, 조금은 더 효율적으로 호출할 수 있도록 포스팅을 하였습니다.

우선 들어가기에 앞서 광고 코드들간 비교와 그를 토대로 작성해보려고 합니다.

애드센스 광고 코드 비교

저는 아래와 같이 3개의 수동 광고를 사용합니다.

( * Sidebar – 사이드바, Display – 게시글 내 수동광고, Infeed – 게시글 리스트 * )

각 광고들의 코드를 먼저 한번 보여드리겠습니다.

** ca-pub, data-layout-key, date-ad-client, data-ad-slot 는 보안 및 각자의 고유번호가 있기 때문에 임의 텍스트로 처리하였습니다. **

// MM_INFEED 광고코드
<!-- MM_INFEED AD CODE -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="xxxxxxxxxxxxxx"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

// MM_Display 광고코드
<!-- MM_Display AD CODE —>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- MM_display -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

// MM_Sidebar 광고코드
<!-- MM_Sidebar AD CODE -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- MM_Sidebar -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

다들 뭔지 아시겠나요?
어느 부분이 공통적으로 보이셨던가요?

바로, ‘<script></script>’구문이 앞뒤로 붙어있는데 이게 광고를 하나 넣을 때마 호출이 된다는겁니다. 그래서 저는 이걸 처리하는 방법에 대해 알려드리려고 합니다.

광고 효율적으로 삽입하여 출력하기

우선 다들 Head & Footer code 플러그인이 준비되어 있으셔야합니다.

‘<script></script>’구문이 광고 코드에 총 2개가 있습니다.

여기서 처음에 있는 ‘<script></script>’구문에 있는 코드를 떼어냅니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>

위와 같은 코드를 복사합니다.

워드프레스 관리자페이지 > 도구 > Head & Footer Code로 이동해하여 Head 영역에 아래와 같이 붙여넣습니다.

그 후에 하단에 변경사항 저장 버튼을 눌러 저장해줍니다.

이렇게하면 코드를 훨씬 줄일 수 있으며, AMP 코드를 삽입하신 분들은 넣으시지 않아도 됩니다.

앞으로 코드를 복사하여 붙여 넣을 때, 아래와 같은 부분만 작성하여 넣으시면 정상적으로 광고가 노출이 되어집니다.

<!-- MM_Sidebar -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

여기서 질문이 있을 수 있습니다. 왜 하단에 있는 Script는 안하냐고요? 저 부분은 떼어내면 출력이 되어지지 않는 문제가 생길 수 있습니다. 그래서 저 부분은 따로 떼어내지 않고 사용합니다.

그러면 최종적으로 코드를 어떻게 넣어야 되냐면

<div>
<!-- MM_Sidebar -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

같이 삽입하면 정상적으로 출력이 되어집니다. 감사합니다.

함께 보면 더 좋은 정보들

애드센스 광고 코드 비교

광고 효율적으로 삽입하여 출력하기

Recommended Post