在單頁應用程序 (SPA) 上運行 A/B 測試的最佳實踐

本文是單頁應用程序 A/B 測試系列的第 2 部分。

在第 1 部分中，我們介紹了單頁應用程序 (SPA) 的概念，展示了它越來越受歡迎的原因，並研究了您可以在單頁應用程序上使用的 10 個最佳 A/B 測試平台。

但是由於它們的運作方式，在 SPA 上運行 A/B 測試可能會有點棘手。 在本文中，我們將為您提供有關如何在 SPA 上運行實驗的實用建議以及一些可遵循的最佳實踐。

SPA 框架的演變

SPA 並不是一個新概念。

2002 年的一項專利描述了一種類似於現代版 SPA 的技術。

然而，自 2006 年以來一直作為網絡標準使用的 AJAX 技術使其實施變得更加容易。 它是一組使用各種客戶端技術創建異步 Web 應用程序的策略。 借助AJAX，該軟件可以在後台從服務器發送和接收數據，而不會改變頁面的當前狀態或內容顯示模式，因此不會影響用戶體驗。

另一方面，AJAX 的引入並不是採用 SPA 的分水嶺。

近年來，前端的快速增長和 UX 的相關性日益增強，推動了 SPA 的普及，這是更大趨勢的一部分。

SPA 最初是使用 Java 小程序或 Flash 程序以及“純”JavaScript 或 jQuery 庫創建的。

然而，Angular.js、React.js 和 Vue.js 等前端框架——所有這些都是相對較新的 JavaScript 框架——幫助了它們的開發。

SPA 架構背後的技術是什麼？

SPA 本質上是一個支持 HTML5 和 CSS3 的 JavaScript 框架。

然而，使用這些組件，一些不同的庫和框架已經出現並在開發世界中被採用：

1. 角度

Angular 由 Google 開發，是 3 個框架中最成熟、最古老的一個，擁有詳細的文檔可供使用，但學習曲線陡峭。

它嵌入了原始模型視圖控制器 (MVC) 架構，但主要使用 MVVM (Model-View-ViewModel)，允許多個開發人員在同一個應用程序部分上單獨工作。 更新到新版本可能會出現一些遷移問題，但 Angular 在擴展時確實具有最高的可靠性，並且非常適合大型、複雜的項目。

由於 TypeScript，Angular 是大型開發團隊的絕佳選擇，一些公司已經在他們的其他產品中採用了這項技術。

在 GitHub 上，它是一個成熟的框架，擁有大量的貢獻者。

Google 及其產品（例如 Google Drive 和 Gmail）以及 Wix 是 Angular for SPA 的用戶之一。

2. React.js

React 由 Facebook 開發並開源。 它主要用於創建用戶界面（Facebook、WhatsApp 和 Instagram）。

由於其輕量級的代碼大小以及與其他框架無縫集成的能力，它非常受歡迎。 它還有一種在版本之間遷移的簡單方法。 （通常是一鍵遷移）。

它經常與 Redux 結合使用來管理應用程序組件的狀態。 Uber 還在其產品中使用了 React.js 技術。

React 非常適合剛開始使用 JavaScript 前端框架的人，以及初創企業和敏捷開發人員。 此外，這個 JavaScript 庫提供了與各種其他框架和技術的有價值的集成選項，這在處理具有大型環境的項目時非常有用。 在所有 SPA 框架中，React 在 GitHub 上的貢獻最多，它可以幫助開發人員解決潛在問題。

它具有 3 個框架中最簡單的學習曲線，最適合用於需要大量可擴展性的期限短的項目。

3.Vue.js

Vue.js 不屬於 Facebook 或 Google 等大公司，但它仍然在加快新用戶的步伐，尤其是在亞洲。 它是上述 SPA 框架中最新的一個，由前 Google 員工 Evan You 於 2014 年創立。 很多文檔通常是中文的，但仍然有培訓資源。

該框架非常輕巧，可用於簡單地創建高性能應用程序。

對於大多數開發人員來說，在任何這些框架中創建都沒有大問題，決定實際上取決於每個框架的主要特性。

Vue.js 現在被百度、GitLab 和阿里巴巴等企業用於滿足他們的需求。

單頁應用程序的工作原理

SPA 的設計簡單明了。 使用客戶端和服務器端渲染技術。

在非 SPA 網站上，當您在瀏覽器中輸入 URL 時，瀏覽器會將請求發送到服務器並接收 HTML 頁面作為響應。

在 SPA 網站上，服務器僅在初始請求中傳遞 HTML 文檔，在後續請求中傳遞 JSON 數據。 這表明 SPA 將重寫當前頁面的內容，而不是重新加載整個網站。

