Moments iQ体験の管理 | モーメンツiQ

Moments iQ体験を作成するには、タグマーケットプレイスに移動し、Moments iQを検索して**+ 追加**をクリックします。詳細については、タグについてを参照してください。

位置と配置

以下の構成を構成して、体験がページ上のどこに表示され、体験がどのように動作するかを制御します：

体験の抑制：体験は、以下の条件下で戻ってきた訪問に対して自動的に抑制することができます：
- 決して
- 閉じるボタンが選択された後
- 回答が提出された後
- 回答が提出されたか閉じるボタンが選択された後
ブラウザはこの情報をmomentsiq_suppressキーとしてローカル保存に保存します。
ロード時にトラッキング：体験が初めてページにロードされたときにトラッキングコールを送信するには、Trueを選択します。
Tealiumトラックタイプ：モーダルクローズと送信アクションのトラッキング時にトリガーされるutag.trackコールで使用されるイベントのタイプ。
- ビュー
- リンク
体験タイプ：作成する体験のタイプ。
- モーダル：体験はポップアップウィンドウとして表示されます。
- 埋め込み：体験はページに埋め込まれて表示されます。
体験の配置：モーダルウィンドウの位置。これはモーダル配置オプションでのみ使用されます。
配置セレクタ：体験を配置するページ要素を識別するためのCSSセレクタ。これは埋め込み配置オプションでのみ使用されます。要素のセレクタを決定する方法については、要素のCSSセレクタの決定方法を参照してください。
体験の位置：配置セレクタ内の要素に対する挿入要素の位置。
- 開始前：ページ要素の前。
- 開始後：ページ要素内、最初の子の前。
- 終了前：ページ要素内、最後の子の後。
- 終了後：ページ要素の後。
リダイレクトURL：主要なボタンがクリックされたときに訪問をリダイレクトするURL。URLをリダイレクトしたくない場合は、このフィールドを空白にします。例えば、これは特別なオファーを提供する感謝のページや、フォローアップの質問を尋ねる別の体験を含むページにリダイレクトすることができます。
リダイレクトがタブを開く：訪問がリダイレクトされたときに新しいタブを開くには、Trueを選択します。このオプションは、リダイレクトURLに値を入力した場合にのみ利用可能です。

体験の背景画像

以下の手順を完了して、体験に背景画像を追加します：

画像の配置の下で、画像が体験ウィンドウの左または右に合わせるかどうかを選択します。
画像URLの下で、httpsで保護された外部ホストの画像へのリンクを入力します。推奨画像サイズ：500px x 400px。ファイルは.png、.jpg、.gif、または.svgのファイル拡張子を持つ必要があります。

体験と質問のテキスト

以下の構成で体験に表示されるテキストを構成します：

ヘッダーテキスト：体験の上部に表示されるテキスト。
メインテキスト：ヘッダーテキストの下に表示されるテキスト。
質問テキスト：訪問に尋ねる質問。

回答

Moments iQは、訪問をサイト上の適切な体験に導く質問をカスタマイズできる複数の質問形式を提供します。

以下の構成で質問と回答を構成します：

回答タイプ：回答の入力タイプ。
- ラジオ：訪問は表示されるリストから一つだけ回答を選択できます。
- テキスト：訪問は一行のテキストボックスに回答を入力できます。
- チェックボックス：訪問はラベル付きの一つ以上のチェックボックスを選択できます。
- ボタン：訪問はボタンとして表示される二つの回答のうち一つを選択できます。
回答：質問の回答：
- ラジオ：各ラジオボタンの隣に表示する回答のパイプ(|)区切りのリスト。
  例：赤|緑|青|ティール
- テキスト：テキストボックスのプレースホルダーテキスト。
  例：["あなたの好きな色は何ですか？"]
- チェックボックス：各チェックボックスの隣に表示する回答のパイプ(|)区切りのリスト。
  例：赤|緑|青|ティール
- ボタン：主要なボタンと副ボタンのテキストを上書きする回答のパイプ(|)区切りのリスト。Moments iQは最初の二つの値のみを使用します。例：赤|緑
主要なボタンのテキスト：主要なボタンのテキストラベル。デフォルト値は送信です。

体験の外観

以下の外観プロパティの値を入力して、体験をサイトの外観に合わせて構成します：

パラメータ	説明	例
ヘッダーテキストの色	ヘッダーテキストの色、16進コードまたは標準色名。デフォルト値は`#0A1B36`。	`#1B1B1B`
メインテキストの色	メインテキストの色、16進コードまたは標準色名。デフォルト値は`#0A1B36`。	`#1B1B1B`
質問テキストの色	質問テキストの色、16進コードまたは標準色名。	`#1B1B1B`
回答テキストの色	回答テキストの色、16進コードまたは標準色名。	`#1B1B1B`
主要なボタンテキストの色	主要なボタンテキストの色、16進コードまたは標準色名。デフォルト値は`#FFFFFF`。	`#1B1B1B`
副ボタンテキストの色	副ボタンテキストの色、16進コードまたは標準色名。デフォルト値は`#FFFFFF`。	`#1B1B1B`
ヘッダーテキストのフォントファミリー	ヘッダーテキストのフォントファミリー。デフォルト値は`Arial`。	`Arial`
メインテキストのフォントファミリー	メインテキストのフォントファミリー。デフォルト値は`Arial`。	`Arial`
質問テキストのフォントファミリー	質問テキストのフォントファミリー。	`Arial`
回答テキストのフォントファミリー	回答テキストのフォントファミリー。	`Arial`
主要なボタンのフォントファミリー	主要なボタンのフォントファミリー。デフォルト値は`Arial`。	`Arial`
副ボタンのフォントファミリー	副ボタンのフォントファミリー。デフォルト値は`Arial`。	`Arial`
ヘッダーテキストのフォントサイズ	ヘッダーテキストのフォントサイズ。デフォルト値は`16px`。	`14px`
メインテキストのフォントサイズ	メインテキストのフォントサイズ。デフォルト値は`14px`。	`14px`
質問テキストのフォントサイズ	質問テキストのフォントサイズ。	`14px`
回答テキストのフォントサイズ	回答テキストのフォントサイズ。	`14px`
主要なボタンテキストのフォントサイズ	主要なボタンテキストのサイズ。デフォルト値は`16px`。	`16px`
副ボタンテキストのフォントサイズ	副ボタンテキストのサイズ。デフォルト値は`16px`。	`16px`
ヘッダーテキストのフォントスタイル	ヘッダーテキストのフォントスタイル。デフォルト値は`normal`。	`normal`
メインテキストのフォントスタイル	メインテキストのフォントスタイル。デフォルト値は`normal`。	`normal`
質問テキストのフォントスタイル	質問テキストのフォントスタイル。	`normal`
回答テキストのフォントスタイル	回答テキストのフォントスタイル。	`normal`
主要なボタンテキストのフォントスタイル	主要なボタンのフォントスタイル。デフォルト値は`normal`。	`normal`
副ボタンテキストのフォントスタイル	副ボタンのフォントスタイル。デフォルト値は`normal`。	`normal`
ヘッダーテキストのフォントウェイト	ヘッダーのフォントウェイト。デフォルト値は`700`。	`normal`
メインテキストのフォントウェイト	メインテキストのフォントウェイト。デフォルト値は`400`。	`normal`
質問テキストのフォントウェイト	質問テキストのフォントウェイト。	`normal`
回答テキストのフォントウェイト	回答テキストのフォントウェイト。	`normal`
プライマリボタンテキストのフォントウェイト	プライマリボタンテキストのフォントウェイト。デフォルト値は `400`。	`400`
セカンダリボタンテキストのフォントウェイト	セカンダリボタンテキストのフォントウェイト。デフォルト値は `400`。	`400`
アウターコンテナの背景色	経験の背景色、ヘックスコードまたは標準色名として。デフォルト値は `#FCFCFC`。	`#1B1B1B`
プライマリボタンの背景色	プライマリボタンの背景色。デフォルト値は `#1B1B1B`。	`#1B1B1B`
セカンダリボタンの背景色	セカンダリボタンの背景色。デフォルト値は `#1B1B1B`。	`#1B1B1B`
アウターコンテナのマージン	最外部コンテナのマージンサイズ。デフォルト値は `0`。マージン構成についての詳細は、MDN Web Docs: marginを参照してください。	`1px`
質問コンテナのマージン	質問のコンテナのマージンサイズ。デフォルト値は `0`。	`0`
回答コンテナのマージン	質問のコンテナのマージンサイズ。デフォルト値は `0`。	`0`
質問コンテナのテキストアライン	コンテナ内の質問テキストのアラインメント方向。デフォルト値は `start`。	`start`
回答コンテナのテキストアライン	コンテナ内の回答テキストのアラインメント方向。デフォルト値は `start`。	`start`
回答コンテナのフレックス方向	回答のアラインメント方向、縦方向に列または横方向に行として。デフォルト値は `column`。	`column`
回答コンテナのアラインアイテム	コンテナ内の回答のアラインメント方向（例：`start`、`flex-start`、または `self-start`）。デフォルト値は `flex-start`。	`flex-start`
アウターコンテナのボーダースタイル	経験の最外部コンテナのボーダースタイル。デフォルト値は `none`。	`none`
アウターコンテナのボーダーカラー	経験の最外部コンテナの周囲のボーダーの色、ヘックスコードまたは標準色名として。ボーダーカラーを表示するには、ボーダースタイルを `none` 以外の値に構成する必要があります。半径は `8px`。	`8px`
アウターコンテナの幅	最外部コンテナの幅。デフォルト値は `500px`。	`500px`
Z-Index	ページ上の経験のzオーダー配置を上書きするために使用します。高い値は低い値の上にスタックします。	`auto`

