「ポップアップ・エンベッド」複数設置対応について

2021/11/11のUI刷新 第一弾リリースにてカラースキーム(配色設計)とタイポグラフィ(文字の書体、大きさ、配列のしかたなど)を変更しております。オンラインマニュアルに掲載している画面キャプチャと実際の管理画面の配色や文字の状態が異なる場合がございますがご了承いただけますと幸いでございます。

ポップアップ・エンベッドの複数の設置コードを1つのページに対して設置することが可能になりました。
それに伴い、仕様が変更されておりますので下記の事前確認と注意点をご確認ください。
事前確認と注意点に当てはまらない場合は、対応などの必要はなく、ポップアップ・エンベッドの設置方法に従い、複数の設置コードを1つのページに設置いただいて問題ございません。

・ポップアップの概要、設定方法についてはこちら
・エンベッドの概要、設定方法ついてはこちら

※重要なお知らせ※

本ページに記載している「ポップアップ・エンベッド」複数設置は2018/09/25公開予定された機能です。

変更点

・1つのページに対して複数のポップアップ・エンベッド設置コードの設置が可能になりました
　└組み合わせとして「ポップアップ複数」「エンベッド複数」「ポップアップ複数×エンベッド複数」が可能

 例）
・「エンベッド-フォーム」を設置したページに更に「ポップアップ」「エンベッド-フォーム」「エンベッド-HTMLパーツ」を表示
・「エンベッド-HTMLパーツ」でセグメントターゲット指定をしているページに「ポップアップ」「エンベッド-フォーム」「エンベッド-HTMLパーツ」を表示させる

事前確認と注意点

※以下についてはCSS・HTMLについて専門的な知識をお持ちの方にご確認・ご対応をお願いいたします。

ポップアップ・エンベッドの複数設置を可能にすることで、仕様に変更を加えております。
以下に当てはまるポップアップ・エンベッドを利用中の場合は、あらかじめご確認の上、ご対応をお願いいたします。

• ポップアップ表示タイミングにて「`satori__popup_button`クラス付きボタン押下時」「任意のタイミング」を利用している場合の追加設置
• ポップアップの表示場所の重複の注意

自社ページでポップアップ・エンベッドのカスタマイズをしている場合、以下をご確認ください。
※複数設置を行わず単一設置の場合も、カスタマイズ方法によっては影響が出る可能性がございますのでご確認をいただきますようお願いいたします。

• `afterStartHook`を利用している場合の複数設置
• idとclass属性の変更
• labelタグのfor属性の変更
  （セレクタでlabelタグを完全一致で指定している場合）

ポップアップ表示タイミングにて「`satori__popup_button`クラス付きボタン押下時」「任意のタイミング」を利用している場合の追加設置

既に「`satori__popup_button`クラス付きボタン押下時」「任意のタイミング」のポップアップを設置されている場合は、追加で複数のポップアップ・エンベッドの設置コードを設置しても「`satori__popup_button`クラス付きボタン押下時」「任意のタイミング」のポップアップは動作いたしませんのでご注意ください。

ポップアップの表示場所の重複の注意

ポップアップの表示場所が複数のポップアップで重複していた場合に、重なって表示がされ、どのポップアップを上にするか等は指定できません。

`afterStartHook`を利用している場合の複数設置

`afterStartHook`を利用しており1つの設置コードのみの場合はこれまでの記述で可能ですが、複数設置をする場合は以下の記述方法に変更する必要があります。
※以下のcreativeHashcodeとはSATORI管理画面より対象の「設置コード」にあります、「" data-key="xxxx"」の「xxxx」部分の半角英数字を記載の上、設置してください。

<script>
(function() {
  this.__SatoriTempConfigureObj = {
    <creativeHashcode>: {
      afterStartHook: function() {
        //処理
      }
    },
    <creativeHashcode>: {
      afterStartHook: function() {
        //処理
      }
    },
    ...
  }
}).call(this);
</script>

idとclass属性の変更

複数設置を可能にする事で、ポップアップ・エンベッドのid,class名に変更を加えております。
それぞれのポップアップ・エンベッドのid,classをご確認の上ご対応ください。

1. ユニークとなる値をclassに追加しています。ハッシュコードが含まれるclassを追加いたしました。

• id="satori__custom_form" が指定されているelementにはclass="satori__custom_form_<hashcode>" が追加されました。

classの場合、hashcodeを付与したclass名が新たに追加されました。class="satori__customer_email" が指定されているelementには class="satori__customer_email satori__customer_email_<hashcode>" のように変更されています。

• 変更前：<input id="satori__customer_last_name"> 
• 変更後：<input id="satori__customer_last_name"class="satori__customer_last_name_78252c184d366427">

