Show Menu
トピック×

targetGlobalSettings()

Target Standard/Premium UI や REST API を使用して設定を構成する代わりに、 targetGlobalSettings() を使用して at.js ライブラリで設定を上書きできます。
これは特に、設定の一部を上書きする場合に、at.js が Dynamic Tag Management(DTM)から配信されている場合におこなわれます。

設定

次の設定を上書きできます。
設定
タイプ
デフォルト値
説明
serverState
以下の「serverState」を参照してください。
以下の「serverState」を参照してください。
以下の「serverState」を参照してください。
clientCode
文字列
UI から設定された値
クライアントコードを表します。
serverDomain
文字列
UI から設定された値
Target エッジサーバーを表します。
cookieDomain
文字列
可能であればトップレベルドメインに設定
Cookie の保存時に使用するドメインを表します。
crossDomain
文字列
UI から設定された値
クロスドメイントラッキングが有効になっているかどうかを表します。
使用できる値は次のとおりです。
  • 無効
  • 有効
  • x のみ
timeout
数値
UI から設定された値
Target エッジリクエストのタイムアウト
globalMboxAutoCreate
ブール値
UI から設定された値
グローバル mbox リクエストを実行するかどうかを示します。
visitorApiTimeout
数値
2000 ミリ秒 = 2 秒
訪問者 API リクエストのタイムアウトを示します。
有効
ブール値
true
有効にすると、エクスペリエンスを取得するTarget要求と、エクスペリエンスをレンダリングするDOM操作が自動的に実行されます。 さらに、Target呼び出しは/を使用して手動で実行で getOffer(s) きます。 applyOffer(s)
無効にすると、Target要求は自動でも手動でも実行されません。
pageLoadEnabled
ブール値
true
有効にすると、ページの読み込み時に返す必要のあるエクスペリエンスを自動的に取得します
viewsEnabled
ブール値
true
有効にすると、ページの読み込み時に返す必要のあるビューを自動的に取得します。 ビューはat.js 2でサポートされています。 xのみ
defaultContentHiddenStyle
文字列
visibility: hidden
クラス名が「mboxDefault」である DIV を使用し、 mboxUpdate() mboxCreate() 、または mboxDefine() から実行される mbox のラッピングにのみ使用され、デフォルトのコンテンツを非表示にします。
defaultContentVisibleStyle
文字列
visibility: visible
クラス名が「mboxDefault」である DIV を使用し、 mboxUpdate() mboxCreate() 、または mboxDefine() から実行される mbox のラッピングにのみ使用され、適用されたオファー(存在する場合)またはデフォルトのコンテンツを表示します。
bodyHiddenStyle
文字列
body { opacity: 0 }
globalMboxAutocreate === true の場合にのみ使用され、ちらつきの発生を最小限に抑えます。
詳しくは、「 at.js によるちらつきの制御方法 」を参照してください。
bodyHidingEnabled
ブール値
true
Visual Experience Composer で作成されたオファー(ビジュアルオファー)の配信に target-global-mbox が使用されている場合に、ちらつきの制御に使用します。
imsOrgId
文字列
IMS ORG ID
IMS ORG ID を表します。
secureOnly
ブール値
false
at.js で HTTPS のみを使用するか、ページのプロトコルに基づいて HTTP と HTTPS との切り替えを許可するかを示します。
overrideMboxEdgeServer
ブール値
true(at.js バージョン 1.6.2 以降)
<clientCode>.tt.omtrdc.net ドメインまたは mboxedge<clusterNumber>.tt.omtrdc.net ドメインを使用する必要があるかどうかを示します。
この値が true の場合、 mboxedge<clusterNumber>.tt.omtrdc.net ドメインは cookie に保存されます。
overrideMboxEdgeServerTimeout
数値
1860000 => 31 分
mboxedge<clusterNumber>.tt.omtrdc.net 値を含む cookie の有効期間を示します。
optoutEnabled
ブール値
false
Target が訪問者 API isOptedOut() 関数を呼び出す必要があるかどうかを示します。これは、デバイスグラフ有効化の一部です。
selectorsPollingTimeout
数値
5000 ミリ秒 = 5 秒
at.js 0.9.6 では、 targetGlobalSettings で上書きできるこの新しい設定が Target に導入されました。
selectorsPollingTimeout は、セレクターによって識別されたすべての要素がページに表示されるまでの待機時間が、クライアントによってどれくらい許容されるかを表します。
Visual Experience Composer(VEC)によって作成されたアクティビティには、セレクターが含まれたオファーがあります。
dataProviders
以下の「データプロバイダー」を参照してください。
以下の「データプロバイダー」を参照してください。
以下の「データプロバイダー」を参照してください。
cspScriptNonce
以下の「コンテンツセキュリティポリシー」を参照してください。
以下の「コンテンツセキュリティポリシー」を参照してください。
以下の「コンテンツセキュリティポリシー」を参照してください。
cspStyleNonce
以下の「コンテンツセキュリティポリシー」を参照してください。
以下の「コンテンツセキュリティポリシー」を参照してください。
以下の「コンテンツセキュリティポリシー」を参照してください。

