at.js 1.x​からat.js 2.x​へのアップグレード

at.js の最新バージョンは、次世代のクライアント側のテクノロジーで、パーソナライゼーションを実行するための機能セットを提供します。Adobe Target この新しいバージョンは、シングルページアプリケーション（SPA）と調和したインタラクションを実現するための at.js のアップグレードに焦点を当てています。

以前のバージョンでは利用できないat.js 2.x​を使用するメリットを次に示します。

at.js 2.x システム図

次の図は、ビューを含むat.js 2.x​のワークフローと、これがSPA統合をどのように強化するかを理解するのに役立ちます。 at.js 2.x​で使用される概念をより詳しく説明するには、単一ページアプリケーションの実装を参照してください。

（画像をクリックして全幅に拡大します）。

{modal="regular"}のTarget フロー

これで、triggerView() が SPA のどこに 実装されているかに関わらず、ビューとアクションはキャッシュから取得され、サーバー呼び出しなしでユーザーに表示されるようになります。 triggerView() は、インプレッション数を増分して記録するために、Target バックエンド に通知リクエストもおこないます。

（画像をクリックして全幅に拡大します）。

{modal="regular"}

at.js 2.x​をデプロイ

Adobe Experience Platform拡張機能のタグを介してat.js 2.x​をデプロイします。

廃止された at.js 関数

at.js 2.x​で非推奨（廃止予定）になっている関数がいくつかあります。

廃止された関数とそれらに対応する関数は、以下のとおりです。 関数の完全なリストについては、at.js 関数を参照してください。

mboxCreate(mbox,params)

説明：

リクエストを実行し、mboxDefault クラス名を持つ最も近い DIV にオファーを適用します。

例：

<div class="mboxDefault">
  default content to replace by offer
</div>
<script>
  mboxCreate('mboxName','param1=value1','param2=value2');
</script>

at.js 2.x相当

mboxCreate(mbox, params) に代わるものは、getOffer() および applyOffer() です。

例：

<div class="mboxDefault">
  default content to replace by offer
</div>
<script>
  var el = document.currentScript.previousElementSibling;
  adobe.target.getOffer({
    mbox: "mboxName",
    params: {
      param1: "value1",
      param2: "value2"
    },
    success: function(offer) {
      adobe.target.applyOffer({
        mbox: "mboxName",
        selector: el,
        offer: offer
      });
    },
    error: function(error) {
      console.error(error);
      el.style.visibility = "visible";
    }
  });
</script>

mboxDefine() と mboxUpdate()

説明：

要素と mbox 名の間の内部マッピングを作成しますが、リクエストを実行しません。 mboxUpdate() と併用します。この mboxUpdate がリクエストを実行し、mboxDefine() の nodeId で識別された要素にオファーを適用します。 また、mboxCreate によって開始された mbox を更新するために使用できます。

例：

<div id="someId" class="mboxDefault"></div>
<script>
 mboxDefine('someId','mboxName','param1=value1','param2=value2');
 mboxUpdate('mboxName','param3=value3','param4=value4');
</script>

at.js 2.x相当:

mboxDefine() と mboxUpdate に代わるものは、getOffer() と applyOffer()（applyOffer() でセレクターオプションを使用）です。 この方法を使用すると、ID を持つ要素だけではなく、CSS セレクターを使用してオファーを要素にマッピングできます。

例：

<div id="someId" class="mboxDefault">
  default content to replace by offer
</div>
<script>
  adobe.target.getOffer({
    mbox: "mboxName",
    params: {
      param1: "value1",
      param2: "value2",
      param3: "value3",
      param4: "value4"
    },
    success: function(offer) {
      adobe.target.applyOffer({
        mbox: "mboxName",
        selector: "#someId",
        offer: offer
      });
    },
    error: function(error) {
      console.error(error);
      var el = document.getElementById("someId");
      el.style.visibility = "visible";
    }
  });
</script>

adobe.target.registerExtension()

