如何在 WordPress 5.8 中添加和 A/B 測試小部件

已發表: 2021-08-05

在 WordPress 中,小部件是您可以添加到站點的側邊欄、頁腳和其他區域以添加某些特性或功能的內容。 它們旨在包含各種附加組件,例如菜單、日曆、表單、最新帖子的顯示等。

絕大多數 WordPress 主題都帶有一組預安裝和即用型的小部件:

Tech Mag 主題中可用的小部件
TechMag WordPress 主題中可用的小部件。

新小部件編輯器的目標

在 WordPress 5.8 到來之後,除了我已經告訴你的新的塊編輯功能和完整的站點編輯功能之外,我們現在有了一個新的基於塊的小部件編輯器。

我們在用這個新的小部件編輯器尋找什麼? 正如 Anne McCarthy 於 2021 年 2 月在 WordPress.org 上評論的那樣,使用小部件編輯器可以實現的好處是:

  • 允許用戶使用熟悉的塊創建側邊欄、頁眉和頁腳佈局,
  • 能夠在視覺上豐富小部件的設計,而無需使用 HTML 編輯器,
  • 擁有統一的模板和內容編輯體驗,無需保留內容如何顯示的抽象概念,
  • 到目前為止,我們擁有的許多小部件都被視為簡碼,將被視為塊(例如,表單的情況),它的版本更加流暢和直觀,
  • 從小部件到塊的過渡將是平滑的,以便開發人員可以用塊替換小部件,並且
  • 為了避免向後兼容性問題,小部件將可以像以前一樣從外觀»小部件菜單選項中進行編輯。

因此,例如,使用新的小部件編輯器,我可以使用塊編輯器創建一個頁腳,其中包含一組塊,以前我們只能在頁面或帖子的內容中添加這些塊。

使用塊編輯器創建的頁腳
使用小部件編輯器創建的頁腳

新的小部件編輯器

使用 WordPress 5.8 版本更新您的網站後,當您訪問外觀»小部件菜單選項時,首先我們會看到小部件塊編輯器的歡迎屏幕。

歡迎使用小部件塊編輯器
歡迎使用塊小部件。

在瀏覽小部件編輯器的說明性指南後,我們發現了一個新的小部件編輯器,它與我們已經知道的塊編輯器更加相似。 告別我們之前使用的小部件管理!

使用這個新的編輯器,每個小部件區域看起來都像一個下拉列表(之前類似),您可以在其中添加內容塊。

新的 WordPress 小部件編輯器
新的 WordPress 小部件編輯器。

為了不失去與主題和 WordPress 以前版本的兼容性,主題預定義的小部件成為一種稱為“舊版小部件”的新型塊。 這樣,當您搜索內容塊時,它們將顯示為新塊,您也可以在每個小部件區域中添加這些塊,並且您可以像以前一樣修改它們的屬性(但不能在側邊欄的塊屬性中,您只會看到它表明它是“舊版小部件”及其描述)。

除了舊版小部件,現在在每個小部件區域中,您還可以插入和修改我們已經知道的任何其他類型的塊:

在小部件區域中添加塊
在小部件區域中添加塊。

不僅如此:您還可以在您想要的任何小部件區域中使用此版本的 WordPress 附帶的新主題塊,從而為 WordPress 小部件區域添加強大的多功能性。

在小部件區域中添加主題塊
在小部件區域中添加主題塊。

最後,小部件編輯器還允許您在不同的小部件區域之間移動塊。

在不同小部件區域之間切換塊的選項
在不同小部件區域之間切換塊的選項。

和往常一樣,在小部件編輯器中進行適當的更改後,只需更新更改以將它們反映在您的頁面和帖子中。

小部件 A/B 測試

正如我在本文開頭已經提到的,小部件區域是旨在向我們的網站添加功能的區域,這些功能通常涉及用戶執行某些操作。 如果我們想增加執行某些操作的網站訪問者數量,我們可以使用的提高轉化率的最佳工具是 A/B 測試。

簡而言之,在小部件的上下文中,小部件的 A/B 測試包括基於改進假設(例如,重新排列一個區域內的小部件塊以更好地顯示某些相關信息,或以不同的方式顯示小部件塊)區域,或從根本上更改小部件區域中顯示的塊),看看該更改是否比以前更好。

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

描述 A/B 測試如何工作的圖像:流量被拆分,每個段看到一個變體,然後我們檢查哪個變體獲得了更多轉化
在最簡單的形式中,A/B 測試建議將網站的流量隨機分成兩組,以便 50% 的訪問者看到 A 設計,而另外 50% 看到 B 設計。 通過監控每組用戶的反應,我們可以計算每組的轉化率,如果兩者之間存在統計學顯著差異,則宣布獲勝者設計。

