ページの配信中に広告ブロックに関連する動作の存在を検出するための JavaScript。
JavaScript (adblockDetector.js) は、次の Web ブラウザーでの広告ブロックに関連する動作を検出するためにテストされています。
このスクリプトは、ブラウザベースの広告ブロック ツールによって隠される可能性が高い一連の DIV を作成することによってこれを実行します。
このスクリプトにはまだ含まれていない追加の戦術:
必要な検出スクリプトをダウンロードし、Web サイトに追加します。 JavaScript を HTML に組み込む方法はいくつかあります。
| スクリプト名 | 説明 |
|---|---|
| adblockDetector.js | Google Analyticsモジュールを使用しない広告ブロッカー検出スクリプト |
| adblockDetectorWithGA.js | Google Analyticsモジュールを使用した広告ブロッカー検出スクリプト |
AdBlockDetectionWithGA.js を使用すると、スクリプトの 82 行目で GA 追跡 ID を指定するように求められます。このスクリプトを参照すると、ユーザーのブラウザ上の AdBlock に関する特定のイベントが追跡されます。詳細は Google Analytics ダッシュボードで確認できます。ユーザーが広告ブロックを使用しているかどうかを確認する方法は次のとおりです。
まず、ページビューを妨げないように、別の GA-Tracking ID を作成することをお勧めします。 Adblock の使用に関する GA については、以下の手順に従ってください。
残念ながら、ダッシュボードに取り付ける方法はまだわかりません。したがって、次回 GA にアクセスするときに、ユーザー エクスプローラーに移動し、[新しいセグメントの追加] をクリックします。そして、以前に作成したセグメントが見つかります (つまり、広告ブロックが検出されたユーザー用に 1 つ、広告ブロックが検出されなかったユーザー用に 1 つ)。それらを選択して「適用」をクリックすると、レポートされたデータが表示されます。
以下の画像のようになります。
これは推奨される組み込み方法です。選択した検出スクリプトに含まれる関数は、親フレームの HTML に直接組み込む必要があります。
これを行うには、選択したコードのコンテンツを、配信される HTML の script タグでラップします。
選択したコードを Web サーバー上で独立したファイルとしてホストし、配信された HTML からこのファイルを参照することができます。
外部スクリプト ファイルを使用すると、広告ブロッカーによってブロックされる可能性があります。ファイルに別の名前を使用すると、汎用フィルターによってブロックされる可能性が低くなります。
選択したコードの関数を、外部スクリプト ファイルとしてホストされる既存のスクリプト ライブラリに統合することができます。これを行うと、広告ブロッカーが外部スクリプト ファイル全体をブロックしている場合、検出を避けようとして広告ブロッカーを使用している訪問者にとって、サイトの機能が低下する可能性があります。
@prop フラグ
| オプション | タイプ | 説明 |
|---|---|---|
| デバッグ | ブール値 | 追加のデバッグ出力をコンソールに出力する必要があることを示します |
| 見つかった | 文字列(@関数) | 広告ブロックが検出された場合に起動する関数 |
| 見つかりません | 文字列(@関数) | 広告ブロックが検出されなかった場合に起動する関数。これは、広告ブロックが検出されないたびに起動され、「完了」が検出された後にのみ実行されるアクションへの入力を提供する必要があることに注意してください。 |
| 完了 | 文字列(@関数) | テストが完了すると起動する関数。 |
テスト結果 (ブール値) は、コールバックの例のパラメーターとして含まれます。
window . adblockDetector . init (
{
found : function ( ) { ... } ,
notFound : function ( ) { ... }
}
) ;以下のコードを HTML ページに追加します。
< script src = "./adblockDetector.js" > < / script >
< script >
// Configure the adblock detector
( 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 >HTMLページの本文に以下のコードを追加します。
< div class =" center " >
< h5 class =" bg-success " id =" adb-not-enabled " style =" display: none; " > AdBlock is disabled </ h5 >
< h5 class =" bg-danger " id =" adb-enabled " style =" display: none; " > AdBlock is enabled </ h5 >
</ div >フォークしてください！機能ブランチを作成します: git checkout -b my-new-feature 変更をコミットします: git commit -am '機能を追加' ブランチにプッシュします: git Pushorigin my-new-feature プルリクエストを送信します
