Google Optimize ABテストで苦労したくないので割とよくやる方法

まず初めに

私がこんな方法をよく使ってるなぁという体感（）ベースなので、半分ポエムだと思ってください。他の方法やいい方法がありましたらコメント下さい。

結論

パターン1

※slimです。htmlへは脳内変換お願いします。

main.container
    .ab-test-original
        | もともと表示されてるやつ
    .ab-test-pattern1
        | 新しく試したい要素

sass:
    .ab-test-original {
        display: block;
    }
    
    .ab-test-pattern1 {
        display: none;
    }

Google Optimizeの設定

これは部分的に変えたい時に要素の表示を切り替える事で、見え方を変えてる例です。もっと細かく変えないといけなくなった場合対応しきれなくなりますが、概ねこの程度なら全てこれで片付きます

パターン2

main#ab-test
    header
        | ヘッダーの背景色変えたいなぁ
    footer
        | ほげほげ

sass:
    header {
        background: aqua;
    }

    .ab-test-pattern1 {
        header {
            background: black;
        }
    }

Google Optimizeの設定

このパターンは汎用的に使ってるクラスで変更箇所多すぎるから上書きしたいけどページ全部変わっちゃうからきついって時に使います。

まとめ

GoogleOptimizeはテストページに対してcssとjavascriptを仕込めるのでうまいことしましょう。それさえ知ってれば後はcssだったりのお話なんで割となんでもできるような気がします。

雑記

転職先を探しながら毎日生活してるのですが、エンジニア不足って本当？ってくらい難儀してます。というのも自分に自信はなくアッピル出来にくいのが原因なんですが、アッピルとは・・・？