如何在 WordPress 中使用 Elementor 進行 A/B 測試(以及為什麼要這樣做)

已發表: 2021-04-01

當您設計網站時,您的目的是:銷售產品、推廣服務或引起讀者的任何回應或行動。 如果您還選擇了 Elementor 插件作為頁面構建器來在 WordPress 中創建您的網站,那是因為您知道設計很重要,並且您希望它具有吸引力和現代感。 今天我們將了解如何在 Elementor 的網站上創建 A/B 測試。

即使你在頁面設計中使用 Elementor,你怎麼知道你的精緻品味是否真的會給你帶來最好的結果? 您不是您自己的客戶,他們的意見和品味可能與您有很大不同。 憑直覺行事可能非常浪漫,但如果您希望改善用戶體驗並增加轉化率,也就是說,讓您的讀者採取與您的目標一致的任何行動(購買、填寫表格、與您聯繫等) ,最好的選擇是在您的網站上執行 A/B 測試。

目錄

  • 什麼是 A/B 測試?
  • 轉化率優化
    • 第 1 步:定義你的目標
    • 第 2 步:分析您的網站
    • 第 3 步:創建假設
    • 第 4 步:生成測試想法
    • 第 5 步:創建和運行 A/B 測試
  • 在 Elementor 中創建 A/B 測試
    • 選擇要創建的測試類型
    • 定義測試變體
    • 定義您的轉化目標和行動
    • 細分您的流量
    • 運行創建的測試並分析其進度
    • 應用獲勝的替代方案
  • 立即開始在 Elementor 上執行 A/B 測試

什麼是 A/B 測試?

您網站的訪問者數量等於訪問者執行某些所需操作的機會數量,也稱為轉換。 這是訂閱、購買、填寫表格等。

轉化率是相對於訪問次數實現的轉化次數。 因此,如果您的網站每天總共有 100 次訪問,其中兩次最終購買了產品,那麼您網站上的轉化率為 2%

就像您可以通過分析收到電子郵件的人最終購買的百分比來衡量電子郵件活動的成功一樣,在您的網站上,您有一個非常好的工具來提高其成功或轉化率:A/B 測試

A/B 測試是優化網站轉化的最佳工具。 簡而言之,A/B 測試包括基於改進假設提出對您的網站的更改(例如,重新分配登錄頁面以更好地顯示某些相關信息,重新排列菜單以獲得更多點擊在我的產品頁面上或對主題進行徹底的更改以使其更具吸引力),然後查看該更改是否比以前的更改效果更好。

從技術上講,A/B 測試只不過是一個實驗,它包括同時向不同的網站訪問者群體展示同一網頁的兩個變體,並比較哪個變體產生最多的轉化。

ab測試
在最簡單的形式中,A/B 測試建議將網站的流量隨機分成兩組,以便 50% 的訪問者看到 A 設計,而另外 50% 看到 B 設計。 通過監控每組用戶的反應,我們可以計算每組的轉化率,如果兩者之間存在統計學顯著差異,則宣布獲勝者設計。

A/B 測試很快出現的問題之一是您應該測試哪種類型的測試。 A/B 測試不是你隨意定義的測試,沒有任何意義; 它們應該是被稱為轉化率優化CRO 過程的更雄心勃勃的過程的一部分。

轉化率優化

顧名思義,轉化率優化或 CRO 是增加執行您想要的操作的網站訪問者百分比的過程。 簡而言之,這個過程包括以下步驟:

第 1 步:定義你的目標

任何 CRO 流程的第一步都是定義您的業務目標是什麼,以及您網站在銷售漏斗的不同階段的不同轉換目標。 例如,Nelio 的業務目標是增加我們高級計劃的訂閱者。 但是,訪問者從訪問我們的網站到成為客戶的過程是怎樣的? 這是我們的銷售漏斗:

網站的銷售漏斗
定義網站的銷售漏斗。

如果我們的業務目標是增加我們高級計劃的訂閱者,潛在客戶或潛在客戶可能會在他們在 Google 或 WordPress 插件目錄中搜索 A/B 測試解決方案時首先了解 Nelio A/B 測試。 我們網站的訪問者可能會閱讀我們文檔中的一些文章,以了解更多關於我們產品的信息。 如果他們喜歡這些頁面上的內容,他們將訪問我們的定價頁面。 此時,我們網站的轉化目標可能是訪問定價頁面,而我們的目標指標可能是每月獲得 2,000 次訪問該頁面。

