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

これでLTした時の資料です
https://lapras.connpass.com/event/177974/

Transcript

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

   View Slide

2. すぱいす
   

   View Slide

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

   View Slide

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

   View Slide

5. 前半
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 「あのサイトで 使いたい」
    マーケティング担当者から要望があった
    あのサイト で している
    以前他の人が調べてくれていたみたいで、
    「 で動くけど では動かなかった」
    「ちゃんと動いたときも、しばらく経つと動かなくなる」
    らしい
    ＿人人人人人人人人人人＿
    ＞　 では動かない　＜
    ￣ＹＹＹＹＹＹＹＹＹＹ￣
    

    View Slide

13. 「あのサイトで 使いたい」
    マーケティング担当者から要望があった
    あのサイト で している
    以前他の人が調べてくれていたみたいで、
    「 で動くけど では動かなかった」
    「ちゃんと動いたときも、しばらく経つと動かなくなる」
    らしい
    ＿人人人人人人人人人人＿
    ＞　 　　まじ？　　　　＜
    ￣ＹＹＹＹＹＹＹＹＹＹ￣
    

    View Slide

14. 「あのサイトで 使いたい」
    マーケティング担当者から要望があった
    あのサイト で している
    以前他の人が調べてくれていたみたいで、
    「 で動くけど では動かなかった」
    「ちゃんと動いたときも、しばらく経つと動かなくなる」
    らしい
    ＿人人人人人人人人人人＿
    ＞　 のツールだよ？　＜
    ￣ＹＹＹＹＹＹＹＹＹＹ￣
    

    View Slide

15. 「あのサイトで 使いたい」
    マーケティング担当者から要望があった
    あのサイト で している
    以前他の人が調べてくれていたみたいで、
    「 で動くけど では動かなかった」
    「ちゃんと動いたときも、しばらく経つと動かなくなる」
    らしい
    ＿人人人人人人人人人人＿
    ＞　 設定がおかしいんやろ　＜
    ￣ＹＹＹＹＹＹＹＹＹＹ￣
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 冒頭の 図
    ブラウザ
    サーバー
    ①
    ③
    ② レンダリング
    ④レンダリング
    アプリは
    「操作できる」状態
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. 謎挙動の真相
    DOM構築処理
    テストの読み込み DOM操作
    サーバーから
    レスポンス
    側の処理
    の処理
    DOMの反映
    衝突！
    ネットワーク速度に依存
    マシンスペックなどに依存
    

    View Slide

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

    View Slide

36. 前半終わり
    

    View Slide

37. 後半
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. がいる！
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. View Slide