Kameleoon.API.Core - Kameleoon Documentation

このモジュールには、ちらつきのないフロントエンドの A/B テストバリエーションを実装する関数が含まれています。プライバシー法への対応や法的同意の取得に関するメソッドなど、エンジンの初期化メソッドも含まれます。

enableLegalConsent

ビジターから法的同意を得た後、enableLegalConsent() メソッドを呼び出して Kameleoon を有効にしてください。このメソッドにより、Kameleoon の通常の動作モードが有効になります。詳細については、同意管理の記事を参照してください。

var agreedButton = Kameleoon.API.Utils.querySelectorAll("#agreed")[0];

Kameleoon.API.Utils.addEventListener(agreedButton, "mousedown", function (event) {
  Kameleoon.API.Core.enableLegalConsent();
});

引数

名前	型	説明
module	String	有効にするモジュールの名前。`PRODUCT_RECOMMENDATION`、`AB_TESTING`、`PERSONALIZATION`、`BOTH` のいずれかです。例えば、`PRODUCT_RECOMMENDATION` を指定すると、エントリポイントは製品レコメンデーション機能のみで実行されます。`AB_TESTING` を指定すると、A/B テストと製品レコメンデーションが有効になります(個別の同意を区別するカスタムオプションが有効な場合を除く)。`BOTH` を指定すると、すべての機能が有効になります。省略した場合、このメソッドはデフォルトですべてのモジュール(`BOTH`)の法的同意を有効にします。

商品推奨の同意を別途管理できるカスタムオプションも利用可能です。このオプションが有効な場合、enableLegalConsent("PRODUCT_RECOMMENDATION") を明示的に呼び出してモジュールを有効化してください。この機能を有効にするには、カスタマーサクセスマネージャーにお問い合わせください。

disableLegalConsent

ビジターが Kameleoon の使用を拒否したときは、disableLegalConsent() メソッドを呼び出してください。このメソッドは通常の動作モードを無効にします。詳細については、同意管理の記事を参照してください。

var disableButton = Kameleoon.API.Utils.querySelectorAll("#disable")[0];

Kameleoon.API.Utils.addEventListener(disableButton, "mousedown", function (event) {
  Kameleoon.API.Core.disableLegalConsent();
});

引数

名前	型	説明
module	String	無効化するモジュールの名前: “AB_TESTING”、“PERSONALIZATION”、または “BOTH”。省略された場合、このメソッドはすべてのモジュール (`BOTH`) の法的同意を無効にします。

商品推奨の同意を別途管理できるカスタムオプションも利用可能です。このオプションが有効な場合、disableLegalConsent("PRODUCT_RECOMMENDATION") を明示的に呼び出してモジュールを無効化してください。この機能を有効にするには、カスタマーサクセスマネージャーにお問い合わせください。

enableSinglePageSupport

enableSinglePageSupport() メソッドは、ブラウザのページ読み込みに関係なく、アクティブな URL が変更されたときに Kameleoon エンジンを再読み込みします。複数の URL と単一の初期読み込みを持つシングルページアプリケーション (SPA) ではこのメソッドを使用してください。Kameleoon は各 URL の変更を新しいページとして扱い、URL ターゲティングおよびページビューなどの指標の正確なトラッキングを可能にします。

if (location.href.indexOf("mySPAWebsitePart") != -1) {
  Kameleoon.API.Core.enableSinglePageSupport();
}

また、SPA が再読み込みされるとき、Kameleoon は「kameleoonElement」または「kameleoonStyleSheet」で始まる HTML ID を使用してページに追加された要素をすべて自動的に削除します。

enableDynamicRefresh

enableDynamicRefresh() メソッドは要素の変更を検出し、グラフィックエディタによる変更を再適用します。このメソッドは、URL の変更やページの再読み込みなしに DOM を動的に変更する SPA をサポートし、動的更新が実験を削除することを防ぎます。その他の SPA タイプについては enableSinglePageSupport() を参照してください。

if (location.href.indexOf("cart") != -1) {
    Kameleoon.API.Core.enableDynamicRefresh();
}

getConfiguration

getConfiguration() メソッドは、サイトの Kameleoon 構成のグローバル定数値を含む Configuration オブジェクトへの参照を返します。

var configuration = Kameleoon.API.Core.getConfiguration();

if (configuration.siteCode == "abcde12345") {
  document.cookie = "MyMainSite=true;";
} else if (configuration.siteCode == "12345abcdef") {
  document.cookie = "MySubSite=true;";
}

戻り値

名前	型	説明
configuration	Object	Configuration オブジェクト。

load

load() メソッドは Kameleoon エンジンを初期化します。初期化は通常、アプリケーションファイルの読み込み時に自動的に行われますが、手動で呼び出す必要がある場合もあります。シングルページアプリで URL が変わるたびに Kameleoon を再読み込みするには、URL を自分で監視する代わりに enableSinglePageSupport() を使用してください。

Kameleoon.API.Core.load();

processRedirect

processRedirect() メソッドは、通常はスプリット A/B 実験のために、ブラウザを別の URL にリダイレクトします。バックグラウンドでの正確なトラッキングを確保するため、window.location.href = redirectionURL; の代わりにこのメソッドを使用してください。

var experiment = Kameleoon.API.Experiments.getByName("RedirectExperiment");

if (experiment.associatedVariation.id == 123456) {
  Kameleoon.API.Core.processRedirect("https://www.mywebsite.com?variation=A");
}

リダイレクト URL がベース URL と異なるドメイン上にあり、Kameleoon の導入でユニファイドセッションデータが使用されていない場合、エンジンは正確なトラッキングのために、ターゲット URL に kameleoonRedirect-{experimentID} パラメータを追加します。

引数

名前	型	説明
redirectionURL	String	リダイレクト先の URL。このフィールドは必須です。