使用方法

この関数は、at.js が読み込まれる前、または​ セットアップ 実装 at.js 設定を編集 コード設定 ライブラリヘッダー ​で定義できます。
「ライブラリのヘッダー」フィールドでは、JavaScript を自由形式で入力できます。カスタマイズコードは次の例のようになります。
window.targetGlobalSettings = {  
   timeout: 200, // using custom timeout  
   visitorApiTimeout: 500, // using custom API timeout  
   enabled: document.location.href.indexOf('https://www.adobe.com') >= 0 // enabled ONLY on adobe.com  
};

データプロバイダー

この設定では、Demandbase、BlueKai、カスタムサービスなどのサードパーティのデータプロバイダーからデータを収集し、そのデータをグローバル mbox リクエストで mbox パラメーターとして渡すことができます。非同期および同期リクエストを介した複数のプロバイダーからのデータ収集もサポートしています。この手法では、デフォルトのページコンテンツのちらつきを制御しながら、プロバイダーごとに個別のタイムアウトを指定し、ページのパフォーマンスへの影響を抑制することが簡単にできます。
データプロバイダーは、at.js 1.3 以降を必要とします。
詳細は次のビデオで説明されています。
ビデオ
説明
データプロバイダーは、サードパーティから Target へデータを簡単に渡すことのできる機能です。サードパーティとしては、気象予報サービス、DMP、自社の Web サービスなども利用可能です。このデータを利用して、オーディエンスやターゲットコンテンツを構築したり、訪問者プロファイルを充実させることができます。
サードパーティデータプロバイダーからデータを回収し Target リクエストで渡す、Adobe Target のデータプロバイダー機能の使用方法の実装詳細と例。
window.targetGlobalSettings.dataProviders 設定は、データプロバイダーの配列です。
各データプロバイダーの構造は次のとおりです。
キー
タイプ
説明
name
文字列
プロバイダーの名前。
version
文字列
プロバイダーのバージョン。このキーはプロバイダーの展開に使用されます。
timeout
数値
ネットワークリクエストの場合は、プロバイダーのタイムアウトを表します。このキーはオプションです。
provider
関数
プロバイダーデータの取得ロジックを含む関数。
この関数の必須パラメーターは callback のみです。この callback パラメーターは、データを適切に取得した場合またはエラーが発生した場合にのみ呼び出す必要があります。
このコールバックは、次の 2 つのパラメーターを受け取ります。
  • error:エラーの有無を表します。エラーがない場合、このパラメーターは null に設定されます。
  • params:Target リクエストで送信されるパラメーターを表す JSON オブジェクト。
データプロバイダーで同期実行を使用する場合の例は次のとおりです。
var syncDataProvider = { 
  name: "simpleDataProvider", 
  version: "1.0.0", 
  provider: function(callback) { 
    callback(null, {t1: 1}); 
  } 
}; 
  
window.targetGlobalSettings = { 
  dataProviders: [ 
    syncDataProvider 
  ] 
};

at.js によって window.targetGlobalSettings.dataProviders が処理されると、Target リクエストには t1=1 という新しいパラメーターが含まれます。
Target のリクエストに追加するパラメーターを、BlueKai、Demandbase などのサードパーティサービスから取得する場合の例は次のとおりです。
var blueKaiDataProvider = { 
   name: "blueKai", 
   version: "1.0.0", 
   provider: function(callback) { 
      // simulating network request 
     setTimeout(function() { 
       callback(null, {t1: 1, t2: 2, t3: 3}); 
     }, 1000); 
   } 
} 
  
