amp-experiment

簡介

amp-experiment 元件允許在 AMP 文件上執行使用者體驗實驗並收集結果資料。例如，這非常適合在您的 AMP 中進行新功能的 A/B 測試，但您可以測試任意數量的變體。

在此範例中，我們使用 Google Analytics (分析) 來追蹤實驗。Google Analytics (分析) 要求透過索引變數指定不同的變體。但是，amp-experiment 對這些變數的指定方式沒有任何意見。

設定

匯入 amp-experiment 元件。

<script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>

我們使用 amp-analytics 來衡量實驗結果。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

透過使用 body[amp-x-name-of-experiment="nameOfVariant"] 為實驗的不同變體設定樣式。

<style amp-custom>
  body[amp-x-button-color-experiment="0"] .button-color-experiment {
    background-color: yellow;
    color: black;
  }
  body[amp-x-button-color-experiment="1"] .button-color-experiment {
    background-color: red;
  }
  body[amp-x-button-color-experiment="2"] .button-color-experiment {
    background-color: blue;
  }
</style>

基本用法

在 JSON 物件內的 amp-experiment 內設定實驗。在每個實驗內使用 variants 來宣告實驗變體中將包含多少百分比的使用者。變體的總和必須是 <= 100 的數字。如果總和小於 100，則會使用預設行為。使用者會根據 0 到 100 之間產生的隨機數，歸類到其中一個變體。

如需關於變體的更多詳細資訊，請閱讀官方文件。多個實驗可以與各自的變體集平行在同一個 AMP 文件上執行。一個 AMP 文件最多只能有一個 amp-experiment 元素。

<amp-experiment>
  <script type="application/json">
    {
      "button-color-experiment": {
        "variants": {
          "0": 30,
          "1": 30,
          "2": 30
        }
      }
    }
  </script>
</amp-experiment>

範例設定

我們使用一個按鈕，其中 30% 使用者的背景將為黃色，30% 使用者為紅色，30% 使用者為藍色，而剩餘 10% 的使用者；按鈕背景將為預設顏色，在此範例中為白色。

<button class="button-color-experiment">Click here</button>

使用 amp-pixel 進行報表

使用 amp-pixel 衡量實驗結果。

<amp-pixel src="https://example.com/track/?xname=button-color-experiment&xvar=VARIANT(button-color-experiment)"></amp-pixel>

使用 amp-analytics 進行報表

使用 amp-analytics 衡量實驗結果。已配置的變體可用作 URL 替換變數：VARIANT(name-of-the-experiment)。您可以在開發人員工具的網路分頁中查看分析要求。

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-73836974-1"
      },
      "requests": {
        "experiment": "${pageview}&xid=${experiment}&xvar=${variant}"
      },
      "triggers": {
        "default pageview": {
          "on": "visible",
          "request": "experiment",
          "vars": {
            "experiment": "W4kYemYmQBSTIYNpoezCmg",
            "variant": "VARIANT(button-color-experiment)"
          }
        }
      }
    }
  </script>
</amp-analytics>

開發小提示

您可以透過將 amp-x-experiment-name 新增至 AMP 頁面 URL，強制實驗處於特定變體中。

#amp-x-button-color-experiment=0
#amp-x-button-color-experiment=1
#amp-x-button-color-experiment=2

請注意，您需要在選擇實驗後手動重新載入頁面，因為 amp-experiment 僅在頁面載入時評估，而雜湊變更不會觸發重新載入。

需要更多說明嗎？

如果本頁面的說明未能解答您的所有疑問，請隨時聯繫其他 AMP 使用者，討論您的具體使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性的貢獻。

在 GitHub 上編輯範例

作者 @kul3r4