Moments iQのエクスペリエンスの管理
この記事では、Moments iQのエクスペリエンスの管理方法について説明します。
Moments iQは早期アクセス中であり、一部の顧客のみ利用可能です。この機能を試してみたい場合は、Tealiumのサポート担当者にお問い合わせください。
Moments iQのエクスペリエンスを作成するには、タグマーケットプレイスに移動し、Moments iQを検索して**+ 追加**をクリックします。詳細については、タグについてを参照してください。
位置と配置
以下の構成を構成して、エクスペリエンスがページ上のどこに表示され、エクスペリエンスの動作がどのようになるかを制御します。
-
エクスペリエンスのタイプ:作成するエクスペリエンスのタイプです。
- モーダル:エクスペリエンスはポップアップウィンドウとして表示されます。
- 埋め込み:エクスペリエンスはページに埋め込まれて表示されます。
-
エクスペリエンスの抑制:以下の条件のいずれかに該当する場合、エクスペリエンスは自動的に再訪問に対して抑制されることがあります:
- なし
- 閉じるボタンが選択された後
- 回答が送信された後
- 回答が送信された後または閉じるボタンが選択された後
ブラウザはこの情報を
momentsiq_suppressキーとしてローカル保存に保存します。 -
エクスペリエンスの配置:モーダルウィンドウの位置。これはモーダル配置オプションとのみ使用されます。
-
配置セレクタ:エクスペリエンスを配置するページ要素を識別するためのCSSセレクタ。これは埋め込み配置オプションとのみ使用されます。要素のセレクタの特定方法の詳細については、要素のCSSセレクタの特定方法を参照してください。
-
エクスペリエンスの位置:挿入される要素の位置。これは配置セレクタ内の要素に対してのみ使用されます。
- 開始前:ページ要素の前に配置されます。
- 開始後:ページ要素の内部に配置されますが、最初の子要素の前に配置されます。
- 終了前:ページ要素の内部に配置されますが、最後の子要素の後に配置されます。
- 終了後:ページ要素の後に配置されます。
-
リダイレクトURL:プライマリボタンがクリックされたときに訪問をリダイレクトするURL。URLをリダイレクトしない場合は、このフィールドを空白のままにします。たとえば、これは特別なオファーや追加の質問を求める別のエクスペリエンスが含まれるページへのリダイレクトに使用できます。
-
リダイレクトでタブを開く:リダイレクト時に新しいタブを開くには、
Trueを選択します。これはリダイレクトURLに値を入力した場合にのみ利用できます。
エクスペリエンスのテキスト
以下の構成で、エクスペリエンスに表示されるテキストを構成します。
- ヘッダーテキスト:エクスペリエンスの上部に表示されるテキストです。
- メインテキスト:ヘッダーテキストの下に表示されるテキストです。
- 質問テキスト:訪問に尋ねる質問です。
エクスペリエンスの背景画像
以下の手順でエクスペリエンスに背景画像を追加します。
- 画像の配置で、画像がエクスペリエンスウィンドウの左側または右側に配置されるかを選択します。
- 画像のURLで、httpsで保護された外部ホストの画像へのリンクを入力します。推奨される画像サイズは500px x 400pxです。ファイルの拡張子は
.png、.jpg、.gif、または.svgである必要があります。
質問と回答
Moments iQでは、訪問をサイト上の適切なエクスペリエンスに導くための質問をカスタマイズできる複数の質問形式が提供されています。
以下の構成で質問と回答を構成します。
- 回答タイプ:回答の入力タイプです。
- ラジオ:表示されるリストから訪問は1つの回答のみを選択できます。
- テキスト:訪問は1行のテキストボックスに回答を入力できます。
- チェックボックス:訪問はラベル付きの1つ以上のチェックボックスを選択できます。
- 回答:質問に対する回答です。
- ラジオ:各ラジオボタンの横に表示される回答のJSON配列です。
例:["Red", "Green", "Yellow", "Teal"] - テキスト:テキストボックスのプレースホルダーテキストです。
例:["What is your favorite color?"] - チェックボックス:各チェックボックスの横に表示される回答のJSON配列です。
例:["Red", "Green", "Yellow", "Teal"]
- ラジオ:各ラジオボタンの横に表示される回答のJSON配列です。
- プライマリボタンのテキスト:プライマリボタンのテキストラベルです。デフォルト値は
Submitです。
エクスペリエンスの外観
以下の外観プロパティの値をサイトのスタイルシートから入力して、エクスペリエンスをサイトの外観に合わせます。
| パラメーター | 説明 | 例 |
|---|---|---|
| メインテキストの色 | メインテキストの色(16進数コードまたは標準の色名)です。デフォルト値は#0A1B36です。 |
#1B1B1B |
| 質問テキストの色 | 質問テキストの色(16進数コードまたは標準の色名)です。 | #1B1B1B |
| 回答テキストの色 | 回答テキストの色(16進数コードまたは標準の色名)です。 | #1B1B1B |
| プライマリボタンのテキストの色 | プライマリボタンのテキストの色(16進数コードまたは標準の色名)です。デフォルト値は#FFFFFFです。 |
#1B1B1B |
| ヘッダーテキストのフォントファミリ | ヘッダーテキストのフォントファミリです。デフォルト値はArialです。 |
Arial |
| メインテキストのフォントファミリ | メインテキストのフォントファミリです。デフォルト値はArialです。 |
Arial |
| 質問テキストのフォントファミリ | 質問テキストのフォントファミリです。 | Arial |
| 回答テキストのフォントファミリ | 質問テキストのフォントファミリです。 | Arial |
| プライマリボタンのフォントファミリ | プライマリボタンのフォントファミリです。デフォルト値はArialです。 |
Arial |
| ヘッダーテキストのフォントサイズ | ヘッダーテキストのフォントサイズです。デフォルト値は16pxです。 |
14px |
| メインテキストのフォントサイズ | メインテキストのフォントサイズです。デフォルト値は14pxです。 |
14px |
| 質問テキストのフォントサイズ | 質問テキストのフォントサイズです。 | 14px |
| 回答テキストのフォントサイズ | 回答テキストのフォントサイズです。 | 14px |
| プライマリボタンのテキストのフォントサイズ | プライマリボタンのテキストサイズです。デフォルト値は16pxです。 |
16px |
| ヘッダーテキストのフォントスタイル | ヘッダーテキストのフォントスタイルです。デフォルト値はnormalです。 |
normal |
| メインテキストのフォントスタイル | メインテキストのフォントスタイルです。デフォルト値はnormalです。 |
normal |
| 質問テキストのフォントスタイル | 質問テキストのフォントスタイルです。 | normal |
| 回答テキストのフォントスタイル | 回答テキストのフォントスタイルです。 | normal |
| プライマリボタンのテキストのフォントスタイル | プライマリボタンのフォントスタイルです。デフォルト値はnormalです。 |
normal |
| ヘッダーテキストのフォントウェイト | ヘッダーのフォントウェイトです。デフォルト値は700です。 |
normal |
| メインテキストのフォントウェイト | メインテキストのフォントウェイトです。デフォルト値は400です。 |
normal |
| 質問テキストのフォントウェイト | 質問テキストのフォントウェイトです。 | normal |
| 回答テキストのフォントウェイト | 回答テキストのフォントウェイトです。 | normal |
| プライマリボタンのテキストのフォントウェイト | プライマリボタンのテキストのフォントウェイトです。デフォルト値は400です。 |
400 |
| 外部コンテナの背景色 | エクスペリエンスの背景色(16進数コードまたは標準の色名)です。デフォルト値は#FCFCFCです。 |
#1B1B1B |
| プライマリボタンの背景色 | プライマリボタンの背景色です。デフォルト値は#1B1B1Bです。 |
#1B1B1B |
| 外部コンテナのマージン | 最も外側のコンテナのマージンサイズです。デフォルト値は0です。マージン構成の詳細については、MDN Web Docs: marginを参照してください。 |
1px |
| 質問コンテナのマージン | 質問のコンテナのマージンサイズです。デフォルト値は0です。 |
0 |
| 回答コンテナのマージン | 質問のコンテナのマージンサイズです。デフォルト値は0です。 |
0 |
| 質問コンテナのテキスト配置 | 質問テキストのコンテナ内でのテキストの配置方向です。デフォルト値はstartです。 |
start |
| 回答コンテナのテキスト配置 | 回答テキストのコンテナ内でのテキストの配置方向です。デフォルト値はstartです。 |
start |
| 回答コンテナのフレックス方向 | 回答の配置方向です。縦方向(列)または横方向(行)のいずれかです。デフォルト値はcolumnです。 |
column |
| 外部コンテナのボーダースタイル | エクスペリエンスの最も外側のコンテナのボーダースタイルです。デフォルト値はnoneです。 |
none |
| 外部コンテナのボーダーカラー | エクスペリエンスの最も外側のコンテナの周囲のボーダーの色(16進数コードまたは標準の色名)です。ボーダースタイルをnone以外の値に構成する必要があります。半径は8pxです。 |
8px |
| 外部コンテナの幅 | 最も外側のコンテナの幅です。デフォルト値は500pxです。 |
500px |
| Zインデックス | ページ上のエクスペリエンスのZオーダー位置を上書きするために使用します。値が高いほど、値が低いものの上にスタックされます。 | auto |
ロードルール
エクスペリエンスをすべてのページでロードするか、エクスペリエンスが表示される条件を構成します。ロードルールとイベントの詳細については、ロードルールとイベントを参照してください。
データマッピング
マッピングは、データレイヤー変数からベンダータグの対応する変数にデータを送信するプロセスです。詳細については、データマッピングについてを参照してください。
利用可能なカテゴリは次のとおりです:
基本パラメータ
| 変数 | 説明 |
|---|---|
エクスペリエンスのタイプ type |
文字列 |
エクスペリエンスの配置 placement |
文字列 |
配置セレクタ selector |
文字列 |
エクスペリエンスの位置 position |
文字列 |
リダイレクトURL redirect_url |
文字列 |
リダイレクトでタブを開く redirect_open_tab |
文字列 |
Zインデックス zindex |
文字列 |
ヘッダーテキスト headerText |
文字列 |
メインテキスト mainText |
文字列 |
質問テキスト questionText |
文字列 |
回答タイプ answerType |
文字列 |
回答 answers |
配列 |
プライマリボタンのテキスト primaryText |
文字列 |
テキストの書式構成パラメータ
| 変数 | 説明 |
|---|---|
ヘッダーテキストの色 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 |
文字列 |
コンテナの書式構成パラメータ
| 変数 | 説明 |
|---|---|
外部コンテナの背景色 outerContainer.background |
文字列 |
外部コンテナのマージン outerContainer.margin |
文字列 |
外部コンテナのボーダースタイル outerContainer.borderStyle |
文字列 |
外部コンテナのボーダーカラー outerContainer.borderColor |
文字列 |
外部コンテナのボーダーラジウス outerContainer.borderRadius |
文字列 |
外部コンテナの幅 outerContainer.width |
文字列 |
質問コンテナのマージン questionContainer.margin |
文字列 |
質問コンテナのテキスト配置 questionContainer.textAlign |
文字列 |
回答コンテナのマージン answerContainer.margin |
文字列 |
回答コンテナのテキスト配置 answerContainer.textAlign |
文字列 |
プライマリボタンの背景色 primaryButton.background |
文字列 |
プライマリボタンのボーダーラジウス primaryButton.borderRadius |
文字列 |
ラジオ回答コンテナのアイテムの配置 radioContainer.alignItems |
文字列 |
ラジオ回答コンテナのフレックス方向 radioContainer.flexDirection |
文字列 |
チェックボックス回答コンテナのアイテムの配置 checkboxContainer.alignItems |
文字列 |
チェックボックス回答コンテナのフレックス方向 checkboxContainer.flexDirection |
文字列 |
テキストフィールド回答コンテナのアイテムの配置 textFieldContainer.alignItems |
文字列 |
テキストフィールド回答コンテナのフレックス方向 textFieldContainer.flexDirection |
文字列 |
フッターコンテナのアイテムの配置 textFieldContainer.alignItems |
文字列 |
データレイヤー変数
次の変数をデータレイヤーにCSVから一括インポートして追加します:
momentsiq_id, UDO変数
momentsiq_question1, UDO変数
momentsiq_question1_type, UDO変数
momentsiq_answer1, UDO変数
一括でデータレイヤー変数を追加する方法の詳細については、変数の管理を参照してください。
クライアントサイドのデータ永続化
Moments iQのエクスペリエンスに対する訪問の応答を使用して訪問のエクスペリエンスをパーソナライズするには、アプリケーションとユースケースに応じて、訪問の応答をローカル保存またはセッション保存に保存する必要があります。
次の例では、回答をローカル保存に保存し、変数momentsiq_idを使用して動的なキーmoments_answer_51を指定します。ここで、51はMoments iQタグのUIDです。
localStorage.setItem('moments_answer_' + b['momentsiq_id'], b['momentsiq_answer1']);
ローカル保存に保存されたキー/値は次のようになります:
保存された値を取得する必要がある場合:
localStorage.getItem('moments_answer_' + b['momentsiq_id']);
詳細については、ローカル保存とセッション保存と高度なJavaScriptコード拡張を参照してください。
サーバーサイドの統合
Moments iQをAudienceStreamやEventStreamなどのサーバーサイド製品と統合する場合は、データをTealium Collectタグを介して収集し、データレイヤーのエンリッチメントを使用してTealium iQをAudienceStreamプロファイルにリンクする必要があります。
サーバーサイドの属性をエンリッチするには、次のようなルールを作成してください。momentsiq_answer1に回答が含まれ、momentsiq_idが作成したエクスペリエンスのUIDと一致することを確認します。
例:
Set example_attribute to momentsiq_answer1
WHEN Any event
IF `Experience 51 Answered`
tealium_event equals momentsiq_submit
AND
momentsiq_id equals 51
詳細については、データレイヤーのエンリッチメントについてとTealium Collectタグを参照してください。
保存と公開
テストおよびリリースするためのエクスペリエンスを保存し、他のタグと同じワークフローに従って公開します。詳細については、タグについてを参照してください。
最終更新日 :: 2024年March月29日