人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

こんにちは、@cappeeです。

前回人気の「Pocket」について投稿したものの、あわわあわわと時が立ってしまいました。

 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

今回はパブリッシャー画面が見れるようになったので自分の記事について分析してみようと思います。

Pocket とは

(前回のおさらい)Pocket とは、旧Read It Laterだった「あとで読む」機能に特化したサービスです。

最近「あとで読む」系のサービスがたくさんリリースされていますが、その中でも軍を抜いて人気です。

まずは、ぜひ試してみてください。アプリのデザインもキレイで参考になります。

パブリッシャーアカウント

前回は「Pocket」ボタンの設置とPocketユーザーの傾向を数字で見れるパブリッシャー登録を行いました。

まだパブリッシャー登録を行なっていない場合は、こちらを参考にパブリッシャーアカウントを作成してください。
あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

アカウントを作成して数日待つと「Your Pocket for Publishers Account Is Ready!」という件名のメールが届きます。

pocket 300x210 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

メール本文の「Go to your dashboard and publisher tools.」か左のリンクでパブリッシャーのダッシュボードを開いてください。

Pocketの統計

Pocket for Publishers Dashboard2 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

ダッシュボードのトップページはこのように全体の統計を見ることができます。
一番上の「Recent Snapshot」には全体の平均の数字が表示されています。

SAVED ITEMS OPENED(保存された記事の開封率) … 20%
AVERAGE LIFESPAN(記事の平均寿命) … 25日

これにより記事の平均寿命が結構長いことがわかりました。

開封率を見るとそこまで高くありません。

「後で必要になりそうだからPocketしておこう」的な記事が多いということでしょう。

記事のランキング

「Top Content」を見ると記事のランキングを見ることができます。

Pocket for Publishers Dashboard1 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

「See More…」リンクからより多くのランキングを見てみると、SAVED RANK 1位 の記事が IMPACT RANK は 16位 でした。

どうやら下記のような基準になっているようです。

SAVED RANK … 保存された回数のランキング
IMPACT RANK … 開封率や開封までの期間を加味したランキング

Pocket for Publishers Article Detail 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

SAVED RANK 1位の記事「ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など」の詳細を見てみると、開封率は高くないが記事の寿命が非常に長いです。

“あとで読む”というよりもブックマーク的に保存された方が多いということになりますね。

Pocket for Publishers Article Detail1 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

SAVED RANK 2位の「[Dreamweaver]CS6でオススメの拡張まとめ」は、開封率はそこそこで記事の寿命が長いです。

こちらは記事の内容的にもすぐに実行する必要があるためIMPACT RANKも上位だったというわけですかね。

すぐに読む必要があるか、ブックマークのように必要になった時に読むのか、記事の内容でもIMPACT RANKは大きくかわりそうです。

私のブログはまだ記事数も少なくPVも高くありませんので、こちらのブログもぜひ参考にしてみてください。

[参考サイト]Pocketボタンが可視化する「見えないバズ」とウェブコンテンツの新しい指標

まとめ

今回の解析から私のブログは寿命が長く、ブックマーク的にPocketしているユーザーが多いことがわかりました。

「Pocket」はソーシャルのつぶやきやいいね、はてなブックマークよりもボタンを押すハードルが低い分、今まで見えて来なかったユーザーの動向がわかるのが魅力なんだと思います。

ブログ書いてる方は試してみる価値アリです。

Pocket
article clipper 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

こんにちは、@cappeeです。

 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

今「Pocket」が話題ですね。

私も「Pocket」ボタンを設置してみました。 上にも追加している「あとで読みたい人は…」のボタンです。現状人気のためか表示が少々重たい。。

Pocket とは

Pocket とは、旧Read It Laterだった「あとで読む」機能に特化したサービスです。

最近「あとで読む」系のサービスがたくさんリリースされていますが、その中でも軍を抜いて人気です。

まずは、ぜひ試してみてください。アプリのデザインもキレイで参考になります。

Chrome Extension なども用意されているのでサイトを登録しやすいのも魅力ですね。

Pocket : How to Save

PocketについてはGigazineの記事が一番参考になるので、気になる方はこちらをどうぞ。

気になるページを保存してあとで別のスマホなどからオフライン時にも読めるようにできる「Pocket」の使い方

Pocketボタンを設置してみて

他の方の記事を見るとPocket数が意外に多いという反響で、でもこのブログにはないだろうと思っていましたが…

下記の記事では7Pocket(2013.4.26時点)ありました。このブログを立ち上げて半年あまりですし、個人的には以外と多いなという印象です。それだけPocketユーザーも多いんですね。

