Translate

Post Date：2010年12月5日　

直帰率の改善（関連記事の表示）

Bloggerで関連記事（関連ブログ）を表示するで、直帰率改善のためにSmart Related Posts Widget for Google Blogger - v2.0を使って関連するブログ記事を掲載する方法を記しましたが、関連記事を表示するようになってから直帰率が改善がされているかを計測してみました。

結果から述べると、直帰率が85.75％から83.62％と2.1ポイント改善することができました。

下表がその結果となります。

直帰率の改善：（Google Analytics）
期間 直帰率 変化率
訪問者全体 新規訪問者 再訪問者　 訪問者全体 新規訪問者 再訪問者　
設置前（前月） 85.75% 85.39% 86.85%
サイドバーに設置 85.13% 85.23% 84.94% -0.72% -0.19% -2.20%
ボディー部に設置 83.62% 83.47% 84.19% -1.77% -2.07% -0.88%
※ 前月･･･4週間、サイドバーに設置･･･2週間、ボディー部に設置･･･2週間

関連記事を記事の最後（ボディー部）に挿入することがうまくできなかったので、最初の2週間はサイドバーにだけ表示されていました。しかし、この結果、改善にあたっての仮説を補う面白いことに気が付くことができました。


直帰率改善の仮説

直帰率改善にあたっての仮説は、下記のデータから導き出したものです。

  1. 来訪者のうち新規訪問者（新規ユーザー）は75％
  2. 流入の80％は検索エンジンからである

【仮説】

検索エンジンを経て何かを調べるためにこのブログに初めて訪れた新規訪問者は、サイト構成もしらなければ、他にどんな内容が掲載されているかを知らない。そのため能動的に他の記事を検索する人は少ないはず。しかし関連する記事が他にもあるということが目に留まればもう１ページ閲覧する可能性がある。


結果の考察

上記の仮説に基づき関連記事を表示するように変更しました。サイドバーに関連記事を表示すると再訪問者の直帰率は下がりましたが、新規訪問者では大きな変化は見られませんでした。新規訪問者はボディー部へ関連記事を表示するようになってから大きく改善されました。これは新規訪問者では、本文を読む目の導線上になければ気が付かれないということだと思います。

トータルの変化率でみると再訪問者が3.1ポイント、新規訪問者が2.2ポイントと、変化が大きかったのは再訪問者でした。再訪問者の直帰率が大きく改善されるとはいうのは予想外でした。また再訪問者は記事の最後に関連記事を表示してからも直帰率が改善される結果となりました。


変化率とは

Google Analyticsでも期間比較を行うと変化率が表記されています。変化率とは前と比べてどのくらい変わったかという割合です。前年比120％というような言い方と同様です。

e.g. Aくんは、毎月のお小遣いが800円だったのが1,000円になりました。またBくんは1,000円が1,250円になりました。どちらの方が前と比べて改善された（変化が大きい）のでしょうか。

金額で見るとBくんのお小遣いの増加額の方が大きいです。

Aくん 800円 → 1,000円 200円UP
Bくん 1,000円 → 1,250円 250円UP

しかし、増加比率で比較してみると、共に125%です。

1,000円÷ 800円×100=125％
1,250円÷1,000円×100=125％

変化率は、上で求めた比率から100％をマイナスした値になります。つまり、二人の変化率は共に25％で、二人とも以前よりお小遣いが25％アップしたと言えます。

次にお小遣いが減額された場合のケースを考えます。

Aくんは、毎月のお小遣いが1,000円だったのが800円になりました。またBくんは1,250円が1,000円になりました。

Aくん 1,000円 → 800円 200円Down
Bくん 1,250円 → 1,000円 250円Down

変化率を計算します。

800円÷1,000円×100-100％=-20％
1,000円÷1,250円×100-100％=-20％

共に変化率は-20％となります。


Bloggerで関連記事を表示する

Bloggerで関連記事（関連ブログ）を表示するで関連記事について記載していますが、related posts widget でオプション記載部をエスケープしていないと正しく認識されないということが分かり下記のように（赤字部分）変更することで解決しました。

<!-- related posts --> <h4>関連記事</h4> <div class='related-posts-widget'> &lt;!-- { related_title:'' ,thumbs:0 } --&gt; loading.. </div> <!-- related posts -->

このコードをテンプレートに埋め込みます。


ブログ（本文）の前に表示する

  1. Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
  2. テンプレートから <div class='post-header-line-1'> を検索。
  3. <div class='post-header-line-1'> の下にコードを張付ける。

