NuxtでSSR時にGoogleOptimize(ABテストツール)を使いたい

Transcript

1. で している時でも テスト を 動かしたい すぱいす

2. すぱいす

3. すぱいす 作ってる 去年 今年 （最近 に しました） 「スパイスからカレー作ります！」で爆誕

4. 前半： しているプロダクトで を動かそうとして 少し苦労して得た学びをシャーします 後半： 前半に関係のありそうな のソースコードを見てみる この は

5. 前半

6. とは？ Rendering on the Web - Web上のレンダリング web.dev - Rendering

   on the Web - より

7. とは？ ブラウザ サーバー ① ② ③ レンダリング

8. とは？ ブラウザ ブラウザ サーバー サーバー ① ② ③ レンダリング ①

   ③ ② レンダリング

9. マーケティングプラットフォームより とは？

10. マーケティングプラットフォームより とは？ テストができる！ でテストが設定できる！ などと簡単に連携ができる！

11. 「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」

    「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい

12. 「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」

    「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい ＿人人人人人人人人人人＿ ＞　 では動かない　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

13. 「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」

    「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい ＿人人人人人人人人人人＿ ＞　 　　まじ？　　　　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

14. 「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」

    「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい ＿人人人人人人人人人人＿ ＞　 のツールだよ？　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

15. 「あのサイトで 使いたい」 マーケティング担当者から要望があった あのサイト で している 以前他の人が調べてくれていたみたいで、 「 で動くけど では動かなかった」

    「ちゃんと動いたときも、しばらく経つと動かなくなる」 らしい ＿人人人人人人人人人人＿ ＞　 設定がおかしいんやろ　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

16. ツール側で設定を変えてみた 以外のツールを介して読み込んでいたので・・・ Google Tag Manager 製 のサイト load... load...

17. ツール側で設定を変えてみた 以外のツールを介して読み込んでいたので・・・ Google Tag Manager 製 のサイト load... load... この設定を変えてみた！

18. ツール側で設定を変えてみた 以外のツールを介して読み込んでいたので・・・ Google Tag Manager 製 のサイト load... load... この設定を変えてみた！

    ＿人人人人人人人人人人＿ ＞　 　動いた　　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

19. 『動いたので確認してみてください〜』 設定を変えてみると

20. 『動いたので確認してみてください〜』 「やっぱり動かないのだが？」 「 では全然動きませんが？」 設定を変えてみると

21. 『動いたので確認してみてください〜』 「やっぱり動かないのだが？」 「 では全然動きませんが？」 設定を変えてみると ＿人人人人人人人人人人＿ ＞　 　まじか　　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

22. 僕が見たときに動いてたのは気のせいだったのか・・・ もう一度挙動を確認してみる 『あれ、 とか関係なく、動いたり動かなかったりする』 『あれ、よく見たら』 ほんまでっか・・・？

23. よく見たら、 動かない じゃなくて 一瞬テストが表示されて 元の表示に戻っている よく見たら

24. よく見たら、 動かない じゃなくて 一瞬テストが表示されて 元の表示に戻っている よく見たら ＿人人人人人人人人人人＿ ＞　 　一瞬だけ表示　　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

25. つまり、 は動いていそう それ以外に、 の操作を行っている箇所は・・・ 元の表示にもどっている

26. つまり、 は動いていそう それ以外に、 の操作を行っている箇所は・・・ 元の表示にもどっている ＿人人人人人人人人人人＿ ＞　 　＜ ￣ＹＹＹＹＹＹＹＹＹＹ￣

27. とは https://ssr.vuejs.org/guide/hydration.html より が 「サーバから送られた静的な を クライアントサイドのデータの変化に反応できる動的な にする」 過程のこと

28. 冒頭の 図 ブラウザ サーバー ① ③ ② レンダリング

29. 冒頭の 図 ブラウザ サーバー ① ③ ② レンダリング アプリは 「見えるけど操作できない」状態

30. 冒頭の 図 ブラウザ サーバー ① ③ ② レンダリング ④レンダリング アプリは

    「操作できる」状態

31. の https://ssr.vuejs.org/guide/hydration.html より

32. の https://ssr.vuejs.org/guide/hydration.html より ＿人人人人人人人人人人人人人＿ ＞　 を破棄してーから描画　＜ ￣ＹＹＹＹＹＹＹＹＹＹＹＹＹ￣

33. 謎挙動の真相 DOM構築処理 テストの読み込み DOM操作 サーバーから レスポンス 側の処理 の処理 DOMの反映 衝突！

34. 謎挙動の真相 DOM構築処理 テストの読み込み DOM操作 サーバーから レスポンス 側の処理 の処理 DOMの反映 衝突！

    ネットワーク速度に依存 マシンスペックなどに依存

35. 解決するには が終わってからテストの起動 実行をしましょう 後に起きるイベントとして の （ルートの ）、 が作成する が使えます。 の設定は「

    アクティベーションイベント」で検索！

36. 前半終わり

37. 後半

38. のレンダリングってどういう仕組なんすか

39. ソースコードを追ってみます 追っているコードは スクショ貼っちゃいます ごめんなさい、だいぶ雑です

40. がどこから呼ばれているのかイマイチわかりませんでした。 が、 中の挙動 って名前的に初期段階で呼ばれているはずや。

41. None
42. None
43. None
44. None
45. None

46. がいる！

47. None
48. None
49. None
50. None
51. None

52. より詳細を知りたい方は

53. より詳細を知りたい方は 実際のソースコード、 など、 チェケラ！

54. ドキュメントには 書いてない はず なので ソースコード 見てみてねー ちなみに、 なんですけど

55. None