ウェブ実験でウェブページをターゲットにする
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ウェブページをターゲットにしたり、あなたの組織のウェブサイト上でウェブ実験が実行される条件を指定したりできます。
ウェブ実験でウェブページをターゲットにするには:
-
実験ビルダーで「 ページターゲティング 」タイルをクリックします。
追加のフィールド表示。
-
デフォルトで 「全ページ」 オプションが選択されています。これにより、組織のウェブサイトのすべてのページでウェブ実験が実行されます。または、体験で特定のページをターゲットにするには、特定のページ オプションをクリックしてください。
!注ターゲティングは1ページに限定するのがベストプラクティスです。複数のページをターゲットにすると、実験が結果的に異なるページでより良い結果を出すため、交絡変数が生じる可能性があります。
-
「 **条件を追加」**をクリックします。
-
ページターゲティングのペイン、オペレーターのドロップダウンリストで、以下のいずれかのオペレーターをクリックしてください:
オペレーター
概要
包含
この演算子は、ゲストのURLにテキストフィールドで指定された文字が含まれている場合に実験を実行します。
含まれない
この演算子は、URLにテキストフィールドで指定された文字が含まれていない場合に実験を実行します。
終わりは
この演算子は、ゲストのURLがテキストフィールドで指定された文字列で終わらない場合に実験を実行します。
等しくない
このオペレーターは、ゲストのURLがテキストフィールドで指定した文字列と一致しない場合に実験を実行します。
正述式と一致しません(大文字無視)
この演算子は、ゲストの現在のページの統一リソース識別子(URI)が指定された正則表現(RegEx)パターンでフォーマットされていない場合に実験を実行します。これは複数の包含条件を使いたい場合に便利です。なぜなら、1つの正則表現で異なるデータをマッチングできるからです。隣接するフィールドにRegEx文字を入力してください。RegEx文字の書き方の詳細については、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演算子の使用をよく推奨しています。
マッチ正則表現(大文字無視)
この演算子は、ゲストの現在のページの統一リソース識別子(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(); } })();