您可以使用 AMP 進行電子商務以產生更多銷售額的 7 種方法（示例）

緩慢的網頁導致低轉化率。 研究表明，即使加載時間降低 100 毫秒也會影響網頁上的轉換。 最終，用戶不想等待。 正是這一事實促使 Google 在多年前通過 Accelerated Mobile Pages 加速移動網絡。

儘管 AMP 框架已經能夠適應各種垂直領域的各種網頁，但有些人仍然認為 AMP 無法超越靜態網頁的速度。 但是，今天，AMP 能夠通過其輕量級框架提供動態內容、結帳頁面、整個網站，甚至是漸進式網絡。 因此，品牌越來越多地轉向 AMP 進行電子商務。

使用 AMP 進行電子商務

電子商務品牌在 AMP 上投資緩慢是有原因的：他們的需求比新聞出版商的需求復雜得多，而 AMP 最初打算服務於新聞出版商。 電子商務品牌需要產品列表、登錄功能、動態內容、結賬頁面和最高級別的網絡安全。

但是在最初發布多年後，AMP 正在使電子商務品牌能夠滿足這些需求，通過新的組件和技術解決方法為各種頁面帶來高速加載時間。 以下是 AMP 現在可以支持的一些令人印象深刻的事情：

• 動態內容：電子商務網站的內容不斷變化。 AMP 對動態內容的支持可確保客戶始終看到最新的信息。
• 結帳/付款：AMP 現在支持購物車、結帳流程和付款處理。 現在，用戶可以直接從您的 AMP 頁面購買。
• 個性化/登錄：個性化是任何相關營銷活動的基石。 現在，通過 AMP，您可以向客戶提供個性化內容，例如推薦產品和更新的購物車。

那麼AMP是如何做到的呢？ 你怎麼能？ 從 amp-bind 到 amp-selector 等等，這裡有一些組件可用於創建產品頁面、類別頁面、購物車等。

用於電子商務的 AMP 的有用組件

1. 產品頁面

通常，用戶通過類別頁面、主頁、社交媒體或付費廣告到達您的產品頁面。 這些頁面詳細介紹了您的產品的功能和優點，它們在視覺上非常吸引人，具有大膽的英雄鏡頭和足夠的角度來通知您的訪問者。

使用 AMP 創建它們涉及 amp-carousel 和 amp-video 等元素，您可以使用它們來創建引人注目的英雄鏡頭、信息照片和綜合視頻。

對於伴隨您的照片的長產品描述，請查看 amp-accordion 以擴展和最小化內容的能力。 amp-form 元素將使您能夠創建一個評論系統，供訪問者對您的產品發表評論：

對於更簡單的事情，自定義 CSS 可以為產品評級啟用星級評論系統：

通過 amp-social-share 元素，您可以讓用戶能夠將產品分享到社交媒體。

當訪問者準備購買時，AMP 現在還可以支持購物車和“添加到購物車”按鈕。 如果不是，您可以使用 amp-sidebar 元素在所有頁面上實現導航菜單。 這只是在 AMP 中構建的產品頁面的一個示例：

2. 產品分類頁面

用戶通常從網站的主頁或產品類別頁面開始他們的旅程。 正如 eBay 在他們的帖子中所討論的那樣，這些是首先需要 AMPlify 的好頁面。

這些類型的頁面非常適合 AMP。 內容通常是靜態的，旨在提供可用產品的最佳展示。

在產品類別頁面上特別有用的是 amp-carousel 和 amp-bind 等元素，它們為訪問者提供了一種創建畫廊的方式，他們可以瀏覽產品和子類別。 這些還可以包括簡要描述圖像的標題。

當他們需要搜索特定產品時，您可以使用 amp-form 創建搜索欄，然後您可以在不同頁面或同一頁面上提供這些結果。 您甚至可以自動完成條款：

除了按產品或類型搜索和組織的功能（AMP 本身自帶）之外，產品類別頁面通常非常簡單。 通過展示圖像和最少的文本，它們是一種簡單的設計，可以以無與倫比的速度提供體驗。

AMP 提供了具有搜索功能和產品組織的產品頁面示例：

以下是您可以使用 AMP 構建的產品類別頁面的更好指示：

這來自印度最大的在線時尚品牌 Myntra。 當他們投資 AMP 時，他們發現最重要的點擊後著陸頁的速度提高了 60%，跳出率降低了 40%。 在 amp-bind 的幫助下，他們不必在用戶體驗上妥協。 訪問者可以像在任何非 AMP 頁面上一樣對產品和尺寸進行排序和過濾。 眨眼之間，他們就獲得了出色的用戶體驗。

3.展示個性化內容

營銷人員提高轉化率的最有效策略是個性化。 優惠與您的受眾越相關，他們就越有可能獲得優惠。

現在，借助 amp-access 組件，營銷人員可以根據用戶的狀態（例如是否已登錄）顯示內容塊。 要在輪播中顯示個性化內容或推薦，用戶可以利用 amp-list。 谷歌說：

amp-mustache 渲染 amp-list 數據的默認行為是在 items 對象內循環； 在模板中添加 amp-carousel 會使模板呈現多個輪播； 解決此問題的一種方法是讓 amp-list 端點返回 items 中的單個條目。

他們還可以使用 amp-list 借助 cookie（使用屬性 credentials=”include”）或 AMP 的客戶端 ID 將個性化內容返回給用戶：

