前回、はてなブログで記事一覧やカテゴリー記事にアドセンスを導入するメモという記事の中で、「カテゴリー一覧にアドセンスを挿入したい」という想いで、とりあえずググって、記事を拝見しコピペして動作するか確認、失敗する。という所までいった。
今回は、どこに原因があってアドセンスが表示されなかったのか?段階を踏んで検証することで解決の糸口を探したい。そんなメモ。
プログラミングは初心者であり、あくまで素人の仮説を積み重ねるしかないので、参考になるかどうかはわかりません。
前回で記事一覧にHTML挿入するコードはいくつかありそうだったが、1番カスタマイズしやすそうな、すなばいじりさんのコードを元にやってみる。
アドセンスが表示されない原因は?
【すなばいじりさんのコードアドセンスが表示されない】
・アドセンスが表示されない考えられる原因は?
→Javascriptが正常に動いていない
→表示するHTMLが間違っていて、アドセンスコード側に問題がある
検証すること。
・Javascriptが動いているか確認する
・特定のHTMLが表示されることを確認する
→すなばいじりさんも現在使ってるコードを利用して、まずHTMLを表示してみる。
はてなproのため、フッターに挿入。
スマホとPCは別々にしているため、スマホのフッターです。
本番表示はせずに、デザインの段階でプレビューを確認。
うん。表示はされるようだ。
ということは、すなばいじりさんのコードそのままで、javascriptは正常に動作しているはず。HTMLも出力される。
HTMLを弄って、自分の表示したい記事を挿入してみると、下記のように表示される。特定のHTMLは挿入できることが検証できた。
再度アドセンスでやってみた結果
次に、もう1度アドセンスで表示を挑戦してみる。
320×100のサイズのアドセンスを、記事一覧の中に挿入したい。そこで下記のコードをすなばしりさんの記事を参考に「デザイン>フッター」に挿入する。
<!-- カテゴリー一覧にアドセンス -->
<script src="//niyari.github.io/hatenablog-modules/push-content.js" charset="utf-8"></script>
<script>
Htnpsne.PushHTML.init('<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-自分ID"
data-ad-slot="各アドセンスのID"></ins>', 'googleads');
</script>
<style>.my_adslot{width:320px;height:100px;}@media (min-width:500px){.my_adslot{width:468px;height:60px;}}@media (min-width: 800px){.my_adslot{width:550px;height:90px;}}</style>
アドセンスの所に問題がある?
結果は上記の画像のように、HTMLは挿入されなかった。アドセンスも新規広告のまま、アクティブにならず、配信環境が整っていないようだ。
CSSの部分での指定は、「@media」以降がPCでそれ以外がスマホなので、サイズの指定も間違っていないはず。
結果としては、下記のアドセンスのコードに何かしらの問題かあることが、また仮説として浮かび上がった。まだ表示までの道のりは長そうだ。
<script>
Htnpsne.PushHTML.init('<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-自分ID"
data-ad-slot="各アドセンスのID"></ins>', 'googleads');
</script>
【追記】
やっと出来た、完結編!