ドキュメントTarget デベロッパーガイド

at.js の仕組み

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 開発者

クライアントサイドで 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 で使用されている概念に関するより詳しい概要については、「シングルページアプリケーションの実装」を参照してください。

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

at.js 2.x での 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
Analytics データは Data Collection サーバーに送信されます。
8
ターゲットデータは、SDID を介して Analytics データと照合され、Analytics レポートストレージで処理されます。（A4T）レポートを使用して、
Analytics データが Analytics と Target の両方に表示できるようになります。

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

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

target フロー at.js 2.x triggerView

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

ビデオ： 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
ターゲットデータは、SDID を介して Analytics データと照合され、Analytics レポートストレージ内で処理されます。
Analytics for Target （A4T）レポートを使用して、Analytics データが Analytics と Target の両方に表示できるようになります。

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

この動画は、Adobe Customer Care チーム主導で取り組んでいる「Office Hours」の録画です。

  • 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