google optimizerのABテストでモバイルやPCなどでCSSの出し分けをしたいとき
今回はgoogle optimizerのABテストでモバイル、タブレット、パソコンでCSSの出し分けをしたいときどうすれば良いのかについてご紹介いたします。
google optimizerのABテストでモバイルやPCなどでCSSの出し分けをしたいとき
結論として、私はHTMLやCSSを変更せずに、JSを使いました。
CSSでモバイルなどの出し分けをしたいときは、
|
1 2 |
@media only screen and (max-width: 768px) { } |
など@media only screen and (max-width: 768px)を使って実装することになると思います。
しかし、google optimizerのABテストではこれを使えません。（正確には使える方法があるのかもしれませんが、私は知りません）
よって、私はJSを使って無理やりCSSを整えることにしました。
例として、WidthとHeightを変えた時、次のソースコードを要素に直接注入いたしました。
|
1 2 3 4 5 |
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'; } |
ソースコードを見てなんとなく何をしているのか想像がつくと思いますが、まず正規表現を利用した条件分岐を行い、画面を開いた端末がスマートフォンだった場合に、WidthとHeightを変えるCSSを導入しております。
私はこの方法でうまくいきました。
この方法を応用すれば、開いている端末がタブレットだった場合にCSSを変えることもできちゃいます。
ぜひこのサンプルコードを利用してみてください。
終わりに
今回はgoogle optimizerのABテストでモバイル、タブレット、パソコンでCSSの出し分けをしたいときどうすれば良いのかについてご紹介いたしました。
最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。
直接契約ができるフリーランスエージェント「エンハンス」を立ち上げました。
詳しくは下記LPをご参照ください。
https://enhance.decryption.co.jp/
Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw
Posted by ちこ