説明：

特定の拡張を登録するための標準的な方法を提供します。

この関数はサポートされなくなったため、使用しないでください。

2.x​の非推奨、新規、およびサポートされているat.js関数の概要

制限事項と注意事項

次の制限事項と注意事項を把握しておいてください。

コンバージョントラッキング

コンバージョントラッキングに mboxCreate() を使用している場合、trackEvent() または getOffer() を使用する必要があります。

オファーの配信

mboxCreate() を getOffer() または applyOffer() で置き換えない場合、オファーが配信されない場合があります。

at.js 2.x​は一部のページで使用できますが、at.js 1.x​は他のページで使用できますか？

できます。訪問者プロファイルは、異なるバージョンやライブラリを使用してページ間で保持されます。 Cookie の形式は同じです。

at.js 2.x​での新しいAPIの使用

at.js 2.x​は、Delivery APIと呼ばれる新しいAPIを使用します。 at.jsがTarget エッジサーバーを正しく呼び出しているかどうかをデバッグするには、ブラウザーの開発者ツールの「ネットワーク」タブを「配信」、「tt.omtrdc.net」またはクライアントコードにフィルターできます。 また、Target はキーと値のペアの変わりに JSON ペイロードを送信します。

Target グローバル Mboxは使用されていません

at.js 2.x​では、ネットワーク呼び出しに「target-global-mbox」が表示されなくなりました。 代わりに、以下に示すように、Target サーバーに送信されたJSON ペイロードの"target-global-mbox"構文を"execute > pageLoad"に置き換えました。

{
  "id": {
    // ...
  },
  "context": {
    "channel": "web",
    // ...
  },
  "execute": {
    "pageLoad": {}
  }
}

基本的に、グローバル mbox のコンセプトは、ページ読み込み時にオファーとコンテンツを取得するかについて Target へ通知するために導入されました。 そのため、最新バージョンではこれをより明確にしています。

at.js のグローバル mbox 名は重要ではなくなりましたか？

お客様は、Target > 管理 > 実装 > at.js設定の編集​を使用して、グローバル mbox名を指定できます。 この設定は Target エッジサーバーによって使用され、execute > pageLoad が Target UI に表示されるグローバル mbox 名に変換されます。 これにより、ユーザーはサーバーサイド API、フォームベースのコンポーザー、プロファイルスクリプトの使用状況、およびグローバル mbox 名を使用したオーディエンスを引き続き作成できます。 また、次の図に示すように、at.js 1.x​を使用するページがまだ存在する場合は、管理 > Visual Experience Composer ページでも同じグローバル mbox名が設定されていることを確認することを強くお勧めします。

および

at.js 2.x​の自動作成グローバル mbox設定を有効にする必要がありますか？

ほとんどの場合では、有効にする必要があります。 この設定では、ページ読み込み時にTarget エッジサーバーにリクエストを送信するようにat.js 2.x​に指示します。 グローバル mbox は execute > pageLoad に変換されているので、ページ読み込み時にリクエストを送信する場合、この設定を有効にする必要があります。

ターゲット グローバル mbox名がat.js 2.x​から指定されていなくても、既存のVEC アクティビティは引き続き機能しますか？

動作します。execute > pageLoad は、target-global-mbox のような Target バックエンドで処理されるためです。

フォームベースのアクティビティのターゲット設定先が target-global-mbox の場合、これらのアクティビティは引き続き機能しますか？

機能します。execute > pageLoad は、target-global-mbox のような Target エッジサーバーで処理されるためです。

サポートされているat.js 2.x​設定とサポートされていないat.js

at.js 2.xでのクロスドメイントラッキングのサポート

