Adsense を Javascript で動的に作成し、ブログの好きな場所に挿入する

（2016/4/13一部文章を削除してしまったのか、中途半端に始まっているようです）

その他 index ページの記事中に入れられないとか、本文中に入れようとすると毎回コードをコピペしなくてはいけないとか結構面倒なものです。

で、全て Javascript でできないかと試してみました。

• Adsense の動的コード作成
• ブログの好きな場所に挿入
• はてなブログでの例
  • 記事タイトルの下に挿入 
  • 全ての記事タイトルの下に挿入

Adsense の動的コード作成

レスポンシブのコードを見てみます。

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-XXX”
data-ad-slot=”XXX”
data-ad-format=”auto”></ins>
<script>
(adsbygoogle = window.adsbygoogle || ［］).push({}); *1
</script>

まずこのコードを document.createElement() を使って動的に作ります。

var elmDiv = document.createElement(‘div’);
var spsLink = document.createElement(‘div’);
 spsLink.innerHTML = ‘スポンサーリンク’;
elmDiv.appendChild(spsLink);

var adsScr = document.createElement(‘script’);
 adsScr.async = true;
 adsScr.src = ‘//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js’;

var adsIns = document.createElement(‘ins’);
 adsIns.className = ‘adsbygoogle’;
 adsIns.style.display = ‘block’;
/* XXX は置き換えてください */
 adsIns.dataset.adClient = ‘ca-pub-XXX’;
 adsIns.dataset.adSlot= ‘XXX’;
 adsIns.dataset.adFormat = ‘auto’;

var adsGgl = document.createElement(‘script’);
/* ［］は半角に置き換えてください */
 adsGgl.text = ‘(adsbygoogle = window.adsbygoogle || ［］).push({});’;
elmDiv.appendChild(adsScr);
elmDiv.appendChild(adsIns);
elmDiv.appendChild(adsGgl);

これで Adsense の DOM オブジェクトができました。

div エレメントにクラス名を付けたい場合は次のようにすればOKです。

elmDiv.setAttribute(‘class’, ‘クラス名’);

ブログの好きな場所に挿入

できた DOM オブジェクトを任意の場所に挿入するには、次のいずれかを使えばどこにでも入れられそうです。

• 親ノード .insertBefore（追加ノード, 元となるノード）
• 親ノード .insertBefore（追加ノード, 元となるノード .nextSibling）
• 親ノード .insertBefore（追加ノード, 親ノード .firstChild）
• 親ノード .insertBefore（追加ノード, 親ノード .children(No)）
• 親ノード .appendChild（追加ノード）

はてなブログでの例

記事タイトルの下に挿入 

target = document.querySelector(‘.entry-header’);
target.appendChild(elmDiv);

全ての記事タイトルの下に挿入

targets = document.querySelectorAll(‘.entry-header’);
for(var i=0; i<targets.length; i++) { targets[i].appendChild(elmDiv.cloneNode(true)); }

時間がなくなりましたので続きは次回です。