ウィジェットをシミュレートする

Kameleoonは、ウィジェットをキャンペーンに関連付ける前にシミュレーションで確認することをお勧めします。 ウィジェットをシミュレートするには、次の手順に従います。

1. Widget Studioのヘッダーで Simulate をクリックします。
2. サイドバーでオプションを設定します。詳細は設定を参照してください。
3. Simulate をクリックして、シミュレーションを開始します。

ウィジェットに対する変更を確認し、その設定（たとえばイベントが設定されている場合）を検証できます。

​

設定

ウィジェットを fixed in-page または above the page に配置するかを選択できます。この選択により、利用可能な設定が決まります。

​

Fixed in-page

• Position: Fixed in-page を選択すると、ウィジェットはページのコンテンツ内に固定されて表示されます。
• Anchor element: ウィジェットの位置の参照として使用される要素のCSSセレクターを入力します。
• Anchor position: アンカー要素に対するウィジェットの位置を選択します: Before、Replace、または After。
• Devices: ウィジェットを表示するデバイスを選択します。
• Code output:
  • JS & CSS: ウィジェットはJavaScriptでメインDOMに挿入され、そのスタイルは通常のCSSで適用されます。
    • このオプションは、サイトのデザインに溶け込むべきウィジェット、またはウィジェットをリスタイルまたは適応させたいユースケースに最適です。
  • JS with Shadow DOM: ウィジェットはJavaScriptで挿入されますが、そのHTMLとCSSは Shadow DOM（DOMの分離されたサブツリー）内に存在します。
    • このオプションは、どこでも同じ動作をする必要がある複雑で自己完結型のウィジェット、またはカスタマイズよりも安定性が重要なシナリオに最適です。
    • Shadow DOM は、外部CSSや他のスタイリングルールからウィジェットを保護します。

​

Above the page

• Position: Above the page を選択すると、ウィジェットはページのコンテンツの上に表示されます。
• Devices: ウィジェットを表示するデバイスを選択します。
• Code output:
  • JS & CSS: ウィジェットはJavaScriptでメインDOMに挿入され、そのスタイルは通常のCSSで適用されます。
    • このオプションは、サイトのデザインに溶け込むべきウィジェット、またはウィジェットをリスタイルまたは適応させたいユースケースに最適です。
  • JS with Shadow DOM: ウィジェットはJavaScriptで挿入されますが、そのHTMLとCSSは Shadow DOM（DOMの分離されたサブツリー）内に存在します。
    • このオプションは、どこでも同じ動作をする必要がある複雑で自己完結型のウィジェット、またはカスタマイズよりも安定性が重要なシナリオに最適です。
    • Shadow DOM は、外部CSSや他のスタイリングルールからウィジェットを保護します。

​

シミュレーションを起動する

ウィジェット作成時に入力したURLでシミュレーションが開きます。ウィジェットをテストし、その動作を検証できます（たとえば、アニメーションが設定されている場合は正しく動作することを確認します）。