google optimizerのABテストでモバイルやPCなどでCSSの出し分けをしたいとき

2020年4月11日

今回はgoogle optimizerのABテストでモバイル、タブレット、パソコンでCSSの出し分けをしたいときどうすれば良いのかについてご紹介いたします。

google optimizerのABテストでモバイルやPCなどでCSSの出し分けをしたいとき

結論として、私はHTMLやCSSを変更せずに、JSを使いました。

CSSでモバイルなどの出し分けをしたいときは、

@media only screen and (max-width: 768px) {
}

1 2	@media only screen and (max-width: 768px) { }

など@media only screen and (max-width: 768px)を使って実装することになると思います。
しかし、google optimizerのABテストではこれを使えません。（正確には使える方法があるのかもしれませんが、私は知りません）

よって、私はJSを使って無理やりCSSを整えることにしました。

例として、WidthとHeightを変えた時、次のソースコードを要素に直接注入いたしました。

var regexp = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
if(window.navigator.userAgent.search(regexp) !== -1){
  document.getElementById('testtarget').style.width = '100px';
  document.getElementById('testtarget').style.height = '50px';
}