Moments iQ エクスペリエンスの管理 | モーメンツiQ

要件

Moments iQ エクスペリエンスは、Tealium iQ プロファイルでのみ作成できます。プロファイルライブラリでは作成できません。
アカウントで Tag Marketplace Policy が有効になっている場合、Moments iQ Experience タグを Show リストに追加する必要があります。そうしないと、タグは Tag Marketplace に表示されません。

動作方法

Moments iQ エクスペリエンスを作成するには、Tag Marketplace に移動し、Moments iQ を検索して + Add をクリックします。詳細については、タグについてを参照してください。

位置と配置

次の構成を構成して、ページ上でのエクスペリエンスの表示位置と動作を制御します：

Suppress Experience: 次の条件の下で、リターン訪問に対して自動的にエクスペリエンスを抑制できます：
- Never
- After close button selected
- After answer submitted
- After answer submitted or close button selected
ブラウザはこの情報をローカル保存に momentsiq_suppress キーとして保存します。
Track Load: ページ上でエクスペリエンスが初めてロードされたときにトラッキングコールを送信するには True を選択します。
Tealium Track Type: モーダルクローズと送信アクションを追跡する際にトリガーされる utag.track コールのイベントタイプ。
- View
- Link
Experience Type: 作成するエクスペリエンスのタイプ。
- Modal: エクスペリエンスはポップアップウィンドウとして表示されます。
- Embedded: エクスペリエンスはページに埋め込まれて表示されます。
Experience Placement: モーダルウィンドウの位置。この構成は Modal 配置オプションでのみ使用されます。
Placement Selector: エクスペリエンスを配置するページ要素を識別する CSS セレクタ。この構成は Embedded 配置オプションでのみ使用されます。要素のセレクタを決定する方法についての詳細は、要素の CSS セレクタを決定する方法を参照してください。
Experience Position: Placement Selector の要素に対して挿入された要素の位置。
- Before Begin: ページ要素の前。
- After Begin: ページ要素の内部、最初の子の前。
- Before End: ページ要素の内部、最後の子の後。
- After End: ページ要素の後。
- Replace: ページ要素を置き換えます。
Redirect URL: 主要ボタンがクリックされたときに訪問をリダイレクトする URL のパイプ (|) 区切りリスト。各 URL は回答リストの中の回答と位置で一致します（最初の URL は最初の回答用、2番目は2番目の回答用など）。URL の数は回答の数と一致する必要があります。リダイレクトを行いたくない場合はこのフィールドを空にしてください。たとえば、特別オファーを提供するサンキューページや、フォローアップの質問をする別のエクスペリエンスを含むページにリダイレクトすることができます。パイプ文字は区切り文字であるため、リダイレクション URL にパイプ文字を使用することはできません。
Redirect Opens Tab: 訪問がリダイレクトされるときに新しいタブを開くかどうかを選択します。このオプションは、Redirect URL に値を入力した場合にのみ利用可能です。

エクスペリエンスの背景画像

エクスペリエンスに背景画像を追加するには、次の手順を完了します：

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

エクスペリエンスのテキスト

次の構成でエクスペリエンスに表示されるテキストを構成します：

Header Text: エクスペリエンスの上部に表示されるテキスト。
Main Text: ヘッダーテキストの下に表示されるテキスト。
Question Text: 訪問に尋ねる質問。

回答

Moments iQ は複数の質問形式を提供し、訪問をサイト上の適切なエクスペリエンスに導く質問をカスタマイズすることができます。

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

Answer Type: 回答の入力タイプ。
- Radio: 訪問は表示されたリストから単一の回答のみを選択できます。
- Text: 訪問は単行フィールドに回答を入力できます。
- Checkbox: 訪問はラベル付きの1つ以上のチェックボックスを選択できます。
- Button: 訪問は表示された2つの回答のうちの1つをボタンとして選択できます。
Answers: 質問の回答：
- Radio: ラジオボタンの横に表示する回答のパイプ (|) 区切りリスト。パイプ文字は区切り文字であるため、ラジオボタンのラベルにパイプ文字を使用することはできません。例：Red|Green|Blue|Teal
- Text: フィールドのプレースホルダーテキスト。例：["What is your favorite color?"]
- Checkbox: チェックボックスの横に表示する回答のパイプ (|) 区切りリスト。パイプ文字は区切り文字であるため、チェックボックスのラベルにパイプ文字を使用することはできません。例：Red|Green|Blue|Teal
- Button: 主要および副ボタンのテキストを上書きする回答のパイプ (|) 区切りリスト。Moments iQ は最初の2つの値のみを使用します。パイプ文字は区切り文字であるため、ボタンのラベルにパイプ文字を使用することはできません。例：Red|Green
Primary Button Text: 主要ボタンのテキストラベル。デフォルト値は Submit です。

体験の外観の構成

サイトのスタイルシートから値を入力して、サイトの外観に合わせた体験を構成します。以下の外観プロパティについて構成します：

セカンダリーボタンの構成は、回答タイプがButtonに構成されている場合のみ使用されます。

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

動的テキスト

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

変数は以下のデータを使用できます：

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

データが利用できない場合に表示されるフォールバック値を構成できます。フォールバック値は二重のパイプ文字の後に表示されます（例：{{VARIABLENAME || FALLBACK}}）。

ロードルール

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

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

データマッピング

拡張機能を使用して、構成で動的な値を取得するための以下のマッピングを使用します：

基本パラメータ

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

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

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

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

変数	説明
`outerContainer.background`	文字列
`outerContainer.margin`	文字列
`outerContainer.borderStyle`	文字列
`outerContainer.borderColor`	文字列
`outerContainer.borderRadius`	文字列
`outerContainer.width`	文字列
`questionContainer.margin`	文字列
`questionContainer.textAlign`	文字列
`answerContainer.margin`	文字列
`answerContainer.textAlign`	文字列
`primaryButton.background`	文字列
`primaryButton.borderRadius`	文字列
`secondaryButton.background`	文字列
`secondaryButton.borderRadius`	文字列
`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拡張クッキーで保存する必要があります。

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

詳細については、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を参照してください。