思考は現実化する

自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。

〈スマホ版〉はてなブログの記事ページにAdSense広告を自動挿入する方法〈忘備録〉

f:id:b204638:20180114181424j:plain

 

はてなブログでは、テーマをレスポンシブにすればスマートフォンサイトでもPCサイトと同じように広告を掲載できますが、AdSense広告を掲載する際には、やはりPCとスマホを個別に考えカスタマイズした方がサイトの「ユーザビリティ」の向上につながり、広告の「クリック率」も良くなると思います。

 

〈検証〉クリック率が高いAdSense広告の配置について考えてみた - 思考は現実化する

 

はてなブログでは「はてなブログPro」にすることで、スマートフォンでもブログパーツや広告を自由に設置できるようになります。 

 そこで今回は、はてなブログのスマートフォンの記事ページにAdSense広告を自動挿入する方法をご紹介します。

AdSense広告を自動挿入する位置

f:id:b204638:20180114212232j:plain

今回は、スマートフォン記事ページの3か所にAdSense広告を自動挿入する方法について順番にご紹介いたします。

  1. 記事上
  2. 記事中・最初の見出し(h3)前
  3. 記事下(SNSのシェアボタン前)

  

記事上

 記事上にAdSense広告を自動挿入するには、以下の位置にAdSense広告コードを貼り付けます。

ダッシュボードの「 デザイン」>「スマートフォン」>「記事」>「記事上」

この位置に、あなたのAdSenseコードを記載します。

その際、広告の表示がセンター揃えになるよう、広告コードの前に「<center>」タグを、後ろに「</center>」タグを記載しましょう。

<center>AdSense広告コード</center>

この位置に掲載するAdSense広告は「レスポンシブ」「ラージモバイルバナー 320×100」などが良いような気がします。

 

記事中・最初の見出し(h3)前

 

  記事中・最初の見出し(h3)前にAdSense広告を自動挿入するには、以下の位置に下記のコードを貼り付けます。

ダッシュボードの「 デザイン」>「スマートフォン」>「記事」>「記事下」

<!-- 最初の見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p style="text-align:center;" >スポンサーリンク<br>

<center>※AdSense広告コード貼り付け位置</center>

</p>
</div>
<!-- 最初の見出し前にアドセンスを配置ここまで -->

※AdSense広告コード貼り付け位置」のところにあなたのAdSenseコードを上書きしてください。

この位置に掲載するAdSense広告は「レスポンシブ」「レクタングル(中)300×250」などが良いと思います。

 

記事下(SNSのシェアボタン前)

  記事下(SNSのシェアボタン前)にAdSense広告を自動挿入するには、以下の位置に下記のコードを貼り付けます。

ダッシュボードの「 デザイン」>「スマートフォン」>「記事」>「記事下」

<!--記事下アドセンス-->
<div id="my-footer">
<p style="text-align:center;" >スポンサーリンク<br>

<center>※AdSense広告コード貼り付け位置</center>

</p>
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
<!--記事下アドセンスここまで-->

※AdSense広告コード貼り付け位置」のところにあなたのAdSenseコードを上書きしてください。

この位置に掲載するAdSense広告は「レスポンシブ」が良いと思います。

 

まとめ 

今回は、はてなブログのスマートフォンの記事ページの3か所にAdSense広告を自動挿入する方法をご紹介しました。

スマートフォンサイトのカスタマイズは「はてなブログPro」にしなければ利用できませんが、PV数の多いサイトであれば「十分お釣りが出る」費用だと思います。

またサイトによってはPCよりスマートフォンから閲覧されることが多いと思います。そういう場合も、PCと広告の掲載方法を変えることで「クリック率」アップにつながると思います。