Adobe Target dataProvidersを使用してページ動的要素からmboxパラメーターを設定する

はじめに

Adobe Targetで、非同期で取得される会員IDなどをmboxパラメーターに含めたい場合は、window.targetGlobalSettings.dataProviders を使用すると効率的に設定可能です。

しかし会員情報取得API等とAdobe Targetの連携がされていない場合は、独自で値を取得する仕組みが必要です。

ページ要素に必要な値が設定される場合に、それらから値を取得する方法を説明します。

window.targetGlobalSettings.dataProviders の基礎

window.targetGlobalSettings.dataProviders に配列で設定します。

https://developer.adobe.com/target/implement/client-side/atjs/atjs-functions/targetglobalsettings/#data-providers より抜粋)

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
  ]
};
				
			

非同期で動的に設定されているページ要素から値を取得する例

ページ要素の監視に、MutationObserver を使用する。

参考:MutationObserver – Web API | MDN 

HTML初期状態

				
					<div id="user-info"></div>
				
			

会員情報取得後

				
					<div id="user-info">
<p id="user-id">12345</p>
<p id="user-name">Taro</p>
</div>
				
			

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の導入・実装・運用を支援するサービスを提供しています。

ご興味がありましたらお問い合わせください

この記事をシェアする :