amp-experiment

簡介

The 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-實驗名稱="變體名稱"] 來為實驗的不同變體設定樣式。

<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(實驗名稱)。您可以在開發人員工具的網路標籤中檢查分析請求。

<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-實驗名稱 新增至 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 撰寫