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
NuxtでSSR時にGoogleOptimize(ABテストツール)を使いたい
Search
Spice-Z
June 12, 2020
Technology
1
1.1k
NuxtでSSR時にGoogleOptimize(ABテストツール)を使いたい
これでLTした時の資料です
https://lapras.connpass.com/event/177974/
Spice-Z
June 12, 2020
Tweet
Share
More Decks by Spice-Z
See All by Spice-Z
Native Module入門記録
spicez
3
900
stand.fmにGraphQLを導入して、半年。〜導入経緯や技術選択、現状や将来について〜
spicez
3
2.3k
"transform" Why do we have to use it in CSS animation
spicez
0
5.2k
Other Decks in Technology
See All in Technology
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
120
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
9.9k
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
580
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
2
430
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
220
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
140
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1.4k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
230
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.3k
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
210
エニグモ_会社紹介資料(エンジニア職種向け).pdf
enigmo_hr
0
2.2k
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
210
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Building Adaptive Systems
keathley
43
2.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Why Our Code Smells
bkeepers
PRO
339
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Six Lessons from altMBA
skipperchong
28
4k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Designing Experiences People Love
moore
142
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Transcript
で している時でも テスト を 動かしたい すぱいす
すぱいす
すぱいす 作ってる 去年 今年 (最近 に しました) 「スパイスからカレー作ります!」で爆誕
前半: しているプロダクトで を動かそうとして 少し苦労して得た学びをシャーします 後半: 前半に関係のありそうな のソースコードを見てみる この は
前半
とは? Rendering on the Web - Web上のレンダリング web.dev - Rendering
on the Web - より
とは? ブラウザ サーバー ① ② ③ レンダリング
とは? ブラウザ ブラウザ サーバー サーバー ① ② ③ レンダリング ①
③ ② レンダリング
マーケティングプラットフォームより とは?
マーケティングプラットフォームより とは? テストができる! でテストが設定できる! などと簡単に連携ができる!
「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」
「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい
「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」
「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい _人人人人人人人人人人_ > では動かない <  ̄YYYYYYYYYY ̄
「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」
「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい _人人人人人人人人人人_ > まじ? <  ̄YYYYYYYYYY ̄
「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」
「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい _人人人人人人人人人人_ > のツールだよ? <  ̄YYYYYYYYYY ̄
「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」
「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい _人人人人人人人人人人_ > 設定がおかしいんやろ <  ̄YYYYYYYYYY ̄
ツール側で設定を変えてみた 以外のツールを介して読み込んでいたので・・・ Google Tag Manager 製 のサイト load... load...
ツール側で設定を変えてみた 以外のツールを介して読み込んでいたので・・・ Google Tag Manager 製 のサイト load... load... この設定を変えてみた!
ツール側で設定を変えてみた 以外のツールを介して読み込んでいたので・・・ Google Tag Manager 製 のサイト load... load... この設定を変えてみた!
_人人人人人人人人人人_ > 動いた <  ̄YYYYYYYYYY ̄
『動いたので確認してみてください〜』 設定を変えてみると
『動いたので確認してみてください〜』 「やっぱり動かないのだが?」 「 では全然動きませんが?」 設定を変えてみると
『動いたので確認してみてください〜』 「やっぱり動かないのだが?」 「 では全然動きませんが?」 設定を変えてみると _人人人人人人人人人人_ > まじか <  ̄YYYYYYYYYY ̄
僕が見たときに動いてたのは気のせいだったのか・・・ もう一度挙動を確認してみる 『あれ、 とか関係なく、動いたり動かなかったりする』 『あれ、よく見たら』 ほんまでっか・・・?
よく見たら、 動かない じゃなくて 一瞬テストが表示されて 元の表示に戻っている よく見たら
よく見たら、 動かない じゃなくて 一瞬テストが表示されて 元の表示に戻っている よく見たら _人人人人人人人人人人_ > 一瞬だけ表示 <  ̄YYYYYYYYYY ̄
つまり、 は動いていそう それ以外に、 の操作を行っている箇所は・・・ 元の表示にもどっている
つまり、 は動いていそう それ以外に、 の操作を行っている箇所は・・・ 元の表示にもどっている _人人人人人人人人人人_ > <  ̄YYYYYYYYYY ̄
とは https://ssr.vuejs.org/guide/hydration.html より が 「サーバから送られた静的な を クライアントサイドのデータの変化に反応できる動的な にする」 過程のこと
冒頭の 図 ブラウザ サーバー ① ③ ② レンダリング
冒頭の 図 ブラウザ サーバー ① ③ ② レンダリング アプリは 「見えるけど操作できない」状態
冒頭の 図 ブラウザ サーバー ① ③ ② レンダリング ④レンダリング アプリは
「操作できる」状態
の https://ssr.vuejs.org/guide/hydration.html より
の https://ssr.vuejs.org/guide/hydration.html より _人人人人人人人人人人人人人_ > を破棄してーから描画 <  ̄YYYYYYYYYYYYY ̄
謎挙動の真相 DOM構築処理 テストの読み込み DOM操作 サーバーから レスポンス 側の処理 の処理 DOMの反映 衝突!
謎挙動の真相 DOM構築処理 テストの読み込み DOM操作 サーバーから レスポンス 側の処理 の処理 DOMの反映 衝突!
ネットワーク速度に依存 マシンスペックなどに依存
解決するには が終わってからテストの起動 実行をしましょう 後に起きるイベントとして の (ルートの )、 が作成する が使えます。 の設定は「
アクティベーションイベント」で検索!
前半終わり
後半
のレンダリングってどういう仕組なんすか
ソースコードを追ってみます 追っているコードは スクショ貼っちゃいます ごめんなさい、だいぶ雑です
がどこから呼ばれているのかイマイチわかりませんでした。 が、 中の挙動 って名前的に初期段階で呼ばれているはずや。
None
None
None
None
None
がいる!
None
None
None
None
None
より詳細を知りたい方は
より詳細を知りたい方は 実際のソースコード、 など、 チェケラ!
ドキュメントには 書いてない はず なので ソースコード 見てみてねー ちなみに、 なんですけど
None