クロスドメイントラッキングにより、様々なドメインをまたいで訪問者をスティッチできます。 各ドメインに対して新しい Cookie を作成する必要があるので、ドメインからドメインにナビゲートする訪問者を追跡するのは困難です。 クロスドメイントラッキングを実現するために、Target は、サードパーティ Cookie を使用してドメインをまたいで訪問者を追跡します。 これにより、siteA.comとsiteB.comにまたがるTarget アクティビティを作成でき、訪問者が一意のドメインを移動しても同じエクスペリエンスのままになります。 この機能は、Targetのサードパーティ Cookieとファーストパーティ Cookieの動作に関連しています。

Targetでは、サードパーティ Cookieは<CLIENTCODE>.tt.omtrdc.netに保存されます。 ファーストパーティ Cookie は、clientdomain.com に格納されます。 最初のリクエストは、HTTP 応答ヘッダーを返します。このヘッダーによって、mboxSession および mboxPC という名前のサードパーティ Cookie の設定が試行され、リダイレクトリクエストが追加のパラメーター（mboxXDomainCheck=true）と共に返されます。 ブラウザーがサードパーティ Cookie を受け入れる場合、リダイレクトリクエストにはそれらの Cookie が含まれており、エクスペリエンスが返されます。 このワークフローは、HTTP GET メソッドの使用により可能になっています。

ただし、at.js 2.x​では、HTTP GETは使用されません。 代わりに、HTTP POSTはat.js 2.x​を介して使用され、Target台のEdge サーバーにJSON ペイロードを送信します。 HTTP POSTを使用すると、ブラウザーがサードパーティ Cookieをサポートしているかどうかを確認するためのリダイレクトリクエストが解除されます。 これは、HTTP GET リクエストがべき等性のあるトランザクションであるのに対し、HTTP POST はべき等性がなく、恣意的に繰り返してはならないためです。 したがって、at.js 2.x （2.10より前）のクロスドメイントラッキングは、標準搭載ではサポートされていません。 クロスドメイントラッキングに対応しているのは、at.js 1.x​のみです。

at.js v2.10以降でクロスドメイントラッキングを使用するには、次のいずれかを実行します。

2.10より前のバージョンのat.js v2.x​に対してクロスドメイントラッキングを使用するには、上記のオプションを実装する#1とができます（ECID ライブラリをインストールします）。

グローバル mbox 自動作成はサポートされています

この設定では、ページ読み込み時にTarget エッジサーバーにリクエストを送信するようにat.js 2.x​に指示します。 Target エッジサーバーによってグローバル mbox が execute > pageLoad に変換されているので、ページロード時にリクエストを発行する場合、この設定を有効にする必要があります。

グローバル mbox 名はサポートされています

お客様は、Target > 管理 > 実装 > 編集​を使用して、グローバル mbox名を指定できます。 Target エッジサーバーがこの設定を使用して、execute > pageLoad を入力されたグローバル mbox 名に変換します。 これによりユーザーは引き続き、サーバーサイド API、フォームベースのコンポーザー、プロファイルスクリプトの使用状況、およびグローバル mbox をターゲットにしたオーディエンスの作成ができます。

以下の at.js カスタムイベントは triggerView() に適用できますか？または applyOffer() や applyOffers() のみですか？

適用できます。at.js カスタムイベントは triggerView() にも適用できます。

&brace;"page" : "true"&brace；でtriggerView()を呼び出すと、Target バックエンドに通知が送信され、インプレッションが増加します。 これによりプロファイルスクリプトも実行されますか？

Target バックエンドに対してプリフェッチ呼び出しが実行されると、プロファイルスクリプトが実行されます。 その後、影響を受けたプロファイルデータは暗号化され、クライアント側に返されます。 {"page": "true"} を使用した triggerView() が呼び出されると、通知が暗号化されたプロファイルデータとともに送信されます。 このとき、Target バックエンドはプロファイルデータを復号してデータベースに保存します。

ちらつきに対処するために、triggerView() を呼び出す前に、事前に非表示になるコードを追加する必要がありますか？

不要です。triggerView() を呼び出す前に、事前に非表示になるコードを追加する必要はありません。 at.js 2.x​は、ビューを表示して適用する前に、事前非表示とフリッカーのロジックを管理します。