ダイナミックテキスト

ヘッダーテキスト、メインテキスト、質問テキスト、および回答パラメーターにダイナミックテキストを作成するために変数を使用できます。変数は2つのセットの中括弧の間に表示されます。例えば、{{VARIABLENAME}}。

次のデータを変数で使用できます：

utag.data (例： {{utag.data.customer_name}})
Bオブジェクト (例： {{b.customer_alias}})
Audiencestream属性、Bオブジェクトを通じて (例： {{b.variable_name}})

データが挿入されるものがない場合に表示されるフォールバック値を構成できます。フォールバック値はパイプ文字のペアの後に表示されます (例： {{VARIABLENAME || FALLBACK}}).

ロードルール

すべてのページで経験をロードするか、経験が表示される条件を構成します。ロードルールとイベントについての詳細は、Load RulesとEventsを参照してください。

データの衝突を避けるために、一度に1つのMoments iQ経験だけがページに表示されます。複数の経験がある場合は、一度に1つの経験だけがロードされるようにロードルールを構成してください。

データマッピング

次のマッピングを拡張機能と一緒に使用して、構成で動的な値を取得したり、経験から経験へのスタイリングを一貫させたりします：

基本パラメータ

変数	タイプ	説明
`type`	String	経験のタイプ
`placement`	String	経験の配置
`selector`	String	配置セレクタ
`position`	String	経験の位置
`imagePosition`	String	画像の位置
`imageUrl`	String	画像のURL
`altText`	String	画像の代替テキスト
`redirect_url`	String	リダイレクトURL
`redirect_open_tab`	String	リダイレクトがタブを開く
`zindex`	String	Z-index
`headerText`	String	ヘッダーテキスト
`mainText`	String	メインテキスト
`questionText`	String	質問テキスト
`answerType`	String	回答タイプ
`answers`	Array	回答
`primaryText`	String	プライマリボタンテキスト
`trackType`	String	Tealiumトラックタイプ
`primaryText`	String	プライマリボタンテキスト
`trackType`	String	Tealiumトラックタイプ
`trackOnLoad`	String	ロード時にトラック

テキストフォーマットパラメータ

