この記事を読んで実現できること

はてなブログをMarkdown記法で書く
任意の場所にGoogle AdSenseを埋め込める
しかも、その際に長々とコードを書かない
AdSenseのチャンネルは選択可能

はじめに

こちらの記事ではてなブログの記事内にGoogle AdSenseを埋め込む手法が紹介されていて自分も実施してみた。

しかし、記事の開始前と記事の終了後にAdSenseが表示されるものの、はてなブログ無料版では、はてなブログの広告より下に表示されてしまった。

私のブログのアクセス数では元がとれないので有料プランを申し込むつもりはない。

さらには、AdSenseのクローラでNG判定されると言われている、Amazonなどへのリンクが多いページが既に存在している。このようなページではAdSenseを表示させたくない。

Markdown記法への興味

私は最近仕事でもMarkdown記法を覚え、はてなブログが対応しているならMarkdown記法に移行したいと考えていた。

Markdownだと簡単にきれいな記事が書けそう。

var showStr = '<div>こんにちは。</div>';  
document.write(showStr);

↑こんな感じ

課題

Google AdSenseは任意の場所に貼り付けたい
Google AdSenseのチャンネルを使って分析はしたい
Markdown記法では、記事を書く際にhtmlがいじれない
Markdown記法でjavascriptが使えるのかわからない

従来のAdSenseの埋め込み方

記事を書く際は「見たまま編集」
htmlを直接編集してAdSenseのスクリプトを埋め込むという手順でAdSenseを埋め込んでいた。

やってみよう

1. 記事内でjavascriptを動かす

なにはともあれ順番にできることを試す。記事内に直接javascriptを書いてみる。これがうまく動くならどうにでもなりそうだ。

<script type="text/javascript">
    var showStr = '<div>こんにちは。</div>';  
    document.write(showStr);
</script>

↑これは、Markdown記法にのっとっとて書いているわけで、 "コードを表示する"という命令をなくしてみる。

動いた！つまりjavascriptはそのまま書けば良いんだ。

2. Google AdSenseを任意の場所に表示する

AdSenseの表示本体エンジンは

<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

こいつだけだ。 AdSenseのコードを取得してくると長々とコードが羅列されているが、自分のIDと広告サイズをセットしているだけにすぎない。では、それらのセットは全記事共通で良いのではないか。

はてなブログの「デザイン」->「カスタマイズ」->「ヘッダ」と進む。

f:id:madachugakusei:20140208113335p:plain

この、ヘッダーのhtmlにIDを設定するために次のコードを書く。

<script type="text/javascript">
    var show_width = document.documentElement.clientWidth;
    if (show_width >= 480) {
        document.write("<br>");
        google_ad_client = "ca-pub-XXXXXXXXXXXXXXXXXX";
        google_ad_slot = "YYYYYYYYYY";
        google_ad_width = 728;
        google_ad_height = 90;
    } else {
        document.write("<br>");
        google_ad_client = "ca-pub-XXXXXXXXXXXXXXXXXX";
        google_ad_slot = "ZZZZZZZZZZZZ";
        google_ad_width = 300;
        google_ad_height = 250;
    }
</script>

こちらの記事で紹介した、画面サイズで広告の種類を変更する手法

そして、記事内でAdSenseを表示したいところで

<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

こいつを書く。

3. Google AdSenseのチャンネルを指定する

クリック状況を分析をするためにはチャンネルが必須。クリックされない場所に広告貼っても、邪魔になるだけだから、見栄えをよくするためにも外してしまったほうが良い。

先ほどのヘッダーに書いてるコードを下記のように変更する。

<script type="text/javascript">

    // ヘッダに貼る広告
    function setHeaderAdSenseInfo() {
        var show_width = document.documentElement.clientWidth;
        if (show_width >= 480) {
            document.write("<br>");
            google_ad_client = "ca-pub-XXXXXXXXXXXXXXXXXX";
            google_ad_slot = "YYYYY1";
            google_ad_width = 728;
            google_ad_height = 90;
        } else {
            document.write("<br>");
            google_ad_client = "ca-pub-XXXXXXXXXXXXXXXXXX";
            google_ad_slot = "ZZZZZ1";
            google_ad_width = 300;
            google_ad_height = 250;
        }
    }

    // 記事下に貼る広告
    function setInnerAdSenseInfo() {
        var show_width = document.documentElement.clientWidth;
        if (show_width >= 480) {
            document.write("<br>");
            google_ad_client = "ca-pub-XXXXXXXXXXXXXXXXXX";
            google_ad_slot = "YYYYY2";
            google_ad_width = 728;
            google_ad_height = 90;
        } else {
            document.write("<br>");
            google_ad_client = "ca-pub-XXXXXXXXXXXXXXXXXX";
            google_ad_slot = "ZZZZZ2";
            google_ad_width = 300;
            google_ad_height = 250;
        }
    }

</script>

これはAdSenseエンジンに渡す変数を書き換える処理を関数化したものである。

そしてAdSenseを表示したいときは、

<script type="text/javascript">setHeaderAdSenseInfo();</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

<script type="text/javascript">setInnerAdSenseInfo();</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

と、好きなチャンネルをセットした上で表示スクリプトを呼べば良い。