アドセンス合格後グーグルタグマネージャを使ってなんとか記事一覧に広告挿入することができました！
PCとスマホでそれぞれ記事一覧に任意の場所に広告が入れられたということは、投稿した記事の中にも任意の場所に広告が入れられるような気がしたのでやっていこうとおもいます！
（と、当初は思っていましたがこれ以上書いていると長くなりすぎなので次回やります！！今回は記事一覧に広告を貼るおさらいです）
はてなブログでは設定で記事上とか下にHTMLを入力する場所があるのでそちらを使っても良いのですが、個人的にどこに何の広告が入っているのか覚えてられないし、パッと見て何のコードなのか把握できないのであんまり使いたくないです(´･_･`)
今回は前回割とサラッと記事一覧に広告を載せる方法を書いたので、わりと詳細に紹介します
◆タグマネージャのおさらい
いろいろな所で個別にコードを貼っていたので基礎的なところの紹介です。
・まず、グーグルタグマネージャを使用して2つの変数を作ります
1．記事一覧の『ページ』を認識させる
2．閲覧している『デバイス』を認識させる
この2つの変数が肝になっているのでそちらの紹介です。
(そのままコードを貼るとまるパクりになってしまうのでしません！)
参考元サイト
無料版はてなブログでもスマホ専用の広告が表示されるようにカスタマイズしてみた - ☆迷走記☆
と
はてなブログ無料版でnendのネイティブアドを導入してみた - ☆迷走記☆
どちらも同じことを言っているのですが下の方が若干わかりやすいかな？
上はちょっと古いのか微妙にタグマネージャの画面が違うので混乱するかも。
上記のサイトを参考にグーグルタグマネージャで変数→新規→カスタムjavaScriptで『ページ』の変数と『デバイス』の変数をそれぞれコピペして作ります！ﾄﾞﾔｯ
・トリガーの設定
あとはタグを利用するためにトリガーを『ページ』や『デバイス』で設定してあげれば、この条件の時に広告を表示するになります。
◆実際にタグの設定をしてみる
例：スマホで記事一覧に広告を入れたい場合
1．新規でタグを作成
2．トリガーの設定
ページ=等しい=index ←これで記事一覧を参照
デバイス=等しくない=㍶ ←PCでないとき(スマホの時表示)
+
例外設定(何故かPCでも広告が変なところに表示されるため)
デバイス=等しい=㍶ ←例外に設定したため㍶は表示させないになる
3．タグでカスタムHTMLを選択して下記のコードをコピペするだけ
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
$(window).load(function() {
$('ins.adsbygoogle').each(function() {
(adsbygoogle = window.adsbygoogle || ).push({});
});
});
</script><div id="ad-list-adsense0">
<ins>ーーアドセンスのコードコピペーー</ins>
</div>
<script>
$('.list-entry-article:eq(0)').before($('#ad-list-adsense0'));
</script>
赤：これを一番上にでも1個だけ貼っておけばOK
紫：アドセンスのコードの<ins>～</ins>だけをコピペするだけでおｋ
緑：広告を複数貼る場合はここの所を複数コピペして必要分貼ればOK
黄：数字は記事の何個目、それのbeforeかafterか、ad-list~は<div>～</div>で囲った中の任意の名前なので末尾にでも適当に数字でも降っておけば良いでしょう(名前を変えてもおｋ)
水：スマホの記事一覧の名前
2個目以降：記事一覧の別の場所に貼りたい場合はこんどは下記のコードをコピペしていくだけ
2個目(1で記事2個目、beforeで後に、ad-list-adsense2を表示させたい)
<div id="ad-list-adsense2">
<ins>ーーアドセンスの
コードコピペーー</ins>
</div>
<script>
$('.list-entry-article:eq(2)').before($('#ad-list-adsense2'));
</script>
黄：名前は同じにならない様にしてください。(0)だと記事の1個目の後になる
※実はスマホ用といいつつ今PC記事一覧で使っているコードをの方をちょっと弄って紹介しているので本当に動くかわからないです(´ﾟдﾟ｀)
まあ基本は変わらないと思うので大丈夫！きっと！
◆PC専用版を作る！(PCとスマホ一つの設定で両立できなかったので)
１．トリガーの設定
ページ=等しい=index ←スマホの時と変わらない
デバイス=等しい=㍶ ←こんどはPCの時に表示になる
(なぜかこっちは例外の必要がなくスマホには表示されない…)
2．タグで新規でカスタムHTMLを選択
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
$(window).load(function() {
$('ins.adsbygoogle').each(function() {
(adsbygoogle = window.adsbygoogle || ).push({});
});
});
</script><div id="ad-list-adsense0">
<ins>ーーアドセンスの
コードコピペーー</ins>
</div>
<script>
$('.archive-entry:eq(0)').before($('#ad-list-adsense0'));
</script>
水：archive-entryに変えるだけ
やっていることはスマホ用と同じでlist-entry-articleをarchive-entryに変えただけです。
2個目、3個目と増やす場合も同じで
2個目
<div id="ad-list-adsense1．">
<ins>ーーアドセンスの
コードコピペーー</ins>
</div>
<script>
$('.archive-entry:eq(1)').before($('#ad-list-adsense1'));
</script>
3個目
<div id="ad-list-adsense2">
<ins>ーーアドセンスの
コードコピペーー</ins>
</div>
<script>
$('.archive-entry:eq(2)').before($('#ad-list-adsense2'));
</script>
4個目
5個目
・
・
・
これが一番シンプルな気がします。不安要素しては
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
と
(adsbygoogle = window.adsbygoogle || ).push({});
を元々のアドセンスのコードがから分離させてしまったことですね．．．。規約違反で停止されないことを祈るばかり(;^ω^)
不安であればちょっと手間は増えますが、
<div id="ad-list-adsense0">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:xxxxx"
data-ad-format="xxxxx"
data-ad-layout-key="xxxxxxxxxxx"
data-ad-client="xxxxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxx"></ins>
<script>
$(window).load(function() {
$('ins.adsbygoogle').each(function() {
(adsbygoogle = window.adsbygoogle || ).push({});
});
});
</script>
</div>
<script>
$('.archive-entry:eq(0)').before($('#ad-list-adsense0'));
</script>
紫：アドセンスのコードまるまるコピペ
赤：新規に追加する
これを必要な広告分毎回入力すれば大丈夫なはず！
無駄なコードとか色々あると思うので削除したり、もっとシンプルなコードに書き換えるなど自分でアレンジしてみるといいと思います！
もう疲れたよ…
次回タグマネージャを更新したときの確認方法編と記事の下に広告とランキング系のボタンをグーグルタグマネージャを使って表示するをやります！
(記事下は、はてなブログの設定でも出来るけど、関連記事を表示させていると画面をスクロールさせないと表示されないほぼフッタみたいなところに表示されているのをソーシャルボタンやスターの位置に自動で持ってこようってやつです…これ手動でやろうと思うと毎回記事書いたらHTML編集で最後にコピペする手間が増えるのでそれの簡略化です！)
基礎編ということで記事一覧の任意の場所に広告を表示させましたが、記事下や他の場所にも広告が貼れないか今回の応用で挑戦してみました。よかったら見てください。
