Google AdSenseを、特定のタグに紐つけて表示する方法。

本日は技術メモ的なものになります。
ブログ本文の要所々々に広告を表示したいと思い、久々にコーディングをしたら結構つまずいたので、メモを残してこうかと思います。

経緯）
・ブログ本文の要所々々に広告を表示したい。
・でも、いちいち投稿の度にコードを埋め込むのは面倒。

→じゃあ、自動でコードを埋め込むスクリプトを書こう。

仕様）
・小見出し（h3タグ）の前に自動で埋め込むようにする。
・広告はレシポンシブル。

JavaScriptの実行順問題につまずく。

たった数行ですが、本当に久々にコーディングをしました。
なので、凄い初歩的な事につまずいてしまいました。

埋め込むコードはこちら（Syntaxhilighterが上手く働かず見難く申し訳ない）

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-9999999999999999"

     data-ad-slot="9999999999"

     data-ad-format="auto"></ins>

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

jQueryを使ってこのコードをそのままh3タグの前に埋め込んだが上手く表示されない。
Chromeブラウザなんかのデバッガを使えば詳しく分かるかもしれないが面倒なので、恐らく「埋め込んだ後に、最後の行のJSが実行されないためだ」と推察。

”insタグを埋め込む処理”の後に、最後の行のJSを実行するようにした。

が、駄目。

上手くいったと思ったのだが、h3タグが複数あっても１つしか広告が表示されない。
どうやら、insタグの数だけ、最後の行のJSを実行してやる必要があるようだ。
なので、h3タグの数分、ループさせてやる事にした。

上手くいった最終的なコードはこちら

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>

$("h3").before('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9999999999999999" data-ad-slot="9999999999" data-ad-format="auto"></ins><br /><br />');

$("h3").each(function(){

(adsbygoogle = window.adsbygoogle || []).push({});

});

</script>

何かの参考になればと思います。

ではでは。