JavaScript >> Javascript 文檔 >  >> JavaScript

如何阻止廣告攔截

如果您是網站所有者,那麼您很有可能依靠某種形式的廣告來支付託管費用。如果您足夠幸運,有很多人訪問您的網站,您甚至可以支付自己的薪水作為對您辛勤工作的補償。

另一方面是瀏覽網頁的人。他們厭倦了被侵入性廣告、華麗的橫幅和破壞他們瀏覽體驗的公告轟炸。他們不需要祝賀成為您網站的第 100 萬訪問者,他們不想拍五部 iPhone,他們唯一的願望就是閱讀您要說的話。

由於用戶隱藏廣告比整個行業發展廣告道德要容易得多,因此很快出現了一個簡單的解決方案。

然後是廣告攔截器

adblocker 的想法很簡單——它是一個瀏覽器擴展,可以阻止或刪除頁面上的廣告。然而,“解決方案”並不是一個恰當的術語,因為它只服務於一方——用戶。坦率地說,對他們來說沒有比這更好的交易了。這些擴展去除了除頁面主要內容之外的所有內容,為免費這個詞帶來了全新的維度——這不僅意味著他們不付費;現在意味著你也沒有得到報酬!

這對於網站所有者來說並不是一個大問題 - 使用廣告攔截器的人並不多,它確實讓用戶更喜歡瀏覽您的網站。但隨著近年來瀏覽器擴展的想法爆炸式增長,廣告攔截器的激增也是如此。快速瀏覽插件目錄會發現廣告攔截器是最受歡迎的類別。

小型網站面臨的風險最大,因為它們無法吸引廣告商的相同興趣並嘗試不同的格式。超過 20% 的網頁瀏覽量被廣告攔截器蠶食(這些是 Tutorialzine 的數字),很明顯必須做出一些改變。

神奇的是,在過去的幾周里,有消息稱最受歡迎的廣告攔截器 AdBlock Plus 將開始默認允許可接受的廣告。從這個決定引起的騷動來看,很大一部分人仍然會選擇完全屏蔽廣告或轉移到不同的擴展程序。這意味著我們作為出版商仍將不得不在未來一段時間內解決這個問題。一種解決方案是檢測廣告攔截器的存在。

如何檢測廣告攔截

這很簡單——我們將使用廣告攔截器的過度干預來對抗它。要阻止廣告,此類擴展程序必須查找它認為包含顯示廣告的代碼並阻止它們加載的文件。所以想法是有一個名為 advertisement.js 的 JS 文件 ,這會觸發adblock的過濾器,然後檢查文件是否已經加載。

這是文件本身:

assets/blockBlock/advertisement.js

jQuery.adblock = false;

就是這樣,一行。它在全局 jQuery 對像上創建了一個新屬性,我們稍後將查找該屬性。如果未定義,則表示該文件已被阻止加載。

assets/blockBlock/blockBlock.jquery.js

(function($){

    if ($.adblock === undefined){
        $.adblock = true;
    }

    $.fn.showOnAdBlock = function(){

        if($.adblock){
            this.show();
        }

        return this;
    };

})(jQuery);

要確定是否存在廣告攔截器,只需對 $.adblock 變量進行條件檢查。在同一個文件中,我們還定義了一個輔助方法,該方法將有條件地顯示一個元素,具體取決於此類擴展是否處於活動狀態。

更新: 這個插件也可以在 Github 上找到。

在您的網站中包含插件時,請記住在之後包含上面的文件 jQuery 庫。對於演示頁面,我還使用去年的確認對話框替換來顯示一個漂亮的對話框,通知用戶他們應該禁用 adblock 來查看頁面。這是代碼:

assets/js/script.js

$(function(){

    if($.adblock){
        $.confirm({
            'title'     : 'Adblocker active!',
            'message'   : 'You are running an ..',
            'buttons'   : {
                'I will!'   : {
                    'class' : 'blue',
                    'action': function(){
                        // Do nothing
                        return;
                    }
                },
                'Never!'    : {
                    'class' : 'gray',
                    'action': function(){
                        // Redirect to some page
                        window.location = 'https://tutorialzine.com/';
                    }
                }
            }
        });
    }
});

砰!現在您可以知道誰在使用廣告攔截器。這種簡單的方法適用於目前使用的大多數流行的廣告清理插件。

它有什麼用途?

好的,所以你有一段代碼可以告訴你一個人是否在使用廣告攔截器。現在要做什麼?一些想法隨之而來。我不會親自使用任何壞的或邪惡的,但我有義務分享。

好主意

  • 跟踪有多少人屏蔽了您網站上的廣告。如果百分比高,您可以嘗試不同(非橫幅)類型的廣告;
  • 用一些有用的內容替換您網站上通常投放廣告的區域;
  • 以 Jimmy Wales 的令人心碎的個人魅力告知訪問者 adblock 如何損害小型網站。

壞主意

  • 顯示不歡迎被廣告屏蔽的用戶的重要信息(如在演示中);
  • 募捐;
  • 替換為未被擴展程序阻止的聯屬網絡營銷計劃的廣告。

徹頭徹尾的邪惡想法

  • 為被廣告屏蔽的用戶設置付費牆;
  • 需要使用 facebook 登錄或註冊;
  • 使用您的會員鏈接重定向到每日交易網站。

光明的未來?

希望 AdBlock Plus 決定展示非侵入性廣告背後的舉措能在社區中引起共鳴,我們將享受對發布商和訪問者都可接受且有用的廣告。

您對 AdBlock 有何看法?


Tutorial JavaScript 教程
  1. 我最喜歡的新程序員免費資源

  2. 創建一個沒有一行 JS 的 Counter 組件

  3. 服務端路由的回歸

  4. 使用 Yup 進行表單驗證

  5. 是否可以創建位置實例?

  6. 帶有序列化和額外數據的 jQuery post()

  7. 使用無服務器插件在 AWS 上創建無服務器網站

  1. 代碼封裝

  2. 最常見的編程案例類型

  3. 默認數組值

  4. 使用 JavaScript 編寫您的第一個 API 測試

  5. jQuery AJAX 圖片上傳縮略圖示例

  6. 對格式化數字的自定義數組求和 JS

  7. 2013 年平均頁面權重增加了 32%

  1. 如何使用來自數據庫 C# 的數據創建 chartjs 圖表

  2. 如何使用 React、Firebase、Redux 製作一個簡單的帖子和回复系統

  3. 使用 Next.js、Supabase 和 TailwindCSS 構建的圖像託管服務。 📸⚡️📁

  4. React、Diffing 和 DOM