オーディエンスを作成するためのat.js 1.x パラメーターのうち、at.js 2.x​ではサポートされていないものはどれですか？

次のat.js 1.x パラメーターは、at.js 2.x​を使用する場合のオーディエンス作成で現在​NOT サポートされています。

at.js 2.x​は、vst.* パラメーターを使用したオーディエンスの作成をサポートしていません

at.js 1.x​の顧客は、vst.* mbox パラメーターを使用してオーディエンスを作成することができました。 これは、at.js 1.x​がTargetのバックエンドにmbox パラメーターを送信した方法の意図しない副作用でした。 at.js 2.x​に移行した後、at.js 2.x​ではmbox パラメーターの送信が異なるため、これらのパラメーターを使用してオーディエンスを作成できなくなります。

at.js の互換性

次の表では、at.jsについて説明します。 2.x​の様々なアクティビティタイプ、統合、機能、at.js関数との互換性。

アクティビティのタイプ

統合

機能

クエリ文字列パラメーター

レスポンストークン

at.js 2.x​は、at.js 1.x​と同様に、応答トークンを表示するためにカスタムイベント at-request-succeededを使用します。 at-request-succeeded カスタムイベントを使用するコード例については「応答トークン」を参照してください。

at.js 1.x パラメーターからat.js 2.x ペイロード マッピング

この節では、at.js 1.x​とat.js 2.x​のマッピングについて説明します。

パラメーターマッピングを詳しく調べる前に、これらのライブラリバージョンが使用しているエンドポイントが変更されています。

もう 1 つの大きな違いは次のとおりです。

次の節では、各at.js 1.x パラメーター、その説明、および対応する2.x JSON ペイロード（該当する場合）を一覧表示します。

at_property

（at.js 1.x パラメーター）

Enterprise ユーザー権限に使用されます。

{
  ....
  "property": {
    "token": "1213213123122313121"
  }
  ....
}

mboxHost

（at.js 1.x パラメーター）

Target ライブラリが実行されているページのドメイン。

at.js 2.x JSON ペイロード：

{
  "context": {
    "browser": {
       "host": "test.com"
    }
  }
}

webGLRenderer

（at.js 1.x パラメーター）

ブラウザーの WEB GL レンダラー機能です。 これは、訪問者のデバイスがデスクトップ、iPhone、Android デバイスなどであるかどうかを判断するためにデバイス検出メカニズムで使用されます。

at.js 2.x JSON ペイロード：

{
  "context": {
    "browser": {
       "webGLRenderer": "AMD Radeon Pro 560X OpenGL Engine"
    }
  }
}

mboxURL

（at.js 1.x パラメーター）

ページ URL です。

at.js 2.x JSON ペイロード：

{
  "context": {
    "address": {
       "url": "http://test.com"
    }
  }
}

mboxReferrer

（at.js 1.x パラメーター）

ページリファラーです。

at.js 2.x JSON ペイロード：

{
  "context": {
    "address": {
       "referringUrl": "http://google.com"
    }
  }
}

Mbox（名前）がグローバル mbox と等しい

（at.js 1.x パラメーター）

配信 API にグローバル mbox の概念がなくなりました。 JSON ペイロードでは、execute > pageLoad を使用する必要があります。

at.js 2.x JSON ペイロード：

{
  "execute": {
    "pageLoad": {
       "parameters": ....
       "profileParameters": ...
       .....
    }
  }
}

Mbox（名前）が グローバル mbox と等しくない

（at.js 1.x パラメーター）

mbox 名を使用するには、execute > mboxes に渡します。 mbox にはインデックスと名前が必要です。

at.js 2.x JSON ペイロード：

{
  "execute": {
    "mboxes": [{
       "index": 0,
       "name": "some-mbox",
       "parameters": ....
       "profileParameters": ...
       .....
    }]
  }
}

mboxId

（at.js 1.x パラメーター）

