ガジェットと写真とランニングのblog

管理人が日々の生活で感じたことやガジェットのレビューをつらつらと

はてなブログにリンクユニット広告を掲載してみる(目次のアニメーションとの共存版)

今回ブログのデザインを少し変えてみました。

具体的には、アドセンスでリンクユニット広告の掲載です。
リンクユニット広告はクリック率が上がるという話なのでブログに組み入れようと思います。
目次の上に入れるのが効果が高いということなので、目次の上に自動挿入するコードを書きたいと思います。

リンクユニット広告とは

リンクユニットは、ページのコンテンツに関連するトピックのリストが表示されます。
以下のような形です。

文字だけの広告が効果があるのか?と思うのですが、逆にさりげないのが良いのかもしれませんね。

リンクユニット広告の作成

ここからはアドセンスでリンクユニットを作成する方法です。
アドセンスのサイトでリンクユニットを作成します。

広告の設定 -> 広告ユニット -> 新しい広告ユニット を選択します。

次に広告の設定で広告サイズをリンク広告を選択するのがポイントです。 サイズはデフォルトのレスポンシブスタイルを選択しておけばいいと思います。 一番下の保存してコードを取得を押せば完成です。作成されたコードは後で使います。

目次の上に自動挿入するコードを書く

先ほど作成されたコードを使ってはてなブログにコードを仕込みます。 私の場合、目次の表示非表示のアニメーションを入れているので一工夫してます。 以下にコードを記載しました。先程生成されたコードに変更してブログに仕込みます。 場所はどこでも平気ですが私はフッタに入れてます。

<script>
  addEventListener("DOMContentLoaded", function() { 
    let heredoc =`
   <div class="link-adsense">
     <!-- ここに生成したコードをコピペします。 -->
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     <\/script>
   </div>
   //クリックすると表示される目次はここからしたです。
   <script>
   $(function(){
       var $Contents = $(".table-of-contents")
       $($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>');
       $(".show-area").click(function(){
           var $this = $(this);
           if($Contents.css('display') == 'none'){
               $Contents.slideDown(400),
               $this.text("[隠す]");
           }else{
               $Contents.slideUp(400),
               $this.text("[表示]")
           };
       });
   });
   <\/script>
`
    let linkUnit = $(heredoc);
    $('.table-of-contents').before(linkUnit);
  }, false);
</script>

はてなブログは目次が「.table-of-contents」というclassで定義されているのでbeforeでリンクユニット広告(と目次の表示非表示機能)を追加します。

やってみた結果

結果目次の上にリンクユニット広告が挿入されました。
以下のようなイメージとなります。

目次の表示非表示も切り替えることができていますので要件はクリアしました。
これでクリック数が増えるといいな。と思います。

以下の記事を参考にさせてもらいました。感謝。
https://www.ohmg.tokyo/entry/linkunit-add-to-index