WEBビーコンを非表示

A8.net や Amazon アソシエイト(アフィリエイト)の広告コードにはもれなく 1px × 1px の GIF 画像が付いてきます。ボクの記憶が正しければあの GIF はインプレッションをトラッキングする「Webビーコン」という名前だったような。

あのビーコンの付いたアフィリエイト広告コードを貼り付けると、border(枠線)の問題とか画像のサイズ調整などで結構邪魔になるんですよね。

ビーコンを消そうと CSS で img をいじくると他の画像に思わぬ影響が出ていることに後で気が付いたり。

そうならないように、あのトラッキング用ビーコンだけピンポイントで非表示にするように CSS で調整してみます。

Sponsored Link

Webビーコンがレイアウト上 邪魔になるケース

テンプレートをカスタマイズするとき、Webビーコンがどんなふうに邪魔になるのか、ボクの経験から実例を挙げます。

border(枠線)が出てしまう

今となってはレアケースかもしれませんが、何年か前にボクが初めて Google Blogger をやり始めた頃、記事にアフィリエイトリンクを貼るといつも小さな□が表示され何だろうと悩んだ記憶があります。Google Blogger だけなぜか四角枠が表示される。他の無料ブログでは見たことがなかったのに。

ほどなくアフィリエイト広告コードに付いてきたWebビーコンの 1px × 1px の GIF画像に border が描かれているということに気が付いたと。Goolge Blogger のテンプレートは img に 1px の枠線をひくように定義されていたんですね。

これは CSS に border{display:none}とか書いておけば簡単に消える話です。

サイドバーに 125px などのバナーを2つ横に並べるとレスポンシブで縦になる

これは Seesaa ブログをレスポンシブデザインにカスタマイズし始めてから気が付いたことです。

例えば 300px 幅のサイドバーに縦横 125px のバナーを2つ float:left で横並びにします。2つ合わせて幅 250px だから余裕で収まる(正確にはビーコン2つの 2px が追加されて 252px ですが)。もちろん縦横 120px のバナーでも同じで、要はピーコン分を含めてもサイドバーに余裕で収まるサイズのバナーを2つ横並びに配置したときに共通の話。

これを全体幅 320px などで表示させてみると、float で左右に横並びになるはずの 125px バナーが縦並びになっちゃう。恐らく CSS のどこかでサイドバーにある img の幅などをいじっちゃっているのが直接の原因でしょう。1px の Web ビーコンが拡大されて幅を取ってしまい、右側の 125px バナーを次の行に押し下げている。

ブログ記事のアイキャッチ画像の幅・高さをCSSで調整するとつられてWebビーコンが拡大する

これも最近悩んだことです。問題になるのは TAG ページ(page_name eq "tag")と SEARCH ページ(page_name eq "search")の場合。

ボクは INDEX ページ、CATEGORY ページ、ARCHIVE ページ、TAGページ、SEARCHページが同じように見えるようカスタマイズしています。どれを開いても基本の INDEX ページにデザインを合わせている。

こうすると何が起こるかというと、例えばTAG ページを表示したときに記事中の画像に付けておいたクラス(class)が HTML上に吐き出されなくなります。

つまり、

<img src="http://画像URL" class="entry-image">

と記事中に書いているのに、TAGページが開かれたときの HTML は単に

<img src="http://画像URL">

と表示されているわけです。

記事(page_name eq "article")以外の上記ページでアイキャッチ画像を常に横幅 300pxで表示するように整形しようと CSS に定義しようにも、entry-image というセレクタが無くなってます。だからアイキャッチ画像のプロパティを変更するなら CSS で img そのものに width:300px とするしかない。すると当然アフィリエイト広告のWebビーコンもつられて拡大されます。1px のビーコンが幅 300px になるわけです。

こういった問題の手っ取り早い解決策が、Webビーコンを非表示にしてしまうという方法です。

1px の WebビーコンだけCSSで非表示にする

アフィリエイトの広告コードに付いてくるWebビーコンってもともとインプレッションをカウントするもので、直接成約をカウントするのはアフィリエイトリンク(の ID)ですよね。

Webビーコンを削除してしまうとインプレッションが分らなくなりますからコンバージョン率に影響が出る。インプレッションが無いのに制約があるという異常な状態になれば成約が取り消されるかもしれない。広告コードを改変しているので成約どころかアカウントの停止などもあり得る。だから削除はしないで非表示にします。

.text img[width="1"]{display:none}

textクラスの範囲内にある img のうち幅が1pxのものだけ非表示にしなさい。

他の img に影響を出さずピンポイントでアフィリエイトWebビーコンだけに反映させるにはこういった書き方もあるかしらと。

最初にある .text は Seesaa のコンテンツ>記事 >記事 HTML に記述されている初期値で、「記事タイトル(.title)」と「記事下のタグやカテゴリのかたまり(.posted)」 に挟まれたまさに本文に割り当てられたクラスセレクタです。

サイドバーで float している 125px バナーが縦並びになってしまうようなケースでは .text を .side に変更したものを別に追記しておきます。

.side img[width="1"]{display:none}

カスタマイズは自己責任で

CSS で img をクラス限定、サイズ限定で非表示にすればWebビーコンが非表示にできてレイアウト(特にレスポンシブ)の調整が少しラクになります。

これを実装される場合はすべて自己責任でお願いします。ボクは結果についていかなる責任も負いませんの予めご了承ください。

個人的にはWebビーコンを非表示にしても、広告コードを改変したわけでもないし単に非表示なのでインプレッションも正しくカウントされるはずだし、成約になんら影響はないと考えております。

Sponsored Link

この記事へのコメント

2件
レスポンシブサイトをコーディングしていたのですが、imgにwidth:100%;を指定すると
アフィリエイトの広告コードに付いてくる画像も合わせて拡大されるので困ってました。

こちらの「1px の WebビーコンだけCSSで非表示にする」で無事に非表示にでき大変助かりました。
ありがとうございましたm(_ _)m
ドミノ at
こんにちは。
参考になる記事をありがとうございました。

1pxのWebビーコンだけCSSで非表示にするということなのですが、非表示にしても計測はされるのでしょうか?確かめる術がないのですが、この部分だけが気になりました。
トシ at
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link