然後,如果潛在客戶發現有趣的信息,他們會詢問更詳細的信息或從 WordPress 目錄下載插件以測試我們提供的免費版本。 第二個轉換目標是:訪問者填寫我們的聯繫表。 該指標將是收到的聯繫表格的數量,我們可以用某個值定義我們的每月目標。 或者也可以是我們插件的下載。 等等。

最後,潛在客戶訂閱了我們的一項高級計劃。 在這種情況下,我們的轉換目標顯然會涉及購買訂閱計劃。 而且由於我們業務的目的是發展,所以我們可以在我們擁有的不同計劃之間分解這個目標。

如您所見,第一步包括分析銷售漏斗,通過建立指標來定義我們的轉化目標。

第 2 步:分析您的網站

在這個重要的初步步驟之後,您應該開始尋找有關您網站當前情況以及您可以採取行動的數據。 確定您當前在您的網站上遇到的問題。 這將幫助您產生關於您應該執行的 A/B 測試的想法。

我們如何收集數據? 最初,啟發式地評估您在上一步中確定的每個頁面。 問問自己,它們是否符合您制定的標準,看看您是否可以改善這些結果:

  • 頁面在內容和設計方面是否符合用戶的期望?
  • 我們如何改進它?
  • 網站上的內容和優惠是否盡可能清晰?
  • 我們可以讓它更清晰或更簡單嗎?
  • 是什麼導致此頁面猶豫或阻礙進程?
  • 我們可以簡化它嗎?
  • 頁面上有哪些內容不能幫助用戶採取行動?
  • 我們可以增加用戶的積極性嗎?

您將獲得可以改進的感興趣領域的列表。 也可以使用 Google Analytics 來查找改進領域。 例如,GA 可以幫助您檢測點擊產品按鈕的訪問者的百分比,然後您可以將其與您的預期數字進行比較。 您還可以使用熱圖和滾動圖來更好地了解 Web 用戶的行為。

接下來,優先考慮您已確定的問題或改進領域,首先關注您認為會產生最大影響的那些(因為他們有更多的訪問或因為這是一個重要問題)。 例如,在我們的分析中,我們發現需要改進 Nelio A/B 測試產品頁面。 我們希望增加訪問我們定價頁面的用戶數量。 這是一個主要問題。

第 3 步:創建假設

在創建 A/B 測試之前,下一步是將先前確定的問題列表轉換為一組假設。

例如,在我們的 Nelio A/B 測試登錄頁面上,我們看到許多訪問者只看到第一個塊而沒有向下滾動頁面。 在分析 web 的熱圖和滾動圖後,我們可以看到這一點。 此外,只有 45% 的訪問者訪問了定價頁面。

Nelio A/B 測試首頁首折原版
Nelio A/B 測試主頁第一折的原始版本。

鑑於這一事實,我們假設,通過在第一個折疊中使用更清晰的信息來引起好奇心而不是緊迫感,我們會讓更多人對單擊“立即開始”按鈕感興趣。 您可以對有序列表中的每個問題進行相同的練習。

第 4 步:生成測試想法

接下來,我們必須實施一個“引起好奇心”的新標題。 在我們的特殊情況下,我們決定使用以下顏色:紅色還是藍色? 方形還是圓形? 上或下? 測試您的 WordPress

Nelio A/B 測試登陸頁面第一折的原始版本。
Nelio A/B 測試登陸頁面的第一折變體。
Nelio A/B 測試登陸頁面第一折的原始版本和變體之間的差異。

我們還決定更改標題下方的文字,如圖所示。 我們的想法是檢查人們是否更喜歡我們談論他們的網站和目標而不是我們的產品。

第 5 步:創建和運行 A/B 測試

最後,正如您可能已經想像的那樣,剩下的就是在您的網站上創建測試。 正如我們在開頭提到的,A/B 測試只不過是一個實驗,我們在其中創建一個頁面的兩個版本或變體(但它也可以是一個帖子、一個菜單、一個小部件、一個表單或任何其他我們的 WordPress 網站的元素)。 一旦測試運行,我們就可以拆分我們的訪問者,這樣大約一半的訪問者總是看到變體 A,其餘的將看到變體 B。

在定義 A/B 測試時,我們不僅要定義測試的變體(A/B 或多變量測試,如果是多變量測試),我們還必須定義我們的轉換目標。 正如我們在前面的示例中看到的,我們的轉換目標是計算對我們高級計劃定價頁面的訪問次數。 此外,在 A/B 測試中,我們還可以對測試中的參與者進行細分,即指明我們希望哪些訪問者參與測試。

