• 網站

AMP 電子商務入門

這是一個使用 AMP 建立電子商務網頁的快速入門指南。本指南提供範例和提示，涵蓋以下主題

• 如何建立產品頁面
• 如何建立產品類別頁面
• 在 AMP 中處理動態內容
• 個人化 AMP 並支援登入
• 結帳與付款
• 分析

產品頁面

透過 AMP，您可以建立美觀且互動性十足的產品頁面。此範例示範如何使用動態產品配置和加入購物車流程來建立複雜的產品頁面。隨著 amp-bind 的推出，現在可以建立真正互動的 AMP 頁面：它可用於協調頁面狀態，根據使用者互動來顯示和隱藏任意 div。

這些範例可協助您開始使用 AMP 建立產品到達頁面：- 產品圖庫：透過 amp-carousel 和 amp-bind，您可以輕鬆建立精美的圖片庫。此處有一些範例說明如何在 AMPHTML 中使用標題和縮圖實作圖片庫。- 產品配置：使用 amp-selector 和 amp-bind 進行進階產品配置。如需進階版本，請參閱範例產品頁面。- 加入購物車：產品範例示範了功能完整的加入購物車流程，可在不同來源之間運作。- 標籤頁：可以透過結合 amp-selector 和彈性版面配置輕鬆實作。此處有一個範例。- 星星評等：此處有一個範例示範如何在 AMP 中實作星星評等系統。- 通話追蹤：使用 amp-call-tracking 追蹤從您的 AMP 發起的通話。- 評論/評價：可以使用 amp-form 實作評論或評價提交。如果需要使用者登入，請與 amp-access 結合使用。此處有一個結合兩者的範例。

產品類別頁面

產品類別頁面是使用者常用的到達頁面，非常適合 AMP。它們通常結合了編輯內容和英雄式產品展示。此處有一個產品頁面的運作範例，示範了類別頁面的常見功能，例如產品列表或搜尋。

可以使用 AMP 建立類別頁面

• 產品搜尋：使用 amp-form 實作搜尋表單。您可以將搜尋結果顯示在不同的頁面（可能不是 AMP）上，或者更好的是，直接在目前頁面中呈現搜尋結果。請參閱自動建議範例。
• 產品篩選與排序：請參閱用戶端篩選範例。

動態內容

AMP 可以從不同來源的 AMP 快取提供，例如，當它們在 Google 搜尋結果中提供時。這使得在實作 AMP 時，有必要考量 AMP 快取的快取策略

如果使用者絕不能看到過時的資料，或資料絕不能超過 15 秒，則需要額外步驟。產品定價或供應情況是這種情況的典型範例。為了確保使用者始終看到最新的內容，您可以使用 amp-list 元件，該元件將直接從您的伺服器擷取和呈現內容。

這是一個如何使用 amp-list 呈現產品名稱和價格的範例

<amp-list height="24" layout="fixed-height" src="/static/samples/json/product.json" binding="no">
  <template type="amp-mustache">
    {{name}}: ${{price}}
  </template>
</amp-list>

顯示個人化內容

電子商務網站通常會在輪播中顯示個人化內容或推薦內容。實作此功能的一種方法是使用 amp-list 傳回 amp-carousel 的內容。amp-mustache 呈現 amp-list 資料的預設行為是在 items 物件內循環；在範本內新增 amp-carousel 會使範本呈現多個輪播；解決此問題的一種方法是讓 amp-list 端點在 items 中傳回單一條目，如下所示

{"items": [{
  "values": [/*...*/]

<amp-list width="auto" height="400" layout="fixed-height" src="/static/samples/json/product-single-item.json" binding="no">
  <template type="amp-mustache">
    <amp-carousel height="400" layout="fixed-height" type="carousel">
      {{#values}}
        <amp-img src="{{img}}" layout="fixed" width="400" height="400" alt="{{name}}"></amp-img>
      {{/values}}
    </amp-carousel>
  </template>
</amp-list>

最佳實務：使用多個具有單一共享 JSON 端點的 amp-list 執行個體，以受益於 AMP 執行階段的請求快取，並避免對此 JSON 端點發出多個請求。

另一種方法是將 amp-bind 與 JSON 端點搭配使用。如果最新資料需要在使用者互動後可用，例如，飯店頁面在使用者選擇特定日期時顯示房間供應情況，則此方法非常有效。

<amp-state id="products" src="/static/samples/json/products.json"></amp-state>
<amp-img on="tap:AMP.setState({ productId: 0})" src="/static/samples/img/red_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 1})" src="/static/samples/img/green_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 2})" src="/static/samples/img/product1_alt1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<div [text]="products[productId] + ' available'">Please select a product</div>

個人化與登入

在 AMP 中提供個人化內容的簡單方法是使用 amp-list。您可以使用 Cookie（使用屬性 credentials="include"）或 AMP 的 用戶端 ID

<amp-list credentials="include" height="24" layout="fixed-height" src="/static/samples/json/product.json?clientId=CLIENT_ID(myCookieId)" binding="no" class="m1">
  <template type="amp-mustache">
    Your personal offer: ${{price}}
  </template>
</amp-list>

最佳實務：使用 amp-list 進行個人化時，請務必設定 AMP CORS 標頭。

如果您依賴已登入的使用者，則可以使用 amp-access 元件直接從 AMP 頁面將使用者登入您的網站。請查看此範例，瞭解如何在 AMP 中實作登入流程。

結帳流程與付款

為了避免使用者感到沮喪，請讓使用者可以直接從您的 AMP 頁面發起結帳。以下是您可以在 AMP 頁面中處理結帳的三種方式

• 在 Chrome 中，您可以使用 Payments Requests API。查看付款範例，瞭解其運作方式。
• 使用 amp-form 在您的 AMP 頁面中實作結帳流程。
• 將使用者重新導向至您網站上的結帳流程。重要事項：盡可能使轉換無縫銜接，特別是，不要讓使用者輸入相同的資訊兩次。

分析

務必使用 amp-analytics 衡量使用者與您的 AMP 頁面的互動情況。重要事項：測試您的分析整合，並確保正確歸因 AMP 流量，特別是當 AMP 從不同來源提供時。為了進行測試，您可以透過 Google AMP 快取載入您的 AMP。

• 作者： @sebastianbenz