window.targetGlobalSettings = { 
   dataProviders: [ 
      blueKaiDataProvider 
   ] 
};

at.js によって window.targetGlobalSettings.dataProviders が処理されると、Target のリクエストには、 t2=2 t1=1 、および t3=3 という追加パラメーターが含まれます。
次の例では、データプロバイダーを使用して weather API データを取得し、Target リクエストでパラメーターとして送信します。Target リクエストには、 country weatherCondition などのパラメーターも追加されます。
var weatherProvider = { 
      name: "weather-api", 
      version: "1.0.0", 
      timeout: 2000, 
      provider: function(callback) { 
        var API_KEY = "caa84fc6f5dc77b6372d2570458b8699"; 
        var lat = 44.426767399999996; 
        var lon = 26.1025384; 
        var url = "//api.openweathermap.org/data/2.5/weather?lang=en"; 
        var data = { 
          lat: lat, 
          lon: lon, 
          appId: API_KEY 
        } 
 
        $.ajax({ 
          type: "GET", 
                url: url, 
          dataType: "json", 
          data: data, 
          success: function(data) { 
            console.log("Weather data", data); 
            callback(null, { 
              country: data.sys.country, 
              weatherCondition: data.weather[0].main 
            }); 
          }, 
          error: function(err) { 
            console.log("Error", err); 
            callback(err); 
          } 
        });         
      } 
    }; 
 
    window.targetGlobalSettings = { 
      dataProviders: [weatherProvider] 
    };

dataProviders 設定を使用する際は、次の点に注意してください。
  • window.targetGlobalSettings.dataProviders に追加されたデータプロバイダーが非同期の場合は、同時並行で実行されます。訪問者 API リクエストは、待ち時間を最小限に抑えるために、 window.targetGlobalSettings.dataProviders に追加された関数と同時に実行されます。
  • at.js では、データはキャッシュされません。データプロバイダーが 1 回だけデータを取得する場合は、データをキャッシュし、そのプロバイダーの関数が呼び出されたら、2 回目の呼び出しでキャッシュデータを配信できるようにする必要があります。

Content Security Policy

at.js 2.3.0以降では、配信されたTargetオファーを適用する際に、ページDOMに追加されるSCRIPTタグとSTYLEタグに対するコンテンツセキュリティポリシーノンスの設定をサポートしています。
at.js 2.3.0以降の読み込みの前に、SCRIPT targetGlobalSettings.cspScriptNonce とSTYLE targetGlobalSettings.cspStyleNonce のnoncesを、それに対応して設定する必要があります。 以下の例を参照してください。
...
<head>
 <script nonce="<script_nonce_value>">
window.targetGlobalSettings = {
  cspScriptNonce: "<csp_script_nonce_value>",
  cspStyleNonce: "<csp_style_nonce_value>"
};
 </script>
 <script nonce="<script_nonce_value>" src="at.js"></script>
...
</head>
...

との設 cspScriptNonce 定を cspStyleNonce 指定すると、at.js 2.3.0以降では、Targetオファーの適用時にDOMに追加されるすべてのスクリプトタグとSTYLEタグに対して、これらの属性がnonce属性として設定されます。

serverState

serverState は、at.js v2.2以降で利用できる設定で、Targetのハイブリッド統合が実装されている場合に、ページのパフォーマンスを最適化するために使用できます。 ハイブリッド統合とは、クライアント側でat.js v2.2以降と、配信APIまたはサーバー側でTarget SDKの両方を使用してエクスペリエンスを配信することです。 serverState では、at.js v2.2以降で、サーバー側で取り込まれたコンテンツからエクスペリエンスを直接適用し、提供されるページの一部としてクライアントに返す機能が提供されます。

前提条件

のハイブリッド統合が必要です Target。

コードサンプル

この仕組みをよりよく理解するために、お使いのサーバーで使用する以下のコード例を参照してください。 このコードは、 Target Node.js SDKを使用していることを前提としています
// First, we fetch the offers via Target Node.js SDK API, as usual
const targetResponse = await targetClient.getOffers(options);
// A successfull response will contain Target Delivery API request and response objects, which we need to set as serverState
const serverState = {
  request: targetResponse.request,
  response: targetResponse.response
};
// Finally, we should set window.targetGlobalSettings.serverState in the returned page, by replacing it in a page template, for example
const PAGE_TEMPLATE = `
<!doctype html>
<html>
<head>
  ...
  <script>
    window.targetGlobalSettings = {
      overrideMboxEdgeServer: true,
      serverState: ${JSON.stringify(serverState, null, " ")}
    };
  </script>
  <script src="at.js"></script>
</head>
...
</html>
`;
// Return PAGE_TEMPLATE to the client ...

