/multi-adblock-detect

Multi Adblock Detect (with TypeScript + React Hook support)

Primary LanguageTypeScriptOtherNOASSERTION

Multi Adblock Detect (with TypeScript + React Hook support)

This package contains several adblock detection techniques, drawn from different sources on the internet.

Example Usage

import { useAdBlockDetect } from "multi-adblock-detect";

function SomeReactComponent() {
  const adblockerDetected: boolean = useAdBlockDetect();
}

The boolean above will start out as false, but will flip to true if/when an adblocker is detected — allowing you to trigger the render of an ablock advisory message/banner, for example.

Underlying Algorithms' Effectivenss

The table below shows the effectiveness level of the several ad blocker detection techniques included here:

Detection Technique uBO uB AB ABP Gh. AG AL PB FA ABU
...FetchOrXhrAdsByGoogle
...FetchDoubleClick
...ScriptSailthruJs
...BaitElementOrXhrGoogle
...ScriptAdsByGoogle
...ScriptAdsJs

The presence of uBO and FA cannot be detected, at this time.

The various ad blockers (abbreviated above) are:

You can import one or multiple of these detection techniques for use in your project.

Techniques

Each technique is available as a regular function, and as a React hook.

  • Standard JavaScript function: detectAdBlockFetchOrXhrAdsByGoogle

    • React Hook variant: useDetectAdBlockFetchOrXhrAdsByGoogle
  • Standard JavaScript function: detectAdBlockFetchDoubleClick

    • React Hook variant: useDetectAdBlockFetchDoubleClick
  • Standard JavaScript function: detectAdBlockScriptSailthruJsrequires a static asset

    • React Hook variant: useDetectAdBlockScriptSailthruJs
  • Standard JavaScript function: detectAdBlockBaitElementOrXhrGooglerequires a static asset

    • React Hook variant: useDetectAdBlockBaitElementOrXhrGoogle
  • Standard JavaScript function: detectAdBlockScriptAdsByGoogle

    • React Hook variant: useDetectAdBlockScriptAdsByGoogle
  • Standard JavaScript function: detectAdBlockScriptAdsJsrequires a static asset

    • React Hook variant: useDetectAdBlockScriptAdsJs

Usage

The function variant takes a callback (of type () => void), which gets called/triggered if an ad blocker is detected.

The custom hook contains a useState which intially starts out as false, and eventually updates to true if an ad blocker (this state is returned by the custom hook).

Note: there can be false positives (i.e. false detection of an ad blocker when none is present), but it is likely rare (and likely caused by an extension that does ad blocker-like things, like blocking tracking).

LICENSE

This code is derived from several sources. All original code is licensed under the Apache License, Version 2.0, see full text at: https://github.com/arjun-menon/multi-adblock-detect/blob/master/LICENSE.md

The detection code is derived from multiple sources.

The wrapper code here is released under Apache 2.0.