We’ve migrated our documentation to a new site, which means some URLs have changed.
Audience

CCEにおけるキャンペーンの表示レイアウト

キャンペーンの表示レイアウト

キャンペーンセット内の各キャンペーンの表示レイアウトの管理を行うには、キャンペーンリストの画面の右上の プレゼンテーション ボタンをクリックします:

image-20220107-041010.png


プレゼンテーション

プレゼンテーション ボタンをクリックして表示される画面では、モジュール内に作られた全てのキャンペーンのプレビュー、およびレンダリングテンプレート、スタイルシート、カスタムスクリプトの編集を行うことができます。モジュール内のキャンペーン一覧が画面左側に表示されますので、それぞれのキャンペーンをクリックしてプレビューし、見た目の調整を行ってください。

image-20220107-041022.png


編集画面

プレビュー画面の下にあるボタンをクリックして、表示レイアウトを定義する各要素(HTMLテンプレート、CSS、カスタムJS)を確認・編集してください:

image-20220107-041033.png

また、ヒントでは表示レイアウトを作成するにあたって参考となるいくつかのサンプルを提供しています。必要に応じてコピー&ペーストしてお使いください。

image-20220107-041044.png

ライブプレビューの利用

ライブプレビューではライブ環境でモジュールを確認することができます。
実際の見た目を確認するために、公開する前に実際の環境でテストを行うことは重要です。

ライブプレビューを使用するために、モジュールをデプロイする必要はありません。

image-20220107-041056.png

"ライブプレビュー" を選択するとURLが表示されます。モジュールを表示したいURLを入力して、"開く" を選択します。

image-20220107-041128.png

モジュールのデフォルトのテストURLとしてベースURLを指定することもできます。"プレゼンテーション" ボタンの隣にある "設定" を選択して、ライブプレビューのデフォルトURLを追加します。

image-20220107-041145.png

モジュールを配置するための専用の <div> 要素がある場合、2つめのフィールドにID(のみ)を追加してください(例えば、要素の場合で <div id="lollipop"></div> なら IDの lollipop を入力します。それ以外の場合、このフィールドを空欄のままにしても、URLページの body 上部に要素が追加されるだけです。

Last updated: