본문 바로가기
반응형

안녕하세요. 오랜만에 스킨 업데이트(버전 3.0.1)를 진행했습니다. 이번 버전에서는 이전에 유료로 판매되던 Tskin을 무료로 제공하게 되었습니다. 이전의 유료 스킨이었던만큼 이번 업데이트는 완성도가 높은 스킨을 제공합니다.

티스토리 커스텀 스킨에서 애드센스 오류 발생 및 해결

이번 업데이트의 가장 주요한 특징은 애드센스 기능의 개선입니다. 이제 스킨 설정에서도 광고의 게시와 삭제를 토글버튼으로 쉽게 조절할 수 있도록 처리되었습니다.

문제 발생

티스토리 커스텀 스킨에서 애드센스 개선 과정 중 발생한 문제에 대해 설명드리겠습니다. 티스토리가 애드센스 광고를 공식적으로 적용하게 되면서, 공식 스킨이나 애드센스가 적용되지 않은 기존 스킨에서는 쉽게 광고를 추가할 수 있게 되었지만, 수동으로 애드센스 코드를 적용했던 스킨에서는 애드센스 충돌 문제가 발생한 것입니다.

원인

문제의 원인은 수동으로 애드센스를 개설할 때 생성된 client 코드와 티스토리 공식 애드센스를 적용했을 때 자동으로 생성된 client 코드가 다른 것입니다. 이는 하나의 웹페이지에 두 개의 client 코드가 존재하면서 문제가 발생한 원인으로 해석됩니다.

<!-- 티스토리에서 자동으로 생성되는 애드센스 코드 --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-11111xxxxxxxxx" crossorigin="anonymous"></script>  <!-- 본인이 수동으로 작성한 애드센스 코드 --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-22222xxxxxxxxx" crossorigin="anonymous"></script> 

해결 방법은 2개의 client 코드 중 하나를 제거하는 방법과 아래에 말씀드린 또다른 한가지 방법이 있었습니다.

해결방법

첫번쨰 해결 방법

애드센스 문제를 해결하기 위한 첫 번째 방법은 수동으로 개설한 애드센스 코드를 제거하는 것입니다. 이렇게 하면 광고를 미세하게 조절할 수는 없지만, 문제를 쉽게 해결할 수 있습니다. 티스토리의 공식 애드센스 광고 위치는 나쁘지 않으며, 광고 위치를 크게 수정하지 않아도 됩니다.

그러나 반대로, 티스토리의 공식 애드센스 연동을 해제하고 수동으로 개설한 애드센스 코드만 적용한 경우에는 여전히 오류가 발생할 수 있습니다. 티스토리에서 공식 애드센스 연동을 하던 하지않던 무조건 client 코드를 삽입하는 것으로 보입니다. (코드를 어떻게 만드는 것인지 원...)

하지만 미세하게 조절이 필요한 경우도 있어서 수동 애드센스를 포기 못할 경우도 있겠지요.

두번째 해결 방법

두번쨰 해결방법이 현재 Tskin에 적용한 방법이고 애러는 제거되었으나 아직 영향도는 살펴봐야 합니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-11111xxxxxxxxx" crossorigin="anonymous"></script>  <!-- 아래의 코드를 수정해 주세요 --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-22222xxxxxxxxx" crossorigin="anonymous"></script> 

위의 코드 중 컨트롤이 가능한 수동으로 단 코드를 아래와 같이 수정하는 것입니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js crossorigin="anonymous"></script> 

?client=ca-pub-22222xxxxxxxxx" 이 부분을 제거하는 것입니다.

위 방법을 통해 현재까지 애드센스 오류가 발생하지 않고 광고가 정상적으로 표시되고 있습니다. client 코드를 특정하지 않으면서 문제를 해결한 것으로 보입니다. 그러나 이 방법의 영향도는 좀더 살펴봐야 할듯 합니다.

결과

현재 UXGJS_Tskin_BASIC_V3-V3.0.1 버전에서 이 문제를 해결하였습니다.

UX 공작소

UX와 UI에 관해 내가 알게된 다양한 이야기를 공유해요~