最近、チェンマイに引っ越した。バンコクほど暑くなくて快適に過ごせるので非常に居心地が良い。

今までJavaScriptから動的にGoogle Adsenseの広告を表示したことがなかったのでメモを残しておく。

最近主に記事をアップしているトラハでは目次をJSで動的に作成している。で、その下に広告を表示できないかと思い試してみたら普通に出来たので今後のためにメモを残しておこうと思う。

と言ってもやることは簡単だ。

下記のadsenseで共通で利用するJSをどこでもいいので読み込まれるようにしておく。今回はheadタグ内に追加した。

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

今回はjsrenderを使っているので下記のようなadsenseで使い回せるテンプレートを定義する。

<script type="text/x-jsrender" id="adsense-template">
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="{{:layout}}"
     data-ad-format="{{:format}}"
     data-ad-client="{{:client}}"
     data-ad-slot="{{:slot}}"></ins>
</script>

最後に表示したい箇所に追加して終わり。

var $contaienr = $('#adsense-container');
var data = {layout: '', format: '', client: '', slot: ''};
$container.append($.templates('#adsense-template').render(data));
(adsbygoogle = window.adsbygoogle || []).push({});