at.js 如何運作
建立對象:
- 開發人員
若要在用戶端實作 Adobe Target,您必須使用 at.js JavaScript 程式庫。
在 Adobe Target 的用戶端實作中,Target 會將與活動相關聯的體驗直接提供給用戶端瀏覽器。瀏覽器會決定要顯示哪個體驗,然後顯示其內容。在用戶端實作中,您可以使用 WYSIWYG 編輯器、視覺體驗撰寫器 (VEC) 或非視覺化介面表單式體驗撰寫器,建立您的測試和個人化體驗。
什麼是 at.js?
at.js程式庫是使用者端實作Adobe Target的實作程式庫。 at.js 程式庫可加快網頁實作的頁面載入速度,並為單頁應用程式提供更好的實作選項。 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 工作流程圖表之間有何差異?
請參閱從 at.js 1.x 升級為 at.js 2.x,深入瞭解 2.O 中引入哪些與 1.x 版有所差異之處。
從高階角度來看,兩個版本之間存在幾項差異:
- at.js 2.x 沒有全域 mbox 要求概念,而是採用頁面載入要求。頁面載入要求可視為要求擷取網站初始頁面載入時應套用的內容。
- at.js 2.x可管理稱為Views的概念,這些概念用於單頁應用程式(SPA)。 at.js 1.x 不知道這個概念。
at.js 2.x 圖表
下列圖表可協助您瞭解使用Views的at.js 2.x工作流程,以及如何藉由這套工作流程增強SPA整合。 如需 at.js 2.x 中所使用概念的詳細介紹,請參閱實作單頁應用程式。
(按一下影像可展開至完整寬度。)
步驟 | 詳細資料 |
---|---|
1 | 如果使用者已通過驗證,呼叫會傳回 Experience Cloud ID,而另一個呼叫會同步客戶 ID。 |
2 | at.js 程式庫會同步載入並隱藏文件本文。 也能使用將頁面上實作的程式碼片段預先隱藏的選項,以非同步方式載入 at.js。 |
3 | 提出頁面載入要求,包含所有已設定的參數 (MCID、SDID 和客戶 ID)。 |
4 | 設定檔指令碼執行,然後注入至Profile Store。 Sto會從Audience Library重新要求合格對象(例如從Adobe Analytics、Audience Manager等共用的對象)。 客戶屬性會透過批次程序傳送至 Profile Store。 |
5 | Target 會根據 URL 要求參數和個人資料,決定可針對目前頁面和未來檢視傳回哪些活動和體驗給訪客。 |
6 | 目標內容會傳回至頁面,選擇性地包括其他個人化的個人資料值。 目前頁面上目標內容會儘快出現,不會有忽隱忽現的預設內容。 作為使用者在 SPA 中的操作結果而針對檢視顯示的內容將快取在瀏覽器中,這樣便可在透過 triggerView() 觸發檢視時立即套用,而不需要額外的伺服器呼叫。 |
7 | Analytics資料傳送至Data Collection伺服器。 |
8 | 目標資料會透過SDID來比對Analytics資料,然後經過處理放入Analytics報表儲存體中。然後就可以在Analytics與Target中透過(A4T)報表檢視 Analytics資料。 |
現在,只要在SPA上實作triggerView()
,系統就會從快取擷取Views和動作,並在沒有伺服器呼叫的情況下顯示給使用者。 triggerView()
也會對 Target 後端發出通知要求,以便增加和記錄曝光計數。如需針對採用檢視的 SPA 瞭解 at.js 的詳細資訊,請參閱實作單頁應用程式。
(按一下影像可展開至完整寬度。)
步驟 | 詳細資料 |
---|---|
1 | 在SPA中呼叫triggerView() 以轉譯View並套用動作來修改視覺元素。 |
2 | 從快取讀取檢視的目標內容。 |
3 | 目標內容會儘快出現,不會有忽隱忽現的預設內容。 |
4 | 通知要求已傳送至Target Profile Store,以計算活動中的訪客數並增加量度。 |
5 | Analytics資料已傳送至Data Collection Servers。 |
6 | Target資料透過SDID與Analytics資料相符,並且已處理至Analytics報表儲存體。 然後就可以透過A4T報表在Analytics和Target中檢視Analytics資料。 |
影片 - at.js 2.x 架構圖表
at.js 2.x 增強了Adobe Target 對 SPA 的支援,並與其他 Experience Cloud 解決方案整合。本影片說明整合方式。
客戶屬性會透過批次程序傳送至個人資料存放區。
體驗會儘快出現,不會有忽隱忽現的預設內容。
Analytics資料。
影片 - 辦公時間:at.js 提示與總覽 (2019 年 6 月 26 日)
這支影片記錄了「辦公時間」,「辦公時間」是一項由Adobe Customer Care團隊主導的計畫。
- 使用 at.js 的好處
- at.js 設定
- Flicker 處理
- 偵錯 at.js
- 已知問題
- 常見問答
at.js 如何呈現具有 HTML 內容的選件
呈現具有 HTML 內容的選件時,at.js 會套用下列演算法:
-
預先載入影像 (如果 HTML 內容中有任何
<img>
標記)。 -
將 HTML 內容附加至 DOM 節點。
-
執行內嵌指令碼 (含括在
<script>
標記中的程式碼)。 -
非同步載入並執行遠端指令碼 (具有
src
屬性的<script>
標記)。
重要注意事項:
- at.js 不對遠端指令碼的執行順序提供任何保證,因為這些會以非同步的方式載入。
- 內嵌指令碼在遠端指令碼上不應有任何相依性,因為這些會在之後載入及執行。