배너가 애드블록에 의해 차단되는 경우 (Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 오류)

언론사 홈페이지에 클릭률을 높이기 위해 쿠팡 슬라이딩 배너가 많이 사용되고 있습니다. 보통 애드블록이 활성화되면 배너가 표시되지 않는 경우가 많을 것입니다. 저는 올해 초부터 의뢰를 받아서 쿠팡 슬라이딩 배너를 만들어 왔으며 꾸준히 기능을 개선하고 있습니다.😄 애드블록이 활성화되더라도 배너가 표시되도록 구현하고 드래그 방향을 오른쪽에서 왼쪽 또는 왼쪽에서 오른쪽 방향 중에서 선택할 수 있도록 했습니다.

언론사에서 많이 사용하는 쿠팡 슬라이딩 배너...

하지만 특정 배너의 커버 이미지가 애드블록이 활성화되면 차단되는 현상을 발견했습니다.

배너가 애드블록에 의해 차단되는 경우 (Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 에러)

쿠팡 방문하고 글 읽기와 같은 배너가 많이 이용되면서 사용자 불편이 가중되자 쿠팡에서 쿠팡 방문하여 계속 보기 배너를 차단했습니다.

그 대안으로 나온 것이 슬라이딩 배너입니다.

 

사용자들이 드래그하면 쿠팡 사이트로 방문하는 방식입니다.

하지만 일부 사이트에서는 배너를 스치기만 해도 쿠팡 사이트로 이동하도록 하여 문제가 되고 있습니다. 이에 대하여 쿠팡에서는 부정 광고 제보 포상금 제도를 운영하여 이런 불합리한 배너를 규제하고 있습니다.

애드블록이 활성화될 때 이미지가 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 오류로 차단되는 경우가 있을 수 있습니다.

여러 가지 이유가 있지만, 그중 하나로 이미지 이름으로 필터링되는 케이스가 있습니다.

애드블록(AdBlock, uBlock Origin 등) 확장 프로그램이 cover 이미지가 정상적인 워드프레스 이미지 URL임에도 불구하고 net::ERR_BLOCKED_BY_CLIENT로 차단하는 이유는 "광고 필터 규칙"에 의해 특정 URL 패턴이 광고로 간주되기 때문일 수 있습니다. 도메인과 무관하게 이미지 URL, 파일 이름, 클래스명, 경로 등에 특정 키워드가 포함되면 차단 대상이 된다고 합니다.

실제로 이미지 이름이 300x250과 같이 이미지 크기가 포함되었는데, 이는 전형적인 광고 표준 배너 사이즈라고 합니다. 이 때문에 이미지가 차단될 수 있습니다. 

다음의 경우에는 애드블록에 의해 차단될 가능성이 높으므로 참고하시기 바랍니다.

• 파일 이름에 "300x250" 등 광고 표준 배너 사이즈 포함
  → 300x250, 728x90, 160x600 등은 광고 표준 배너 사이즈입니다.
  → EasyList 등의 광고 필터 목록에서는 이 문자열이 포함된 경로를 자동 광고로 간주하여 차단합니다.
• 클래스명에 banner, ad, advert 등의 단어 포함
  → 예: <div class="customBanner active">, <p class="banner-bubble">
  → 이는 AdBlock이 DOM 기반으로 필터링하는 핵심 기준입니다.

참고로 티스토리의 경우 스킨 편집에서 ads, adsense와 같은 클래스 이름이 포함되면 수익형 블로그로 간주되어 자체 광고가 표시될 수 있습니다. 저는 티스토리 자체 광고 도입 이후에 애드센스 광고를 제거했지만 티스토리 자체 광고가 표시되었습니다. 티스토리 고객센터에 문의하니 스킨 파일에 ads와 같은 클래스명이 들어가면 수익형 블로그를 간주되어 티스토리 자체 광고가 표시될 수 있다는 답변을 들었습니다.

홈페이지 작업을 하는 과정에서 "ads", "adsense", "ad", "banner", "advert" 등의 클래스를 사용하지 않는 것이 바람직한 것 같습니다. 그리고 파일 이름에도 300x250와 같은 광고 표주 배너 사이즈를 포함하지 않는 것이 좋을 것 같습니다.

customBanner, banner-bubble, arrow 등의 클래스명은 widget-box, slide-box, custom-box 등으로 바꾸는 것이 안전합니다. 특히 banner, ad, advert, sponsor 등의 키워드는 AdBlock에서 강력하게 필터링되므로 사용하지 않도록 합니다.

참고

 

워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi) - 워드프레스 정보꾸러미

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)