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 full-size slide

  2. すぱいす

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. とは?
    ブラウザ
    サーバー


    ③ レンダリング

    View full-size slide

  7. とは?
    ブラウザ ブラウザ
    サーバー
    サーバー


    ③ レンダリング


    ② レンダリング

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. とは
    https://ssr.vuejs.org/guide/hydration.html より

    「サーバから送られた静的な を
    クライアントサイドのデータの変化に反応できる動的な にする」
    過程のこと

    View full-size slide

  27. 冒頭の 図
    ブラウザ
    サーバー


    ② レンダリング

    View full-size slide

  28. 冒頭の 図
    ブラウザ
    サーバー


    ② レンダリング
    アプリは
    「見えるけど操作できない」状態

    View full-size slide

  29. 冒頭の 図
    ブラウザ
    サーバー


    ② レンダリング
    ④レンダリング
    アプリは
    「操作できる」状態

    View full-size slide


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

    View full-size slide


  31. https://ssr.vuejs.org/guide/hydration.html より
    _人人人人人人人人人人人人人_
    >  を破棄してーから描画 <
     ̄YYYYYYYYYYYYY ̄

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. 解決するには
    が終わってからテストの起動 実行をしましょう
    後に起きるイベントとして

    (ルートの )、
    が作成する
    が使えます。
    の設定は「 アクティベーションイベント」で検索!

    View full-size slide

  35. 前半終わり

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. がいる!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide