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

2 YAMAGOYA お疲れ様でした！ 

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

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

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

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秒程度で クエリー可能 

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

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

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

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

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

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

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

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

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

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

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

18 sendBeaconの落とし穴 

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

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

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

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

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

24 Fastly Log Streaming に対する要望 

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

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 

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

28 Questions?