テストの実装でよく使われる jQuery の機能のご紹介 | Optimizely 正規代理店イー・エージェンシー
  • 最終更新日:2017年02月23日

テストの実装でよく使われる jQuery の機能のご紹介

Optimizely のテスト実装にて、よく使われる jQuery の機能をご紹介します。
ご紹介する機能は以下の5点です。

  • insertBefore ( 要素の移動 )
  • appendTo ( 要素の移動 )
  • clone ( 要素の複製 )
  • addClass ( クラス名の追加 )
  • css ( スタイルの追加 )

これらを使いこなすことで、主要な実装のほとんどは可能となり、また要素を直接編集するビジュアルエディタより柔軟性のある実装が可能となります。
最初は困難に感じられるかもしれませんが、一度触ってみると思っている程難しいものではありませんので、ぜひ一度挑戦してみてください。

以下より、それぞれの機能についてご説明します。

insertBefore

解説

要素を指定した他の要素の直前に挿入・移動します。
例えばですが、$(‘A’).insertBefore(‘B’); とした場合、B の直前に A が挿入・移動されます。
指定した要素の直後に挿入・移動する insertAfter も用意されていますので、場合によって使い分けましょう。

具体例

実行されるコード

$("p").insertBefore("div");

実行前

<div>移動先の要素</div>
<p>移動する要素</p>

実行後

<p>移動する要素</p>
<div>移動先の要素</div>

使用されるケース

要素を指定の場所へ移動させるというシンプルな機能なので、使用用途は広くあります。

よくある使用ケースは、ページ下部の要素を上部に移動させる、またはその逆を行うことでの要素の利用具合の確認です。
ECサイトであれば、要素をページ上部、または下部に移動させることによって、その要素が購買に繋がる要素、または繋がらない要素なのかを確認することができます。

appendTo

解説

要素を指定した要素の中へ追加・移動します。
例えばですが、$(‘A’).appendTo(‘B’); とした場合、B の中の一番後ろに A が追加・移動されます。
指定した要素の中の一番前に追加・移動する prependTo も用意されていますので、場合によって使い分けましょう。

具体例

実行されるコード

$("p").appendTo("div");

実行前

<div>移動先の要素</div>
<p>移動する要素</p>

実行後

<div>
        移動先の要素
        <p>移動する要素</p>
</div>

使用されるケース

要素の中へ移動させる性質上、複数の要素をひとまとめにすることに用いられます。

よくある使用ケースは、複数の要素を一つにまとめ、区画を明確にするときです。
実際に効果のあったケースとしては、会員登録ページなどで「会員」「非会員」が明確に区画分けされていない場合、明確にすることでユーザの選択の迷いを軽減することができ、結果、会員登録の増加へ繋がりました。

clone

解説

その名のとおり、指定した要素を複製します。
例えばですが、$(‘A’).clone(true).insertBefore(‘B’); とした場合、A の要素を複製し、その後、B の要素の直前へ配置します。
このときに注意する点として、clone と合わせて 移動先の指定も合わせて行いましょう。
前述の場合であれば、insertAfter がそれに当たります。

具体例

実行されるコード

$("p").clonse(true).insertBefore("div");

実行前

<div>移動先の要素</div>
<p>複製する要素</p>

実行後

<p>複製した要素</p>
<div>移動先の要素</div>
<p>複製する要素</p>

使用されるケース

複製することで、ページ内の1要素に対する接点を増やすことができます。

よくある使用ケースは、ページ下部のみ存在するコンバージョン要素を複製し、ページ上部への配置です。
例えばですが、ページ下部のコンバージョンボタンをページ上部へ複製し配置することで、コンバージョンまでの距離が縮まり、コンバージョン率の増加が期待できます。

addClass

解説

指定した要素に class を追加します。
例えばですが、$(‘A’).addClass(‘foo’); とした場合、A に対し、foo という class が追加されます。
その際に、元々その要素に存在した class は削除されず、新しい class として追加されます。

具体例

実行されるコード

$("p").addClass("foo");

実行前

<p>class が追加される要素</p>

実行後

<p class="foo">class が追加される要素</p>

使用されるケース

class を追加するだけの性質上、addClass 単体では何も起こりません。

よくある使用ケースは、「実験CSS」へ CSS の記述をまとめ、addClass で class を追加することで CSS を適用する方法です。
jQuery で指定する CSS に比べ、「実験CSS」へ記述をまとめた方が処理の軽量化が見込めます。
そうすることで、オリジナル要素のチラ見えを可能な限り軽減することが可能となります。

オリジナル要素のチラ見えについては、テスト適用前の元の画面を見えなくする方法はありますか?を、
実験 CSS については、「実験CSS」の使い方をご参照ください。

css

解説

指定した要素に CSS を追加します。
例えばですが、$(‘A’).css(‘font-size’,’18px’); とした場合、A に対し、style=”font-size: 18px;” が追加されます。
その際に、元々その要素に存在した css は削除されず、新しい css として追加されます。

具体例

実行されるコード

$("p").css("font-size","18px");

実行前

<p>css が追加される要素</p>

実行後

<p style="font-size: 18px;">css が追加される要素</p>

使用されるケース

要素に直接 css を適用できるので、スタイルの微調整が可能となります。
css を用いる要素が少ない場合は、こちらを用いた方が実装は早くあります。
ですが、ある程度 css の記述量が多くなってきた場合は、前述の「実験CSS」へ記述した方が処理が軽量となり、管理も容易になります。

Optimizelyのサポートに関するお問い合わせはこちらまで

ヘルプの関連記事

GTMでOptimizelyタグとGAタグ両方を配信して連携を行う方法(Optimizely X)
投稿日: 2017年03月10日
Optimizely社公式の拡張機能を利用して編集画面への読み込みを補助する方法
投稿日: 2017年03月03日
スケジューラー機能の使い方(Optimizely X)
投稿日: 2017年02月24日
訪問者グループの作成条件と種類(Optimizely X)
投稿日: 2017年02月24日
Optimizely⇒UA_GTM 連携方法について
投稿日: 2017年01月10日

ヘルプのよく読まれている記事