Blogger で Universal Analytics を使用する

Blogger には、標準で Google Analytics と連携する機能があります。ダッシュボードの「設定」→「その他」の中に「Google Analytics」という項目があって、アナリティクスのウェブ プロパティ ID を入力すれば、それだけで Analytics 用の JavaScript が include されるという便利なものです。

ただ、この設定だと Google Analytics が利用できるようになるだけで、Universal Analytics を利用することができません。そのため、Blogger で Universal Analytics を使用するためには、テンプレートに JavaScript を埋め込む必要があります。

テンプレートの <b:include data='blog' name='google-analytics'/> という行を探して、その直下に Google によって提供された Analytics 用の JavaScript スニペットを追加します。サンプルコードは次のようになっていますが……

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

これを、次のように変更します（シングルクォートを実体参照に置き換えるのですが、もしかしたら自動的に修正されたかもしれません）。

<b:include data='blog' name='google-analytics'/>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i[&#39;GoogleAnalyticsObject&#39;]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,&#39;script&#39;,&#39;//www.google-analytics.com/analytics.js&#39;,&#39;ga&#39;);
ga(&#39;create&#39;, &#39;UA-XXXX-Y&#39;, &#39;auto&#39;);
ga(&#39;send&#39;, &#39;pageview&#39;);
</script>
<!-- End Google Analytics -->

あと、せっかくなので、Analytics で拡張属性も拾えるようにコードを 1 行追加しておきましょう。

<b:include data='blog' name='google-analytics'/>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i[&#39;GoogleAnalyticsObject&#39;]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,&#39;script&#39;,&#39;//www.google-analytics.com/analytics.js&#39;,&#39;ga&#39;);
ga(&#39;create&#39;, &#39;UA-XXXX-Y&#39;, &#39;auto&#39;);
ga(&#39;require&#39;, &#39;displayfeatures&#39;);
ga(&#39;send&#39;, &#39;pageview&#39;);
</script>
<!-- End Google Analytics -->

※ UA-XXXX-Y は Google Analytics のウェブ プロパティ ID に置き換えて下さい。

最後に、Blogger のダッシュボードでアナリティクスのウェブ プロパティ ID を設定している場合は、空白に戻しておきます。

Blogger の小枝

Blogger の <title> タグをカスタマイズする

Blogger のデフォルト設定では、<title> は「Blog 名: 記事の Subject」に設定されていますが（この記事だと「Blogger の小枝: Blogger で <title> タグをカスタマイズする」となります）、これだと検索した際に記事の Subject よりも Blog 名が前に表示されてしまうために、ちょっとどうかなー、と思うことがあります。

<title> を、たとえば「記事の Subject - Blog 名」に変更したい場合は、「テンプレート」から「HTML の編集」を選択して、現在のテンプレートのバックアップを取得後に、次のように変更して下さい。

変更前:

    <title><data:blog.pageTitle/></title>

変更後:

    <b:if cond='data:blog.pageName == &quot;&quot;'>
      <title><data:blog.pageTitle/></title>
    <b:else/>
      <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>

<data:blog.pageName/> が、記事の Subject 相当の文字列に変換されます。ただ、トップページやアーカイブページなどを開いた場合は <data:blog.pageName/> に値がセットされないため、<title> が「- Blogger の小枝」という、ちと格好悪いものになってしまいます。そのため、<b:if cond='data:blog.pageName == &quot;&quot;'> で <data:blog.pageName/> が未定義の場合のみデフォルト設定に戻すようにしています。


Blogger の小枝

Blogger で「前の投稿」「次の投稿」の左右を入れ替える

Blogger を使っていて個人的に違和感をおぼえるのが、「前の投稿」（過去の投稿）へのリンクが右側に表示されて、「次の投稿」（新しい投稿）へのリンクが左側に表示される点です。これはどうしたものだろうなぁ～と思っていたのですが、カスタム CSS を追加することで左右を入れ替えることができます。

Blogger テンプレート デザイナーの「上級者向け」→「CSS を追加」を選択して、以下の 2 行を追加してください。

#blog-pager-older-link { float: left; }
#blog-pager-newer-link { float: right; }

Blogger の小枝