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

要件

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

動作方法

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

構成

プロパティ

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

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

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

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

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

エクスペリエンス追跡

エクスペリエンスの動作を制御するために、以下の構成を構成します：

• エクスペリエンスの抑制: 条件に応じて、エクスペリエンスはリターン訪問に対して自動的に抑制されることがあります：

  • 決してない
  • 閉じるボタンが選択された後
  • 回答が送信された後
  • 回答が送信されたか閉じるボタンが選択された後
    ブラウザはこの情報を momentsiq_suppress キーとしてローカル保存に保存します。訪問に対して抑制がアクティブかどうかを確認するには、ブラウザの開発者ツールを開いて アプリケーション > ローカル保存 に移動します。値は調査 ID によってキー付けされた JSON オブジェクトです。テスト中に抑制をリセットするには、キーを削除してページをリロードします。

• ロード追跡: ページ上でエクスペリエンスが初めてロードされたときに追跡コールを送信するために True を選択します。

• Tealium トラックタイプ: モーダルの閉じると送信アクションを追跡する際にトリガーされる utag.track コールのイベントタイプ。

  • ビュー
  • リンク

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

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

1. 画像配置 の下で、画像の背景がモーダルの左半分か右半分を埋めるかを選択します。
2. 画像位置 の下で、画像がエクスペリエンスウィンドウの左または右に合わせるかを選択します。
3. 画像 URL の下で、https-securedで外部ホストされた画像へのリンクを入力します。推奨される画像サイズ：500px x 400px。ファイルは .png, .jpg, .gif, または .svg のファイル拡張子を持っている必要があります。

フォーム

エクスペリエンスに表示されるテキストと回答を構成するために、以下の手順を完了します。

以下のテキストフィールドは、プレーンテキストまたは 動的テキスト に必要な演算子のみをサポートします。必要に応じてスタイルオプションを調整してフォーマットを整えてください。改行、改ページ、タブ、またはHTMLは使用しないでください。

ヘッダー

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

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

回答

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

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

• 回答タイプ: 回答の入力タイプ。
  • ラジオ: 訪問は表示されたリストから単一の回答のみを選択できます。
  • テキスト: 訪問は単一行フィールドに回答を入力できます。
  • チェックボックス: 訪問はラベル付きの1つ以上のチェックボックスを選択できます。
  • ボタン: 訪問は2つの回答のいずれかをボタンとして表示されるものから選択できます。
• 回答必須: 訪問がエクスペリエンスを送信する前に回答を入力または選択することを要求するために True を選択します。
• リダイレクトが新しいタブを開く: 訪問が リダイレクト URL が構成された回答またはエクスペリエンスをクリックしたときに新しいタブを開くために True を選択します。
• 回答: ラジオ、チェックボックス、および ボタン タイプの場合、各回答のラベルとオプションの リダイレクト URL を指定します。
  • リダイレクト URL が必要ない場合は、その回答の リダイレクト URL を空にします。個々の回答の リダイレクト URL は、一般的な リダイレクト URL が空の場合にのみ適用されます。
  • チェックボックス 回答の場合、個々の回答の リダイレクト URL は無視されます。チェックボックス送信後に訪問をリダイレクトするには、一般的な リダイレクト URL を使用します。
  • テキスト 回答の場合、最初の回答は入力フィールドのプレースホルダーテキストとして使用されます。提供されている場合、最初の回答の リダイレクト URL は送信後に使用されます。
  • ボタン タイプは最初の2つの回答とその リダイレクト URL のみを使用します。
  • より多くの回答を含めるには、+ 追加 をクリックします。
• リダイレクト URL: 個々の回答に リダイレクト URL が構成されておらず、主要なボタンがクリックされたときに訪問をリダイレクトする URL。
• プライマリボタンテキスト: プライマリボタンのテキストラベル。デフォルト値は 送信 です。

動的テキスト

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

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

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

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

スタイル

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

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

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

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

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

手動で構成を入力

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

外部コンテナ

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

質問コンテナ

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

回答コンテナ

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

ボタンスタイル

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

CSS

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

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

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

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

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

背景画像CSS構成

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

例えば、外部コンテナの幅のデフォルト値は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 {
  /*default for button type*/
  width: 100%;

  /*default for button type column*/
  margin-bottom: 8px;

  /*default for button type row*/
  margin-right: 16px;
}

ルールとイベント

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

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

マルチクエスチョン調査

単一のMoments iQタグは、連続する複数の質問を表示できます。各質問は異なる回答タイプを使用できます：ラジオ、テキスト、チェックボックス、またはボタン。訪問がエクスペリエンスを送信すると、Moments iQは各質問の変数セットを含む1つのmomentsiq_submitイベントを送信します：momentsiq_question1、momentsiq_answer1、momentsiq_question2、momentsiq_answer2など。

ボタン回答タイプは2つの回答のみをサポートします。2つ以上の回答オプションが必要な調査では、ラジオまたはチェックボックスの回答タイプを使用してください。

次の例は、NPSスコアとオープンテキストのフォローアップを収集する2つの質問調査を示しています：

{
  "tealium_event": "momentsiq_submit",
  "momentsiq_id": "72",
  "momentsiq_question1_type": "radio",
  "momentsiq_question1": "当社をお勧めする可能性はどれくらいですか？",
  "momentsiq_answer1": "非常に高い",
  "momentsiq_question2_type": "text",
  "momentsiq_question2": "スコアの主な理由は何ですか？",
  "momentsiq_answer2": "素晴らしいサポート体験"
}

データマッピング

データレイヤー変数を構成パラメータにマッピングして、現在のページロードのタグの静的構成をオーバーライドできます。たとえば、データレイヤー変数page_survey_questionをquestionTextパラメータにマッピングすることで、各ページに異なる質問を提供するために別々のタグを作成することなく、異なる質問を提供できます。このオーバーライドはquestionText、answers、answerType、およびすべてのスタイリングパラメータに適用されます。

次のマッピングを拡張機能とともに使用して、構成値を動的に構成するか、エクスペリエンス全体でスタイリングを再利用します：

基本パラメータ

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

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

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

データレイヤー変数

エクスペリエンスは自動的に以下の変数をデータレイヤータブに追加します。マルチクエスチョン調査の場合、タグはmomentsiq_question{n}、momentsiq_question{n}_type、およびmomentsiq_answer{n}を各質問ごとに1回追加します。ここでnは質問のキー番号です（例えば、1はquestion1のためです）。

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

訪問の反応をもとに、クライアント側のツールのみを使用して訪問の体験をパーソナライズしたい場合、訪問の反応をPersist data values拡張クッキーで保存する必要があります。

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

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

サーバー側の統合

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

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

例：

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

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

保存して公開

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