在單頁應用程序 (SPA) 上運行實驗時，VWO 如何創建無摩擦的訪客體驗

深入了解 VWO 對動態網站的原生支持如何讓您在為訪問者構建無縫體驗時輕鬆進行實驗。

許多網站都是作為單頁應用程序 (SPA) 構建的，因為它們與傳統靜態網站相比幾乎沒有關鍵優勢：動態網站快速、緊湊且響應迅速。 此類網站使您能夠優化用戶看到的內容，以創造引人入勝的獨特體驗。 如果您從開發團隊聽說您的網站是使用 React、Vue、AngularJS、Ember 或 Backbone 構建的，那麼您可能正在使用 SPA，而本文與您相關。

在本文中，我們將討論在 VWO，我們如何通過對 SPA 測試的內置支持使動態網站的實驗變得有效和容易，這樣您就只專注於您的網站體驗優化工作，而不是其他任何事情。

但首先，讓我們談談最初將您帶到這裡的問題。

在動態網站上運行實驗的挑戰

您可能在這裡，因為當您在 SPA 上運行實驗時，您對著陸頁所做的更改對最終用戶是不可見的。 結果，您無法隨心所欲地測試和驗證您的想法，這讓您感到沮喪。

首先，讓我們了解 SPA 與傳統網站不同。 每次有人訪問傳統網站時都會加載整個網頁。 但是，在 SPA 中，僅更新頁面的某些部分。 這是因為，在 SPA 中，構建網頁外觀的 HTML、CSS、腳本等資源只加載一次。

根據用戶與網頁不同部分的交互方式，您在頁面的特定部分看到的內容會隨著用戶的操作而動態變化。 比如說，如果用戶單擊一個按鈕，則會打開一個彈出窗口。 此彈出窗口是框架根據用戶交互進行的動態更改，而不影響性能。 SPA 上存在動態變化的更多示例如下：

• 搜索結果列表中可以展開以查看其詳細信息的項目。
• 在表單中，某些字段僅在訪問者從下拉列表中選擇預定義值時才會出現在頁面上。
• 該網站使用一些組件，如日曆、顏色選擇器等，每次用戶需要使用它們時都會重新加載。

雖然這有利於用戶體驗，但在您的網頁上對任何這些動態元素（如搜索結果列表、下拉列表、小部件、彈出窗口、橫幅等）進行更改後運行測試活動變得困難。 這是因為每次網站上發生動態變化時，都需要應用對組件所做的修改。

可以這樣想——你正在網頁上運行測試。 每次網頁加載（通過用戶訪問頁面）或頁面創建如上所述的動態元素時，SPA 框架都會顯示原始狀態（與您希望在測試中顯示的變體不同）。

您需要的是一個實驗平台，確保您的測試變體替換原始視圖，以便用戶看到您希望他們看到的變體。 因此，在 SPA 上設置測試時（假設您正在測試彈出框中的內容），您會期望測試控制和變體如下所示：

但是，在沒有 SPA 支持的情況下，對變體所做的更改將恢復為控制，使兩者看起來相同。 很像這樣：

這只是正在發生的事情的簡化版本。 如果您有興趣從技術上了解屏幕背後發生的事情，請繼續閱讀，否則您可以跳到本文的下一部分。

一些網站框架，如 GatsbyJS、Next.js、ReactJS 等，使用服務器端渲染並存儲原始網頁的快照，因為它應該加載。 因此，當您出於測試目的修改頁面上的元素時，框架會將更改檢測為“問題”，並將頁面恢復為其在存儲快照中顯示的原始狀態。 這反過來又會阻礙您的 A/B 測試。

其次，最新的框架如 React、Gatsby、Next.js、Vue.js、Angular 等，都使用了基於狀態渲染的概念。 例如，在 React 中，每當由於 A/B 測試變化而在其中一種狀態中實現更改時，網站的界面都會自動重新加載到其原始形式，因此用戶永遠不會看到變化。 這為網站訪問者創造了次優體驗。

VWO 如何輕鬆地對單頁應用程序進行實驗

既然我們已經討論了問題，讓我們來談談解決方案。 VWO 在其可視化編輯器中的高級原生 SPA 支持是 VWO 測試的一部分，可確保在實驗中所做的修改應用到 SPA 中，以確保活動的可靠性並為您的訪問者提供順暢的體驗。

1.測試您網站上的動態元素

