Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

takahiromaki

August 28, 2016
Tweet

Other Decks in Technology

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