Moments iQ エクスペリエンスの管理

要件

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

動作方法

Moments iQ エクスペリエンスを作成するには、タグマーケットプレイスにアクセスし、Tealium Moments iQ をクリックして、続行をクリックします。詳細については、タグについてを参照してください。

構成

プロパティ

以下の構成を構成します：

Moments iQ Experience タグの タイトル を入力します。同じタグの複数のインスタンスがある場合は、他のインスタンスと区別するために説明的なタイトルを使用してください。
タグに関する任意の ノート を入力します。

エクスペリエンスの種類と配置

以下の構成を構成します：

コードバージョン: 使用する Moments iQ エクスペリエンス生成コードのバージョンを選択します。コードバージョンを変更する場合は、テンプレートも更新する必要があります。
- 2.0: このバージョンは、このドキュメントで説明されているすべての機能をサポートしています。
- 1.0: このバージョンは、エクスペリエンススタイルを構成する スタイルシート メソッドをサポートしていません。
エクスペリエンスタイプ: 作成するエクスペリエンスのタイプ。
- モーダル: エクスペリエンスはポップアップウィンドウとして表示されます。
- 埋め込み: エクスペリエンスはページに埋め込まれて表示されます。
エクスペリエンス配置: モーダルウィンドウの位置。これは モーダル 配置オプションでのみ使用されます。
モーダル背景の不透明度: ページの残りの部分に適用する不透明度の強さを選択します。これにより、コンテンツがより際立ちます。
配置セレクター: エクスペリエンスを配置するページ要素を識別する CSS セレクター。要素のセレクターを特定する方法についての詳細は、要素の CSS セレクターの特定方法を参照してください。
エクスペリエンス位置: 配置セレクター の要素に対して挿入された要素の位置。
- Before Begin: ページ要素の前。
- After Begin: ページ要素の内部、最初の子の前。
- Before End: ページ要素の内部、最後の子の後。
- After End: ページ要素の後。
- Replace: ページ要素を置き換えます。
Z-index: ページ上でのエクスペリエンスのzオーダー位置を上書きする値。高い値は低い値の上に積み重なります（例: “1”, “2”, “-1”, “auto”）。

スタイル

Moments iQのエクスペリエンスには、カスタマイズ可能な複数のエリアがあり、それぞれに特定のスタイルプロパティがサポートされています。以下の画像は、構成可能なコンポーネントと各コンポーネントに適用可能なCSSスタイルプロパティを視覚的に参照するためのものです。このガイドを使用して、テキスト、ボタン、レイアウト、コンテナのスタイリングの外観を制御する構成フィールドを理解してください。

このエクスペリエンスをあなたのサイトの外観に合わせて構成してください。エクスペリエンスのスタイルを構成するための以下の方法のいずれかを選択してください：

構成フィールド：エクスペリエンスの各要素に対してスタイル構成をフォームで入力します。
スタイルシート：カスケーディングスタイルシート（CSS）を使用してエクスペリエンスにスタイルを適用します。

構成フィールドメソッドを使用して行われた変更はスタイルシートメソッドに影響を与えず、スタイルシートメソッドを使用して行われた変更は構成フィールドメソッドに影響を与えません。

複数のMoments iQエクスペリエンスタグを持っている場合は、各エクスペリエンスタグのスタイル構成を個別に構成する必要があります。

手動で構成を入力

構成フィールドをクリックして、フォームにスタイル構成を入力します：

パラメータ	説明	例
フォントファミリー	テキストのフォントファミリー。	`Arial`
フォントサイズ	テキストのフォントサイズ（`px`または`em`単位）。	`14px`
フォントスタイル	テキストのフォントスタイル。	`normal`
フォントウェイト	テキストのフォントウェイト。	`normal`
テキストカラー	テキストの色（16進コードまたは標準色名）。	`#1B1B1B`

外部コンテナ

エクスペリエンスの外部コンテナに対する以下の構成を構成します：

パラメータ	説明	例
外部コンテナの背景色	エクスペリエンスの背景色（16進コードまたは標準色名）。デフォルト値は `#FCFCFC`です。	`#1B1B1B`
外部コンテナのマージン	最も外側のコンテナのマージンサイズ。デフォルト値は `0`です。マージン構成の詳細については、MDN Web Docs: marginを参照してください。	`1px`
外部コンテナのボーダースタイル	エクスペリエンスの最も外側のコンテナのボーダースタイル。デフォルト値は `none`です。	`none`
外部コンテナのボーダーカラー	エクスペリエンスの最も外側のコンテナの周りのボーダーの色（16進コードまたは標準色名）。ボーダースタイルを `none`以外の値に構成する必要があります。	`Black`
外部コンテナのボーダーラディウス	エクスペリエンスの最も外側のコンテナの周りのボーダーの半径。デフォルト値は `8px`です。	`8px`
外部コンテナの幅	最も外側のコンテナの幅。デフォルト値は `500px`です。	`500px`

質問コンテナ

エクスペリエンスの質問コンテナに対する以下の構成を構成します：

パラメータ	説明	例
質問コンテナのマージン	質問コンテナのマージンサイズ。デフォルト値は `0`です。	`0`
質問コンテナのテキストアライン	コンテナ内の質問テキストの配置方向。デフォルト値は `start`です。	`start`

回答コンテナ

エクスペリエンスの回答コンテナに対する以下の構成を構成します：