廃止。

mboxCount

（at.js 1.x パラメーター）

廃止。

mboxRid

（at.js 1.x パラメーター）

デバッグに役立つように、ダウンストリームシステムで使用されるリクエスト ID です。

at.js 2.x JSON ペイロード：

{
  "requestId": "2412234442342"
  ....
}

mboxTime

（at.js 1.x パラメーター）

廃止。

mboxSession

（at.js 1.x パラメーター）

セッション ID は、クエリ文字列パラメーター（sessionId）として配信 API エンドポイントに送信されます。

mboxPC

（at.js 1.x パラメーター）

id > tntId に TNT ID が渡されます。

at.js 2.x JSON ペイロード：

{
  "id": {
    "tntId": "ca5ddd7e33504c58b70d45d0368bcc70.21_3"
  }
  ....
}

mboxMCGVID

（at.js 1.x パラメーター）

id > marketingCloudVisitorId に Experience Cloud Visitor ID が渡されます。

at.js 2.x JSON ペイロード：

{
  "id": {
    "marketingCloudVisitorId": "797110122341429343505"
  }
  ....
}

vst.aaaa.id および vst.aaaa.authState

（at.js 1.x パラメーター）

id > customerIds に顧客 ID を渡す必要があります。

at.js 2.x JSON ペイロード：

{
  "id": {
    "customerIds": [{
       "id": "1232131",
       "integrationCode": "aaaa",
       "authenticatedState": "....."
     }]
  }
  ....
}

mbox3rdPartyId

（at.js 1.x パラメーター）

異なるTarget IDのリンクに使用されるお客様のサードパーティ ID。

at.js 2.x JSON ペイロード：

{
  "id": {
    "thirdPartyId": "1232312323123"
  }
  ....
}

mboxMCSDID

（at.js 1.x パラメーター）

SDID です（追加データ ID とも呼ばれます）。 experienceCloud > analytics > supplementalDataId に渡される必要があります。

at.js 2.x JSON ペイロード：

{
  "experienceCloud": {
    "analytics": {
      "supplementalDataId": "1212321132123131"
    }
  }
  ....
}

vst. trk

（at.js 1.x パラメーター）

Analytics トラッキングサーバー。 experienceCloud > analytics > trackingServer に渡される必要があります。

at.js 2.x JSON ペイロード：

{
  "experienceCloud": {
    "analytics": {
      "trackingServer": "analytics.test.com"
    }
  }
  ....
}

vst. trks

（at.js 1.x パラメーター）

Analytics トラッキングサーバーのセキュリティ保護 experienceCloud > analytics > trackingServerSecure に渡される必要があります。

at.js 2.x JSON ペイロード：

{
  "experienceCloud": {
    "analytics": {
      "trackingServerSecure": "secure-analytics.test.com"
    }
  }
  ....
}

mboxMCGLH

（at.js 1.x パラメーター）

Audience Manager のロケーションヒント experienceCloud > audienceManager > locationHint に渡される必要があります。

at.js 2.x JSON ペイロード：

{
  "experienceCloud": {
    "audienceManager": {
      "locationHint": 9
    }
  }
  ....
}

mboxAAMB

（at.js 1.x パラメーター）

Audience Manager BLOB です。 experienceCloud > audienceManager > blob に渡される必要があります。

at.js 2.x JSON ペイロード：

{
  "experienceCloud": {
    "audienceManager": {
      "blob": "2142342343242342"
    }
  }
  ....
}

mboxVersion

（at.js 1.x パラメーター）

バージョンは、version パラメーターを使用して、クエリ文字列パラメーターとして送信されます。

トレーニングビデオ：at.js 2.x アーキテクチャ図

at.js 2.x​は、Adobe TargetのSPAのサポートを強化し、他のExperience Cloud ソリューションと統合します。 このビデオでは、すべてがどのように結び付いているかを説明します。

詳しくは、at.js 2.x​の仕組みについてを参照してください。