AMP 表示，另一種顯示個性化內容的方法是將 amp-bind 與 JSON 端點結合使用。 這在用戶交互後需要更新數據時尤其有用，例如酒店在預訂後顯示房間可用性。

4. 購物車

現在 AMP 原生支持購物車。 為了構建它，Google 建議使用 amp-list，它可以向用戶顯示他們添加到其中的內容的動態列表：

amp-list 需要在請求的標頭上發送會話 cookie，以便服務器可以在會話中檢索購物車的內容。 出於這個原因，我們使用憑據 =”include” 作為附加屬性。

按照這種方式排列，列表的每一行都可以包含用戶的個性化購物訂單。 該列表中的每個項目都有一個按鈕，用於從購物車中刪除項目。 此外，對添加這些項目的支持正如本演示所示。

5. 結賬流程和付款

曾經，如果您想要速度和收款能力，您必須從 AMP 開始並將您的用戶重定向到非 AMP 結帳頁面。 現在，您可以讓用戶從您的 AMP 頁面結賬。

在 Chrome 中，您可以使用 Payments 請求 API。 這將允許用戶通過瀏覽器中的對話框簽出。 這是一個快速示例。

另一種選擇是使用 amp-form 在 AMP 內部構建您的結賬流程。 如果購買產品需要登錄，您可以將這些元素與 amp-access 結合使用。

如果您更喜歡在您的網站上查看用戶，這仍然是一種選擇，前提是您可以快速無縫地將訪問者轉移到您網站的付款流程。 以下是 WompMobile 的示例：

6. 分析

使用 amp-analytics 衡量您將 AMP 用於電子商務的有效性。 此元素支持第三方和內部分析工具。 這包括流行的解決方案，如 Google Analytics、Adobe Analytics、Nielsen、Quantcast 等。

要大致了解訪問者如何與 AMP 頁面交互，請查看 AMP 的本機分析。 目前，amp-analytics 可以跟踪以下事件：

• 頁面預覽
• 錨點點擊
• 計時器
• 滾動
• AMP 輪播更改
• 形式

要直接收集分析數據，您可以將您的解決方案與 AMP 集成。 只需確保您的 AMP 數據被準確歸因。 為了測試是否是這種情況，Google 建議通過 Google AMP 緩存加載您的加速移動頁面。

7. 還有更多……

上述功能是 AMP 框架本機支持的功能。 要添加 AMP 尚不支持的功能，您可以使用 amp-iframe 嵌入內容或更複雜的工具，例如聊天應用、地圖或其他第三方解決方案。

另一種選擇是尋求第三方應用程序的支持，例如為 Shopify 用戶創建的應用程序。 像這樣的應用程序可以將 AMP 與插件和擴展程序一起使用，使用戶能夠輕鬆啟動快速加載的站點。

適用於 Shopify 的最有效的 AMP 應用程序能夠創建多種頁麵類型，例如產品、產品系列、主頁和博客頁面。 它們通常價格實惠，甚至免費，並提供可靠的支持：

WordPress 用戶和 Magento 用戶也有類似的插件。

用於電子商務示例的 AMP

您已經看到了組件，現在讓我們來看看一些最大的在線品牌如何將 AMP 用於電子商務。 這是一個簡短的展示，由 Plumrocket 編譯。

新蛋產品頁面

1-800-鮮花分類頁面

Eventbrite 產品頁面

蘭蔻產品分類頁面

品牌在電子商務方面的 AMP 是否取得了成功？

根據 Forrester 的說法，一個擁有大量流量的 AMP 網站預計 AMP 頁面的銷售轉化率將提高 20%，AMP 網站流量同比增長 10%，每個頁面的頁面數增長 60%。訪問。 那麼，現實生活中的品牌表現如何？

針對電子商務用戶的 AMP，按數字

• 日本最大的保險比較網站 Advance Create 將頁面加載時間縮短了 61.2%，將每次操作成本降低了 36.8%，同時將轉化率提高了 28.9%。
• Event Tickets Center 的轉化率提高了 20%，現場時間增加了 13%，同時將跳出率降低了 10%。
• 通過 Google Ads，DiscoverCarHire.com 的移動訪問量增加了 22%，移動設備的轉化次數增加了 29%。 他們還使用 AMP 將網站的移動自然流量提高了 73%。
• 將 AMP 頁面與非 AMP 頁面進行比較時，Fastcommerce 的客戶發現 200 萬個頁面的轉化率提高了 15%。
• 與非 AMP 頁面相比，WompMobile 電子商務 AMP 頁面的轉化率提高了 105%，跳出率降低了 31%。
• 在創建 AMP 版本的關鍵著陸頁後，Wego.com 的合作夥伴轉化率提高了 95%，廣告轉化率提高了 3 倍。
• Greenweez 在 2017 年 1 月至 3 月期間發現其一半的移動自然流量來自 AMP。他們還將移動轉化率提高了 80%，同時將移動獲取成本降低了 66%。

使用電子商務 AMP 提高轉化率

儘管有些人認為 AMP 不能支持電子商務網站，但顯然事實並非如此。 品牌已經通過 AMP 取得了成功，可以更快地提供用戶友好的體驗。 在電子商務中，時間就是金錢。 速度就是收益。

與 Shopify、WordPress 和 Magento 支持 AMP 應用程序的方式類似，Instapage 也是如此。 這意味著，通過 Instapage 構建器，您可以像創建任何其他頁面一樣直觀地創建 AMP 點擊後登錄頁面。 通過 Instapage 演示了解如何大規模執行此操作。