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は、オプションの事前非表示スニペットをページに実装して、非同期で読み込むこともできます。
顧客属性は、バッチプロセスでProfile Storeに送信されます。
デフォルトコンテンツがちらつくことなく、可能な限り迅速に現在のページ上のターゲットコンテンツが表示されます。
SPA でのユーザーアクションの結果として表示されるビューのターゲットコンテンツは、ブラウザーにキャッシュされます。そのため、
triggerView() を介してビューがトリガーされたときに追加のサーバー呼び出しをおこなわずに即座にターゲットコンテンツを適用できます。Analytics その後、(A4T)レポートを使用して、AnalyticsとTargetの両方でデータを表示できます。
現在、triggerView()がSPAに実装されている場所では、Viewsとアクションがキャッシュから取得され、サーバーコールなしでユーザーに表示されます。 triggerView() は、インプレッション数を増分して記録するために、Target バックエンド に通知リクエストもおこないます。 ビューを使用した SPA での at.js について詳しくは、「シングルページアプリケーションの実装」を参照してください。
(画像をクリックして全幅に拡大します)。
triggerView()がSPAで呼び出されてViewがレンダリングされ、アクションを適用してビジュアル要素を変更します。ビデオ: 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のワークフローを理解するのに役立ちます。
(画像をクリックして全幅に拡大します)。
お客様の属性は、バッチプロセスでプロファイルストアに送信されます。
デフォルトコンテンツがちらつくことなく、可能な限り迅速にエクスペリエンスが表示されます。
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 は次のアルゴリズムを適用します。
-
画像がプリロードされます(HTML コンテンツに
<img>タグがある場合)。 -
HTML コンテンツが DOM ノードに添付されます。
-
インラインスクリプトが実行されます(
<script>タグで囲まれたコード)。 -
リモートスクリプトが非同期的に読み込まれ、実行されます(
src属性の<script>タグ)。
重要事項:
- at.js は、非同期的に読み込まれるので、リモートスクリプトの実行順序を保証しません。
- インラインスクリプトは、後で読み込まれて実行されるので、リモートスクリプトへの依存関係を持たせないようにします。