Blogger ブログで記事内に自動で、アドセンス広告を「 複数 」設置する方法になります。
自分でアドセンス広告を記事内に設置する必要がなくなるため、とても便利になります。
ただし、広告の貼りすぎにならないように注意しましょう。
こんにちは、HARU（ @HARU ）です。
少し前に more タグを使って記事内にアドセンス広告を表示させる方法を紹介しました。
今回は h タグを使って記事内に、Google アドセンス広告を複数設置する方法を紹介します。
通常は記事本文内にアドセンス広告を貼り付ける場合、自分で個別に貼り付けていく必要があります。
しかし、この方法を用いることで h タグを使ってブログを書いていれば、自動でその場所に広告が表示されるようになります！
広告の貼りすぎにならないように注意する必要はありますが、記事本文内に広告を複数貼りたい方必見です。
テンプレートの編集（ ソースコード改変 ）をするときは、必ずバックアップを取ってから編集しましょう。
不安な方は以下の記事を参考にしてください。
注意事項
参考にさせて頂いた、スケ郎のお話さん でも書いてありますが、使用する際は自己責任でお願いします。
私も使ってみて、ポリシー違反等の連絡がありましたらすぐに情報を展開します。
2020.2～11月まで使ってみましたが、ポリシー違反等の連絡はありませんでした。
アクセス数も大した事なく、表示回数がそこまで多くないのでサンプルになるか微妙ですが、特に問題なく使えそうです。
アドセンスコードの取得
Google アドセンスコードを取得します。
ここでは Google アドセンスで推奨されているディスプレイ広告でレスポンシブデザインを適用しています。
以下、Google アドセンスコード例を示します。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Script 追記
以下の Script を </body> の直上に記述します。
レスポンシブ対応の広告を表示するため、参考記事から少し変更してあります。
<!--アドセンス記事中内広告自動挿入スクリプト-->
<b:if cond='data:blog.pageType == "item"'>
<script>
;(function() {
var options = {
adClient: "ca-pub-XXXXXXXXXX",
adSlot: "XXXXXXXXXX",
adFormat: "auto",
targetNumbers: [3,5,7,9,11],
selector: ".widget.Blog h2",
beforeText: "",
};
function appendAd(c,b){var e=document.createElement("div");e.classList.add("adgoogle-wrapper");e.style.marginTop=options.marginTop;e.style.marginBottom=options.marginBottom;var a=document.createElement("small");a.textContent=options.beforeText;var d=document.createElement("ins");d.className="adsbygoogle";d.style.display="block";d.style.textAlign="center";d.dataset.adClient=options.adClient;d.dataset.adSlot=options.adSlot;d.dataset.adFormat=options.adFormat;d.dataset.adLayout=options.adLayout;var f=document.createElement("script");f.text="(adsbygoogle = window.adsbygoogle || []).push({});";e.appendChild(a);e.appendChild(d);e.appendChild(f);if(e!=null){before(c,e)}}function before(a,c){var b=a.parentNode;if(b!=null){b.insertBefore(c,a)}}var elements=document.querySelectorAll(options.selector);var cnt=1;for(var i=0;i<elements.length;i++){if(options.targetNumbers.indexOf(i+1)>=0){appendAd(elements[i],cnt)}};
})(window);
</script>
</b:if>
Script の修正
以下の項目について、取得したアドセンスコードに合わせてください。
- adClient
- adSlot
Script で変更できる点
targetNumbers
記事内広告の挿入場所の変更ができます。
以下の場合、選択されたタグの２段落目、４段落目……の上に広告が表示されるようになります。
targetNumbers: [2,4,6,8,10],
selector
広告を挿入するタグの変更ができます。
以下の場合、h3 タグを選択しています。
selector: ".widget.Blog h3",
CSS 追記
以下の CSS を Blogger テンプレートの CSS 欄に記述します。
/* 自動挿入アドセンス */
.adgoogle-wrapper{
margin-top:5em;
overflow: hidden;
}
上記 CSS は設置されたアドセンス広告に対して適用されます。
各自のブログデザインに合わせてカスタマイズしてください。
使い方
ブログを書くとき、h タグ（ Script で選択したタグ ）を使って書くようにしてください。
今回の場合、h2 タグを使って本文を書くことで広告が表示されるようになります。
任意の場所に入れたい場合
h タグではなく、任意の場所に広告を表示させたい場合、クラス指定で対応することが可能です。
以下にクラス指定で表示させる Script 例を示します。
Script
以下 Script はクラス指定（ example ）の上に広告を表示させるようになります。
<!--アドセンス記事中内広告自動挿入スクリプト-->
<b:if cond='data:blog.pageType == "item"'>
<script>
;(function() {
var options = {
adClient: "ca-pub-XXXXXXXXXX",
adSlot: "XXXXXXXXXX",
adFormat: "auto",
targetNumbers: [1,2,3,4,5,6],
selector: ".widget.Blog .example",
beforeText: "",
};
function appendAd(c,b){var e=document.createElement("div");e.classList.add("adgoogle-wrapper");e.style.marginTop=options.marginTop;e.style.marginBottom=options.marginBottom;var a=document.createElement("small");a.textContent=options.beforeText;var d=document.createElement("ins");d.className="adsbygoogle";d.style.display="block";d.style.textAlign="center";d.dataset.adClient=options.adClient;d.dataset.adSlot=options.adSlot;d.dataset.adFormat=options.adFormat;d.dataset.adLayout=options.adLayout;var f=document.createElement("script");f.text="(adsbygoogle = window.adsbygoogle || []).push({});";e.appendChild(a);e.appendChild(d);e.appendChild(f);if(e!=null){before(c,e)}}function before(a,c){var b=a.parentNode;if(b!=null){b.insertBefore(c,a)}}var elements=document.querySelectorAll(options.selector);var cnt=1;for(var i=0;i<elements.length;i++){if(options.targetNumbers.indexOf(i+1)>=0){appendAd(elements[i],cnt)}};
})(window);
</script>
</b:if>
使い方
ブログを書くときにクラス指定することで、広告が表示されるようになります。
<!-- ここに広告が表示されます -->
<p class="example">ブログを書くときにクラス指定することで、広告が表示されるようになります。</p>
使ってみての感想（ 2020.11.30 追記 ）
自動的に複数のアドセンス広告が貼られるため、使い勝手はいいと感じました。
しかし、文章量に関係なく h タグで広告が設置されてしまうため、h タグの使い方次第で想定よりも広告が多く表示されてしまうことがありました。
私のブログのようにハウツー系記事が多い場合、h タグを多用すると思うので、h タグで表示させることは止めたほうがいいかなって感じです。
なので個人的には h タグで表示指定するよりも、任意の表示させたいところに表示させる方法（ クラス指定する方法 ）を推奨します。
表示させる場所にクラス指定をするという工程が増えてしまいます。
しかし、クラス指定をするだけで表示位置を調整できると思えばいいのかなって感想です。
0 件のコメント:
コメントを投稿