簡而言之，SPA 的功能如下：

1. 客戶端首先與服務器建立連接並獲取頁面內容，該頁面內容主要由 HTML 代碼、CSS 和一個 JavaScript 包組成，其中包含運行應用程序邏輯所需的所有腳本。
2. 用戶的操作激活相關 JavaScript 的執行，然後向服務器發出 AJAX 請求。 數據通常是 JSON 格式，不需要完整的網頁刷新。

與瀏覽器啟動全新頁面的常規技術不同，單頁面應用程序通過使用來自 Web 服務器的新數據強制修改現有網頁來與用戶交互。 瀏覽器檢索必要的 HTML、JavaScript 和 CSS 代碼或其他適當的資源，並根據需要將它們添加到頁面中。

雖然 HTML5 歷史 API 或位置哈希可用於提供 Web 應用程序中不同邏輯頁面的可導航性和感知性，但在此過程中頁面不會隨時重新加載，也不會將控制權轉移到另一個頁面。

如果您想查看實際中的單頁應用程序示例，請轉到此鏈接並單擊主頁、最新課程列表和頂部菜單。 當你這樣做時，你會注意到頁面並沒有完全重新加載，當用戶在整個應用程序中移動時，只有新數據通過網絡發送。

這是 SPA 的一個示例。

誰最適合SPA？

由於 SPA 的優勢，它們現在是許多情況下的首選解決方案。

他們在涉及各種網絡技術的項目中表現出色，在這些項目中，性能和令人愉悅的用戶體驗比內容更重要。

有許多使用 SPA 的大玩家。 Facebook、Gmail、谷歌地圖、Netflix 和 Paypal 是這類技術的一些最突出的例子（見下文）。

為什麼在 SPA 上進行 A/B 測試很困難？

React.js、Angular.js 和 Vue.js 這三個框架都在 JavaScript 開發人員中非常流行，因為它們允許開發複雜的用戶界面，從而創造更好的用戶體驗和更高的轉化率。

它們非常受開發人員歡迎，因為

• 不需要刷新頁面
• 頁面加載速度更快
• 互動豐富而流暢
• 數據傳輸減少
• 可重複使用的部件允許更快的開發
• 開發者社區非常完善

它們也是開始新 SPA 的任何人的首選資源。

但是，有一個主要缺點：由於這些框架的工作方式，客戶端 A/B 測試工具難以正常工作。

當有人在 SPA 上瀏覽網頁時，該頁面（包括 URL）不會刷新。 頁面的狀態因每次用戶交互而異（例如，屏幕上可見的不同元素）。

由於 A/B 測試工具通常只在初始頁面加載期間進行一次調整，因此這些後續交互不會被考慮在內。

以下是兩種常見的情況：

1. 如果您在 SPA 上啟用了綜合瀏覽量，那麼當有人訪問某個 URL 時，您會收到一次綜合瀏覽量，但如果他們瀏覽啟用了綜合瀏覽量的其他頁面，則不會收到第二次瀏覽量。 這是因為材料正在加載到當前頁面而不是新頁面。
2. 如果您嘗試將事件限制為特定 URL ，您將遇到同樣的問題。 A/B 測試工具會“相信”它停留在第一次加載的頁面上，即使用戶認為他們在不同的頁面上。 由於片段被移入和移出站點，因此可能難以監控點擊或其他事件。

為了呈現體驗，客戶端 A/B 測試軟件和個性化平台依賴於完整的頁面加載。

由於在使用 React、Angular 或 Vue 等 SPA 框架時不存在此概念，因此確定是否已將新內容添加到頁面或現有內容的狀態是否已更改（更重要的是，何時注入定制內容）變得更加困難。

因此，A/B 測試工具必須能夠識別訪問者的上下文，例如他們是否已到達產品列表、詳細信息或購物車頁面，以及何時應提供新鮮材料。

這意味著技術團隊需要不斷掌握模塊化 React SPA 或 Angular SPA 組件的變化，並實時更新影響這些組件的體驗。

例如，React.js 中的每次用戶交互都會導致一個或多個 UI 元素刷新，從而刪除 A/B 測試解決方案所做的任何更改。

SPA 上的客戶端測試與服務器端測試

在 SPA 上進行 A/B 測試時，有兩種選擇：

1. 隔離您要測試的應用程序的各種“狀態”，然後對其進行設置，以便在顯示每個“狀態”時調用 API 進行適當的更改。 這稱為條件激活，它是在客戶端完成的。

“狀態”的一些示例包括顯示訂閱表單、加載搜索結果列表等。

2. 在服務器端對修改進行硬編碼，或者為每個新體驗進行自定義部署。