ブログ（本文）の後に表示する

  • Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
  • テンプレートから <data:post.body/> を検索。
  • <data:post.body/> の下にコードを張付ける。
    •

    今日の一曲

    ビートルズの中で好きなアルバムは、と、問われれば迷わずこのREVOLVERをあげます。特にTomorrow Never Knowsは、ワンコードで作られ、テープループを用いたアバンギャルドな一曲となっています。まさにミニマムミュージックの原点がこの曲にあります。リンゴスターのドラムのリフの入り方もとっても格好良いですし、ボーカルの中域を持ち上げたラジオチックな録音の仕方もステキです。限られた機材で工夫を凝らしているこの曲は、昨今のDTMのアンチテーゼとして聴こえてきます。

    The Beatles - Tomorrow Never Knows / Revolver

    Posted by 0 件のコメント:
    カテゴリ: , ,
    Post Date：2010年11月15日　

    Evernoteにクリップするボタンを追加する

    SNS連携ではありませんが、日頃お世話になっているEvernote（エバーノート）なので、ブログに簡単にコンテンツをクリップできるEvernoteサイトメモリーのボタンを追加してみました。

    Evernoteサイトメモリーページにある『GET STARED』をクリックするか、画面をスクロールして『サイトメモリーを設置する』で幾つかのパラメータをセットするだけで簡単にコードが生成されます。

    Evernoteサイトメモリーの使い方（設定方法）

    ボタンの選択

    ブログに使用するボタンを選択します。




    クリッピングの設定

    『Webサイト名』にブログ名（ブログタイトル）を入れます。説明にあるように設定していないとクリップするときにドメイン名となります。

    『クリップするコンテンツ』は「main」とします。設定していないとブログ全体がクリッピング対象となります。このブログの場合は、設定していないとサイドバー含めてクリップされてしまいます。




    コードのコピー

    コードをテスト＆コピーとありますが、カット＆コピーの間違いでしょうか。





    生成されたコードは下記となります。

    <script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

    このコードをそのまま利用してもよいのですが、画像に枠線が残るため、<img>タグに style='border: none' を追加します。

    <script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" style="border: none" /></a>

    BloggerにEvernoteサイトメモリーを設置する

    Blogger利用者が、Evernoteサイトメモリーを設置する場合には下記の手順により、ヘッダー部に表示されます。クリップされたときの題名には、<title>タグに設定されている内容が反映されます。

    1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
    2．テンプレートから <div class='post-header-line-1'> を検索。
    3．<div class='post-header-line-1'> の下にコードを張付ける。

    Evernoteクリップボタンを試してみる

    ブログに表示されたEvernoteサイトメモリーを試してみます。





    クリップがクリックされると、Evernoteにログインしていなければ、ログイン画面が表示されます。





    Evernoteにログインするとクリップの確認画面が表示されます。『Clip from』には、上記設定の『Webサイト名』が表示されます。左下の『クリップ』をクリックするとEvernoteの新規ノートに登録されます。





    クリップが成功すると下記の画面が表示されます。






    -- iPadから送信
    Posted by 1 件のコメント:
    カテゴリ: ,
    Post Date：2010年11月3日　

    引用（blockquote）を格好よく表示する

    blockquote（引用）がカッコよいサイトが多いので真似してみようと思いましたが、自分にはスタイルシートを変更する能力もないので、参考になるサイトを探してみました。

    MIYA氏のCSS Lectureのblockquote(引用部分)をCSSでデザインするサンプル集に掲載されていた「サンプル2」を利用させていただきました。サンプルコードと画像も一括ダウンロードできます。

    引用文は下記のように表示されるようになりました。
    ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。
    そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。
    blockquote(引用部分)をCSSでデザインするサンプル集

    Bloggerでblockquoteのスタイルシートを変更する

    デザイン >> HTMLの編集 を開いて、最初に『テンプレートをすべてダウンロード』でバックアップを取得します。



    『ウィジェットのテンプレートを展開』をチェックし、blockquoteでソースを検索して現在の設定内容を確認します。

    利用しているテンプレートに依存すると思いますが、自分の使っているテンプレートでは、下記のようになっていました。

    変更前

    .post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

    blockquote(引用部分)をCSSでデザインするサンプル集のサンプル2をベースに下記のように変更します。

    画像のURLには上記サイトからダウンロードしたimage2.gifを事前にpicasaにアップロードするか、bloggerの下書きに画像を挿入して取得したURLを指定します。

    変更後

    .post blockquote {
background: url(http://画像のURL) no-repeat 2% 6%;
padding: 10px 20px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
font-size: 90%
color: #696969;
}
.post blockquote p  {
margin-bottom: 12px;
}
.post blockquote .origin    {
text-align: right;
margin-bottom:0;
}   
.post blockquote .origin a  {
color: #2D88B3;
}

    スタイルシートの説明
    ■【background: url(image/blockquote2.gif) no-repeat 2% 6%;】の「％」部分は、画像の表示位置です。ピクセル（px）でも指定できます。

    ■【padding: 10px 20px】は内側の余白で、10pxが上下の余白、20pxが左右の余白になります。

    ■【fontsize: 90%】は引用文のフォントサイズです。本文とのメリハリを付けるために本文で使用しているフォントサイズより少し小さくして90％にしています。

    ■【color: #696969】は引用文の文字色です。こちらも本文とのメリハリを付けるために色を薄くしてDim Grayにしています。

    変更後に『テンプレートを保存』をクリックすれば完了です。

    下記のようにhtmlを記載すると上記の表示例のように表示されます。
    <blockquote>
<p>ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。
そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。</p>
<p class="origin">
<a href="http://www.css-lecture.com/log/css/blockquote.html" target="new">blockquote(引用部分)をCSSでデザインするサンプル集</a></p>
</blockquote>
    Posted by 0 件のコメント:
    カテゴリ:
    登録: 投稿 (Atom)

    象と散歩：人気の投稿（過去7日間）

    • 合皮カバンの剥がれは補修クリームでキレイに直せる
      MOUSTACHE（ムスタッシュ）の持ち手が本革で、本体は合皮（合成皮革）のトートバックを使っています。合皮の鞄は、軽く、柔らかくてしなやかな手触りが特徴で、耐水性もあるので雨の日でも使えます。 デザインもシンプルで軽いバッグなので気に入っていたのですが、擦れやすい鞄...
    • Excelで簡単テーブル結合
      Excelでデータを結合する関数に VLOOKUP がありますが、使っていないと直ぐに忘れてしまうし、複数の列で結合するのは、ちょっと面倒です。しかし、Office365、若しくは、Office2016以降であれば [ データ ]タブの[ データの取得と変換 ]を使えば簡単に...
    • GASでGoogleフォームの値を取得する（トリガー編）
      Googleフォームでの回答内容をGAS（Google Apps Script）で参照する方法です。 Googleフォームの値を取得するには2種類の方法があります。 フォームが実行されたときに値を取得 フォームを指定して回答内容を取得 今回は、「 フ...
    • Echo の音質を改善する７つの方法
      Echoで音楽を聴くようになったのは Amazon Echo（第3世代）からです。 当初は、無指向性モノラル スピーカーから流れる音楽に満足していました。しかし、Echo第3世代 をステレオ化したら、音の広がりが予想以上に気持ちがいい。 これならばと Echo Plu...
    • GASでGoogleフォームの値を取得する（フォームを指定）
      Googleフォームでの回答内容をGAS（Google Apps Script）で参照する方法です。 Googleフォームの値を取得するには2種類の方法があります。 フォームが実行されたときに値を取得 フォームを指定して回答内容を取得 今回は、「フォ...
    • プレゼンで開始と終了時間を指定した Youtube の再生方法
      PowerPoint で作成したプレゼン資料に Youtubeの動画を使おうと思ったのですが、使いたいのは動画の一部分だけです。 Youtubeの再生で開始時間と終了時間を指定する方法がないかと探してみると 、Googleの開発者向けページに  YouTube 埋め込みプ...
    • GASで複数のPDFを結合する
      Google Apps Script で複数のPDFを結合できないかと探していたら、 officeの杜 | PDFを結合する という記事がありました。 officeの杜で共有されている こちらのコード にある mergePdfs() を活用させていただきました。元ネタは...
    • 破壊的価格！ダイソーで440円で買える棕櫚（しゅろ）ほうき
      棕櫚（しゅろ）ほうき は、シュロ（ヤシ科植物）の繊維質の樹皮を束ねて先端をほぐしたシンプルな作りのほうきです。イネ科のホウキモコロシを束ねて作る江戸箒（座敷ほうき）より歴史は古く、日本古来のほうきですが、柔らかい繊維の穂先で細かいゴミまでしっかりキャッチできます。 そんな...
    • NHKラジオの英語講座で勉強をするなら、やっぱりラジオで録音するのがいい
      radikoに始まり、NHKでも「らじる★らじる」でラジオ放送をネット配信するようになり、またラジオな生活が身近になりました。そんなラジオな日々にたまたまNHK第二で「 英語で読む村上春樹 」で 『象の消滅 』”The Elephant Vanishes”を聴いてビックリ。 ...
    • インク沼にはハマらない！コスパ重視のインクカスタマイズ術
      LAMYのブルーブラックは、深みのある濃い藍色で、ブラックよりほんの少しだけ主張が控えめです。この落ち着いた色合いが気に入っていましたが、万年筆を使う機会が増えたことで、コストパフォーマンスに優れたPILOTのブルーブラックインクに切り替えることにしました。 ふたつのイン...