これから先も戦えるサードパーティスクリプト

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　 1
これから先も戦える
サードパーティスクリプト
— 1/10に軽量化・柔軟な拡張性・互換性の担保 —
株式会社プレイド
西村優汰

View Slide

本日の内容
本日の内容
● 2015 年リリース以来初となる計測タグも含めたサードパーティスクリプトの全刷新
● どんなところが課題だったのか
● 課題に対して、この先戦っていくためにどう解決したのか

View Slide

　　｜　　© PLAID Inc. 2023.02.09　　｜　　Developers Summit 2023　　｜　
本日のテーマ
計測タグとは
移行のきっかけ
サイズ軽量化
プラグイン化
計測タグの拡張性
まとめ
話すこと
󰗔

View Slide

KARTEについて
一人一人に合わせた
顧客体験を提供
Webサイトの訪問者の行動を
顧客ごとにリアルタイムに解析
CX(顧客体験)プラットフォーム

View Slide

計測タグとは
Website

(計測タグ)
JavaScript
実行
解析
サーバー
{
"event_name": "view",
"keys": {
"api_key": "xxxxxx",
"user_id": "user_B",
},
"page": "https://plaid.co.jp/",
...
}
JavaScript
(3rd Party Script)

View Slide

計測タグとは
Website

(計測タグ)
JavaScript
実行
解析
サーバー
{
"event_name": "view",
"keys": {
"api_key": "xxxxxx",
"user_id": "user_B",
},
"page": "https://plaid.co.jp/",
...
}
今回話す対象
JavaScript
(3rd Party Script)

View Slide

計測タグとは
計測タグの主な責務
• 3rd Party Script を呼び出し、実行する
3rd Party Script の主な責務
• エンドユーザーの状態に応じた event data をサーバーに送信する
• サーバーから返却された action (例えばポップアップなど) の描画

View Slide

本日のテーマ
計測タグとは
サイズ軽量化
プラグイン化
まとめ
話すこと
󰗔

View Slide

旧計測タグと 3rd Party Script の構成
JavaScript
(全プロジェクト共通)
Website
(Project A)
CDN
Website
(Project B)
Website
(Project C)

View Slide

旧計測タグと 3rd Party Script の課題 ①
● 3rd Party Script サイズの肥大化
○ 一部の Project にしか必要のない機能が存在
○ ブラウザの進化などにより不必要なコードの増加
○ サイトパフォーマンスの重要性 (Core Web Vitals )
● 3rd Party Script 上で動く KARTE プロダクトの増加
○ 当初、プロダクトは1つのみ
○ Plugin として動かす仕組みがない
● 計測タグ自体の拡張性の制限
○ 新規機能の開発に制限あり (後述)

View Slide

旧計測タグと 3rd Party Script の課題 ②

View Slide

旧計測タグと 3rd Party Script の課題 ③

View Slide

新計測タグと 3rd Party Script で目指したこと
● スクリプトサイズの軽量化
● プロダクトのプラグイン化
● 計測タグ自体の拡張性

View Slide

本日のテーマ
計測タグとは
サイズ軽量化
プラグイン化
まとめ
話すこと
󰗔

View Slide

スクリプトサイズ
軽量化
どれくらいスクリプトサイズを軽量化したのか
307 kb
25 kb
新 3rd Party Script (最小設定かつgzip圧縮前)
旧 3rd Party Script (gzip圧縮前)
軽量化により「ダウンロード時間の改善」「CPU時間の改善」

View Slide

