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

<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