はてなブログのスマホ用テーマは、テーマ自体にアドセンスや任意のアクセス解析を設置できない。今のところ課金・無課金に関係なくカスタムできないからだ。これを何とかする方法について言及する。
アドセンスやアクセス解析コードを追加する場所
スマホ用テーマをカスタムできないから、通常は広告を設置できない。
ただし、記事ごとにアドセンスコードを記事上部に記入すれば、広告を設置できる。
まず、アドセンス広告を記事の上部に貼り付けましょう。これは記事ごとにHTMLコードを挿入しないといけません。記事編集ページのHTML編集からアドセンスのHTMLコードを貼り付けます。コツは記事の前置きが終わって本題に入る手前あたりの位置で貼り付けること。「はじめに」の章が終わるくらいがいいかもしれません。
広告収入が一挙2倍に！はてなブログスマホ版ページに効果的にアドセンス広告を表示する方法とは - サラリーマン休日副業で月10万円以上目指すページ
また、フェイスブックやツイッターなどのソーシャルパーツが表示される記事下部にアドセンスコードを追加し、スマートフォン版にも表示する
にチェックをいれれば、広告を設置できる。
記事の下部は一括して同じ位置にアドセンス広告を表示することができます。ブログのデザイン編集で記事タブ内の記事下欄を編集します。アドセンスのHTMLコードを入力し、スマートフォン版にも表示するにチェックを入れるだけです。
広告収入が一挙2倍に！はてなブログスマホ版ページに効果的にアドセンス広告を表示する方法とは - サラリーマン休日副業で月10万円以上目指すページ
上記で、広告を追加した部分のどちらかにアクセス解析コードを設置すれば、記事ページへのアクセスは解析できる。
記事下部にアクセス解析コードを挿入する方がメンテナンス性は良い。記事ごとにコードを入れると、将来的にスマホ用テーマがカスタム可能になった時に記事ごとに追加したコードを削除するなどの手間が発生するからだ。
二重カウントを防止
PC用コードとスマホ用コードでアクセスを二重カウントされないようにする。スマホ用コードでは、PC用コードが読み込まれていないのをJavaScriptで判定してから解析されるようにする。以下はxreaのコードでの具体例。
<script type="text/javascript">;
if(ID==null){;
var ID="(あなたのナンバー)";var AD=0;var FRAME=0;
document.write('<scr'+'ipt src="http://j1.ax.xrea.com/l.j?id=(あなたのナンバー)" type="text/javascript"></scr'+'ipt>')
}
</script>上記コードを簡潔に解説する。
- PCでアクセスすると、アクセス解析コードで使う変数
IDが定義済みなのでifの条件を満たさない。よってスマホ用コードは追加されないので二重カウントされない。 - スマホでアクセスすると、PC用コードが存在しないので変数
IDが未定義のままになりifの条件を満たす。よってスマホ用コードが追加されるが、PC用コードがないため二重カウントされない。
なお、PC用アクセス解析コードはヘッダのタイトル下に挿入するとしている。
また、スマホ表示で解析されるのは各記事ページだけであり、ブログのホームページなどは解析対象になっていない。
無料版はてなブログでのアドセンス追加
現在は無課金ではてなブログを利用しているが、試しにアドセンス広告を記事ページに３つ追加した。
- PC表示では、はてなブログのアドセンス１つと追加した３つの合計で４つ表示された。
- スマホ表示では、はてなブログのアドセンス３つと追加した３つの合計で６つ表示された。
アドセンスが４つ以上表示されるのは、一部の例外を除き規約違反になるので、proに課金してからアドセンス広告を追加したほうがよさそうだ。
2014年4月4日に追記
アクセス解析の挿入については次の記事で記載した場所の方がよさそう。JSによる分岐処理が不要。