這兩個選項都受到正在使用的 SPA 框架的影響。 因此，正如您可能已經猜到的那樣，它們需要技術團隊和營銷人員之間的大量合作才能保持良好的工作狀態。

現在，讓我們回顧一下這兩個選項，看看團隊必須做什麼才能取得成功。

客戶端的條件激活

如果您仍然需要對 SPA 應用程序執行客戶端測試，則有一種解決方法。

為了確保僅在應用程序達到所需狀態時執行測試腳本，Web 開發人員可以使用稱為條件激活模式的功能。

如果你不熟悉條件激活，這是一個很容易掌握的概念。

實質上，條件激活使您能夠定義何時應該激活實驗，而不是通過其在頁面刷新時這樣做的標準方法。

這可以通過編寫一些 JavaScript 來完成。 有兩種方法可以做到這一點。

1.輪詢功能

輪詢函數是使用條件激活的最基本方式。 該函數每 50 毫秒掃描一次頁面，直到出現指定的元素——這可能是模式、div 甚至整個頁面。

當元素出現時，實驗開始。

A/B 測試平台會生成幾行 JavaScript 供您修改，具體取決於您希望輪詢函數查找的元素。

一旦函數評估為TRUE ，實驗就會被激活。

2.回調函數

回調函數的執行與輪詢函數類似，但增加了一些靈活性。

這個函數允許你輸入任何你想要的 JavaScript 條件，如果它的計算結果為TRUE ，則開始實驗。

雖然輪詢函數不斷地 ping 頁面以查看指定元素是否存在，但回調函數更加被動並且依賴於事件處理程序。

服務器端測試

當您執行服務器端測試時，不會在瀏覽器級別進行任何更改。 相反，實驗變體參數（“用戶 1 看到變體 A”）是在服務器級別確定的，並通過服務提供商直接連接到 JavaScript 應用程序，從而更容易測試超出靜態範圍的更複雜的動態內容網站的用戶界面。

例如，主要是 SPA 的社交媒體應用程序。 雖然可以使用前端客戶端測試來試驗這些，但由於涉及動態內容，它要復雜得多，因此切換到服務器端測試會使過程更加容易。

SPA 上的 A/B 測試示例

您可能會遇到在單頁應用程序上進行 A/B 測試的實際實例有哪些？

更改登錄頁面上的圖像

假設您需要在 SPA 上設置一個實驗，以向 50% 的訪問特定頁面的受眾展示動態圖像。 此示例中使用的 SPA 框架是 React.js，這意味著頁面正在更改並且圖像正在定期更換。

如果顯示變體圖像，可能會出現閃爍問題，這意味著將觀察到原始圖像-變體圖像-原始圖像的序列。

通過在特定登錄頁面加載時觸發輪詢可以完全避免此問題。

在 CTA 下測試附加副本

在使用 Angular.js 構建的 SPA 網站上進行的另一項實驗可能涉及在主要 CTA 下方向 30% 的目標受眾顯示額外的副本行。

在此示例中，版本 A 將在主要 CTA 下方顯示額外的副本行，而版本 B 不會。 我們會將 30% 的流量發送到版本 A，將 70% 的流量發送到版本 B，然後比較結果以查看轉化率是否存在顯著差異。

由於該網站是使用 Angular.js 構建的，因此元素會定期更改。 這裡的回調事件可以幫助我們顯示對變量的更改。

顯示禮券

在此示例中，假設當用戶將高級品牌的產品添加到他們的購物籃時，我們希望顯示一張專屬禮券。 條件是當用戶從購物籃中取出優質產品時，優惠券會從頁面上滑出。

1. 這裡需要發生的是，當用戶執行所需的操作時，應該發送手動激活事件。 實驗將作為該事件的結果而被激活。
2. 當用戶從購物籃中取出優質產品時，應觸發激活事件，從而停用實驗。
3. 如果消費者再次添加優質產品，則需要重新啟動實驗以顯示優質產品。

在“立即購買”CTA 下方顯示標語

如果您想在“立即購買”CTA 按鈕下方顯示獨特的標語，則可以通過在歷史更改上推送激活事件來激活實驗。

這是因為包含“立即購買”CTA 按鈕的頁面一開始不會加載。

Convert 如何繞過 SPA 上的測試問題

SPA 上的實驗需要與其他實驗不同的處理方式。 由於 Convert 腳本無法讀取網站訪問者正在導航的 URL，因此它無法使用標準方法觸發實驗。

所以這就是它的完成方式。

首先按照本文所述安裝轉換跟踪代碼。

然後，應用以下 3 種方法之一：

1.觸發輪詢

