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?