パラメータ	説明	例
回答コンテナのマージン	回答コンテナのマージンサイズ。デフォルト値は `0`です。	`0`
回答コンテナのテキストアライン	コンテナ内の回答テキストの配置方向。デフォルト値は `start`です。	`start`
回答コンテナのフレックス方向	回答の配置方向、縦（column）または横（row）。デフォルト値は `column`です。	`column`
回答コンテナのアイテム配置	コンテナ内の回答の配置方向（例：`start`, `flex-start`, `self-start`）。デフォルト値は `flex-start`です。	`flex-start`

ボタンスタイル

プライマリおよびセカンダリボタンに対する以下の構成を構成します：

パラメータ	説明	例
プライマリボタンの背景色	プライマリボタンの背景色。デフォルト値は `#1B1B1B`です。	`#1B1B1B`
セカンダリボタンの背景色	セカンダリボタンの背景色（16進コードまたは標準色名）。デフォルト値は `#1B1B1B`です。回答タイプが`Button`に構成されている場合にのみ使用されます。	`#1B1B1B`

CSS

スタイルシートをクリックして、CSS形式でスタイル構成を入力します。利用可能なすべてのパラメータとそのデフォルト値を含むサンプルCSSファイルが提供されています。

CSSの編集に関するガイドライン：

--uniqueSurveyId--変数は、公開時に自動的にエクスペリエンスIDに置き換えられます。
スタイルシートメソッドから構成フィールドメソッドに切り替えてタグを保存せずに終了した場合、スタイルシートの変更は破棄されます。
CSSファイルのクラス名を変更しないでください。

CSS依存のエクスペリエンス構成

スラッシュとアスタリスク（例：/*width:800px;*/）で囲まれたCSSプロパティはコメントアウトされています。これらは、特定のエクスペリエンスタイプ、エクスペリエンス背景画像、または回答タイプの構成を使用する場合のそれらのプロパティの代替値を表します。

背景画像CSS構成

コメントで始まるCSSプロパティ（/*default for image）は、背景画像を使用するタグに推奨される値を表します。

例えば、外部コンテナの幅のデフォルト値は500ピクセルです：

.--uniqueSurveyId--_MIQ_outerContainer {
  display: flex;
  width: 500px;
  /*default for image type*/
  /*width: 800px;*/

しかし、エクスペリエンス背景画像の構成を構成する場合は、幅を800ピクセルに変更することを推奨します。800ピクセルの幅を構成する行のコメントを外し、標準の500ピクセルの幅の行をコメントアウトします：

.--uniqueSurveyId--_MIQ_outerContainer {
  display: flex;
  /*width: 500px;*/
  /*default for image type*/
  width: 800px;

/*default for imageコメントで先行するすべてのプロパティのインスタンスに対してCSSファイルを調整してください。

また、画像位置をRightに構成する場合は、border-radiusプロパティを代替値を使用するように更新する必要があります：

.--uniqueSurveyId--_MIQ_imageNode {
  /*border-radius: 8px 0px 0px 8px;*/
  /*default for image right*/
  border-radius: 0px 8px 8px 0px;

エクスペリエンスタイプ構成

/*default for modal*/で始まるコメントで先行するCSSプロパティは、Modalタグと特定のエクスペリエンス配置構成に推奨される値を表します。

例えば、外部コンテナの変換のデフォルト値はtranslate(-50%, -50%);です：

  /*default for modal center*/
  transform: translate(-50%, -50%);

しかし、エクスペリエンス配置をTop-centerまたはBottom-centerに構成する場合は、標準値をコメントアウトして、transformプロパティの推奨値のコメントを外す必要があります：

  /*default for modal center*/
  /*transform: translate(-50%, 0%);*/

  /*default for modal top-center, bottom-center*/
  transform: translate(-50%, 0%);

選択したエクスペリエンス配置に対して必要に応じてtop, left, right, bottom, transformの値の行をコメントアウトおよびコメント解除してください。

ボタンタイプのCSS構成

タグの回答タイプをButtonに構成する場合、answerOptionContainerセクションの値が記載された行のコメントを解除してください：

.--uniqueSurveyId--_MIQ_answerOptionContainer {
  /*ボタンタイプのデフォルト*/
  width: 100%;

  /*ボタンタイプ列のデフォルト*/
  margin-bottom: 8px;

  /*ボタンタイプ行のデフォルト*/
  margin-right: 16px;
}

ルールとイベント

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

データの衝突を避けるため、1ページに表示できるMoments iQエクスペリエンスは1つだけです。複数のエクスペリエンスがある場合は、ロードルールを構成して、一度に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トラックタイプ
`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`	String
`radioContainer.flexDirection`	String
`checkboxContainer.alignItems`	String
`checkboxContainer.flexDirection`	String
`textFieldContainer.alignItems`	String

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

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

データレイヤー変数

エクスペリエンスは自動的に以下の変数をデータレイヤータブに追加します：

momentsiq_id, UDO Variable
momentsiq_question1, UDO Variable
momentsiq_question1_type, UDO Variable
momentsiq_questions_answered, UDO Variable
momentsiq_answer1, UDO Variable

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

訪問の回答を使用して訪問のエクスペリエンスをパーソナライズする場合、訪問の回答をPersist data values拡張クッキーで保存する必要があります。

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

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

サーバーサイド統合

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

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

例：

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

詳細については、データレイヤーのエンリッチされた化についておよびTealium Collectタグを参照してください。

保存して公開

エクスペリエンスをテストしてリリースするには、他のタグと同じワークフローに従ってください。詳細については、タグについてを参照してください。