【アドセンス】はてなブログで目次上にリンクユニットを自動挿入する方法

ブログ運営の参考にさせていただいている、
はたさん（@hata_blog）の記事で
目次上にリンクユニットを入れるとすごいという話を聞いたので（有難い）
はてなブログで自動挿入できるようにする方法をまとめました。

• 目次上のリンクユニットの効果
• アドセンスでリンクユニットを作成する
• はてなブログにコードを仕込む
  • 一箇所だけコピーしたコードを変更
  • コードの解説
• 併せてこちらも設定するのがおすすめ！

目次上のリンクユニットの効果

目次上に置いたリンクユニットのパフォーマンスが良すぎたので記事の方もアップデートしました。

今月も無事アドセンス30万クリアです。https://t.co/Il4oT5Ig3r

— はた@ブロガー (@hata_blog) 2018年5月31日

はたさんの記事（30万すごい）

はた@ブロガー@hata_blog さんのGoogle Adsenseの貼り方を参考にしたら，収益が2.5倍になった．先人の知恵はすごい！
https://t.co/k3AiEwHmUK

— と〜げ@雑記ブログやってます (@toge510) 2018年6月6日

収入が2.5倍とかすごい。。。。

やるしかない

アドセンスでリンクユニットを作成する

アドセンスのサイトに行ってまずリンクユニットを作成してください。

新しい広告ユニット -> テキスト広告とディスプレイ広告 -> 広告サイズ

に行って、これをリンク広告にすれば作成できます。
そのコードをあとで使います。

はてなブログにコードを仕込む

あとははてなブログにコードを仕込みます。
場所はどこでも平気です。

<script>
addEventListener("DOMContentLoaded", function() {
let heredoc = `
<div class="link-adsense">
<!--先ほど取得したコードをコピペしてください。-->
</div>
`
let linkUnit = $(heredoc);
$('.table-of-contents').before(linkUnit);
}, false);
</script>

一箇所だけコピーしたコードを変更

一箇所だけ変更する箇所があります。
後ろのscriptタグのスラッシュの前にバックスラッシュを入れてください。

こんな感じで

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

コードの解説

一応解説しておきます。

<script>
// DOMを読み込んだタイミングで走るイベントを登録します
addEventListener("DOMContentLoaded", function() {
// 追加したいhtmlのヒアドキュメントを作成します
let heredoc = `
<div class="link-adsense">
<!--先ほど取得したコードをコピペしてください。-->
</div>
`
// ヒアドキュメントをhtmlタグ化します
let linkUnit = $(heredoc);
// はてなブログの目次が".table-of-contents"というclassなので、
// そのclassを取得して、beforeで追加します。
$('.table-of-contents').before(linkUnit);
}, false);
</script>

併せてこちらも設定するのがおすすめ！

簡単3step、簡単コピペで
はてなブログの記事中にアドセンス広告を
自動挿入出来るので気軽に試して見てくださいー！

www.ohmg.tokyo