at.js の仕組み

Adobe Targetクライアント側を実装するには、at.js JavaScriptライブラリを使用する必要があります。

クライアント側での Adobe Target の実装では、Target アクティビティに関連付けられたエクスペリエンスをクライアントブラウザーに直接配信します。ブラウザーは、表示するエクスペリエンスを決定して表示します。クライアント側の実装では、WYSIWYG エディターの Visual Experience Composer （VEC）または非ビジュアルインターフェイスであるフォームベースの Experience Composer を使用して、テストエクスペリエンスとパーソナライゼーションエクスペリエンスを作成できます。

at.js について

at.js ライブラリは、Target の新しい実装ライブラリです。at.js ライブラリは、Web 実装のページ読み込み時間を改善し、シングルページアプリケーション向けのより優れた実装オプションを提供します。at.js は推奨される実装ライブラリであり、頻繁にアップデートされて新しい機能が追加されます。すべてのお客様に対して、at.js の最新バージョンを実装するか、最新バージョンに移行することをお勧めします。

詳細については、「Target JavaScript ライブラリ」を参照してください。

下図に示すTarget実装では、次のAdobe Experience Cloudソリューションが実装されます。Analytics、Targetおよび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 で使用されている概念に関するより詳しい概要については、「シングルページアプリケーションの実装」を参照してください。

at.js 2.x での Target のフロー

手順 詳細
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 について詳しくは、「シングルページアプリケーションの実装」を参照してください。

Target フローの at.js 2.x triggerView

手順 詳細
1 triggerView() は SPA で呼び出され、ビューをレンダリングし、ビジュアル要素を変更ためのアクションを適用します。
2 ビューのターゲットコンテンツがキャッシュから読み取られます。
1 デフォルトコンテンツがちらつくことなく、可能な限り迅速にターゲットコンテンツが表示されます。
4 通知リクエストが Target プロファイルストア に送信され、アクティビティで訪問者がカウントされ、指標が増分されます。
5 Analytics データがデータ収集サーバーに送信されます。
6 Target データは、SDID を使用して Analytics データに適合され、Analytics レポートストレージへと処理されます。A4T レポートを使用して、Analytics データが Analytics と Target の両方に表示できるようになります。

ビデオ — at.js 2.xのアーキテクチャ図

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

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

at.js 1.x の図

Target フロー - at.js 1.x

手順 説明 呼び出し 説明
1 ユーザーが認証されると、呼び出しが Experience Cloud ID（MCID）を返し、別の呼び出しが顧客 ID を同期します。 2 at.js ライブラリがドキュメント本文を同期的に読み込み、非表示にします。
1 すべての設定済みパラメーター、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のヒントと概要（2019年6月27日）

このビデオは、「Office Hours」（アドビカスタマーケアチーム主導による取り組みの 1 つ）の録画です。

  • at.js を使用する利点
  • at.js の設定
  • ちらつき処理
  • at.js のデバッグ
  • 既知の問題
  • FAQ

at.js による HTML コンテンツを使用したオファーのレンダリング方法

HTML コンテンツを使用してオファー をレンダリングする場合、at.js は次のアルゴリズムを適用します。

  1. 画像がプリロードされます（HTML コンテンツに <img> タグがある場合）。

  2. HTML コンテンツが DOM ノードに添付されます。

  3. インラインスクリプトが実行されます（<script> タグで囲まれたコード）。

  4. リモートスクリプトが非同期的に読み込まれ、実行されます（src 属性の <script> タグ）。

重要事項：

  • at.js は、非同期的に読み込まれるので、リモートスクリプトの実行順序を保証しません。
  • インラインスクリプトは、後で読み込まれて実行されるので、リモートスクリプトへの依存関係を持たせないようにします。

このページ