運行測試後,您將查看其中一個變體是否是贏家,您將能夠確定地將其應用為您網站上的最後一個變體,確保它在轉換方面有所改進。

正如你可以想像的那樣,優化網站轉換的過程是連續的和周期性的。 永遠不要停止進行 A/B 測試來改進您的網站。

在 Elementor 中創建 A/B 測試

您可以使用 Elementor 在 WordPress 網站上手動創建 A/B 測試,例如,使用 Google Analytics 進行轉換分析。 但是,我們建議您使用市場上可用的工具之一,例如 Nelio A/B 測試(免費和高級版,每月 29 歐元起)、Convertize(高級版每月 49 美元起)、VWO(高級版)版本起價 199 美元/月)、Convert Expriences(高級版起價 699 美元/月)或 Optimizely(自定義價格,但起價約 800 美元/月)等,為您省去了細分流量的麻煩到您的網站,並直接為您提供您正在尋找的指標和結果。

讓我們看看您可以使用 Elementor 使用 Nelio A/B 測試創建哪些類型的 A/B 測試,該工具的巨大優勢在於它是一個原生 WordPress 插件。 事實上,您只需像任何其他插件一樣在您的網站上安裝 Nelio A/B 測試插件,一旦安裝,您就可以開始使用它,而無需學習使用任何其他工具。

要遵循的步驟如下:

  • 選擇要創建的測試類型
  • 定義測試變體,
  • 定義轉化目標和行動
  • 或者,定義是否要應用分段
  • 運行測試並分析您的進度
  • 將獲勝的備選方案應用為最終方案

選擇要創建的測試類型

要創建任何類型的測試,首先要做的是從顯示的列表中選擇要創建的測試類型。

Nelio A/B 測試中的測試選擇器。
Nelio A/B 測試中的測試選擇器。

選擇要創建的 A/B 測試類型後,您必須定義要在網站上運行的測試的主要特徵。

定義測試變體

首先,對於它們中的每一個,您必須選擇要測試的元素並定義其變體。

頁面的 A/B 測試

讓我們看一個非常簡單的例子。 假設我們假設,使用 Elementor 頁面上的新圖像,我們會讓更多人有興趣了解有關該工具的更多信息,因此會單擊號召性用語按鈕。

Variante 1 de un test A/B
Variante 2 de un test A/B
更改 Elementor 頁面中某個部分的圖像。

選擇我們要創建頁面測試後,在 WordPress 編輯器中,您將看到必須編輯測試的頁面。

為頁面命名新的 A/B 測試
定義頁面的新 A/B 測試。

只需將測試命名,在本例中為“測試不同的圖像”,然後選擇您要測試的頁面(在我們的示例中為主頁)。

選擇要使用 Nelio A/B 測試進行測試的頁面。
選擇要使用 Nelio A/B 測試進行測試的頁面。

接下來,您只需為其命名即可創建原始頁面的變體“變體 B”。 如果需要,您可以通過單擊“新建變體”按鈕創建盡可能多的變體。 默認情況下,創建的每個變體都將是您之前選擇的原始頁面的精確副本。 單擊其編輯鏈接進行修改。

在 A/B 測試中創建變體
在 A/B 測試中創建變體 B。

使用原生 WordPress 插件的優勢在於,您可以使用通常用於創建頁面的相同可視化編輯器直接修改 A/B 測試的變體。 在這種情況下,編輯器顯然是 Elementor。 這意味著,單擊編輯鏈接後,您將看到新變體已加載到 Elementor 中,您可以隨意更改它。

使用 Elementor 修改 A/B 測試的變體
使用 Elementor 修改 A/B 測試的變體。

調整頁面(在本例中,我將只更改圖像)並將其保存為草稿:

使用 Elementor 將頁面發佈為草稿
使用 Elementor 將頁面發佈為草稿。

而已! 您已經創建了您的第一個變體!

帖子的 A/B 測試

為帖子創建 A/B 測試與為頁面創建非常相似。 選擇要創建帖子測試後,選擇要測試的原始帖子的下拉菜單將顯示您已發布的帖子列表。 您還可以通過鍵入帖子的標題、URL 或 ID 來搜索帖子。

選擇要使用 Nelio A/B 測試進行測試的帖子。
選擇要使用 Nelio A/B 測試進行測試的帖子。

其餘的過程與上一個完全相同。

自定義帖子類型的 A/B 測試

