GAに対応したblog投稿通知(bitlyでtwitterに流す)

wordpress環境で、投稿通知をbitly経由でtwitterに流す。

その時に、google analytics分析用にキャンペーンパラメータを付けようという話です。

今までの経緯と気づき

FriendFeedのサービスを使って、twitterに更新通知を流していたけど、Google Analyticsとの親和性がなかった。

ソシアルメディアの隆盛、会話経済(conversation economyはどういう訳語がいいのだろう?)への移行を考えると、何かしないといけないなあと思っていた。

それで、bit.lyとgoogle anlyticsで検索してたら、bit.ly自身がやってるblogの記事が見つかった。

Bit.ly + Google Analytics Campaign Builder Tool

この記事を僕の環境に当てはめた記録です。

現状の具体的な問題点

  1. twitterから流入がGoogleAnaltyicsでは単なる参照元になってしまう。
  2. twitterでretweetされた場合に、FriendFeedの短縮URLだと、記事の広がりが見えにくい。

対応策として、bitlyを使う

今までも、twitterへの投稿ボタンはbitlyを使う形にはなっていた。(昨日checkしたら、動いてなかったので、直した)

が、問題点の対応として、google analytics用にcampaign用urlパラメータを付加してから、bitlyに渡す事にした。

具体的な手順

単にurlにパラメータを付ければいい。通常は、Google AnalyticsのURL builderを使うけど、bitlyが用意したGoogle Spreadsheetがあるので、それを参考にするのもいい。(google spreadsheetからAPI(http request)が使えるは知ってたけど、使ってなかった。便利かも)

パラメータを僕の場合は、wordpressの該当するtemplate部分に、

<a href="#" onclick="l='<?php the_permalink() ?>?utm_source=twitter&utm_medium=social-media&utm_content=from-bitly-twitter-account&utm_campaign=my-blog';t='<?php the_title() ?>';my_add_twitter(l,t);return false;"><img title="twitterにつぶやく" style="vertical-align:bottom;" src="/wp-content/themes/carrington-blog/img/twitter.png"/></a>

として、実行javascriptファイルに、

function my_add_twitter(_url, _title) {
  var xfgd = your-id';
  var fdsr = 'your-api-key';
  var api = 'http://api.bit.ly/shorten' + '?version=2.0.1' + '&format=json' + '&callback=CallbackTwit' +
 '&login=' + xfgd + '&apiKey=' + fdsr + '&longUrl=';

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = api + encodeURIComponent(_url) ;
  document.body.appendChild(script)
 //title, urlはCallbackでも使う
  CallbackTwit.url = _url;
  CallbackTwit.title = _title;
  return false;
}

function CallbackTwit(json) {
  var t = arguments.callee.title;
  var u = arguments.callee.url;
  var url = 'http://twitter.com/home/?status=' + encodeURIComponent( t+' '+json.results[u]['shortUrl']);
  document.location.href = url;
}

とすれば、該当ボタンをclickしたときに、Google Analytics用キャンペーンパラメータを付けてからbitlyで短縮したurlで、twitterに投稿通知できるし、tweetしてもらえる。

下が画像が、Google Analyticsのreport画面。

image

さみしい画面だ。

bitlyの利点

bitlyは、アクセス解析?のようなものに力を入れているみたい。アカウントを持つと、単にurlをshortenする他にも、そのurlがどれくらいclickされたかを示してくれる。

(Google Analtyicsの値とかけ離れる。主な原因はbotの来訪、人間のアクセスでもbrowser以外が多いのが原因?)

image

また、biltyで作られたurlのおしりに、”+”をつけると、そのurlに関しての情報を表示してくれるのも便利。

(“+”以外にも、bit.ly/info/?????の形でも表示してくれる)

まとめ

twitter投稿ボタンに、bitlyをかませる。GoogleAnalyticsのキャンペーンパラメータもかませる。

という事をやりました。

しかし、FriendFeedがだんだん元気がなくなってきたような、、、僕が見えてないだけなのかな?

開発資源もfacebookに入ってしまったのだろうか?

Tyntを導入した

blogstormの記事を読んで

ここで紹介されているTyntというサイトのサービスのを導入した。

自分のWebSite上で、コピペ活動を追跡しやすいようにしてくれる。

具体的には、imageとtextのコピーを閲覧者にしてもらった時、コピーに独自のリンクを生成してくれる。そして、それが他のWeb上で自分への被リンクとなったかどうかをcheckしてくる。

なんか最初、理解できなかった。順番としては

  1. サイト運営者にtyntからのjavascript-codeをサイトに貼り付ける
  2. 閲覧者が、サイト上でコピーをする(イメージ、7語以上テキスト、7語以下テキスト。 address-barのコピーはpro向け。
  3. 閲覧者のclipboardには、コピーした情報+サイトのURL(テキストアンカーは続きを読む)+CreativeCommonsの注記 が入る。
  4. ペーストされたリンクをtyntが監視する(そのリンクがcllickされたかどうか)、crawlerか何かを使うの?そんなのいらないね、、
  5. clickされて自分のサイトに来た場合は、コピペしたものが黄色くマーキングされた表示にする。

という感じ。

試しに、自分のサイトのあるページ(//abc-analytics.com/レスポンス時間短縮の為の作業)で、コピペしてみると、

当たり前だけど、読み込みの遅いweb-pageはまずい。でも、どうやって改善したらいいかわからないから放置しがち。
続きを読む //abc-analytics.com/レスポンス時間短縮の為の作業#ixzz0YEJ35c95
Under Creative Commons License: Attribution

こんな感じに、ペーストされる。で、リンク先に行くと、

image

こんな感じで、コピペした部分が黄色の表示になる。urlはと、最後に#以下にアンカーが付く。

//abc-analytics.com/レスポンス時間短縮の為の作業#ixzz0YEJ35c95

一方、サイトの管理の為のページの方はというと、

image

コピーされた回数を見てる。

被リンクとなったものは、siliverに。

clickされるとgoldに成る。

生成された被リンクをランクに分けて表示してくるという事かな。

image

普通にpage-viewなんかもある。

Pro版にすれば、もっといろいろあるんだろうけど、このままでも満足度が高い。

挿入したscriptの動作が気になったけど、具体的な動きがよく分からない。Domのlevel2のselection機能とevent-listernerを使うような気がするけど、clipboardの書き換えなんかあったかな?

下は、chromeでprofileを出して,増加した関数を出してみたところ。nodeliset, mouseevent,range,xpathresultなんかが増加してる。

これ以上、突っ込むのはやめ。

image

レスポンス時間短縮の為の作業

2009/11/25 21:00 少し追加訂正

当たり前だけど、読み込みの遅いweb-pageはまずい。でも、どうやって改善したらいいかわからないから放置しがち。

で、わからないなりに、調べたり、手を動かしたり、放置してみた。

1.ホスティング側の問題?

レンタルサーバーはdreamhostを使ってるけど、パフォーマンスに波があるという話を聞いた。

計測方法? serverでuptimeを定期的に取って確認する?

現状 cronでuptimeを計測したのを見てると、2から8くらいまでの数値になっている。5前後が結構多い。これとresponseタイムの関係が、自分の所でまとまっていない。

対策  よくわかない。サーバーの引っ越しは大変そう。情報も出てこないので、放置。

2. wordpressの問題?

wordpressは、mysqlにデータを入れておいて、それを元にphpでhtmlを作るもの。このプロセスが遅い場合は?

計測方法? わからん。1と2を合わせたものが、対象URLのdocumentの読み込み時になると考えていいのかな。

対策 wordpress supercacheを使う。(日本語URIを使うと、動かないという話で敬遠してたけど、先ほどやってみたら動いた、手元では読み込み時間が1000ms以下になった 全然違った)。お手軽に静的ファイルをcacheに置く事ができた。
毎回、cacheを作ってるようだ、、これではだめ、、

3. renderingの問題?

ハイパフォーマンスWebサイトという本を見ながら、YSlowを入れて、いろいろやってみた。

  1. httpリクエストを減らす。 (F判定なんだけど、google 絡みのが大いので削れない、css-spriteはやれてない)
  2. CDNを使う (僕には関係ない)
  3. expireヘッダを設定する
    1. ExpiresActive On
    2. <FileMatch “.\.(gif|jpg|js|css|png)$”>
      ExpiresDefault “access plus 10 years”
      </FileMatch>
    3. js,cssなどで変更のあるものは、version番号が付いてるので、これで良しとする。
  4. html, javascritp, sytlesheetなどをgzipする (.htaccessで、SetOutputFilter DEFLATEと書いた)
  5. stylesheetを先頭に置く。 (stylesheetを<head>に持って行った)
  6. javascriptは最後に置く。 (<head>で読む必要はないので、<body>の最後に移した)
  7. stylesheetとjavascriptを外部ファイル化する (外部ファイルにして、まとめるものはまとめて、一ファイルにした)
  8. DNSルックアップを減らす。 (やれることはない?余分な外部サイトへの呼び出しを外していく?)
  9. javascriiptを縮小化する (jsminを使って縮小した)
  10. redirectを避ける (いくつか、被リンクのものを引き継いでるので、その分は放置)
  11. scriptの重複を避ける (wordpressのwp_enqueue_scriptで対応できるそうなんだけど、手で調整して重複を消した)
  12. ETagの設定を変更する (ETagの必要性がなさそうだったので、.htaccess に FileETag noneと入れた)
  13. ajaxをcache可能にする (ajaxは使ってない)

とりあえず、1.2の問題は、wordpress-supercacheの導入で良しとした。(Firebugで見る限り、1000ms以下 違った。)

それで、計測方法に、google analyticsを使う。 で完成といきたかったけど、上手くいかなかった。残念。