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

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

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

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

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

この方も258%収入増えてる

やるしかない

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

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

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

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

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

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

<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>