• 網站

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