• 網站

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 撰寫