2. idで追加されるhashcode付きclassと、classに追加されるhashcode付きclassがバッティングする場合はclassの接尾辞に"_css"が付与されます。

• 元々idが付与されておりclassにユニークな値を追加したパターン例：
  id="satori__custom_form" class="satori__custom_form_78252c184d366427"
• 上記で追加されたclassとバッティングするため"_css"を付与したclassを追加した例：
  class="satori__custom_form satori__custom_form_78252c184d366427_css" 

labelタグのfor属性の変更
（セレクタでlabelタグを完全一致で指定している場合）

labelタグに指定されているfor属性が以下の通りに変更されます。

• 変更前 : <label for="satori__customer_email">
• 変更後 : <label for="satori__customer_email_78252c184d366427">

SATORI上ではなくポップアップ・エンベッドを設置しているページで直接CSSやJavaScriptで該当の要素をカスタマイズしている場合にセレクタで「label[for*="satori__customer"]」のように「一部の値を含む」という指定をしている場合は影響ありませんが、「label[for="satori__customer_email"]」のように「完全一致」で指定している場合は影響があります。

注意点

• 1つのページに対して同じポップアップ・エンベッドの同じ設置コードを2つ以上設置することはできません。
• 複数ポップアップの表示タイミングは「即時」「スクロール量を指定」「スクロールパーセントを指定」「時間」のみ対応しております。
  ※「`satori__popup_button`クラス付きボタン押下時」「任意のタイミング」には対応しておりません。
• 複数ポップアップを1ページ内で同じ場所（右上/中央/右下のいづれか）に表示する設定をした場合、重なって表示されます。
  ※ポップアップのサイズや設定によっては別々の表示場所として設定した場合でも重なって表示がされてしまう等の可能性があるため、必ず設置後に確認を行ってください。
  
  

ポップアップの複数設置に対するGTMコード書き換えについて

SATORIから発行される設置コードを直接ページに複数設定いただくことでポップアップ・エンベッドの複数設置も可能でございますが、GTMを経由して複数設置を行うためにはGTM側で以下のように「コードの書き換え」が必要となります。

例として「data-key="xxx"」「data-key="yyy"」2つのポップアップを同一ページ内へ設定する場合は、以下の2つの方法いづれかで複数設置が可能でございます。
※GTM設定内で「document.writeをサポートする」のチェックがついている場合は外すようにお願いいたします。

(1)GTMタグ中に「複数の設置コードを設定する」方法

以下のコード内の「xxxxxxxxxxxxxxxx」「yyyyyyyyyyyyyyy」はポップアップ設置コード「data-key="xxx"」「data-key="yyy"」の英数字をご入力ください。

更にポップアップを増やす場合は、「__SatoriCreativeSetInitiators.push("zzzzzzzzzzzzzzz");」を4行目以降に追記いただく事で可能です。

<script>
  if (typeof __SatoriCreativeSetInitiators === "undefined") { __SatoriCreativeSetInitiators = []; }
  __SatoriCreativeSetInitiators.push("xxxxxxxxxxxxxxxx");
  __SatoriCreativeSetInitiators.push("yyyyyyyyyyyyyyyy");
</script>
<script type="text/javascript" src="//delivery.satr.jp/js/creative_set_initiator.js"></script>

  ※1つのポップアップを設置したい場合、 __SatoriCreativeSetInitiators.push("");は１つ記載いただければ正しく動作いたします。

(2) 2つのGTMのタグ設定をしトリガーが実行される場合の、それぞれのGTMタグ内の記載方法

・1つ目のGTMタグ内

<script>
  if (typeof __SatoriCreativeSetInitiators === "undefined") { __SatoriCreativeSetInitiators = []; }
  __SatoriCreativeSetInitiators.push("xxxxxxxxxxxxxxxx");
</script>
<script type="text/javascript" src="//delivery.satr.jp/js/creative_set_initiator.js"></script>

・２つめのGTMタグ内

<script>
  if (typeof __SatoriCreativeSetInitiators === "undefined") { __SatoriCreativeSetInitiators = []; }
  __SatoriCreativeSetInitiators.push("yyyyyyyyyyyyyyyy");
</script>
<script type="text/javascript" src="//delivery.satr.jp/js/creative_set_initiator.js"></script>

複数ポップアップ・エンベッドが正常に表示されない場合

お手数ではございますが、ご利用のブラウザにてキャッシュをクリアしてご確認ください。

また、その他考えられる原因についてはこちらをご確認ください。

複数ポップアップ・エンベッドの活用事例について

活用事例についてはこちらをご確認ください。