DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript實現檢查頁面上的廣告是否被AdBlock屏蔽了的方法教程
JavaScript實現檢查頁面上的廣告是否被AdBlock屏蔽了的方法教程
編輯:關於JavaScript     

每個人都討厭廣告。看電視、看電影、看優酷、看網頁時,對滿天飛的廣告也是深惡痛絕。廣告是一個不招人喜歡的東西。但是,對一個中小網站站長/博客主來說,廣告幾乎是唯一的能成支持網站/博客正常運轉的資金來源。如果一個博客主,只是無私發布稿件,能堅持幾年的,很少。大多數慢慢失去了熱情。

火狐浏覽器和谷歌浏覽器裡都有能夠屏蔽頁面給廣告的插件,最有名的是AdBlock和AdBlock Plus。前幾天,我做一個統計,看看浏覽網站的用戶中有多少人使用了AdBlock插件,發現這個數目竟然有總浏覽人數的1/5。

1/5是一個不小的數目。如何能讓廣告位在這1/5的使用了AdBlock插件的用戶的頁面上用其它圖片代替呢?要想做到這一點,首先是要有個辦法知道當前浏覽器中使用了AdBlock插件。經過一些測試,我發現,AdBlock對“Ad”或“Google AD”這樣的詞非常敏感,只要是某個頁面元素的ID或css class名中有“Ad”字樣的,這個元素基本上都會被AdBlock插件屏蔽掉,也就是 display:none:

代碼如下:
<div class='google-ad testAd'> 這個div將會被屏蔽掉 </div>

有了這個規律,我就能夠使用JavaScript發現當前浏覽器是否開啟了AdBlock插件。首先,我們將Google廣告代碼放到一個div裡,並且將div的css class name裡放入一個很明顯的表示google AD的類名:

代碼如下:
<div class='google-ad testAd'> 這裡放置Google廣告代碼</div>

然後在頁面的底部用Js檢測,:

代碼如下:
if ($('.google-ad').height() == 0) showOtherImage();

這裡還有一個問題,Google的廣告通常是指Dom加載完畢後顯示的,為了保證在Google廣告加載完成後再進行探測,要給js代碼加入延遲執行特征,這樣避免了誤檢測:

代碼如下:
$(function(){
   setTimeout(function(){
  if ($('.google-ad').height() == 0)
   showOtherImage();
  },3000);
});

這裡的showOtherImage();方法裡我們能做些什麼呢?我們可以放一些京東、當當、亞馬遜會其它網站的促銷圖片和鏈接,通過獲取傭金,多少算是對損失的一點彌補。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved