はてなブログにGoogleアドセンスのインフィード広告を設置

*当ブログは現在、はてなブログからWordPressに移行しています。

はてなブログに「Google AdSense(グーグル アドセンス)」の「インフィード広告」を設置する方法です。

インフィード広告」とは、Webサイトやアプリのコンテンツとコンテンツの間に表示される広告のことです。

はてなブログでは記事一覧などの記事と記事の間に、広告を表示させることができます。

広告ユニットの作成

まず、 Googleアドセンスで広告ユニットを作成します。

「広告」→「広告ユニット」にある「インフィード広告」を選択。

自動と手動がありますが手動を選択。

その中のスタイルはブログに合ったスタイルを選択してください。

広告ユニット名を指定します。

グローバルオプション

選択したディスプレイ広告を許可する」はそのまま(有効)でいいと思います。

フォント」等はブログに合わせて変更してください。

イメージ

画像の縦横比」や「」などブログに合わせて変更してください。

見出し

見出し」の長さを選択してください。

フォントサイズ」などはブログに合わせて変更してください。

説明

説明」は広告の説明です。

表示させたい場合はONに、非表示ならOFFにしてください。

フォントサイズ」などはブログに合わせて変更してください。

URL

URL」のフォントサイズなど変更したい場合は変更してください。

ボタン

ボタン」のフォントの色など変更したい場合は変更してください。

設定し終えたら「保存してコードを取得」をクリックしてコードをコピーしてください。

はてなブログに設置

このままでは、はてなブログにGoogleアドセンスのインフィード広告を設置できないので下記サイトのスクリプトで設置します。

ただサイトに

この方法は、AdSense のプログラムポリシーを遵守した方法なのかははっきりしていません。ですので、もしこのスクリプトを使われる場合でも自己責任でお願いします。

とありますのでご注意ください。

スクリプトの変更箇所

作成した広告ユニットのコードの中にある赤字緑字青字のところを

data-ad-layout-key="-xx+xx-xx-xx+xx
data-ad-client="ca-pub-yyyyyyyyyyyyyyyy
data-ad-slot="zzzzzzzzzz

それぞれコピーして以下のコードの中の赤字緑字青字のところに貼り付けて変更します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(function(){
var adsScript = document.createElement(“script");
adsScript.innerHTML = “(adsbygoogle = window.adsbygoogle || []).push({});";
// 以下それぞれ個別のデータを設定する
var google_ad_client = “ca-pub-yyyyyyyyyyyyyyyy“;
var slot = zzzzzzzzzz;
var key = “-xx+xx-xx-xx+xx“;
// ここまで
var adsDiv = document.createElement(“div");
adsDiv.innerHTML = '<ins class="adsbygoogle" style="display:block" data-ad-client="'
+ google_ad_client + '" data-ad-slot="'
+ slot + '" data-ad-format="fluid" data-ad-layout-key="'
+ key + '"></ins>’;
adsDiv.appendChild(adsScript);
// css 設定用
adsDiv.classList.add(“ads-infeed");
// 記事一覧ページの場合
// トップページなら page-index
if(document.body.classList.contains(“page-archive")){
var parentElement =document.getElementsByClassName(“archive-entries")[0];
var j = parentElement.childElementCount;
// 5記事おきに入れる場合
for(var i=5; i<j; i=i+6) {
parentElement.insertBefore(adsDiv.cloneNode(true), parentElement.children[i]);
j++;
}
}
}());
</script>

広告の表示箇所を指定

何記事おきに広告を表示させるか指定できます。

コードの中の

// 5記事おきに入れる場合
for(var i=5; i<j; i=i+6)

この部分の数字を変更します。

4記事おきなら、for(var i=4; i<j; i=i+5)、のように変更します。

フッタ

作成したコードを「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある、「フッタ」に貼り付ければ「インフィード広告」を表示できます。

注意点

はてなブログ無料版でこの設置方法を試していません。

そのため、はてなブログ無料版では表示できないかもしれませんのでご注意ください。

Google

Posted by aurora3