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実装では、次のAdobe Experience Cloud ソリューションが実装されています:Analytics、Target、およびAudience Manager。 さらに、次のExperience Cloud コアサービスが実装されています:Adobe Experience Platform、Audiences、およびVisitor ID Service。

at.js 1.x​とat.js 2.x ワークフロー図の違いは何ですか?

2.Oで1.x​から導入された相違点について詳しくは、at.js 1.xからat.js 2.xへのアップグレードを参照してください。

抽象度の高い表示では、2 つのバージョン間にいくつかの違いがあります。

  • at.js 2.x は、グローバル mbox リクエストの概念がなく、ページ読み込みリクエストを使用します。 ページ読み込みリクエストは、Web サイトの最初のページ読み込み時に適用されるコンテンツを取得するリクエストとして表示できます。
  • at.js 2.xは、Viewsという概念を管理します。これは、シングルページアプリケーション(SPA)に使用されます。 at.js 1.x​はこの概念を認識していません。

at.js 2.x 図

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

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

at.js 2.x {modal="regular"}のTarget フロー

手順
詳細
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
分析データはData Collection サーバーに送信されます。
8
ターゲットデータは、SDIDを介してAnalytics データと照合され、Analytics レポートストレージに処理されます。
Analytics その後、(A4T)レポートを使用して、AnalyticsとTargetの両方でデータを表示できます。

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

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

Target flow at.js 2.x triggerView {modal="regular"}

手順
詳細
1
triggerView()がSPAで呼び出されてViewがレンダリングされ、アクションを適用してビジュアル要素を変更します。
2
ビューのターゲットコンテンツがキャッシュから読み取られます。
3
デフォルトコンテンツがちらつくことなく、可能な限り迅速にターゲットコンテンツが表示されます。
4
アクティビティおよび増分指標で訪問者をカウントするために、通知リクエストがTarget Profile Storeに送信されます。
5
Analytics データをData Collection Serversに送信しました。
6
Target データはSDIDを介してAnalytics データと照合され、Analytics レポートストレージに処理されます。 Analytics個のデータは、A4T レポートを使用して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 の図

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

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

Target flow at.js 1.x {modal="regular"}

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

ビデオ — Office hours:at.js のヒントと概要(2019年6月26日(PT))

このビデオは、Adobe Customer Care チームが主導するイニシアチブである「Office Hours」の録画です。

  • 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 は、非同期的に読み込まれるので、リモートスクリプトの実行順序を保証しません。
  • インラインスクリプトは、後で読み込まれて実行されるので、リモートスクリプトへの依存関係を持たせないようにします。
recommendation-more-help
target-dev-help-dev