Adobe Targetで、非同期で取得される会員IDなどをmboxパラメーターに含めたい場合は、window.targetGlobalSettings.dataProviders を使用すると効率的に設定可能です。
しかし会員情報取得API等とAdobe Targetの連携がされていない場合は、独自で値を取得する仕組みが必要です。
ページ要素に必要な値が設定される場合に、それらから値を取得する方法を説明します。
window.targetGlobalSettings.dataProviders に配列で設定します。
KEY | TYPE | DESCRIPTION |
---|---|---|
name | String | Provider名 |
version | String | Providerバージョン |
timeout | Number | Providerのタイムアウト値。オプション |
provider | Function |
Providerデータ取得ロジック。
引数のcallbackはデータが取得成功または失敗した際に呼び出す。 callbackには2つのパラメーターがある。 1つ目がエラーで、エラー発生時にはエラーを指定し、成功時にはnullを指定します。 2つ目がTargetリクエストに含めたいJSONオブジェクトで指定します。 |
同期で設定しているシンプルな例
var syncDataProvider = {
name: "simpleDataProvider",
version: "1.0.0",
provider: function(callback) {
callback(null, {t1: 1});
}
};
window.targetGlobalSettings = {
dataProviders: [
syncDataProvider
]
};
会員情報取得後
12345
Taro
dataProviders 設定例
var syncUserIdProvider = {
name: "userIdProvider",
version: "1.0.0",
timeout: 3000,
provider: function(callback) {
// User ID取得・callback呼び出し関数を定義
var getUserId = function() {
var element = document.querySelector('#user-id');
if (element) {
var userId = element.textContent;
callback(null, {userId: userId});
return true;
}
};
// Provider呼び出し時に会員情報未取得時にMutationObserverで監視
if (!getUserId()) {
new MutationObserver(function(mutationsList, observer) {
if (getUserId()) {
// 会員情報取得く時にMutationObserverは停止
observer.disconnect();
}
}).observe(document.querySelector('#user-info'), {childList: true});
}
}
};
window.targetGlobalSettings = {
dataProviders: [
syncUserIdProvider
]
};
今回はページの要素に目的の値がセットされる場合で説明しましたが、グローバル変数にセットされるような場合でも、会員情報取得時にはなんらかのページの要素の更新を伴う場合が多いので、MutationObserver.observeの引数を、以下のようにdocument.bodyの監視とすることで広範囲に使用することができます。
.observe(document.body, {childList: true, subtree: true});
Implement DigitalではAdobe Targetの導入・実装・運用を支援するサービスを提供しています。
ご興味がありましたらお問い合わせください。