f9db2933fe121e04a64b3f7cf4cbfa4b 300x121 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

ちなみに同じ記事のソーシャルボタンの数字はこんな感じです。

2339382de5eb97b6bf5f3129e3ff2895 300x34 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

Pocketボタンの設置方法

Pocket for Publishers Pocket Button2 300x222 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

こちらからコードを取得できるので、簡単に設置することができます。

Pocket for Publishers: Pocket Button

ちなみにソーシャルボタンの設置方法をまとめている記事にも追加していますので、ぜひブクマしてくださいな。

ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

パブリッシャー登録

パブリッシャー登録をするとPocketユーザーの傾向を数字で見れるようです。

実際使えるようになるまでにはもう少し時間がかかるようですが、とりあえず登録はおいた方が良さそうですね。

パブリッシャーの登録方法は、下記の画面にアクセスしてください。

Pocket for Publishers

Pocket for Publishers Dashboard 300x291 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

このような画面が表示されるかと思うので、赤いボタンの「Request Access」を押して次へ。

まだログインしていない場合は、ログイン画面が表示されるのでログインしてください。

Pocket for Publishers Request Access For Your Site 234x300 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

登録フォームにサイトの情報を記載します。

Pocket for Publishers Verify Your Site 300x215 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

HTMLファイルをアップロードするか、ページにMetaタグを追加するかを選べます。今回はHTMLファイルで進めます。

Pocket for Publishers Verify Your Site2 300x293 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

(1)の「Download」リンクからHTMLファイルをダウンロードして、サイトにアップロードしたら、(3)の「Verify Site」リンクをクリック。

Pocket for Publishers 300x275 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

これでパブリッシャー登録は完了です!

正式に公開されるまであとは待ちましょう。楽しみですね。

公開されたらまたこちらに追加したいと思います。

[追加しました]
人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

[参考サイト]
「Pocket」ボタンをブログに追加したら、ソーシャルメディアの情報地下水脈を発見してしまったよ
「Pocket」(旧Read It Later)に追加するボタンをブログに付けよう

Pocket
article clipper あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

こんにちは、@cappeeです。

やってしまいました。Wordpressのテーマがアップデートしていて、うっかり更新してしまったんですよね。

そしたら編集したはずのcssやらphpファイルが全部上書きされてしまいました。当たり前ですが。。

前のファイルはローカルに保存されているのでバックアップをとってから新しいファイルをダウンロードしたけれど、新しいファイルと古いファイルのソースコードの差分を目で探すのは一苦労;;

今回のためだけに差分がわかるDiffソフトをインストールするのもイヤですし、Webでソースコードをコピペしてさくっと比較できるサービスがないかなと思って探してみたら、、ありました。

色々と比較してみた中で一番オススメのDiffサービスをご紹介します。

Diffとは

ちなみにソースコードやテキストなど2つのファイルを比較して差分を出力することをDiff(ディフ)といいます。

Difference(ディファレンス)の略だそうですよ。

オススメのDiffサービス「Mergely」

 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

Mergely

差分を確認する

使い方はとても簡単で、まず比較したいソースコードやテキストをコピーして左右に貼り付けます。

Mergely 1024x516 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

すると色別でハイライトして差分を教えてくれるのでとてもわかりやすいです。

Mergely2 300x282 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

右上の設定ボタンを押せば、色の変更もできます。

ここがすごい!マージ機能

Mergely3 300x26 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

検索ボックスのところにアイコンが並んでますが、地味にすごい「→」アイコンのマージ機能

マージとは簡単に言うと左右のソースコードをガッチャンコしてくれる機能です。とても便利ですが自動なのでかならず元ファイルは残しておいてくださいね。

あとは、左右のコードを入れ替えたり、クリアしたり、ダウンロード、アップロードすることができます。(今の時点でダウンロードとアップロードが動いてないような?)

ここがすごい!共有機能

Mergely4 300x56 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

一番上の「Save」ボタンを押して「Save for Sharing」をクリックすると、比較したファイルをURLで共有することもできます。

とても便利なDiffサービスですので、いざ!という時は思い出して使ってみてください。

Mergely

 

【13.03.27追加】
「子テーマ」をつくればWordpressのテーマをアップロードしても編集したファイルを子テーマとして残しておくことで上書きされないようにできました!
コメントいただいたDaisuke Takahashiさんありがとうございます!もっと勉強しないとですねっ