runWhenConditionTrue

runWhenConditionTrue() メソッドは、conditionFunction が true を返したときにコールバック関数を実行します。このメソッドはポーリング機構を使用するため、ちらつきが発生する可能性があります。パフォーマンス向上のため、代わりに runWhenElementPresent() を使用してください。詳細については runWhenElementPresent() の説明を参照してください。

Kameleoon.API.Core.runWhenConditionTrue(function () {
  return typeof jQuery != "undefined";
}, function () {
  jQuery("#bloc-2345").text("Mon nouveau texte");
}, 200);

引数

名前	型	説明
conditionFunction	Function	true または false を返す JavaScript 関数。このフィールドは必須です。
callback	Function	conditionFunction が true を返したときに実行される JavaScript 関数。このフィールドは必須です。
pollingInterval	Number	エンジンはこの間隔で定期的に conditionFunction を実行します。`runWhenElementPresent()` が利用できない場合、pollingInterval を低くするとちらつきは減少しますが、CPU 使用率は増加します。省略された場合、このメソッドはデフォルトで 200 ミリ秒になります。

runWhenElementPresent

runWhenElementPresent() メソッドは、特定の要素が DOM に表示されたときにコールバック関数を実行します。このメソッドは、ちらつき防止技術を実現するためにミューテーションオブザーバーを使用します。バリエーションの主要な要素を特定し、最初の引数として要素を、コールバックとして実装コードを指定して runWhenElementPresent() を呼び出してください。この呼び出しにより、要素が表示された時点で、ブラウザが表示の更新サイクルを開始する前に変更が実行されます。複数の要素に対して動作させる場合は、想定される最終的な要素のみをターゲットにするのではなく、各要素に対して個別に runWhenElementPresent() を呼び出します。1 回の呼び出しでは、異なる要素が出現する間に更新サイクルが発生した場合にちらつきが生じることがあります。

// With mutation observers management.
Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function (elements) {
 elements[0].innerText = "My new Text";
});

// With multiple CSS selectors. Executes if any one of the elements is present.
Kameleoon.API.Core.runWhenElementPresent("#bloc-567, .cta-button, #bloc-789", function (elements) {
 elements[0].innerText = "More new text";
});

// Without mutation observers management, Kameleoon polls every 200ms to check if the element is on the page.
Kameleoon.API.Core.runWhenElementPresent("#MyPopup.showed", function (elements) {
 Kameleoon.API.Events.trigger("popup displayed");
}, 200);

// With mutation observers management and Single Page App support, Kameleoon applies modifications whenever new elements are added to the DOM or when there is a dynamic refresh of the Single Page App that removes previous modifications.
Kameleoon.API.Core.runWhenElementPresent(".product-button", function (elements) {
 elements.forEach(element => {
  element.innerText = "Add To Cart";
 });
}, null, true);

この値を指定すると、Mutation Observer とアンチちらつき機能が無効化され、レガシーのポーリングに戻ります。CPU 負荷の高い複雑なセレクタクエリなど、特定のケースでのみこの引数を使用してください。

引数

名前	型	説明
selector	String	要素の CSS セレクタ。複数の CSS セレクタを指定する場合は、カンマ区切りの単一文字列を指定します。1 つ以上の要素が存在するとコールバックが実行されます。このフィールドは必須です。
callback	Function	要素が DOM に表示されたときに実行される JavaScript 関数。このフィールドは必須です。
pollingInterval	Number	この値を指定すると Mutation Observer が無効化され、エンジンがレガシーのポーリングに戻るため、ちらつきが発生する可能性があります。このフィールドは省略可能です。
isDynamicElement	Boolean	有効な場合、ページ読み込み時に即座に見つからないセレクタを Kameleoon が追跡し、要素が出現するたびにコールバックを実行します。セレクタにマッチする新しい要素ごとにコールバックが再度トリガーされます。この設定は、動的メニュー、無限スクロール、ポップアップをサポートします。このフィールドは省略可能です。

runWhenShadowRootElementPresent

runWhenShadowRootElementPresent() メソッドは、mode: open に設定された Shadow DOM 内に特定の要素が出現したときに callback 関数を実行します。

const wrapper = document.querySelector(".shadow-wrapper");
const shadow = wrapper.attachShadow({ mode: "open" });
const span = document.createElement("span");
span.classList.add("selector-inside-wrapper");
span.textContent = "I'm in the shadow DOM";
shadow.appendChild(span);

Kameleoon.API.Core.runWhenShadowRootElementPresent('.shadow-wrapper', '.selector-inside-wrapper', (elements) => {
    elements[0].innerText = "New text" 
});

引数

名前	型	説明
parentSelector	String	親要素の CSS セレクタ。このフィールドは必須です。
shadowRootElementSelector	String	Shadow DOM 内の CSS セレクタ。このフィールドは必須です。
callback	Function	Shadow DOM 内に要素が出現したときに実行される JavaScript 関数。このフィールドは必須です。
isDynamicElement	Boolean	有効な場合、即座に見つからないセレクタを Kameleoon が追跡し、要素が出現するたびにコールバックを実行します。セレクタにマッチする新しい要素ごとにコールバックが再度トリガーされます。この設定は、動的メニュー、無限スクロール、ポップアップをサポートします。

API

​enableLegalConsent

​disableLegalConsent

​enableSinglePageSupport

​enableDynamicRefresh

​getConfiguration

​load

​processRedirect

​runWhenConditionTrue

​runWhenElementPresent

​runWhenShadowRootElementPresent

enableLegalConsent

disableLegalConsent

enableSinglePageSupport

enableDynamicRefresh

getConfiguration

load

processRedirect

runWhenConditionTrue

runWhenElementPresent

runWhenShadowRootElementPresent