如果您想要創建不同於頁面和帖子的自定義帖子類型的 A/B 測試,例如您在網站上創建的課程、常見問題解答等,您也可以使用 Nelio A/B 測試來完成. 您只需選擇要執行此類測試,現在選擇器將允許您選擇所需的內容類型以及要測試的特定內容。

選擇自定義帖子類型以使用 Nelio A/B 測試進行測試。
選擇自定義帖子類型以使用 Nelio A/B 測試進行測試。

測試標題的 A/B

如果在分析您的網站時,您發現很難讓讀者閱讀您網站的內容,可能是因為標題不太吸引人。 一個非常有趣的測試是標題測試。 也就是說,嘗試不同版本的帖子標題、摘錄和特色圖片,找出哪種組合能吸引更多讀者。

要執行此類測試,使用 Nelio A/B 測試,您無需使用 Elementor 編輯此信息。 該插件本身允許您在編輯測試時直接執行此操作。 選擇您要創建新的標題測試後,Nelio A/B 測試會向您顯示您博客上的帖子的標題。

使用 Nelio A/B 測試命名標題 A/B 測試。
使用 Nelio A/B 測試定義標題 A/B 測試。

您選擇要測試其標題的帖子並創建所需的變體,甚至無需編輯帖子。

使用 Nelio A/B 測試定義標題 A/B 測試的變體。
使用 Nelio A/B 測試定義標題 A/B 測試的變體。

WooCommerce 產品摘要的 A/B 測試

WooCommerce 產品摘要 A/B 測試是一種特定類型的 WooCommerce 測試,其中測試名稱、簡短描述和產品圖像的不同組合,目的是發現哪些人獲得了更多對該產品的購買。 創建這種類型的測試的方法與我們上面看到的標題非常相似。

如果您選擇創建此類型的測試,Nelio A/B 測試將在下拉列表中顯示您可用的產品,您只需在測試編輯器。 您不必編輯產品。

使用 Nelio A/B 測試定義 woo-commerce 產品摘要的 A/B 測試
使用 Nelio A/B 測試定義 woo-commerce 產品摘要的 A/B 測試

主題 A/B 測試

如果在分析您的網站後,您的假設是您的網站需要進行更徹底的更改,那麼您可能需要更改主題。 但在深入研究之前,請記住,創建一個 A/B 測試,您可以使用數據檢查哪個主題更好。

使用 Nelio A/B 測試可以輕鬆創建主題測試。 您應該只在 WordPress 上安裝要測試的主題,並在 A/B 主題測試中選擇它們。

使用 Nelio A/B 測試在 A/B 測試中選擇主題變體。
使用 Nelio A/B 測試在 A/B 測試中選擇主題變體。

請記住,如果您使用 Elementor 擁有的頁面已被完全自定義,則主題更改可能產生的影響將微乎其微。

模板的 A/B 測試

您可以嘗試為網站上的某些頁面創建不同的模板,而不是更改網站的主題。 之前使用 Elementor 頁面構建器設計它們,然後使用它們執行 A/B 測試。

選擇要使用 Nelio A/B 測試進行測試的模板變體。
選擇要使用 Nelio A/B 測試進行測試的模板變體。

與往常一樣,在使用特定模板的所有頁面上選擇要用作模板變體的不同模板變體一樣簡單。

菜單的 A/B 測試

使用 Elementor,您可以直接在 WordPress 中創建導航菜單結構,或者如果您使用 Elementor 的專業版,您還可以使用導航菜單小部件創建菜單。 如果您以傳統方式創建它,創建 A/B 測試就像選擇您當前擁有的菜單之一併創建所需的變體一樣簡單。

使用 Nelio A/B 測試創建新的菜單 A/B 測試。
使用 Nelio A/B 測試創建新的菜單 A/B 測試。

要修改變體,您只需單擊編輯鏈接並以與編輯任何傳統菜單相同的方式修改菜單。 創建後,它現在可以作為此測試的變體使用。

如果您使用 Elementor Pro 版本的導航菜單小部件創建了菜單,則測試的創建與創建小部件的 A/B 測試相同,如下所述。

小部件的 A/B 測試

如果您需要在 WordPress 中創建小部件測試(包括上面討論的導航菜單),在選擇要創建小部件測試後,您只需指明新小部件變體的名稱並單擊編輯鏈接。

使用 Nelio A/B 測試創建小部件 A/B 測試的變體。
使用 Nelio A/B 測試創建小部件 A/B 測試的變體。