軽量化
軽量化するために行ったこと
● Project ごとに JavaScript を作成
○ 全部入りの機能を分解して、Projectごとに機能を取捨選択できるように
(後ほど詳しく説明)
● Treeshaking や Dead Code Elimination を意識した開発
○ 詳しくは弊社社員の別発表資料にて
「バンドル最適化マニアクス at tsconf 」
(https://speakerdeck.com/mizchi/bandoruzui-shi-hua-maniakusu-at-tfconf)
● Internet Explorer 対応をしない決定をした

View Slide

軽量化
新計測タグと 3rd Party Script の構成
JavaScript (Project A)
Website
(Project A)
CDN
Website
(Project B)
Website
(Project C)
JavaScript (Project B)
JavaScript (Project C)
Website
(Project A)
CDN
Website
(Project B)
Website
(Project C)
JavaScript
(全 Project 共通)

View Slide

軽量化
Project ごとの bundle の仕組み
JavaScript (Project A)
Website
(Project A)
CDN
Website
(Project B)
Website
(Project C)
JavaScript (Project B)
JavaScript (Project C)
JavaScrip
t
(共通)
JSON
Config
(Project A)
JSON
Config
(Project B)
JSON
Config
(Project C)
bundle
bundle
bundle
Server

View Slide

軽量化
どのように機能を取捨選択しているか
rollup などで bundle
terser で最適化
以下の 2つのコードを想定
● entry.js
● features.js

View Slide

軽量化
ProjectごとにJavaScriptを用意するデメリット
JavaScript 本体の更新時に
全 Project の数だけJavaScript を生成し直す必要
1. デプロイ時間が長くなる
→ bundle の手法を最適化していくしかない... (rollup から esbuild で新しく作り直し試験中)
→ bundle をせず、Project ごとの conﬁg をそのまま文字列置換 (Projectごとの最適化はできない)
【bundle speed (50ﬁle)】rollup: 14276.82 msec, esbuild: 8.80 msec, 文字列置換: 0.17 msec
2. CDN の Invalidation の制限がある
→ CDN の cache 時間を 1 min と短めに設定

View Slide

本日のテーマ
計測タグとは
サイズ軽量化
プラグイン化
まとめ
話すこと
󰗔

View Slide

他プロダクトの
プラグイン化
会社のフェーズの変化
リリース当初 (2015年)
3rd Party Script
プロダクト A
ポップアップ
現在
様々なプロダクトを 3rd Party Script 上で動かす統一的な仕組みがなかった
3rd Party Script
プロダクト A
ポップアップ
プロダクト C
チャット
プロダクト B
FAQ

View Slide

プラグイン化
プラグイン化の要件
● Project によって必要なプロダクトが違う
● 3rd Party Script 本体とは別で開発される
● 3rd Party Script 本体から情報を渡す必要
● プラグイン間のデータのやり取り
○ プラグインが起動している保証なし

View Slide

プラグイン化
プラグイン化の実装
● Project によって必要なプロダクトが違う
→ Project ごとに JavaScript を生成 (前述なので省略)
● 3rd Party Script 本体とは別で開発される
● 3rd Party Script 本体から情報を渡す必要
● プラグイン間のデータのやり取り
○ プラグインが起動している保証なし
シンプルに！
● dynamic import のみで解決
● シンプルな interface 規約
Pub/Subの仕組み

View Slide

プラグイン化
シンプルなインターフェース
計測タグ本体の呼び出し元
他プロダクトのインターフェース

View Slide

プラグイン化
プラグイン間のデータのやり取り
● Pub/Sub の仕組みを採用
● Plugin は様々な Topic の
Publisher, Subscriber を担う
● Plugin 起動前の message も
受け取ることが可能
Topic A
[msgA, msgC]
Plugin A
Plugin B
Plugin C
Publish “msgA”
Publish “msgC”
Subscribe TopicA
[msgA, msgB]

View Slide

本日のテーマ
計測タグとは
サイズ軽量化
プラグイン化
まとめ
話すこと
󰗔

View Slide

旧計測タグの拡張性の課題
旧計測タグのイベントトラッキング関数
● 旧計測タグの場合、 tracker object に track method を事前に宣言する必要あり
● track 以外の method を新しく使おうとすると、事前宣言用の script を書き換える必要あり
→ method 足すたびにお客様によるスクリプトタグの置き換えが必要
新しい method を容易に開発できない
事前宣言用の疑似スクリプト
delete の method を足そうとすると

View Slide

計測タグ自体の拡張性の改善
新計測タグのイベントトラッキング関数
● tracker object に function を生やす (第一引数が method 名)
● method 名の定義は 3rd Party Script 内部で定義
お客様のタグ変更なく容易にmethod を追加可能
事前宣言用の疑似スクリプト

View Slide

計測タグ変更によるデメリット
● 計測タグ移行時に全てのイベントトラッキング関数を置き換える必要
○ 関数の数としては多く負担になる
互換用のスクリプトタグを作成
旧計測タグのインターフェースを新計測タグの上に実装

View Slide

本日のテーマ
計測タグとは
サイズ軽量化
プラグイン化
まとめ
話すこと
󰗔

View Slide

まとめ
まとめ
● 以下の点を主に考えながら、計測タグと3rd Party Scriptを全刷新
○ スクリプトサイズの軽量化
■ Project ごとに使う機能だけ bundle
○ 他プロダクトのプラグイン化
■ シンプルに！　データのやり取りは Pub/Sub で
○ 計測タグ自体の拡張性
■ method 名の定義を事前宣言 script 内でしない
● これからの課題
○ Project ごとの JavaScript の bundle 速度の向上
○ スクリプトサイズを小さく保っていく仕組みや文化
○ 3rd Party Script 上にのる Product をガンガン開発

View Slide

View Slide

これから先も戦えるサードパーティスクリプト

これから先も戦えるサードパーティスクリプト

nichimu

More Decks by nichimu

Other Decks in Technology

Featured

Transcript