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」*という記述でも非表示になってしまうようです。