AdBlockDetection 开源项目使用教程

AdBlockDetection 开源项目使用教程

1. 项目的目录结构及介绍

AdBlockDetection 项目的目录结构如下：

AdBlockDetection/
├── README.md
├── adblockDetector.js
├── adblockDetectorWithGA.js
├── config.js
└── example/
    └── index.html

目录结构介绍

• README.md: 项目说明文件，包含项目的基本信息和使用指南。
• adblockDetector.js: 基本的广告拦截检测脚本，不包含 Google Analytics 模块。
• adblockDetectorWithGA.js: 包含 Google Analytics 模块的广告拦截检测脚本。
• config.js: 项目的配置文件，包含调试和检测功能的配置选项。
• example/: 示例目录，包含一个简单的 HTML 页面，展示如何使用广告拦截检测脚本。

2. 项目的启动文件介绍

项目的启动文件主要是 adblockDetector.js 和 adblockDetectorWithGA.js。这两个文件分别提供了基本的广告拦截检测功能和包含 Google Analytics 的检测功能。

adblockDetector.js

这个文件提供了一个基本的广告拦截检测功能，可以在网页中检测用户是否启用了广告拦截器。使用方法如下：

<script src="adblockDetector.js"></script>
<script>
  (function() {
    var enabledEl = document.getElementById('adb-enabled');
    var disabledEl = document.getElementById('adb-not-enabled');

    function adBlockDetected() {
      enabledEl.style.display = 'block';
      disabledEl.style.display = 'none';
    }

    function adBlockNotDetected() {
      disabledEl.style.display = 'block';
      enabledEl.style.display = 'none';
    }

    if (typeof window.adblockDetector === 'undefined') {
      adBlockDetected();
    } else {
      window.adblockDetector.init({
        debug: true,
        found: function() {
          adBlockDetected();
        },
        notFound: function() {
          adBlockNotDetected();
        }
      });
    }
  })();
</script>

adblockDetectorWithGA.js

这个文件在 adblockDetector.js 的基础上增加了 Google Analytics 的支持。使用方法如下：

<script src="adblockDetectorWithGA.js"></script>
<script>
  (function() {
    var enabledEl = document.getElementById('adb-enabled');
    var disabledEl = document.getElementById('adb-not-enabled');

    function adBlockDetected() {
      enabledEl.style.display = 'block';
      disabledEl.style.display = 'none';
    }

    function adBlockNotDetected() {
      disabledEl.style.display = 'block';
      enabledEl.style.display = 'none';
    }

    if (typeof window.adblockDetector === 'undefined') {
      adBlockDetected();
    } else {
      window.adblockDetector.init({
        debug: true,
        found: function() {
          adBlockDetected();
        },
        notFound: function() {
          adBlockNotDetected();
        }
      });
    }
  })();
</script>

3. 项目的配置文件介绍

项目的配置文件是 config.js，它包含了调试和检测功能的配置选项。

配置文件内容

// config.js
module.exports = {
  flags: {
    debug: false, // 是否开启调试模式
    found: function() {
      // 检测到广告拦截器时的回调函数
    },
    notfound: function() {
      // 未检测到广告拦截器时的回调函数
    },
    complete: function(result) {
      // 检测完成时的回调函数，result 为检测结果（布尔值）
    }
  }
};

使用方法

在 adblockDetector.js 或 adblockDetectorWithGA.js 中引入配置文件：

var config = require('./config.js');

window.adblockDetector.init(config.flags);

通过以上配置，可以灵活地控制广告拦截检测的行为和输出。