Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fastly Meetup 3 / More about Ingestly
Search
Hajime Sano
October 31, 2019
Technology
0
690
Fastly Meetup 3 / More about Ingestly
Fastly YAMAGOYA 2019の翌週ということで、YAMAGOYAの続きのような感じでIngestlyについてお話ししました。今回は具体的なクエリー例と、少し苦労話をご紹介しました。
Hajime Sano
October 31, 2019
Tweet
Share
More Decks by Hajime Sano
See All by Hajime Sano
メディア企業のデータエンジニアリング ~ 内製化と文化醸成 ~ NIKKEI TECH TALK #2
hsano
0
1.2k
Compute@Edge で機械学習モデルを動かす
hsano
1
360
顧客理解のための挑戦とは? (1st PartyData SHIFT〜Treasure Dataが提供するWebアナリティクスの高度化〜)
hsano
0
440
Measuring the performance. Let’s own your analytics tool.
hsano
2
2.8k
Other Decks in Technology
See All in Technology
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
900
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
1.1k
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
130
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
14
2.3k
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
340
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
1
210
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
150
エンジニア向け技術スタック情報
kauche
0
110
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
300
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
4.8k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
170
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
110
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Building Applications with DynamoDB
mza
95
6.5k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Transcript
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?