Web SDKのモニタリングフック
Adobe Experience Platform Web SDKには、様々なシステムイベントのモニタリングに使用できるモニタリングフックが含まれています。 これらのツールは、独自のデバッグツールを開発したり、Web SDKのログを取得したりするのに便利です。
Web SDKは、 デバッグ を有効にしているかどうかに関係なく、監視機能をトリガーします。
onInstanceCreated onInstanceCreated
このコールバック関数は、新しいWeb SDK インスタンスを正常に作成したときにトリガーされます。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onInstanceCreated(data) {
// data.instanceName
// data.instance
}
data.instanceNamedata.instanceonInstanceConfigured onInstanceConfigured
このコールバック関数は、configure コマンドが正常に解決されたときにWeb SDKによってトリガーされます。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onInstanceConfigured(data) {
// data.instanceName
// data.config
}
data.instanceNameonBeforeCommand onBeforeCommand
このコールバック関数は、他のコマンドが実行される前にWeb SDKによってトリガーされます。 この関数を使用して、特定のコマンドの設定オプションを取得できます。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onBeforeCommand(data) {
// data.instanceName
// data.commandName
// data.options
}
data.instanceNamedata.commandNamedata.optionsonCommandResolved onCommandResolved
このコールバック関数は、コマンド プロミスを解決するときにトリガーされます。 この関数を使用して、コマンドのオプションと結果を確認できます。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onCommandResolved(data) {
// data.instanceName
// data.commandName
// data.options
// data.result
},
data.instanceNamedata.commandNamedata.optionsdata.resultonCommandRejected onCommandRejected
このコールバック関数は、コマンドプロミスが拒否される前にトリガーされ、コマンドが拒否された理由に関する情報が含まれます。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onCommandRejected(data) {
// data.instanceName
// data.commandName
// data.options
// data.error
}
data.instanceNamedata.commandNamedata.optionsdata.errorfetch）。コマンドが拒否された理由も含まれます。onBeforeNetworkRequest onBeforeNetworkRequest
このコールバック関数は、ネットワークリクエストが実行される前にトリガーされます。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onBeforeNetworkRequest(data) {
// data.instanceName
// data.requestId
// data.url
// data.payload
}
data.instanceNamedata.requestIdrequestId。data.urldata.payloadPOST メソッドを介してリクエストの本文で送信されるネットワーク要求ペイロード オブジェクト。onNetworkResponse onNetworkResponse
このコールバック関数は、ブラウザーが応答を受信したときにトリガーされます。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onNetworkResponse(data) {
// data.instanceName
// data.requestId
// data.url
// data.payload
// data.body
// data.parsedBody
// data.status
// data.retriesAttempted
}
data.instanceNamedata.requestIdrequestId。data.urldata.payloadPOST メソッドを介してリクエストの本文で送信されるペイロードオブジェクト。data.bodydata.parsedBodydata.statusdata.retriesAttemptedonNetworkError onNetworkError
このコールバック関数は、ネットワークリクエストが失敗したときにトリガーされます。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onNetworkError(data) {
// data.instanceName
// data.requestId
// data.url
// data.payload
// data.error
},
data.instanceNamedata.requestIdrequestId。data.urldata.payloadPOST メソッドを介してリクエストの本文で送信されるペイロードオブジェクト。data.errorfetch）。コマンドが拒否された理由も含まれます。onBeforeLog onBeforeLog
このコールバック関数は、Web SDKがコンソールに何かを記録する前にトリガーされます。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onBeforeLog(data) {
// data.instanceName
// data.componentName
// data.level
// data.arguments
}
data.instanceNamedata.componentNamedata.levellog、info、warn、error。data.argumentsonContentRendering onContentRendering
このコールバック関数は、レンダリングのさまざまな段階でpersonalization コンポーネントによってトリガーされます。 ペイロードは、status パラメーターによって異なる場合があります。 関数パラメーターについて詳しくは、以下のサンプルを参照してください。
onContentRendering(data) {
// data.instanceName
// data.componentName
// data.payload
// data.status
}
data.instanceNamedata.componentNamedata.payloadPOST メソッドを介してリクエストの本文で送信されるペイロードオブジェクト。data.statuspersonalization コンポーネントは、レンダリングのステータスをWeb SDKに通知します。 サポートされている値：
rendering-started: Web SDKが提案をレンダリングしようとしていることを示します。 Web SDKが決定範囲またはビューのレンダリングを開始する前に、dataオブジェクトで、personalizationコンポーネントとスコープ名によってレンダリングされる提案を確認できます。no-offers：要求されたパラメーターに対してペイロードが受信されなかったことを示します。rendering-failed: Web SDKが提案のレンダリングに失敗したことを示します。rendering-succeeded：決定範囲のレンダリングが完了したことを示します。rendering-redirect: Web SDKがリダイレクト提案をレンダリングすることを示します。
onContentHiding onContentHiding
このコールバック関数は、事前非表示スタイルが適用または削除されたときにトリガーされます。
onContentHiding(data) {
// data.instanceName
// data.componentName
// data.status
}
data.instanceNamedata.componentNamedata.statuspersonalization コンポーネントは、レンダリングのステータスをWeb SDKに通知します。 サポートされている値：
hide-containersshow-containers
NPM パッケージを使用する際の監視フックの指定方法 specify-monitoring-npm
NPM パッケージ を使用してWeb SDKを使用している場合は、次に示すように、createInstance関数でモニタリングフックを指定できます。
var monitor = {
onBeforeCommand(data) {
console.log(data);
},
...
};
var alloyLibrary = require("@adobe/alloy");
var alloy = alloyLibrary.createInstance({ name: "alloy", monitors: [monitor] });
alloy("config", { ... });
alloy("sendEvent", { ... });
例 example
Web SDKは、__alloyMonitorsというグローバル変数内のオブジェクトの配列を検索します。
すべてのWeb SDK イベントをキャプチャするには、Web SDK コードがページに読み込まれる前に、モニタリングフックを定義する必要があります。 各モニタリング手法は、Web SDK イベントをキャプチャします。
Web SDK コードの読み込み後 以降 の監視フックを定義できますが、ページの読み込み前にトリガーされたフックはではなく キャプチャされます。
監視フックオブジェクトを定義する場合は、特殊なロジックを定義するメソッドのみを定義する必要があります。
例えば、onContentRenderingだけを気にする場合は、そのメソッドを定義するだけです。 すべてのモニタリングフックを一度に使用する必要はありません。
複数の監視フックオブジェクトを定義できます。 指定されたメソッドを持つすべてのオブジェクトは、対応するイベントがトリガーされたときに呼び出されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.__alloyMonitors = window.__alloyMonitors || [];
window.__alloyMonitors.push({
onInstanceCreated(data) {
// data.instanceName
// data.instance
},
onInstanceConfigured(data) {
// data.instanceName
// data.config
},
onBeforeCommand(data) {
// data.instanceName
// data.commandName
// data.options
},
// Added in version 2.4.0
onCommandResolved(data) {
// data.instanceName
// data.commandName
// data.options
// data.result
},
// Added in version 2.4.0
onCommandRejected(data) {
// data.instanceName
// data.commandName
// data.options
// data.error
},
onBeforeNetworkRequest(data) {
// data.instanceName
// data.requestId
// data.url
// data.payload
},
onNetworkResponse(data) {
// data.instanceName
// data.requestId
// data.url
// data.payload
// data.body
// data.parsedBody
// data.status
// data.retriesAttempted
},
onNetworkError(data) {
// data.instanceName
// data.requestId
// data.url
// data.payload
// data.error
},
onBeforeLog(data) {
// data.instanceName
// data.componentName
// data.level
// data.arguments
}
onContentRendering(data) {
// data.instanceName
// data.componentName
// data.payload
// data.status
},
onContentHiding(data) {
// data.instanceName
// data.componentName
// data.status
}
});
</script>
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["alloy"]);
</script>
<script src="alloy.js" async></script>
</head>
<body>
<h1>Monitor Test</h1>
</body>
</html>