ドキュメントTarget 開発者ガイド

at.js の仕組み

Last update: Thu Jul 27 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Developer

クライアントサイドで 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 ライブラリを参照してください。

Adobe Analytics の Target以下の図に示す実装では、次のAdobe Experience Cloudソリューションが実装されています。 Analytics、Target および Audience Manager. さらに、次の Experience Cloud コアサービスは以下のように実装されています。 Adobe Experience Platform, オーディエンス、および 訪問者 ID サービス.

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 は、 件数：シングルページアプリケーション (SPA) で使用されます。 at.js 1.x はこの概念に対応していません。

at.js 2.x 図

次の図は、を使用した at.js 2.x のワークフローを理解するのに役立ちます。 件数 これによってSPA統合がどのように強化されるかを説明します。 at.js 2.x で使用されている概念に関するより詳しい概要については、「シングルページアプリケーションの実装」を参照してください。

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

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

手順
詳細
1
呼び出しによって Experience CloudID ユーザーが認証されると、別の呼び出しが顧客 ID を同期します。
2
at.js ライブラリがドキュメント本文を同期的に読み込み、非表示にします。
at.js は、ページに実装されているオプションの非表示スニペットを使用して非同期で読み込むこともできます。
3
すべての設定済みパラメーター（MCID、SDID および顧客 ID）を含む、ページ読み込みリクエストがおこなわれます。
4
プロファイルスクリプトが実行されてから、 プロファイルストア. 終わりから選定されたオーディエンスを再リクエストします オーディエンスライブラリ ( 例： Adobe Analytics, Audience Managerなど )
顧客属性がバッチ処理でプロファイルストアに送信されます。
5
URL リクエストパラメーターとプロファイルデータに基づいて、Target が現在のページおよび将来のビューでどのアクティビティおよびエクスペリエンスを訪問者に返すかを決定します。
6
ターゲットコンテンツが（オプションで、追加のパーソナライゼーションに関するプロファイル値を含めて）ページに送り返されます。
デフォルトコンテンツがちらつくことなく、可能な限り迅速に現在のページ上のターゲットコンテンツが表示されます。
SPA でのユーザーアクションの結果として表示されるビューのターゲットコンテンツは、ブラウザーにキャッシュされます。そのため、triggerView() を介してビューがトリガーされたときに追加のサーバー呼び出しをおこなわずに即座にターゲットコンテンツを適用できます。
7
Analytics データの送信先： データ収集 サーバー。
8
ターゲットデータは、SDID を使用して Analytics データに適合され、 Analytics レポートストレージ。
Analytics（A4T）レポートを使用して、Analytics データが Target と の両方に表示できるようになります。

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

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

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

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

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

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

https://video.tv.adobe.com/v/26250/?quality=12

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

at.js 1.x の図

次の図は、at.js 1.x のワークフローを理解するのに役立ちます。

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

Target フローの at.js 1.x

手順
説明
呼び出し
説明
1
ユーザーが認証されると、呼び出しがExperience CloudID(MCID) を返し、別の呼び出しが顧客 ID を同期します。
2
at.js ライブラリがドキュメント本文を同期的に読み込み、非表示にします。
3
すべての設定済みパラメーター、MCID、SDID および顧客 ID（オプション）を含む、グローバル mbox リクエストがおこなわれます。
4
プロファイルスクリプトが実行されてから、プロファイルストアにフィードされます。ストアは、オーディエンスライブラリから正規のオーディエンスをリクエストします ( 例えば、Adobe Analytics、Audience Managerなどから共有されたオーディエンス )。
顧客属性がバッチ処理でプロファイルストアに送信されます。
5
URL、mbox パラメーターおよびプロファイルデータに基づいて、Target がどのアクティビティおよびエクスペリエンスを訪問者に返すかを決定します。
6
ターゲットとなるコンテンツが（オプションで、追加のパーソナライゼーションに関するプロファイル値を含めて）ページに送り返されます。
デフォルトコンテンツがちらつくことなく、可能な限り迅速にエクスペリエンスが表示されます。
7
Analytics データがデータ収集サーバーに送信されます。
8
Target データは、SDID を使用して Analytics データに適合され、Analytics レポートストレージへと処理されます。
Analytics for Target（A4T）レポートを使用して、Analytics データが Analytics および ​Target に表示できるようになります。

ビデオ — Office hours：at.js のヒントと概要（2019年6月26日（PT））

このビデオは、「Office Hours」の録画です。 Adobeカスタマーケア チーム。

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

https://video.tv.adobe.com/v/27959/?quality=12

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

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

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

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

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

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

重要事項：

  • at.js は、非同期的に読み込まれるので、リモートスクリプトの実行順序を保証しません。
  • インラインスクリプトは、後で読み込まれて実行されるので、リモートスクリプトへの依存関係を持たせないようにします。
recommendation-more-help
6906415f-169c-422b-89d3-7118e147c4e3