Kameleoon.API.Utils - Kameleoon Documentation

このモジュールは、一般的な操作のためのユーティリティメソッドを提供します。

addEventListener

addEventListener() メソッドは、指定された要素にイベントハンドラをアタッチします。

var popin = document.createElement("div");
popin.id = "kameleoonPopin";
popin.innerHTML = "<img src='https://www.mywebsite.com/myImage.jpg'/>";
document.body.appendChild(popin);

Kameleoon.API.Utils.addEventListener(popin, "mousedown", function (event) {
  document.body.removeChild(popin);
});

Kameleoon は、エンジン再読み込み時にこの API を介して作成されたすべてのイベントリスナーをリセットします。適切なクリーンアップを確保するため、SPA でリスナーを追加する場合はこのメソッドを使用してください。

引数

名前	型	説明
element	Object	リスナーの対象要素。このフィールドは必須です。
eventType	String	イベント名。このフィールドは必須です。
callback	Function	イベントがトリガーされたときに実行する関数。このフィールドは必須です。

addUniversalClickListener

addUniversalClickListener() メソッドは、デスクトップでのマウスクリックと、モバイルデバイスおよびタブレットでのタッチダウンイベントをリッスンするクリックハンドラをアタッチします。モバイルデバイスでは、エンジンが touchstart イベントの後に touchend イベントを検出し、その間に touchmove がない場合にタッチダウンが発生します。

let btn = document.querySelector("#MyButton");

Kameleoon.API.Utils.addUniversalClickListener(btn, function (event) {
  let goalID = 1234;
  Kameleoon.API.Goals.processConversion(goalID);
});

Kameleoon は、エンジン再読み込み時にこの API を介して作成されたすべてのリスナーをリセットし、SPA でのクリーンアップを容易にします。

デスクトップデバイスでは、右クリックもこのメソッドをトリガーします (例: 新しいタブでリンクを開くとき)。

引数

名前	型	説明
element	Object	リスナーの対象要素。このフィールドは必須です。
callback	Function	クリックイベントがトリガーされたときに実行する関数。このフィールドは必須です。

clearInterval

clearInterval() メソッドは、setInterval() を介して設定したタイマーをクリアします。

var myInterval = Kameleoon.API.Utils.setInterval(function () {
  if (window.dataLayer != null) {
    Kameleoon.API.Utils.clearInterval(myInterval);
  }
}, 1000);

引数

名前	型	説明
intervalId	Number	`setInterval()` メソッドによって返されたタイマー ID。このフィールドは必須です。

clearTimeout

clearTimeout() メソッドは、setTimeout() を介して設定したタイマーをクリアします。

var myTimeout = Kameleoon.API.Utils.setTimeout(function () {
  var popin = document.createElement("div");
  popin.id = "kameleoonPopin";
  popin.innerHTML = "<img src='https://www.mywebsite.com/myImage.jpg'/>";
  document.body.appendChild(popin);
}, 5000);

Kameleoon.API.Utils.addEventListener(document.body, "mousedown", function () {
  Kameleoon.API.Utils.clearTimeout(myTimeout);
});

引数

名前	型	説明
timeoutId	Number	`setTimeout()` によって返されたタイマー ID。

computeHash

computeHash() メソッドは、文字列からハッシュを計算します。機密性の高い個人情報を直接操作せずに一意のデータを処理するために使用します。

var emailId = Kameleoon.API.Utils.createHash("myemail@mail.com");
Kameleoon.API.Data.setCustomData("VisitorEmail", emailId);

引数

名前	型	説明
string	String	ハッシュを計算するソース文字列。

戻り値

名前	型	説明
hash	String	生成されたハッシュ。使用されているアルゴリズムは、java.lang.String の `hashCode()` の実装と同じです。

getURLParameters