借助新的小部件編輯器,它為頁面和帖子的設計開闢了廣泛的可能性, 您可以創建的 A/B 測試呈指數增長,因此,它們在優化網絡轉換方面變得更加相關。

A/B 測試你的小部件

你可以創建一個小部件手動進行 A/B 測試並聯合使用 Google Analytics 進行轉化分析。 但是創建小部件會更容易、更便宜使用像 Nelio 這樣的工具進行 A/B 測試A/B 測試(高級版每月 29 歐元起),一個完全集成到不同 WordPress 塊編輯器(包括小部件編輯器)的 WordPress 插件。

一旦Nelio A/B 測試插件已安裝並激活,Nelio A/B 測試圖標將出現在您的 WordPress 儀表板上,其中包含您可以創建和分析的不同選項不使用任何外部工具的 A/B 測試。

例如,讓我們看看我們如何創建一個小部件測試來分析我們是否在網站上有一個類別選擇器,從而看看它是否會增加對其博客文章的訪問量。

創建小部件必須遵循的不同步驟使用 Nelio 進行 A/B 測試A/B 測試是:

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

選擇要創建的測試類型

內里奧A/B 測試是一種工具,可讓您創建任何類型的 WordPress 元素的 A/B 測試。 因此,從種類繁多的元素中進行選擇,您應該做的第一件事就是選擇您要創建的小部件的 A/B 測試。

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

定義測試變體

接下來,在小部件測試的編輯窗口中,我們必須為測試添加一個名稱,以幫助您將來識別它並創建變體以針對原始版本或控製版本進行測試(即您設計的小部件區域目前在您的網站上)。

使用 Nelio A/B 測試定義小部件 A/B 測試
小部件的定義使用 Nelio 進行 A/B 測試A/B 測試。

要創建新變體,您必須在您正在創建的變體字母旁邊的字段中為其命名,然後單擊出現在其下方的“編輯”鏈接。 您將看到它會將您帶到我們剛剛看到的新小部件編輯器。

默認情況下,新變體是您當前在網絡上擁有的一組小部件的精確副本。 現在就像我上面解釋的使用編輯器更改變體一樣簡單。 在不同的小部件區域添加、修改、移動或刪除您想要的塊,當您準備好變體時,保存它。

編輯小部件測試的變體
編輯小部件測試的變體。

定義轉化目標和行動

在測試中定義變體後,下一步是定義測試的轉換目標。 您創建此測試的目的是什麼? 在我們的示例中,目的是獲得對博客文章的更多訪問。 我們如何定義它?

返回測試版,在“轉化目標和操作”部分,您可以通過單擊+New鏈接添加任意數量的目標。

對於您定義的每個目標,您都有不同類型的轉化操作來跟踪訪問者。 例如,您可以監控他們何時訪問某個頁面、何時點擊您網站上的某個元素或何時發送聯繫表格。 單擊您感興趣的操作按鈕,您可以為每種類型的操作定義自己的配置參數。 例如,您可以點擊頁面訪問並選擇定價頁面或選擇提交表單以查看有多少訪問者訂閱等。

在我們正在解釋的小部件測試示例中,我們將轉換操作定義為訪問我們的博客頁面:

定義 A/B 測試的目標和轉換操作
轉換目標和行動的定義A/B 測試。

細分您的流量

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

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

就是這樣,現在您所要做的就是按下按鈕開始測試並分析其進度。 Nelio A/B 測試將負責拆分進入您網站的流量,以便他們只看到創建的一些變體並分析他們的行為。

通過使用 Nelio A/B 測試,您不必擔心需要運行測試多長時間或控制數據的統計置信度。 您將能夠看到每個變體的總轉化次數和訪問次數。 您還可以看到每個變體與原始版本相比的百分比改進(或惡化)。

應用獲勝的替代方案

最後,如果事實證明您的一種變體比其他變體更好,Nelio A/B 測試會讓您知道,您將能夠將其作為最終版本應用到您的網站上。 也就是說,您在獲勝變體中設計的小部件區域將成為您網站的最終版本。

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

就是這樣,現在你有了一個新版本的網頁設計,它比你原來的版本轉換得更好。

結論

WordPress 5.8 版本帶來了一組很棒的新功能。 新的小部件編輯器使我們可以選擇向我們網站的區域添加許多功能,這些區域到目前為止僅限於主題附帶的預定義小部件。

這種新的可能性範圍使您可以測試比我們迄今為止更多的頁面設計。 擁有像 Nelio 這樣的工具用於創建集成在 WordPress 中的小部件 A/B 測試的 A/B 測試可確保您可以使用數據優化頁面上的轉換,而無需離開 WordPress 編輯器。

Unsplash 中 Striving Blogger 的精選圖片。