変数	タイプ	説明
`headerTitle.color`	String	ヘッダーテキストの色
`headerTitle.fontFamily`	String	ヘッダーテキストのフォントファミリー
`headerTitle.fontSize`	String	ヘッダーテキストのフォントサイズ
`headerTitle.fontStyle`	String	ヘッダーテキストのフォントスタイル
`headerTitle.fontWeight`	String	ヘッダーフォントのウェイト
`mainBodyText.color`	String	メインテキストの色
`mainBodyText.fontFamily`	String	メインテキストのフォントファミリー
`mainBodyText.fontSize`	String	メインテキストのフォントサイズ
`mainBodyText.fontStyle`	String	メインテキストのフォントスタイル
`mainBodyText.fontWeight`	String	メインテキストのフォントウェイト
`questionContainer.color`	String	質問テキストの色
`questionContainer.fontFamily`	String	質問テキストのフォントファミリー
`questionContainer.fontSize`	String	質問テキストのフォントサイズ
`questionContainer.fontStyle`	String	質問テキストのフォントスタイル
`questionContainer.fontWeight`	String	質問フォントのウェイト
`answerContainer.color`	String	回答テキストの色
`answerContainer.fontFamily`	String	回答テキストのフォントファミリー
`answerContainer.fontSize`	String	回答テキストのフォントサイズ
`answerContainer.fontStyle`	String	回答テキストのフォントスタイル
`answerContainer.fontWeight`	String	回答フォントのウェイト
`primaryButton.color`	String	プライマリボタンテキストの色
`primaryButton.fontFamily`	String	プライマリボタンのフォントファミリー
`primaryButton.fontSize`	String	プライマリボタンテキストのフォントサイズ
`primaryButton.fontStyle`	String	プライマリボタンのフォントスタイル
`primaryButton.fontWeight`	String	プライマリボタンのフォントウェイト
`secondaryButton.color`	String	セカンダリボタンテキストの色
`secondaryButton.fontFamily`	String	セカンダリボタンのフォントファミリー
`secondaryButton.fontSize`	String	セカンダリボタンテキストのフォントサイズ
`secondaryButton.fontStyle`	String	セカンダリボタンのフォントスタイル
`secondaryButton.fontWeight`	String	セカンダリボタンのフォントウェイト

コンテナフォーマットパラメータ

変数	説明
`outerContainer.background`	String
`outerContainer.margin`	String
`outerContainer.borderStyle`	String
`outerContainer.borderColor`	String
`outerContainer.borderRadius`	String
`outerContainer.width`	String
`questionContainer.margin`	String
`questionContainer.textAlign`	String
`answerContainer.margin`	String
`answerContainer.textAlign`	String
`primaryButton.background`	String
`primaryButton.borderRadius`	String
`secondaryButton.background`	String
`secondaryButton.borderRadius`	String
`radioContainer.alignItems`	文字列
`radioContainer.flexDirection`	文字列
`checkboxContainer.alignItems`	文字列
`checkboxContainer.flexDirection`	文字列
`textFieldContainer.alignItems`	文字列
`textFieldContainer.flexDirection`	文字列
`textFieldContainer.alignItems`	文字列

コンテナとテキストオブジェクト

変数	タイプ	説明
`headerTitle`	[オブジェクト]	ヘッダーテキスト
`mainBodyText`	[オブジェクト]	メインテキスト
`questionContainer`	[オブジェクト]	質問
`answerContainer`	[オブジェクト]	回答
`primaryButton`	[オブジェクト]	プライマリーボタン
`secondaryButton`	[オブジェクト]	セカンダリーボタン
`outerContainer`	[オブジェクト]	外部コンテナ
`radioContainer`	[オブジェクト]	ラジオ回答コンテナ
`checkboxContainer`	[オブジェクト]	チェックボックス回答コンテナ
`textFieldContainer`	[オブジェクト]	テキストフィールド回答コンテナ
`footerContainer`	[オブジェクト]	フッターコンテナ
`imageNode`	[オブジェクト]	画像要素

データレイヤー変数

体験は自動的に以下の変数をデータレイヤーに追加します:

momentsiq_id, UDO変数
momentsiq_question1, UDO変数
momentsiq_question1_type, UDO変数
momentsiq_questions_answered, UDO変数
momentsiq_answer1, UDO変数
momentsiq_suppress, ローカル保存変数

クライアントサイドのデータ永続性

訪問のMoments iQ体験への回答を使用して訪問体験をクライアントサイドのツールだけでパーソナライズしたい場合、Persist data values extension cookieを使用して訪問の回答を保存する必要があります。

以下の画像はそのような拡張の例を示しています:

詳細については、Persist data value extensionを参照してください。

サーバーサイドの統合

Moments iQをAudienceStreamやEventStreamなどのサーバーサイド製品と統合する予定の場合、Tealium Collectタグを通じてデータを収集し、Tealium iQをAudienceStreamプロファイルにリンクする必要があります。

サーバーサイドの属性をエンリッチするために、momentsiq_answer1が回答を含み、momentsiq_idが作成した体験のUIDと一致することを確認するルールを作成します。

例:

また、Moments iQのルールでAudienceStream変数を活用する予定の場合、データレイヤーの豊かさを有効にする必要があります。

詳細については、About data layer enrichmentとTealium Collect tagを参照してください。

保存と公開

体験をテストしリリースするには、他のタグと同じワークフローを使用します。詳細については、About tagsを参照してください。