雖然在上一節中已經定義了動態元素，但讓我們通過一個具體的例子仔細看看它們。 假設您有一個電子商務網站。 單擊“購物車頁面”上的“X”（關閉）按鈕後，會彈出警報。 現在，您想測試操作框上的副本更改，以查看可操作的消息和行動號召是否可以阻止人們關閉購物車頁面。 警告框最初並不存在於網站代碼中，但當訪問者單擊“X”（關閉）按鈕時，SPA 框架會添加該框。 在這裡，打開您正在運行測試的彈出窗口的按鈕稱為目標元素。

VWO 確保您要測試的更改在加載後立即應用於彈出窗口。 您所要做的就是通過單擊按鈕啟用設置。 您可以在我們的知識庫文章中閱讀有關此設置的更多信息。

VWO 如何確保正確應用更改？

簡單的。

VWO 隨時觀察頁面元素（視頻、圖像、表格、部分等）以了解對它們所做的更改。 因此，當目標元素（上例中的關閉“X”按鈕）加載時，VWO 會檢測到它並應用您在變體中所做的修改。 即使沒有重新加載網頁，但用戶只是與網站上的某個部分進行交互，也會發生這種情況。

讓我們獲得一點技術知識並進一步探索。 如果技術細節不適合您，您可以輕鬆跳過此步驟並轉到下一點。

在動態網站中，根據用戶行為，添加、刪除或修改元素。 DOM 樹就像所有網站組件（按鈕、橫幅、彈出窗口、小部件等）的存儲庫，並保留網站當前狀態的快照。

VWO 的庫使用 Mutation Observer - 一個瀏覽器界面，允許 VWO 觀察 SPA 的 DOM 樹中的變化。 這有助於檢測頁面上添加、刪除或修改的任何新元素。 在這種情況下，VWO 會自動將更改應用於元素。 因此，每當元素動態加載時，都會在向訪問者顯示之前應用更改。 這提高了活動的可靠性，確保完全應用變化中的變化。

VWO 如何管理受框架渲染阻礙的更改？

在框架渲染完成之前，VWO 會隱藏 CTA 按鈕。 VWO 反複檢查渲染是否完成。 框架渲染完成後，VWO 活動開始執行。

您可以在我們的知識庫文章中閱讀有關這些設置的更多信息。

2.測試您網站上的任何其他頁面元素

當頁面加載時，現代 SPA 框架會在每次網站加載時將修改後的元素恢復為其原始狀態。 因此，如果您正在測試頁面，您的所有修改都將恢復為原始狀態。 不僅是動態元素，而且對於頁面上的所有元素，VWO 都會跟踪您為應對 SPA 框架測試挑戰所做的更改。 在將這些更改應用到您的網頁時，VWO 會通過測試檢測頁面上所做的所有更改（插入、刪除和修改 DOM 節點）並重新應用它們以確保用戶體驗的規律性。

不需要明確的行動來實現對 VWO 的改進。 這是一個內置功能，可用於使用可視化編輯器構建的所有 VWO 活動，無論您的網站構建在何種框架上。

讓我們看一些 VWO 可視化編輯器處理的更改的用例示例。

1. 假設您已從您的電子商務網站中刪除了輔助 CTA 按鈕（例如“添加到願望清單”），以測試此更改是否會影響主要 CTA 上的點擊次數（例如“添加到購物車”）。 這是一個測試用例，您可以在其中刪除網站上的元素。 即使您刪除了按鈕，它仍然存在於由 React 等框架創建的虛擬 DOM 中，並且會在網站加載時引發錯誤。

2. 現在假設您的電子商務網站有一個註冊流程，除了“立即提交”按鈕外，還顯示一個文本輸入框來捕獲訪問者的電子郵件地址。 當您更改文本輸入框的外觀時，與之關聯的網站樣式組件也會發生變化。 VWO 的可視化編輯器確保用戶看到的是最新應用的更改。 觀察如何更改 SPA 中的表單字段，並確保為變體抽樣的訪問者看到這些更改而不是看到控制。

如何將 VWO 用於您的單頁應用程序？

要將 VWO 用於您的 SPA，您只需在網站的 head 部分添加 VWO SmartCode，即可享受對 SPA 網站的默認支持。

通過如此簡單的集成，您可以立即開始。 註冊免費試用，探索 VWO 的功能，或向我們的產品專家請求演示。 您還可以了解有關我們最新、令人興奮的產品更新的更多信息。