ウェブ体験でウェブページをターゲットにする
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ウェブページをターゲットにしたり、あなたの組織のウェブサイト上でウェブ体験が動作する条件を選べます。
ウェブ体験でウェブページをターゲットにするには:
-
エクスペリエンスビルダーで「 ページターゲティング 」タイルをクリックします。
追加のフィールド表示。
-
デフォルトで 「全ページ 」オプションが選択されます。これにより、組織のウェブサイトのすべてのページでウェブ体験が実行されます。または、体験で特定のページをターゲットにするには、「 特定ページ 」オプションをクリックしてください。
-
「 **条件を追加」**をクリックします。
-
ページターゲティングのペイン、オペレーターのドロップダウンリストで、以下のいずれかのオペレーターをクリックしてください:
オペレーター
概要
包含
このオペレーターは、ゲストのURLにテキストフィールドで指定された文字が含まれている場合に体験を実行します。
含まれない
このオペレーターは、URLにテキストフィールドで指定された文字が含まれていない場合に体験を実行します。
終わりは
このオペレーターは、ゲストのURLがテキストフィールドで指定された文字列で終わっていなければ体験を実行します。
等しくない
このオペレーターは、ゲストのURLがテキストフィールドで指定した文字列と一致しない場合に体験を実行します。
正述式と一致しません(大文字無視)
この演算子は、ゲストの現在のページの統一リソース識別子(URI)が指定された正規表現(RegEx)パターンでフォーマットされていない場合に体験を実行します。これは複数の包含条件を使いたい場合に便利です。なぜなら、1つの正規表現で異なるデータをマッチングできるからです。隣接するフィールドに正則表現文字を入力してください。正則表現文字の書き方の詳細については、https://www.regular-expressions.info サイトをご覧ください。
正則表現とは一致しません
ゲストの現在のページの統一リソース識別子(URI)がフォーマットされておらず、指定された正則表現(RegEx)パターンの正確なケースと一致していない場合に実行したい場合、このオペレーターを選択してください。これは複数の包含条件を使いたい場合に便利です。なぜなら、1つの正規表現で異なるデータをマッチングできるからです。テキストフィールドにRegEx文字を入力してください。RegEx文字の書き方の詳細については、https://www.regular-expressions.info サイトをご覧ください。
> [!ヒント]
> この演算子は大文字大文字を区別します。RegExを使い、大文字を無視する場合は「正則表現(Ignore Case)と一致しない」演算子を選択してください。始まるのは
このオペレーターは、ゲストのURLがテキストフィールドで指定された文字列で始まっていない場合に体験を実行します。多くのURLにutm_source=email_campaignなどのクエリパラメータが付加されるため、テキストフィールドに入力すべきすべてのURLを知るのが難しいため、このオペレーターを使うことをよく推奨しています。
終わり
このオペレーターは、ゲストのURLがテキストフィールドで指定された文字列で終わる場合に体験を実行します。
等しい
このオペレーターは、ゲストのURLがテキストフィールドで指定した文字列と完全に一致している場合に体験を実行します。Equalsオペレーターを使用する場合、URLと完全に一致している場合にのみ体験が実行されます。URLにクエリパラメータやUrchin Tracking Module(UTM)パラメータが付加されている場合、プレビューモードや本番環境では意図したように機能しないことがあります。Equalsオペレーターを使用する場合、 体験をプレビュー する際にステップ3で完了したテキストフィールドに含まれていないクエリパラメータを削除する必要があります。これらの理由から、私たちはしばしば「Starts with operator」の使用を推奨しています。
マッチ正則表現(大文字無視)
この演算子は、ゲストの現在のページの統一リソース識別子(URI)が指定された正規表現(RegEx)パターンでフォーマットされている場合に体験を実行します。これは複数の包含条件を使いたい場合に便利で、1つの正規表現で異なるデータをマッチングできます。隣接するフィールドにRegEx文字を入力してください。RegEx文字の書き方の詳細については、https://www.regular-expressions.info サイトをご覧ください。
マッチ正述式
ゲストの現在のページのUniform Resource Identifier(URI)が指定された正則表現(RegEx)パターンの正確なケースと一致している場合、この演算子を選択します。複数の包含条件を使いたい場合に便利です。なぜなら、1つの正則表現だけで異なるデータをマッチングできるからです。隣接するフィールドにRegEx文字を入力してください。RegEx文字の書き方の詳細については、https://www.regular-expressions.info サイトをご覧ください。
> [!ヒント]
> この演算子は大文字小文字を区別します。RegExを使い、大文字を無視する場合は「Matches Regex (Ignore Case)」演算子を選択してください。始まります。
このオペレーターは、ゲストのURLがテキストフィールドで指定された文字列で始まる場合に体験を実行します。多くのURLにutm_source=email_campaignなどのクエリパラメータが付加されているため、テキストフィールドに入力すべきすべてのURLを知るのが難しいため、Equalsオペレーターではなくこのオペレーターの使用をよく推奨しています。
-
テキスト欄に必要な文字列または文字を入力します。これはURLではありません。選択した演算子に応じて、必要な文字列や部分ページパスなどの文字を入力しなければなりません。以下の画像に示されています:
-
ページに追加のターゲット条件を追加するには、「 **ページを追加」**をクリックしてください。
-
クライアントサイドJavaScript(CSJS)をブラウザ上で実行し、体験を実行するかどうかを判断するには、「 Add script」をクリックしてください。
アドバンスドターゲティングペインの表示。
-
ここでクライアントサイドJavaScript(CSJS)が登場します。
これには真理値(truthy value)も含まれます。真理値とは、ブール文脈で評価したときに真に変換される値のことです。
!重要ターゲティング条件を定義した後、targetingPassed() 関数を呼び出さなければなりません。この関数を使って、ブラウザでページが物理的に読み込まれていなくても、仮想ページ読み込み時に体験を実行できます(こちらのように):
(function () { targetingPassed(); var pushState = history.pushState; history.pushState = function() { pushState.apply(history, arguments); targetingPassed(); }; })();
-
「保存」をクリックします。
ページター ゲティング のパネルに戻ります。
-
「 保存 」をクリックしてペインを閉じます。
ウェブページのターゲティングの例
これらのJavaScript例を使って、ユーザーの行動やページ条件に基づいて体験の実行を制御しましょう。
ユーザーが特定のHTML要素をクリックしたときに体験をトリガーします
このスクリプトを使って、特定の要素(例えばCTAボタンやバナー)をクリックしたときに体験を実行できます。
(function () { const targetElementPath = "body"; // Edit here to change to target element let targetElement;
function waitForElement() { targetElement = document.querySelector(targetElementPath); if (targetElement) { console.log(targetElement); targetElement.addEventListener("click", triggerExperience); } else { setTimeout(waitForElement, 100); } }
function triggerExperience() { targetingPassed(); targetElement.removeEventListener("click", triggerExperience); }
waitForElement(); })();
遅延後に体験をトリガーしてください
このスクリプトを使って、ページ読み込みの数秒後に体験をトリガーします。
(function () { const timeDelaySeconds = 5 * 1000; // Edit here to change the delay length window.setTimeout(targetingPassed, timeDelaySeconds); })();
ユーザーがマウスをブラウザウィンドウから移動させたときに体験をトリガーします
ユーザーのマウスがブラウザのウィンドウから離れたときに体験をトリガーします。
(function () { function checkMouseLocation() { if (event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight)) { targetingPassed(); document.removeEventListener("mouseleave", checkMouseLocation); } } document.addEventListener("mouseleave", checkMouseLocation); })();
ユーザーが特定のHTML要素にカーソルを合わせたときに体験を起動します
ユーザーが特定のHTML要素(例えば商品画像)にマウスを移動させると、この体験をトリガーします。
(function () { const targetElementPath = "body"; // Edit here to change to target element let targetElement;
function waitForElement() { targetElement = document.querySelector(targetElementPath); if (targetElement) { console.log(targetElement); targetElement.addEventListener("mouseover", triggerExperience); } else { setTimeout(waitForElement, 100); } }
function triggerExperience() { targetingPassed(); targetElement.removeEventListener("mouseover", triggerExperience); }
waitForElement(); })();
ユーザーがページの一部をスクロールしたときに体験をトリガーします
これにより、ユーザーがページ高さの一定割合を超えてスクロールしたときに体験が発動します。
const scrollPercentageInput = 25; // Edit here to change the scroll percentage
function checkScrollPercentage() { const scrollPercentage = Math.round((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100); if (scrollPercentage > scrollPercentageInput) { window.removeEventListener("scroll", checkScrollPercentage); targetingPassed(); } }
window.addEventListener("scroll", checkScrollPercentage);
特定のクエリパラメータが特定の数値で存在したときに体験をトリガーします
URLに特定のクエリパラメータと特定の値が含まれている場合に、この体験をトリガーします。
以下の例では、URL www.example.com?bx-qa=1が体験をトリガーします。
(function () { const targetQueryParameter = 'bx-qa'; // edit here to change the targeted query parameter const targetValue = '1'; // edit here to change the value required for the targeted query parameter
const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); if (urlParams.get(targetQueryParameter) === targetValue) { targetingPassed(); } })();