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

Fastly Meetup 3 / More about Ingestly

Hajime Sano
October 31, 2019

Fastly Meetup 3 / More about Ingestly

Fastly YAMAGOYA 2019の翌週ということで、YAMAGOYAの続きのような感じでIngestlyについてお話ししました。今回は具体的なクエリー例と、少し苦労話をご紹介しました。

Hajime Sano

October 31, 2019
Tweet

More Decks by Hajime Sano

Other Decks in Technology

Transcript

  1. Fastly User Meetup #3
    More about Ingestly
    Hajime Sano, Project Lead at Ingestly
    A maintanance free open-source real-time web analytics tool.

    View full-size slide

  2. 2
    YAMAGOYA お疲れ様でした!

    View full-size slide

  3. 3
    自己紹介
    ● Digital Analytics & Data Marketing advocate
    ● Ingestlyプロジェクトを仕切ってます
    ● リアルタイムなマーケティングデータ分析とデータ活用を
    組織的に取り組む文化を広めたい
    ● エンジニアリングとビジネスのバランス
    ● アナリティクス原理主義
    ○ SiteTracker
    ○ Omniture SiteCatalyst / Adobe Analytics
    ○ Atlas
    ○ Ingestly / Polytrek
    Hajime Sano
    @hjmsano
    hsano.jp
    hajime.dev

    View full-size slide

  4. 4
    お話しすること
    1. Webパフォーマンスに関するクエリー例
    2. sendBeaconの落とし穴
    3. Fastly Log Streaming に対する要望

    View full-size slide

  5. 5
    その前に、少し振り返り

    View full-size slide

  6. Ingestly → Realtime Web Analytics
    6
    JS SDK Custom VCL Logging
    Schema
    Mapping
    ● sendBeaconでデータ送信
    ● Server-Side 1st Party Cookieをセット
    ● HTTP 204 / No Contentを即答
    ● ログをJSON化
    ● BQまたはESにフィード
    ● 適切な型で保存
    ● イベントから1秒程度で
    クエリー可能

    View full-size slide

  7. 計測できること
    7
    ● 通常のページビュー
    ● クリック
    ● スクロール深度
    ● 読了
    ● Video/Audio のハートビート
    ● Real User Monitoring
    ● 任意のイベント
    ページ
    ◀ ▶ https://www.
    ページ
    ◀ ▶ https://www.
    40%
    100%
    ページ
    ページ
    本文
    ◀ ▶ https://www.
    25%
    100%
    本文
    ◀ ▶ https://www.
    スクロール深度
    読了

    View full-size slide

  8. 8
    インフラや環境 ユーザー行動
    ビジネス上の成果
    RUMとその先の効果測定
    コスト効率のような視点 従来のウェブアナリティクス
    Webパフォーマンス測定と改善の意義

    View full-size slide

  9. Google Analytics っぽい?
    ● YAMAGOYAの後、「GAっぽいもんか」というツイートを見てしまった…
    ● 既製品との違い
    ○ 全てのシステムは「自社で持つ」、あくまでファーストパーティ
    ○ 任意の変数も含め、サンプリング無しに全データがリアルタイムに扱える
    ○ DBの選択肢が豊富で、DBの良いとこどりできる
    ○ 可視化を持たないので普段使ってるBIで直接扱える
    ○ 生データを扱うが低コストかつメンテナンスフリー
    9

    View full-size slide

  10. 10
    Webパフォーマンスに関するクエリー例

    View full-size slide

  11. 前提としてID体系を…
    11
    Ingestly ID = ブラウザ識別
    Root ID = ナビゲーション毎のID
    Request ID = レコードのユニークID
    Action = 動詞
    Category = 目的語
    Request ID = レコードのユニークID
    Action = 動詞
    Category = 目的語
    ● 1PVごとに複数レコー
    ドが記録される
    ● Action と Category の組
    み合わせがイベントの
    意味を持つ
    ● セッションの概念は無
    い(ユーザーの行動と
    関係無いという考え)

    View full-size slide

  12. 単純な時間別PVとUUはこんんな感じ
    12

    View full-size slide

  13. サイト全体のDCLまでの平均ミリ秒
    13

    View full-size slide

  14. トップページのDCLまでの時間を時系列で
    14

    View full-size slide

  15. DOM Completeまでの時間とスクロール深度
    15

    View full-size slide

  16. DOM Completeまでの時間とクリック率
    16

    View full-size slide

  17. ● ページが意味を成す状態までロードされたタイミングで、
    Ingestly.trackAction(‘track’, ‘meaningful_paint’, {}) を呼ぶ
    ● クエリー時に timing_elapsed_ms を用いることで、first meaningful paint まで
    の時間を使った分析が可能
    さらに…
    17

    View full-size slide

  18. 18
    sendBeaconの落とし穴

    View full-size slide

  19. sendBeaconって?
    ● https://www.w3.org/TR/beacon/#sec-sendBeacon-method
    ● 宛先に対してPOSTでデータを送る、計測目的の通信に使うAPI
    ● Documentがhiddenになる場合でも全てのビーコンリクエストを即時送信する
    ようにUser Agentはスケジュールしなければならない
    ● レスポンスコールバック無し
    19

    View full-size slide

  20. サポートしているブラウザ
    20

    View full-size slide

  21. Webkitのバグ
    ● アクセスしたことの無いドメイン
    に、sendBeaconでHTTPS通信しよ
    うとすると、見えないところでエ
    ラーして何も送信されない
    ● iOS13で直った模様
    21
    https://bugs.webkit.org/show_bug.cgi?id=193508
    IngestlyのSDKは、ローカルにIDがあればsendBeaconを使うが、無ければFetchを使いエンドポイントに
    ID有無を確認するので、初めて通信するドメインに対してはFetchが先行するのでOK。

    View full-size slide

  22. 64KB制限
    ● sendBeaconで送れるデータは64KBまで
    ○ ブラウザによって実装が異なり、1リクエスト64KBだったり、ナビゲーション中の合計が
    64KBだったり
    ○ ボディだけでなくヘッダーも含めなので、リクエストURLの長さも影響する
    ● 上限に達すると navigator.sendBeaconはfalseを返す
    ○ IngestlyのSDKの場合、falseが戻ったらFetchまたはXHRで送り直す
    22

    View full-size slide

  23. Fetchもなかなかくせ者で…
    ● タイムアウト処理が無かったような?
    ○ Fetchが使えるようになりはじめた2016年〜2017年ごろ、タイムアウトはPromiseとsetTimeout
    で実装するのが主流だったような…?
    ● FetchとAbortControllerは対応ブラウザが違う…
    ○ 最近はAbortControllerを使ったタイムアウト処理が広まっている
    23
    Fetch Abort
    Controller

    View full-size slide

  24. 24
    Fastly Log Streaming に対する要望

    View full-size slide

  25. 書き出した履歴を確認したい
    ● Fastlyから各ストリーミング先に描き出したログを見たい
    ● 「ログのログ」
    ● スロットリングを受けたとか、接続できなかったとか、何件中何件失敗した
    とか…
    25

    View full-size slide

  26. S3とKafkaの Log Format枠を大きくして欲しい
    ● Log Formatは、BigQueryと
    Elasticsearchの場合、TEXTAREAにな
    っていてJSONを扱いやすい
    ● S3とKafkaもJSONで書き出して使え
    るが、INPUT-textになっていて難し
    さがある…
    ● TEXTAREAにして頂いて、ログ記録
    時に改行を除くようなオプション
    があると便利だと思う
    26
    つい最近、S3経由Athenaにも対応しました
    https://github.com/ingestly/ingestly-endpoint/tree/master/S3
    Thanks @mrtec_y

    View full-size slide

  27. ストリーミング先を追加して欲しい
    ● ストリームデータ
    ○ Google Cloud PubSub
    ○ Amazon Kinesis Stream
    ● メッセージキュー
    ○ Amazon SQS
    ○ MQTTとか?
    27
    BigQueryやS3に入れる前にデータの加工をしたり、
    API参照してPre-Joinしたりするのに使いたい
    SQSのようにキャパを気にせず投入できるとログ
    の受取と後処理を分離できて良さそう

    View full-size slide

  28. 28
    Questions?

    View full-size slide