getURLParameters() メソッドは、現在の URL を解析し、検出されたすべてのパラメータを返します。このメソッドは、検索 (?) およびハッシュ (#) パラメータの両方をサポートしています。

var parameters = Kameleoon.API.Utils.getURLParameters();

if (parameters.productID != null) {
  Kameleoon.API.Events.trigger("ProductPage");
}

戻り値

名前	型	説明
parameters	Object	パラメータ名をキー、パラメータ値を値とするオブジェクト。

performRequest

performRequest() メソッドは、リモート Web サーバーへの呼び出しを開始します。

Kameleoon.API.Utils.performRequest(
  "https://www.my_web_server_url.com",
  function () {
    if (this.readyState == 4 && this.status == 200) {
      eval(this.responseText);
    }
  },
  function() {
    console.log("Request cancelled");
  },
  2000
);

引数

名前	型	説明
url	String	リモートサーバーの URL。このフィールドは必須です。
readyStateHandler	Function	サーバーが応答を送信したときにメソッドが実行するコールバック関数です。メソッドは event 引数をこの関数に渡し(load イベント)、基盤となる XMLHttpRequest オブジェクトをコールバックにバインドします。そのため、コールバック内で XMLHttpRequest のすべてのプロパティを this から利用できます。このフィールドは省略可能です。
errorHandler	Function	エラーが発生したときにメソッドが実行するコールバック関数です。メソッドは event 引数をこの関数に渡し(error イベントまたは timeout イベント)、基盤となる XMLHttpRequest オブジェクトをコールバックにバインドします。そのため、コールバック内で XMLHttpRequest のすべてのプロパティを this から利用できます。このフィールドは省略可能です。
timeout	Number	リクエストをキャンセルするまでの待ち時間 (ミリ秒)。デフォルトは 5000 ミリ秒です。

querySelectorAll

querySelectorAll() メソッドは、指定された CSS セレクタにマッチするすべてのドキュメント要素を静的 NodeList オブジェクトとして返します。

var foundElements = Kameleoon.API.Utils.querySelectorAll(".kameleoonClassName");

foundElements.forEach(function (element) {
  element.style.display = "none";
});

このメソッドは、:contains および :eq を含むセレクタをサポートしています。

引数

名前	型	説明
selector	String	1 つ以上の CSS セレクタ。このフィールドは必須です。

戻り値

名前	型	説明
elements	Array	クエリにマッチする要素のリスト。

setInterval

setInterval() メソッドは、指定されたミリ秒間隔で関数または式を実行します。 Kameleoon は、エンジン再読み込み時にこの API を介して作成されたすべての間隔をリセットします。適切なクリーンアップを確保するため、SPA ではこのメソッドを使用してください。

var countdown = 10;
var timer = document.createElement("div");
timer.innerHTML = countdown.toString();
document.body.appendChild(timer);

var myInterval = Kameleoon.API.Utils.setInterval(function () {
  countdown--;
  timer.innerHTML = countdown.toString();

  if (countdown == 0) {
    Kameleoon.API.Utils.clearInterval(myInterval);
  }
}, 1000);

引数

名前	型	説明
function	Function	メソッドが定期的に実行する JavaScript 関数です。このフィールドは必須です。
milliseconds	Number	間隔の継続時間 (ミリ秒)。デフォルトは 200 ミリ秒です。

戻り値

名前	型	説明
intervalId	Number	`clearInterval()` で使用するタイマー ID。

setTimeout

setTimeout() メソッドは、指定されたミリ秒数後に関数または式を実行します。 Kameleoon は、エンジン再読み込み時にこの API を介して作成されたすべてのタイムアウトをリセットします。適切なクリーンアップを確保するため、SPA ではこのメソッドを使用してください。

var myTimeout = Kameleoon.API.Utils.setTimeout(function () {
  Kameleoon.API.Events.Trigger("5 seconds elapsed");
}, 5000);

引数

名前	型	説明
function	Function	メソッドが定期的に実行する JavaScript 関数です。このフィールドは必須です。
milliseconds	Number	関数を実行するまでの待ち時間 (ミリ秒)。デフォルトは 200 ミリ秒です。

戻り値

名前	型	説明
timeoutId	Number	`clearTimeout()` で使用するタイマー ID。

API

​addEventListener

​addUniversalClickListener

​clearInterval

​clearTimeout

​computeHash

​getURLParameters

​performRequest

​querySelectorAll

​setInterval

​setTimeout

addEventListener

addUniversalClickListener

clearInterval

clearTimeout

computeHash

getURLParameters

performRequest

querySelectorAll

setInterval

setTimeout