ビュープリフェッチの serverState サンプルオブジェクトJSONは、次のようになります。
{
 "request": {
  "requestId": "076ace1cd3624048bae1ced1f9e0c536",
  "id": {
   "tntId": "08210e2d751a44779b8313e2d2692b96.21_27"
  },
  "context": {
   "channel": "web",
   "timeOffsetInMinutes": 0
  },
  "experienceCloud": {
   "analytics": {
    "logging": "server_side",
    "supplementalDataId": "7D3AA246CC99FD7F-1B3DD2E75595498E"
   }
  },
  "prefetch": {
   "views": [
    {
     "address": {
      "url": "my.testsite.com/"
     }
    }
   ]
  }
 },
 "response": {
  "status": 200,
  "requestId": "076ace1cd3624048bae1ced1f9e0c536",
  "id": {
   "tntId": "08210e2d751a44779b8313e2d2692b96.21_27"
  },
  "client": "testclient",
  "edgeHost": "mboxedge21.tt.omtrdc.net",
  "prefetch": {
   "views": [
    {
     "name": "home",
     "key": "home",
     "options": [
      {
       "type": "actions",
       "content": [
        {
         "type": "setHtml",
         "selector": "#app > DIV.app-container:eq(0) > DIV.page-container:eq(0) > DIV:nth-of-type(2) > SECTION.section:eq(0) > DIV.container:eq(1) > DIV.heading:eq(0) > H1.title:eq(0)",
         "cssSelector": "#app > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(2) > SECTION:nth-of-type(1) > DIV:nth-of-type(2) > DIV:nth-of-type(1) > H1:nth-of-type(1)",
         "content": "<span style=\"color:#FF0000;\">Latest</span> Products for 2020"
        }
       ],
       "eventToken": "t0FRvoWosOqHmYL5G18QCZNWHtnQtQrJfmRrQugEa2qCnQ9Y9OaLL2gsdrWQTvE54PwSz67rmXWmSnkXpSSS2Q==",
       "responseTokens": {
        "profile.memberlevel": "0",
        "geo.city": "dublin",
        "activity.id": "302740",
        "experience.name": "Experience B",
        "geo.country": "ireland"
       }
      }
     ],
     "state": "J+W1Fq18hxliDDJonTPfV0S+mzxapAO3d14M43EsM9f12A6QaqL+E3XKkRFlmq9U"
    }
   ]
  }
 }
}

ページがブラウザーに読み込まれた後、at.jsは、エッジに対してネットワーク呼び出しを実 Target 行することなく、す serverState べてのオファーを即座に適用 Target します。 また、at.jsは、サーバー側で取り込んだコンテンツでオファーが使用可能なDOM要素のみを事前に表示するので、ページ読み込みのパフォーマンスとエンドユーザーの操作性にプラスの影響を与えます。 Target

重要な注意事項

Consider the following when using serverState :
  • 現時点で、at.js v2.2は、次の目的でのserverState経由のエクスペリエンスの配信のみをサポートしています。
    • ページの読み込み時に実行されるVECで作成されたアクティビティ。
    • 事前に取り込まれたビュー。
      ビューを使用する Target SPAおよび triggerView()``triggerView() at.js APIの場合、at.js v2.2は、サーバー側で事前に取得されたすべてのビューのコンテンツをキャッシュし、各ビューがトリガーされ次第、Targetに対する追加のコンテンツ取得呼び出しを実行せずに適用します。
    • 注意 : 現在、サーバー側で取得されたmboxはではサポートされていませ serverState ん。
  • オファー serverState を適用する場合、at.jsは、設 pageLoadEnabled 定を考慮しま viewsEnabled す(例:設定がfalseの場合、ページ読み込みオファーは適用さ pageLoadEnabled れません)。
    これらの設定をオンにするには、 #

その他のリソース

機能の詳細については、 serverState 次のリソースを参照してください。