ウェブ実験を作成してください

ウェブ実験でCSSを使う

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

ウェブ実験では、カスケーディングスタイルシート(CSS)を使い、組織の色、フォント、レイアウト、ブランディングを実験に適用できます。

また、動的データを実行する実験のために、1

。これを行うには、APIレスポンスに動的データを含めるように設定し、バリアントが実行された際にサーバーからデータを要求し、その後バリアントに渡す必要があります。

ウェブ実験でCSSを使用する方法:

実験バリアントタイルで、設定したいバリアントの隣にある編集アイコンをクリックします。
コードエディターのCSSタブで、ウェブ実験のレイアウトをフォーマットするために使いたいCSSを入力してください。
CSSに動的データを挿入するには、データ タブの データセレクタ 検索ボックスで、ゲストのメールアドレスやその他の識別子を入力して検索してください。これにより、データモデルの属性やパスにアクセスできます。

!ヒントコードの設定やテスト時によく使うゲストがいる場合は、スターアイコンをクリックしてゲストをブックマークし、検索しなくて済むようにしましょう。
動的なゲストデータを含めるには、ゲストデータモデル ツリーの下で「」をクリックし、「 Copy Path as Handlebars」をクリックしてください。
意思決定モデル応答からの動的データを含めるには、意思決定モデル応答 ツリーを展開し、「」をクリックして「 パスをハンドルバーとしてコピー」をクリックしてください。
体験応答の動的データを含めるには、体験応答 ツリーを展開し、をクリックして「 Copy Path as Handlebars」をクリックしてください。
CSSタブでデータを貼り付け、接頭辞にcontextを付けます。例えば、CSSの {{decisionOffers.0.attributes.PromoText}} に含まれるデータを含めるには、{{context.decisionOffers.0.attributes.PromoText}}として参照しなければなりません。
「保存」をクリックします。
コードエディタを閉じるにはをクリックしてください。

!注箱出しのウェブテンプレートを使う場合、またはそのテンプレートからJavaScriptをコピーした場合は、contextオブジェクト内でAPI応答の属性を参照しなければなりません。例えば、CSSにAPI応答のimageURLを含めるには、次のように参照してください:

background-image: URL("{{context.imageURL}}")

この記事を改善するための提案がある場合は、お知らせください!