WebサイトやWebサービスの解析をしてみよう

2016/08/28に行われたGrand Frontend Osaka 2016での発表資料です。

Transcript

1. WebサイトやWebサービスの
   解析をしてみよう
   2016.08.28 (⽇)
   Grand Frontend Osaka2016 Day2
   

   View Slide

2. About me
   ´牧 昂拡
   ´株式会社グラッドキューブ エンジニア
   ´LiveScripter
   ´Node.jsマン
   

   View Slide

3. Agenda
   ´Webの解析/改善とは？
   ´Webサイト解析サービスの紹介
   ´SPAのサービスでGoogle Analyticsを導⼊
   ´イベントトラッキングでユーザの⾏動を知ろう
   ´よくあるウェブサイト解析⼿法
   ´なぜエンジニアが解析をするのか
   

   View Slide

4. ´ アクセス解析とも⾔われる
   ´ サイトの訪問状況やユーザ⾏動などの解析を⾏い、
   コンテンツの改善を⾏う
   → LPO（Landing Page Optimization）
   ´ マーケティング部⾨と連携して広告効果測定を⾏い、
   マーケティング戦略の改善や費⽤対効果を⾼める
   ´ ⽇本、海外製問わず数多くの解析ツールが存在する
   Webの解析/改善とは？
   

   View Slide

5. Webサイト解析サービスの紹介
   Adobe Analytics
   etc…
   

   View Slide

6. SPAのサービスで
   Google Analyticsを導⼊
   

   View Slide

7. Google Analyticsの導⼊
   ´ アカウントを作って共通ビュー品の中に
   トラッキングコードを設置
   ´ ページ遷移イベント毎にページビューイベントを実⾏
   ´ pathにはその時点のURLパスを動的に⼊れる
   

   View Slide

8. AngularJS上でのGoogle Analytics計測
   ´ Angularticsを使⽤
   ´ AngularJS上での計測を簡単に！
   ´ ページ遷移イベント（$routeChangeSuccess）を
   Listenして⾃動的にpageviewイベントを送信してくれる
   ´ ui-routerを使⽤している場合は注意！
   

   View Slide

9. クロスデバイス分析、
   ユーザ⾏動追跡ができる
   ´ Google AnalyticsのUser-ID機能を使⽤
   ´ 実はトラッキングコードを少しだけカスタマイズするだけ
   ´ あとはユーザーIDビューを設定画⾯から作成すれば完了！
   

   View Slide

10. ユーザーエクスプローラ
    

    View Slide

11. クロスデバイス分析
    

    View Slide

12. イベントトラッキングで
    ユーザの⾏動を知ろう
    

    View Slide

13. mixpanelでイベントトラッキング！
    https://mixpanel.com
    

    View Slide

14. mixpanelとは？
    ´ アメリカ製の解析ツール
    ´ イベントトラッキングでユーザ⾏動を分析できる
    ´ コホート（リテンション）分析や、
    ネイティブアプリ・ステップメールのABテストが⾏える
    ´ APIはJavaScriptの他にもJava, PHP, Python, Rubyなど
    多くの⾔語に対応している
    ´ Developer Documentation
    

    View Slide

15. さっそく導⼊してみよう
    ´ 共通ビュー部品にトラッキングコードを設置
    ´ ex）トラッキング例
    

    View Slide

16. View Slide

17. よくあるウェブサイト解析・改善⼿法
    1. KGI（Keep Goal Indicator）を設定
    2. 無料でもいいので解析ツールを導⼊
    3. サイトのアクセス状況（UU,PV,直帰率,滞在時間）を確認
    4. - そもそも流⼊が少ない → コンテンツを充実させましょう
    - 流⼊はあるけどその後に繋がらない → 5へ
    5. 問題のあるページの特定、ABテストで改善策を検証
    

    View Slide

18. なぜエンジニアが解析をするのか
    ´ ⾃社開発のWebサービスが増加、
    グロースハッカーなどかっこいい⾔葉の流⾏
    ´ グロースハッカーの存在意義
    → マーケティング予算をかけずにサービスを成⻑させる
    ´ ⾃社開発サービスは成⻑を続けていく必要がある
    ´ エンジニアが解析業務の⼀端を担う必要が出てくる
    今こそ解析の知識を⾝に着けましょう！
    

    View Slide

19. Webサイト解析・改善ASP「SiTest」
    ´ https://sitest.jp
    ´ アクセス解析、ヒートマップ、ABテスト、EFOツールが
    備わっているUI/UX改善のオールインワンアプリケーション
    ´ ⽉3,000PVまでは無料で利⽤可能
    ´ エンジニア絶賛募集中！
    

    View Slide

20. ご静聴ありがとうございました！
    

    View Slide