at.js の仕組み
クライアントサイドで Adobe Target を実装するには、at.js JavaScript ライブラリを使用する必要があります。
クライアント側での Adobe Target の実装では、Target アクティビティに関連付けられたエクスペリエンスをクライアントブラウザーに直接配信します。ブラウザーは、表示するエクスペリエンスを決定して表示します。クライアント側の実装では、WYSIWYG エディターの Visual Experience Composer （VEC）または非ビジュアルインターフェイスであるフォームベースの Experience Composer を使用して、テストエクスペリエンスとパーソナライゼーションエクスペリエンスを作成できます。
at.js について
at.js ライブラリは、Adobe Target のクライアントサイド実装用の実装ライブラリです。 at.js ライブラリは、Web 実装のページ読み込み時間を改善し、シングルページアプリケーション向けのより優れた実装オプションを提供します。at.js は推奨される実装ライブラリであり、頻繁にアップデートされて新しい機能が追加されます。すべてのお客様に、at.js の最新バージョンを実装または移行することをお勧めします。
詳細については、Target JavaScript ライブラリを参照してください。
以下に示す Target 実装では、Analytics、Target および Audience Manager のAdobe Experience Cloud ソリューションが実装されています。 さらに、Adobe Experience Platform、Audiences、Visitor ID Service の Experience Cloud コアサービスが実装されています。
at.js 1.x と at.js 2.x のワークフロー図の違いは何ですか？
2.0 と 1.x のバージョン間の違いについて詳しくは、「at.js 1.x から at.js 2.x へのアップグレード」を参照してください**。
抽象度の高い表示では、2 つのバージョン間にいくつかの違いがあります。
- at.js 2.x は、グローバル mbox リクエストの概念がなく、ページ読み込みリクエストを使用します。ページ読み込みリクエストは、Web サイトの最初のページ読み込み時に適用されるコンテンツを取得するリクエストとして表示できます。
- at.js 2.x は、Single Page Applications （SPA）で使用される Views と呼ばれる概念を管理します。 at.js 1.x はこの概念に対応していません。
at.js 2.x 図
次の図は、at.js 2.x と Views の連携のワークフローと、これによりSPA統合がどのように強化されるかを理解するのに役立ちます。 at.js 2.x で使用されている概念に関するより詳しい概要については、「シングルページアプリケーションの実装」を参照してください。
（全幅に拡大するには、画像をクリックします）。
| 手順 | 詳細 |
|---|---|
| 1 | 呼び出しユーザーが認証されると、呼び出しが Experience Cloud IDを返し、別の呼び出しが顧客 ID を同期します。 |
| 2 | at.js ライブラリがドキュメント本文を同期的に読み込み、非表示にします。 at.js は、ページに実装されているオプションの非表示スニペットを使用して非同期で読み込むこともできます。 |
| 3 | すべての設定済みパラメーター（MCID、SDID および顧客 ID）を含む、ページ読み込みリクエストがおこなわれます。 |
| 4 | プロファイルスクリプトは、を実行してから Profile Store にフィードします。 Store は、Audience Library から適格なオーディエンスをリクエストします（例えば、Adobe Analytics から共有されたオーディエンス、Audience Manager など）。 顧客属性がバッチ処理で Profile Store に送信されます。 |
| 5 | URL リクエストパラメーターとプロファイルデータに基づいて、Target が現在のページおよび将来のビューでどのアクティビティおよびエクスペリエンスを訪問者に返すかを決定します。 |
| 6 | ターゲットコンテンツが（オプションで、追加のパーソナライゼーションに関するプロファイル値を含めて）ページに送り返されます。 デフォルトコンテンツがちらつくことなく、可能な限り迅速に現在のページ上のターゲットコンテンツが表示されます。 SPA でのユーザーアクションの結果として表示されるビューのターゲットコンテンツは、ブラウザーにキャッシュされます。そのため、 triggerView() を介してビューがトリガーされたときに追加のサーバー呼び出しをおこなわずに即座にターゲットコンテンツを適用できます。 |
| 7 | Analytics データは Data Collection サーバーに送信されます。 |
| 8 | ターゲットデータは、SDID を介して Analytics データと照合され、Analytics レポートストレージで処理されます。（A4T）レポートを使用して、 Analytics データが Analytics と Target の両方に表示できるようになります。 |
現在は、SPAで triggerView() が実装される場所にかかわらず、Views ールとアクションがキャッシュから取得され、サーバーを呼び出すことなくユーザーに表示されます。 triggerView() は、インプレッション数を増分して記録するために、Target バックエンド に通知リクエストもおこないます。ビューを使用した SPA での at.js について詳しくは、「シングルページアプリケーションの実装」を参照してください。
（全幅に拡大するには、画像をクリックします）。
| 手順 | 詳細 |
|---|---|
| 1 | triggerView() をSPAで呼び出して View をレンダリングし、アクションを適用して視覚的要素を変更します。 |
| 2 | ビューのターゲットコンテンツがキャッシュから読み取られます。 |
| 3 | デフォルトコンテンツがちらつくことなく、可能な限り迅速にターゲットコンテンツが表示されます。 |
| 4 | アクティビティ内の訪問者をカウントして指標を増分するための通知リクエストが Target Profile Store ーザーに送信されます。 |
| 5 | Analytics データが Data Collection Servers に送信されました。 |
| 6 | Target データは、SDID を介して Analytics データと照合され、Analytics レポートストレージに処理されます。 A4T レポートを使用して、Analytics データが Analytics と Target の両方に表示できるようになります。 |
