Fastly Meetup 3 / More about Ingestly
by
Hajime Sano
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Fastly User Meetup #3 More about Ingestly Hajime Sano, Project Lead at Ingestly A maintanance free open-source real-time web analytics tool.
Slide 2
Slide 2 text
2 YAMAGOYA お疲れ様でした!
Slide 3
Slide 3 text
3 自己紹介 ● Digital Analytics & Data Marketing advocate ● Ingestlyプロジェクトを仕切ってます ● リアルタイムなマーケティングデータ分析とデータ活用を 組織的に取り組む文化を広めたい ● エンジニアリングとビジネスのバランス ● アナリティクス原理主義 ○ SiteTracker ○ Omniture SiteCatalyst / Adobe Analytics ○ Atlas ○ Ingestly / Polytrek Hajime Sano @hjmsano hsano.jp hajime.dev
Slide 4
Slide 4 text
4 お話しすること 1. Webパフォーマンスに関するクエリー例 2. sendBeaconの落とし穴 3. Fastly Log Streaming に対する要望
Slide 5
Slide 5 text
5 その前に、少し振り返り
Slide 6
Slide 6 text
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秒程度で クエリー可能
Slide 7
Slide 7 text
計測できること 7 ● 通常のページビュー ● クリック ● スクロール深度 ● 読了 ● Video/Audio のハートビート ● Real User Monitoring ● 任意のイベント ページ ◀ ▶ https://www. ページ ◀ ▶ https://www. 40% 100% ページ ページ 本文 ◀ ▶ https://www. 25% 100% 本文 ◀ ▶ https://www. スクロール深度 読了
Slide 8
Slide 8 text
8 インフラや環境 ユーザー行動 ビジネス上の成果 RUMとその先の効果測定 コスト効率のような視点 従来のウェブアナリティクス Webパフォーマンス測定と改善の意義
Slide 9
Slide 9 text
Google Analytics っぽい? ● YAMAGOYAの後、「GAっぽいもんか」というツイートを見てしまった… ● 既製品との違い ○ 全てのシステムは「自社で持つ」、あくまでファーストパーティ ○ 任意の変数も含め、サンプリング無しに全データがリアルタイムに扱える ○ DBの選択肢が豊富で、DBの良いとこどりできる ○ 可視化を持たないので普段使ってるBIで直接扱える ○ 生データを扱うが低コストかつメンテナンスフリー 9
Slide 10
Slide 10 text
10 Webパフォーマンスに関するクエリー例
Slide 11
Slide 11 text
前提としてID体系を… 11 Ingestly ID = ブラウザ識別 Root ID = ナビゲーション毎のID Request ID = レコードのユニークID Action = 動詞 Category = 目的語 Request ID = レコードのユニークID Action = 動詞 Category = 目的語 ● 1PVごとに複数レコー ドが記録される ● Action と Category の組 み合わせがイベントの 意味を持つ ● セッションの概念は無 い(ユーザーの行動と 関係無いという考え)
Slide 12
Slide 12 text
単純な時間別PVとUUはこんんな感じ 12
Slide 13
Slide 13 text
サイト全体のDCLまでの平均ミリ秒 13
Slide 14
Slide 14 text
トップページのDCLまでの時間を時系列で 14
Slide 15
Slide 15 text
DOM Completeまでの時間とスクロール深度 15
Slide 16
Slide 16 text
DOM Completeまでの時間とクリック率 16
Slide 17
Slide 17 text
● ページが意味を成す状態までロードされたタイミングで、 Ingestly.trackAction(‘track’, ‘meaningful_paint’, {}) を呼ぶ ● クエリー時に timing_elapsed_ms を用いることで、first meaningful paint まで の時間を使った分析が可能 さらに… 17
Slide 18
Slide 18 text
18 sendBeaconの落とし穴
Slide 19
Slide 19 text
sendBeaconって? ● https://www.w3.org/TR/beacon/#sec-sendBeacon-method ● 宛先に対してPOSTでデータを送る、計測目的の通信に使うAPI ● Documentがhiddenになる場合でも全てのビーコンリクエストを即時送信する ようにUser Agentはスケジュールしなければならない ● レスポンスコールバック無し 19
Slide 20
Slide 20 text
サポートしているブラウザ 20
Slide 21
Slide 21 text
Webkitのバグ ● アクセスしたことの無いドメイン に、sendBeaconでHTTPS通信しよ うとすると、見えないところでエ ラーして何も送信されない ● iOS13で直った模様 21 https://bugs.webkit.org/show_bug.cgi?id=193508 IngestlyのSDKは、ローカルにIDがあればsendBeaconを使うが、無ければFetchを使いエンドポイントに ID有無を確認するので、初めて通信するドメインに対してはFetchが先行するのでOK。
Slide 22
Slide 22 text
64KB制限 ● sendBeaconで送れるデータは64KBまで ○ ブラウザによって実装が異なり、1リクエスト64KBだったり、ナビゲーション中の合計が 64KBだったり ○ ボディだけでなくヘッダーも含めなので、リクエストURLの長さも影響する ● 上限に達すると navigator.sendBeaconはfalseを返す ○ IngestlyのSDKの場合、falseが戻ったらFetchまたはXHRで送り直す 22
Slide 23
Slide 23 text
Fetchもなかなかくせ者で… ● タイムアウト処理が無かったような? ○ Fetchが使えるようになりはじめた2016年〜2017年ごろ、タイムアウトはPromiseとsetTimeout で実装するのが主流だったような…? ● FetchとAbortControllerは対応ブラウザが違う… ○ 最近はAbortControllerを使ったタイムアウト処理が広まっている 23 Fetch Abort Controller
Slide 24
Slide 24 text
24 Fastly Log Streaming に対する要望
Slide 25
Slide 25 text
書き出した履歴を確認したい ● Fastlyから各ストリーミング先に描き出したログを見たい ● 「ログのログ」 ● スロットリングを受けたとか、接続できなかったとか、何件中何件失敗した とか… 25
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
ストリーミング先を追加して欲しい ● ストリームデータ ○ Google Cloud PubSub ○ Amazon Kinesis Stream ● メッセージキュー ○ Amazon SQS ○ MQTTとか? 27 BigQueryやS3に入れる前にデータの加工をしたり、 API参照してPre-Joinしたりするのに使いたい SQSのようにキャパを気にせず投入できるとログ の受取と後処理を分離できて良さそう
Slide 28
Slide 28 text
28 Questions?