• 網站

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>

最佳實務：使用多個 amp-list 執行個體和單一共享 JSON 端點，以受益於 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