ホームページ運営者は注意！人気アドオン「アドブロックプラス」による思わぬ弊害

2018年01月31日

CMS・Webサイト制作デバイス・ブラウザ

Web担当者の皆様は「アドブロックプラス」というアドオンをご存知でしょうか？
Google ChromeやFirefoxなどのブラウザで利用できる拡張機能で、ブラウザ上に表示される広告やYouTubeの動画再生前に流れる広告などを非表示にすることができます。

広告提供側にとっては非常に頭の痛い存在ですが、実はホームページのエラー表示に繋がる要因も含んでいます。
今回は、ferretで実際に起こった事例を元に、アドブロックプラス利用で起こるエラー表示予防策をご紹介します。

アドブロックプラスとは？

アドブロックプラスとは？
アドブロックプラス
(Google Chrome版)
アドブロックプラスは、ドイツの「Eyeo GmbH」が2,006年から提供しているツールで、Webブラウザ上に表示されるあらゆる広告をブロックすることができます。
ダウンロードページには、ブロックできる広告の種類は以下のように記載されています。

・ バナー
・ YouTube ビデオ広告
・ Facebook 広告
・ ポップアップ
・ その他目障りな広告全て

「控えめな広告」という機能をオンにすれば、小さく、静的だと判断された広告は表示させることができますが、基本的にはほとんどの広告がブロックされる仕様となっています。

世界中で人気を博し、全世界で約1億4000万人以上のユーザーが利用しています。日本国内でも徐々にユーザーが増えてきているようです。
こちらのアドブロックプラスは、比較的に自動的に広告を判別しているらしく、まれに広告以外のものも非表示にしてしまうことがあるようです。

以下より、アドブロックプラスによって実際に非表示になってしまったケースをご紹介します。

ホームページのCSSに「ad」「add」が含まれていると表示されない

ferretには「カリキュラム」というカテゴリがあり、基本の戦略からSEOやリスティングなどのWeb集客、コンバージョン施策、SNS運用方法についての基礎を体系立てて解説しています。
先日、こちらのカテゴリページをリニューアルしたのですが、その際、カリキュラムの１つの「Facebook広告」のアイコンのマークのみが表示されないという現象が確認されました。

2-1

こちらのアイコンのCSSは以下のように記述されていました。

<div class="icon" id="facebook-ad"></div>

調べたところ、特にCSSの記述に問題はありませんでした。
原因がなかなかつかめなかったのですが、CSS内に「ad」という記述があるため、もしかするとアドブロックプラスが原因なのではないかと仮定し、一旦削除してみたところエラーは解消されました。

2-1(2)

CSSの記述も以下のように変更しました。

<div class="icon" id="facebook-adv"></div>

他にも複数、非表示になっている箇所があったため、全てのページをチェックして*「ad」が含まれる記述を削除しました。
検証したところ、「add」*という記述でも非表示になってしまうようです。

まとめ

アドブロックプラスが原因でホームページ上の一部の表示にエラーが出てしまうというのは、実際にこのアドオンを入れている方でなければ気づけない事象です。
今回のようにアイコンが非表示になるだけでなく、テキストリンクが非表示になってしまうと大きな損害に繋がってしまう可能性もあります。
ネット広告が盛り上がる一方で、広告表示を煩わしく感じる人も増え、アドブロックプラスの需要も高まっていくことが予測されます。
エラー表示により無駄な損失を避けるためにも、一度CSSに「ad」「add」という記述がないか確認してみましょう。