トピック×
at.js の仕組み
To implement Adobe Target client-side, you must use the at.js JavaScript library.
クライアント側での Adobe Target の実装では、Target アクティビティに関連付けられたエクスペリエンスをクライアントブラウザーに直接配信します。ブラウザーは、表示するエクスペリエンスを決定して表示します。クライアント側の実装では、WYSIWYG エディターの
Visual Experience Composer
（VEC）または非ビジュアルインターフェイスである
フォームベースの Experience Composer
を使用して、テストエクスペリエンスとパーソナライゼーションエクスペリエンスを作成できます。
at.js について
at.js ライブラリ
は、Target の新しい実装ライブラリです。at.js ライブラリは、Web 実装のページ読み込み時間を改善し、シングルページアプリケーション向けのより優れた実装オプションを提供します。at.js は推奨される実装ライブラリであり、頻繁にアップデートされて新しい機能が追加されます。すべてのお客様に対して、
at.js の最新バージョン
を実装するか、最新バージョンに移行することをお勧めします。
詳細については、「
Target JavaScript ライブラリ
」を参照してください。
In the Target implementation illustrated below, the following Adobe Experience Cloud solutions are implemented: Analytics, Target, and Audience Manager. さらに、Adobe Launch、オーディエンスおよび訪問者 ID サービスの Experience Cloud コアサービスが実装されています。
at.js 1との違いは何ですか。 x と at.js 2.x のワークフロー図の違いは何ですか？
2.0 と 1. のバージョン間の違いについて詳しくは、「
at.js 1.x から at.js 2.x へのアップグレード
」を参照してください。
x
.
抽象度の高い表示では、2 つのバージョン間にいくつかの違いがあります。
- at.js 2.x は、グローバル mbox リクエストの概念がなく、ページ読み込みリクエストを使用します。ページ読み込みリクエストは、Web サイトの最初のページ読み込み時に適用されるコンテンツを取得するリクエストとして表示できます。
- at.js 2.xは、シングルページアプリ(SPA)で使用される表示と呼ばれる概念を管理します。 at.js 1. x はこの概念に対応していません。
at.js 2.x 図
次の図は、ビューを使用した at.js 2 ワークフローと、これが SPA 統合をどのように強化するかについて説明しています。at.js 2.x で使用されている概念に関するより詳しい概要については、「
シングルページアプリケーションの実装
」を参照してください。
手順
| 詳細
|
|---|---|
1
| 呼び出しユーザーが認証されると、呼び出しが Experience Cloud IDを返し、別の呼び出しが顧客 ID を同期します。
|
2
| at.js ライブラリがドキュメント本文を同期的に読み込み、非表示にします。
at.js は、ページに実装されているオプションの非表示スニペットを使用して非同期で読み込むこともできます。
|
3
| すべての設定済みパラメーター（MCID、SDID および顧客 ID）を含む、ページ読み込みリクエストがおこなわれます。
|
4
| プロファイルスクリプトが実行されてから、プロファイルストアにフィードされます。ストアは、オーディエンスライブラリから正規のオーディエンスをリクエストします（例えば、Adobe Analytics、Audience Management などから共有されたオーディエンス）。
顧客属性がバッチ処理でプロファイルストアに送信されます。
|
5
| URL リクエストパラメーターとプロファイルデータに基づいて、Target が現在のページおよび将来のビューでどのアクティビティおよびエクスペリエンスを訪問者に返すかを決定します。
|
6
| ターゲットコンテンツが（オプションで、追加のパーソナライゼーションに関するプロファイル値を含めて）ページに送り返されます。
デフォルトコンテンツがちらつくことなく、可能な限り迅速に現在のページ上のターゲットコンテンツが表示されます。
SPAでの表示操作の結果として表示される表示のターゲットコンテンツは、ブラウザーにキャッシュされるので、ユーザーがトリガーされたときに追加のサーバー呼び出しを行わなくても、即座に適用できま
triggerView()
す。
|
7
| Analytics データがデータ収集サーバーに送信されます。
|
8
| ターゲットデータは、SDID を使用して Analytics データに適合され、Analytics レポートストレージへと処理されます。
A4T レポートを使用して、Analytics データが Analytics と Target の両方に表示できるようになります。
|
これで、
triggerView()
が SPA のどこに 実装されているかに関わらず、ビューとアクションはキャッシュから取得され、サーバー呼び出しなしでユーザーに表示されるようになります。
triggerView()
は、インプレッション数を増分して記録するために、Target バックエンド に通知リクエストもおこないます。ビューを使用した SPA での at.js について詳しくは、「
シングルページアプリケーションの実装
」を参照してください。
手順
| 詳細
|
|---|---|
1
| triggerView()
は SPA で呼び出され、ビューをレンダリングし、ビジュアル要素を変更ためのアクションを適用します。
|
2
| ビューのターゲットコンテンツがキャッシュから読み取られます。
|
3
| デフォルトコンテンツがちらつくことなく、可能な限り迅速にターゲットコンテンツが表示されます。
|
4
| 通知リクエストが Target プロファイルストア に送信され、アクティビティで訪問者がカウントされ、指標が増分されます。
|
5
| Analytics データがデータ収集サーバーに送信されます。
|
6
| Target データは、SDID を使用して Analytics データに適合され、Analytics レポートストレージへと処理されます。A4T レポートを使用して、Analytics データが Analytics と Target の両方に表示できるようになります。
|
at.js 1.x の図
手順
| 説明
| 呼び出し
| 説明
|
|---|---|---|---|
1
| ユーザーが認証されると、呼び出しが Experience Cloud ID（MCID）を返し、別の呼び出しが顧客 ID を同期します。
| 2
| at.js ライブラリがドキュメント本文を同期的に読み込み、非表示にします。
|
3
| すべての設定済みパラメーター、MCID、SDID および顧客 ID（オプション）を含む、グローバル mbox リクエストがおこなわれます。
| 4
| プロファイルスクリプトが実行されてから、プロファイルストアにフィードされます。ストアは、オーディエンスライブラリから正規のオーディエンスをリクエストします（例えば､Adobe Analytics、Audience Manager などから共有されたオーディエンス）。
顧客属性がバッチ処理で Profile Store に送信されます。
|
5
| URL、mbox パラメーターおよびプロファイルデータに基づいて、Target がどのアクティビティおよびエクスペリエンスを訪問者に返すかを決定します。
| 6
| ターゲットとなるコンテンツが（オプションで、追加のパーソナライゼーションに関するプロファイル値を含めて）ページに送り返されます。
デフォルトコンテンツがちらつくことなく、可能な限り迅速にエクスペリエンスが表示されます。
|
7
| Analytics データがデータ収集サーバーに送信されます。
| 8
| Target データは、SDID を使用して Analytics データに適合され、Analytics レポートストレージへと処理されます。
Analytics（A4T）レポートを使用して、Analytics データが Target と Analytics for Target の両方に表示できるようになります。
|
at.js による HTML コンテンツを使用したオファーのレンダリング方法
HTML コンテンツを使用してオファー をレンダリングする場合、at.js は次のアルゴリズムを適用します。
- 画像がプリロードされます（HTML コンテンツに <img> タグがある場合）。
- HTML コンテンツが DOM ノードに添付されます。
- インラインスクリプトが実行されます（ <script> タグで囲まれたコード）。
- リモートスクリプトが非同期的に読み込まれ、実行されます（ src 属性の <script> タグ）。
重要事項：
- at.js は、非同期的に読み込まれるので、リモートスクリプトの実行順序を保証しません。
- インラインスクリプトは、後で読み込まれて実行されるので、リモートスクリプトへの依存関係を持たせないようにします。
トレーニングビデオ：at.js 2.xのアーキテクチャ図の概要バ
at.js 2.x は、Adobe Target の SAP のサポートを強化し、Adobe Target と他の Experience Cloud を統合します。このビデオでは、すべてがどのように結び付いているかを説明します。
詳し
くは、at.js 2.xの仕組みについて
、を参照してください。