さっそく子テーマについて調べてみました。CSSだけの場合は便利ですが、注意が必要なのはfunction.phpファイルの場合は親テーマにある関数を子テーマで使用できないということ。新しく関数をつくるか、親テーマの方で関数を使わなくするなどが必要になります。その他のテンプレート用phpファイルも子テーマで使うことができますが、CSSと違ってphpファイルがまるごと上書きされてしまいますので、テーマのアップロードをした場合でもせっかく改善された箇所が反映されない可能性もあります。テンプレート用phpファイルを子テーマに入れてアップロードした場合は今回ご紹介する「Mergely」を使って念のため差分を確認しておいた方がよさそうです。
【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-

 

Pocket
article clipper 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?

こんにちは、@cappeeです。

サイトやブログを作ったらFacebookのOGPを設定するのはマストになってきましたね。

ソーシャルボタンの設置方法などはこちらをご覧ください。
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など[2013.2.22改正]

OGPとは

Open Graph protocolの略で、facebook、mixiなどのソーシャルにシェアした場合にOGPを設定しておけば意図した内容を表示させる事ができる、というものです。
詳しくは下記をご覧ください。

 FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

【保存版】やるとやらないでは大違い!Facebookいいね!ボタンを最適化する「OGP」設定方法まとめ

fb:admins と fb:app_id の設定は必要?

OGPで指定する fb:admins と fb:app_id ですが、受託なんかの場合は予め管理者にするFacebookユーザーを確認する必要があるため少々面倒だったりもします。

fb:admins と fb:app_id は記述しないと表示されないのかしら?と思って、記述なしにしてOGPを確認できるFacebookのデバッガーでみてみたところ、下記のような警告が表示されました。

admins app id FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?
Admins And App ID Missing:fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.

fb:admins と fb:app_id がないよ。設定すればニュースフィードで高いクリック率がだせるよ。」的なことが書いてあり、指定しないと表示できないわけではないようですが、可能な限り指定はしていた方が良さそうですね。

こういった警告はFacebookは管理者を把握しておきたいという理由も背景にあるようです。

fb:admins と fb:app_id、どちらかを記述するのでも大丈夫ですが、APP ID にはどちらにせよ  Admin ID が必要になりますのですぐに設定したい場合は fb:admins のみをとりあえず設定しておきましょう。

もう片方の fb:app_id がある理由としてはFacebook内にアプリ管理画面が作成されるので、管理者が複数いる場合に設定の管理が楽になります。(Admin ID も複数設定は可能なようです)

Facebookインサイトが使える

もうひとつ設定しておいた方がいい理由としては、Facebookインサイトが使えます!

Facebookインサイトとは、設定したサイトのいいねやシェアなどのアクション数をグラフで確認することができて、Facebookで集客を考えている方には必須のツールです。

OGPで fb:admins を設定済みの場合は、インサイトページを開き、右上の「ウェブサイトのインサイト」から追加できます。
Facebookインサイト

Facebookインサイトに関してや解析の重要性については下記をご覧ください。
フェイスブックのアクセス解析ツール「インサイト(Insights)」の導入と分析方法で分かったこととは?
【保存版】Facebookページ インサイト機能 徹底活用!~画面説明・用語解説編~
【保存版】Facebookページ インサイト 徹底活用!~実践編 押さえておきたい5つの検証ポイント~

Admin ID と APP ID の取得方法

fb:admins の Admin ID は下記のURLの最後に自分のアカウントを入力すれば情報が表示されるので、「id」のところにある数字が Admin ID になります。

http://graph.facebook.com/username

fb:admins と fb:app_id の違いやIDの取得方法に関してはこちらが参考になります。

 FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは

htmlタグのxmlnsは必要?

HTML5の場合、htmlタグのxmlnsは不要のようです。

かわりにheadタグに下記を記述します。(2013.2.27追記)

ウェブサイトの場合

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

ブログトップページの場合

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">

ブログ記事ページの場合

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

詳しくはこちらをご覧ください。

 FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要

 

Pocket
article clipper FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

簡単なテストページならDropboxに入れてウェブで確認するのが早い

こんばんは、@cappeeです。

簡単なページをさくっとウェブで確認したい場合、出先でFTPがわからないけどちょっとアップしてみたい場合などなど、簡単なページのテスト環境としてもDropboxが大活躍してくれます。

Dropboxのデータをウェブで確認する

  1. Dropboxを開いて、デフォルトで入っていた「Publicフォルダ」に確認したいデータを入れます。
  2. そのファイルを右クリックして、[Dropbox]→[パブリックリンクのコピー]をクリック。
  3. ブラウザにURLを張り付ければウェブで確認できます!

とっても簡単すぎますね。