編輯變體時,Nelio 使用 WordPress 自己的小部件編輯器和一些額外的控件。 根據需要添加、刪除和排列變體小部件,然後返回測試。

使用 Nelio A/B 測試編輯 A/B 測試的變體小部件。
使用 Nelio A/B 測試編輯 A/B 測試的變體小部件。

CSS 的 A/B 測試

如果您想測試不同版本的 CSS 樣式規則並衡量哪一個最能滿足您的目標,您可以選擇創建 CSS 測試。 與小部件的情況一樣,您只需輸入新變體的名稱並單擊編輯鏈接。 在這種情況下,將打開一個編輯器供您添加所需的 CSS 樣式,同時您可以看到它們的預覽。

使用 Nelio A/B 測試編輯 CSS A/B 測試的變體。
使用 Nelio A/B 測試編輯 CSS A/B 測試的變體。

定義好新規則後,單擊發布並創建測試的 CSS 變體。

定義您的轉化目標和行動

在定義了測試的變體之後,讓我們進行下一步:您創建的 A/B 測試是為了測試一些轉化目標的想法而完成的,例如獲得更多銷售、更多訂閱者或更多訪問定價頁面,等當訪問者執行某些操作時,這些目標就會實現。 例如,當用戶在您的網站上填寫某個表格時,您可以獲得更多訂閱者,或者當用戶點擊按鈕時,您可以獲得更多訪問定價頁面等。

我們如何在 Nelio A/B 測試中定義轉換目標和操作?

在“轉化目標和操作”部分,您可以通過單擊+New鏈接添加任意數量的目標,並且可以選擇為其添加名稱。 Nelio A/B 測試將向您展示每種變體對您已定義的每個目標的有效性的信息。

定義轉化目標:增加對我的任何產品的興趣。
定義轉化目標:增加對我的任何產品的興趣。

對於每個目標,您可以使用不同類型的轉化操作來跟踪訪問者。 例如,您可以監控他們何時訪問某個頁面、何時單擊您網站的某個元素或何時提交聯繫表。 單擊您感興趣的操作按鈕並進行設置。 例如,您可以點擊頁面訪問轉化操作並在其下拉表單中選擇您的定價頁面,或者選擇表單提交並選擇您要跟踪的表單等。

細分您的流量

許多 A/B 測試工具的有趣功能之一是您可以細分流量。 也就是說,您可以設置只有某些訪問者參與測試。 例如,按國家、時間、語言、瀏覽器、設備等。如果您想了解更多關於如何使用 Nelio A/B 測試實現流量分割的詳細信息,Antonio 在這篇文章中詳細解釋了它。

運行創建的測試並分析其進度

就是這樣,現在您所要做的就是按下按鈕開始測試並分析其進度。 使用上述工具時,您不必擔心需要運行多長時間或控制數據的統計置信度。

使用 Nelio A/B 測試進行 A/B 測試的演變。
使用 Nelio A/B 測試進行 A/B 測試的演變。

您將能夠看到每個變體頁面的總轉化次數和訪問次數。 您還可以查看每個變體相對於原始版本的改進(或惡化)百分比。

應用獲勝的替代方案

一段時間後,插件會告訴您哪個變體是最好的(當然,如果有一個比其他變體更好)。

A/B 測試結果的狀態。
A/B 測試結果的狀態。

一旦有了,剩下的就是讓它成為確定的。 使用 Nelio A/B 測試,作為一個原生 WordPress 插件,應用獲勝的變體只需要點擊一個按鈕Apply 。 就是這樣! 無需再次重新創建獲勝的變體——它已經在 WordPress 中了!

使用 Nelio A/B 測試進行 WooCommerce 產品摘要測試的結果。
使用 Nelio A/B 測試進行 WooCommerce 產品摘要測試的結果。

瞧,現在你有了一個新的網站設計,其中包含經過驗證的數據,比以前的更好。

立即開始在 Elementor 上執行 A/B 測試

有了這份關於如何在 Elementor 中創建 A/B 測試的完整指南,您將完全有能力開始規劃您自己的網站轉換優化項目。 在提高網站的轉化率方面,A/B 測試非常寶貴。 更重要的是,通過使用像 Nelio A/B 測試這樣的工具,您可以減少在沒有明確標準且僅基於您自己的直覺的情況下執行優化程序所涉及的許多風險。

如果您發現本指南有用,請在您的社交網絡上分享,如果您有任何問題、意見或需要更多信息,請不要猶豫,在本文末尾留下您的評論。

Syd Wachs 在 Unsplash 上的特色圖片