Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Spice-Z
June 12, 2020

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

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

Spice-Z

June 12, 2020
Tweet

More Decks by Spice-Z

Other Decks in Technology

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    のサイト
    load...
    load...

    View Slide

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

    のサイト
    load...
    load...
    この設定を変えてみた!

    View Slide

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

    のサイト
    load...
    load...
    この設定を変えてみた!
    _人人人人人人人人人人_
    >   動いた  <
     ̄YYYYYYYYYY ̄

    View Slide

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

    View Slide

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

    View Slide

  21. 『動いたので確認してみてください〜』
    「やっぱり動かないのだが?」
    「 では全然動きませんが?」
    設定を変えてみると
    _人人人人人人人人人人_
    >   まじか  <
     ̄YYYYYYYYYY ̄

    View Slide

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

    View Slide

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

    View Slide

  24. よく見たら、
    動かない
    じゃなくて
    一瞬テストが表示されて
    元の表示に戻っている
    よく見たら
    _人人人人人人人人人人_
    >   一瞬だけ表示  <
     ̄YYYYYYYYYY ̄

    View Slide

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

    View Slide

  26. つまり、 は動いていそう
    それ以外に、 の操作を行っている箇所は・・・
    元の表示にもどっている
    _人人人人人人人人人人_
    >   <
     ̄YYYYYYYYYY ̄

    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 より
    _人人人人人人人人人人人人人_
    >  を破棄してーから描画 <
     ̄YYYYYYYYYYYYY ̄

    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