【トラブル】新たに追加した要素が重複して表示されてしまう時の対処法
エディタで新たに追加した要素が本番環境で重複して表示されてしまうことがあります。
これは、ページを移動したり戻ったりする際にVWOタグが複数回実行されて発生する可能性が考えられます。
対処法について、
ビジュアルエディタの場合
コードエディタの場合
この2パターンでご紹介します。
ビジュアルエディタの場合
要素の追加の流れをおさらい
ビジュアルエディタの「ADD」で「ELEMENTS」を追加します。
すると、コードエディタ内に下記のようなコードが生成されます。
vwo_$(".padding-50px-bottom").vwoElement({"position":"before","html":"<div style=\"min-height: 100px; border: 1px solid #ba00ff; width: 100%;\"></div>"});
要素が重複して表示された場合の対処法
1.追加した要素にユニークなclass名もしくはid名を付与する （追加の段階で付与できていたら不要）
作業手順
ビジュアルエディタを開き、追加した要素を選択し、「Edit Element」をクリックします。
「class」もしくは「id」のところで任意のユニークな名前を入力します。
class名かid名が追加できたら、下記のようなコードが生成されます。
下記のキャプチャの緑の枠が追加したclass(id)名です。
2.class名もしくはid名が付与されたら、コードを追加する
コードエディタに下記のコードを追加します。
if(vwo_$('追加したclass名もしくはid名').length < 1) {
// ビジュアルエディタで要素を追加した際に生成されたコード
}
今回の例だと、下記のような書き方になります。
Point!
id名の指定は 「#id名」のように先頭に#が付きます。
class名の指定は 「.class名」のように先頭に.が付きます。
コードエディタの場合
jQueryで要素を追加するいくつかの方法「append,prepend,before,after」などのメソッドを使って要素を追加した場合、
アンカーリンクなどをクリックするとVWOのコードが再度読み込まれて、要素が重複する可能性があります。
下記は、下記のimg要素をページをappendで追加するという例です。
vwo_$('body').append('<img id="image" src="test.jpg" alt="test img"/>');
要素が重複して表示された場合の対処法
重複して表示された場合は下記のようなコードに変更すると、
重複を回避することができます。
if(vwo_$('#image').length < 1){
vwo_$('body').append('<img id="image" src="test.jpg" alt="test img" />');
}