ただし、PHPなどのプログラムは動作しませんので、静的なHTMLファイルのみとなります。

さらにbitlyなどの短縮URLサービスを使えば、共有する際などにも便利ですね。

Pocket
article clipper 簡単なテストページならDropboxに入れてウェブで確認するのが早い

twitterの検索ウィジェットが激重すぎて公式に入れないほうがいいレベル

Worpressがやたら重い。。

プラグイン停止してみてもやっぱり重い。

スクロールしてもカッカッって後から付いてくるあのストレスいっぱいの動き、ヤですよね。

で、ソーシャル系のコードもサイトが重くなる原因としてよく聞く話なので消してみました。

twitterさん、あなたでしたか。

twitterの中でもキーワードを指定してタイムラインを表示するウィジェットが激重ですwobbly twitterの検索ウィジェットが激重すぎて公式に入れないほうがいいレベル

つぶやき全部から検索して表示しているわけなのでそりゃあ重いよなーとは思いますが、

こんなに激重なのに公式のウィジェットとして入れていいのかな?と疑問に思うレベル。

ちなみにフォローボタンのみなら問題なくさくさく動いてます。

どーしても設置したい、どのくらい重くなるのか興味がある方はどうぞ。

twitterの検索ウィジェット

Pocket
article clipper twitterの検索ウィジェットが激重すぎて公式に入れないほうがいいレベル

URLを短縮・計測する「bitly」がリニューアルしたので使い方を調べてみた

こんにちは、@cappeeです。

短縮URLサービスといえば「bitly」が有名ですよね。

URLからのクリック数も計測できるのでとても便利です!

twitterやFacebook、Google+などソーシャルでURLを投稿する場合、同じURLでそれぞれ短縮URLを用意しておけばどのサイトからの流入が多いかもみることができます。

久しぶりに「bitly」にアクセスしたところ、「あれ?こんなデザインだっけ」ということで調べてみたら2012年5月リニューアルしてたんですねー。

eb50698bfde81d02629bbd02850abecc 300x164 URLを短縮・計測する「bitly」がリニューアルしたので使い方を調べてみた

ハリセンボン?がかわいいpisces URLを短縮・計測する「bitly」がリニューアルしたので使い方を調べてみた

新「bitly」の使い方

0218efccfa565d4d2ee80984bd2a639e 300x98 URLを短縮・計測する「bitly」がリニューアルしたので使い方を調べてみた

今まで使っていた「URL短縮」については、画面右上の「Paste a link here…」をクリックしてURLを貼り付けます。

eb50698bfde81d02629bbd02850abecc1 300x184 URLを短縮・計測する「bitly」がリニューアルしたので使い方を調べてみた

次に「コメント(Add note)」や「バンドル(Add to bundle)」、「プライベート設定(Make private)」などポップアップが表示されるので細かく指定できます。

下の方にある短縮済みのURLをクリックするとコピーしてくれます。上にふわっと浮くアニメーションがかっこいい!lovely URLを短縮・計測する「bitly」がリニューアルしたので使い方を調べてみた

バンドル(Bundle)とは

複数のリンクをひとつの短縮URLにしてリンク集のようなページを表示してくれる機能みたいです。使うかなー。

詳しい使い方は下記をご覧ください。

複数のリンクをひとつの短縮URLにまとめられる「bit.ly Bundles」

プライベート設定(Make private)とは

これ注意です!

リニューアルしてから「ユーザがポストしたURL一覧」が見れるようになったことで、例えばメンバー限定のページなんかで短縮URL使った場合でも見られてしまう可能性があります。

基本的には「プライベート」にしておいた方が間違いなさそうですね。

私は右上のアカウント名が表示されているメニューの「SETTINGS」→「SAVING」タグを開き、デフォルトを「Private」にしました。

クリック数の計測

「クリック数」の計測は「Your stuff」タブ→「Stats」で確認できます。

0218efccfa565d4d2ee80984bd2a639e1 300x276 URLを短縮・計測する「bitly」がリニューアルしたので使い方を調べてみた

1clickだけの寂しいクリック数ですが、こんな感じでグラフで見ることができるのでとっても便利ですよね!

 

新「bitly」の使い方は下記を参考にさせていただきました。詳細はこちらをご覧ください。

短縮URLサービス「bit.ly」がリニューアル!!より見やすくなった上、ソーシャル機能?が追加されたぞ!!

これからもどんどん活用していきたいと思いますpig URLを短縮・計測する「bitly」がリニューアルしたので使い方を調べてみた

Pocket
article clipper URLを短縮・計測する「bitly」がリニューアルしたので使い方を調べてみた