如前所述，輪詢是測試體驗條件以確定是否應該觸發所述體驗的過程。

這包括監控訪問者 URL、受眾條件或 JavaScript 條件以運行測試。

輪詢通常在加載新頁面時由 Convert 觸發。 在 SPA 上，通常不會在 Web 應用程序上加載新頁面。

在這種情況下，您將需要以下代碼來啟動輪詢：

 window._conv_q = _conv_q || [];
window._conv_q.push(["run","true"]);

您應該確定 SPA 上觸發上述代碼的最佳事件。 應在項目設置 > 全局項目 JavaScript 部分添加的示例代碼。

 console.log('SPA/Convert Code in Global Project Javascript 執行');
如果（！window.globalExecutedTs）{
window.globalExecutedTs = true;
var oldPushState = window.history.pushState;
window.history.pushState = 函數（數據）{
嘗試 {
設置超時（函數（）{
返回 oldPushState.apply(this, arguments);
console.log('從 pushstate 轉換激活');
window._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
} 抓住 (e) {
控制台.log(e);
}
};
window.onpopstate = 函數（事件）{
設置超時（函數（）{
console.log('從彈出狀態轉換激活');
window._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
};
}

2. 在站點區域使用 JavaScript 條件

由於轉換腳本無法讀取 SPA 中的 URL 更改，因此您應該使用 JavaScript 條件而不是 URL 匹配條件來觸發實驗。

在以下文章中找到有關如何執行此操作的深入說明。

3. 手動激活實驗

在確定某個流程發生後，您可以手動觸發實驗。 使用這種方法，在使用代碼觸發輪詢後，仍然會測試站點區域和受眾條件。 查看本文以獲取有關手動激活實驗的更多詳細信息。

使用上述 3 種方法，您應該能夠在 SPA 應用程序中適時觸發實驗。

Convert 是否會增加 SPA 上閃爍的風險？

簡短的回答，不。

所有 SPA 框架都與 Convert 的防閃爍技術兼容。 Convert 在幕後利用 SmartInsert ^TM技術確保在您的 SPA 的適當時間應用或重新應用實驗修改，即使在動態頁面重新加載期間也是如此。

我們建議閱讀我們關於閃爍效果的白皮書，以了解有關它的更多信息以及為什麼要不惜一切代價避免它。

在單頁應用程序站點上進行 A/B 測試時的常見問題

如您所見，在 SPA 站點上運行測試時需要牢記一些事項。 一旦你了解了使用的框架、工具測試方法和触發事件，那麼主要問題通常是在瀏覽器上顯示新頁面或視圖時測試元素沒有重新加載。

這可能是由幾件事引起的：

1. 測試出現在首頁視圖上但不出現在後續頁面上的更改

有時，您打算顯示的更改僅顯示在您在瀏覽器上加載的第一頁上，而不會顯示在後續視圖中。 這是因為在訪問站點的新視圖或“頁面”時，不會運行評估實驗並激活它們的轉換腳本部分。

2. 出現在可視化編輯器上的更改在外部預覽時不會出現

有時可能會發生使用可視化編輯器所做的更改不會顯示在編輯器預覽之外的情況。

大多數 SPA 框架不使用 DOM API，而是使用自己的方法在頁面上部署更改。 這會導致 DOM 在被 SPA 更新時不同步。 這在 React 和 Angular 中很常見，導致在 Jquery 代碼中找到的 CSS 選擇器不起作用。

3. 變化不斷出現在後續的“視圖”中

在這種情況下，實驗更改會顯示在正確的（頁面）視圖中。 但是，當訪問新的（頁面）視圖時，變化並沒有消失。 發生這種情況是因為在 SPA 網站上，重新加載新頁面時不會刪除更改。

當實驗條件與調用輪詢時部署更改的後續視圖不匹配時，Convert 腳本將刪除添加的代碼。 然而，這還不夠，因為即使刪除頁面的實驗代碼，jquery 更改也不會消失。

您將需要執行代碼來還原實驗帶來的更改。

輪到你了：在優化 SPA 時避免這些錯誤

由於信息處理和提供方式的進步，SPA 可能會更普遍地被接受，但重要的是要注意，這種新技術在與優化和實驗平台集成時存在問題，這些平台通常適用於更經典的設置。

我們希望本文涵蓋了 SPA 的各個組成部分以及一些解決方案，以克服您尋求為訪問者提供更快、更直觀和個性化的數字體驗的這些障礙。

但是，您最好與可以為 SPA 提供無縫支持的解決方案提供商合作，例如無需修改源代碼即可檢測 UI 組件和頁麵類型的更改以進行動態定制的能力。 就像下面框中的那個。