eコマースにAMPを使用して売り上げを伸ばす7つの方法（例）

ウェブページが遅いと、コンバージョン率が低くなります。 調査によると、読み込み時間が100ミリ秒遅くなっても、ウェブページのコンバージョンに影響を与える可能性があります。 最終的に、ユーザーは待ちたくありません。 何年も前にAcceleratedMobilePagesでモバイルウェブを高速化するためにGoogleを立ち上げたのはその真実です。

また、AMPフレームワークは、さまざまな業種にわたるさまざまなWebページに対応できるようになりましたが、静的なWebページをはるかに超えてAMPを高速化することはできないと考える人もいます。 しかし今日、AMPは、動的コンテンツ、チェックアウトページ、Webサイト全体、さらには軽量フレームワークを備えたプログレッシブWebを提供することができます。 その結果、ブランドはますますeコマースのためにAMPに目を向けています。

eコマースにAMPを使用する

eコマースブランドがAMPへの投資に遅れをとっているのには理由があります。彼らのニーズは、AMPが当初提供しようとしていたニュースパブリッシャーのニーズよりもはるかに複雑です。 eコマースブランドには、製品リスト、ログイン機能、動的コンテンツ、チェックアウトページ、および最高レベルのWebセキュリティが必要です。

しかし、最初のリリースから数年後、AMPは、あらゆる種類のページに高速の読み込み時間をもたらす新しいコンポーネントと技術的な回避策により、eコマースブランドがこれらのニーズを満たすことを可能にしています。 AMPが現在サポートできる印象的な機能は次のとおりです。

• 動的コンテンツ：eコマースWebサイトのコンテンツは常に変化しています。 動的コンテンツのAMPサポートにより、顧客は常に最新の情報を見ることができます。
• チェックアウト/支払い：AMPは、ショッピングカート、チェックアウトフロー、および支払い処理をサポートするようになりました。 これで、ユーザーはAMPページから直接購入できます。
• パーソナライズ/ログイン：パーソナライズは、関連するマーケティングキャンペーンの基礎です。 現在、AMPを通じて、推奨製品や更新されたカートなど、パーソナライズされたコンテンツを顧客に提供できます。

では、AMPはどのようにそれを行うのでしょうか？ そして、どうすればいいですか？ amp-bindからamp-selectorなど、製品ページ、カテゴリページ、ショッピングカートなどを作成するために使用できるコンポーネントをいくつか紹介します。

eコマース向けAMPの便利なコンポーネント

1.製品ページ

多くの場合、ユーザーはカテゴリページ、ホームページ、ソーシャルメディア、または有料広告を通じて商品ページにアクセスします。 これらのページでは、製品の機能と利点について詳しく説明しています。大胆なヒーローショットと、訪問者に知らせるのに十分な角度で、視覚的に非常に魅力的です。

AMPを使用してそれらを作成するには、amp-carouselやamp-videoなどの要素が含まれます。これらを使用して、印象的なヒーローショット、情報写真、包括的なビデオを作成できます。

写真に付随する長い製品の説明については、コンテンツを拡張および最小化する機能についてamp-アコーディオンを参照してください。 要素amp-formを使用すると、訪問者が製品のレビューを残すためのコメントシステムを作成できます。

もう少し簡単なことですが、カスタムCSSを使用すると、製品評価のスターレビューシステムを有効にできます。

また、要素amp-social-shareを使用すると、ユーザーに製品をソーシャルメディアに共有する機能を提供できます。

AMPは、訪問者が購入する準備ができたときに、ショッピングカートと「カートに追加」ボタンもサポートできるようになりました。 そうでない場合は、要素amp-sidebarを使用して、すべてのページにナビゲーションメニューを実装できます。 これは、AMPに組み込まれている製品ページの一例にすぎません。

2.製品カテゴリページ

ユーザーは多くの場合、サイトのホームページまたは製品カテゴリページから旅を始めます。 eBayが投稿で説明したように、これらは最初にAMPlifyするのに最適なページです。

これらのタイプのページは、AMPに非常に適しています。 コンテンツは通常静的であり、利用可能な製品の最高のショーケースを提供することを目的としています。

製品カテゴリページで特に役立つのは、amp-carouselやamp-bindなどの要素です。これらの要素を使用すると、訪問者は製品やサブカテゴリを閲覧できるギャラリーを作成できます。 これらには、画像を簡単に説明するキャプションを含めることもできます。

特定の商品を検索する必要がある場合は、amp-formを使用して検索バーを作成し、それらの結果を別のページまたは同じページに表示できます。 用語をオートコンプリートすることもできます。

AMPにネイティブに付属している製品またはタイプで検索および整理する機能を除けば、製品カテゴリページは通常非常に単純です。 画像と最小限のテキストのショーケースを備えたこれらは、比類のない速度でエクスペリエンスを提供できるシンプルなデザインです。

AMPは、検索機能と製品構成を備えた製品ページの次の例を提供します。

AMPを使用して作成できる製品カテゴリページをより適切に示します。

これは、インド最大のオンラインファッションブランドであるミントラから来ています。 AMPに投資したとき、最も重要なクリック後のランディングページ全体で、速度が60％向上し、バウンス率が40％低下しました。 また、amp-bindの助けを借りて、ユーザーエクスペリエンスを妥協する必要はありませんでした。 訪問者は、AMP以外のページと同じように、商品とサイズを並べ替えてフィルタリングできます。 彼らは瞬く間に素晴らしいユーザーエクスペリエンスを提供しました。

3.パーソナライズされたコンテンツを表示する

コンバージョンを促進するためのマーケターの最も強力な戦術は、パーソナライズです。 オファーがオーディエンスに関連しているほど、オーディエンスはそれを主張する可能性が高くなります。

現在、amp-accessコンポーネントを使用すると、マーケターは、ユーザーがログインしているかどうかなど、ユーザーのステータスに基づいてコンテンツのブロックを表示できます。 パーソナライズされたコンテンツや推奨事項をカルーセルに表示するために、ユーザーはamp-listを利用できます。 グーグルは言う：

amp-listデータをレンダリングするためのamp-mustacheのデフォルトの動作は、itemsオブジェクト内を循環することです。 テンプレート内にアンプカルーセルを追加すると、テンプレートは複数のカルーセルをレンダリングします。 これを回避する1つの方法は、amp-listエンドポイントがアイテムの単一のエントリを返すようにすることです。

また、amp-listを使用して、Cookie（属性credentials =” include”を使用）またはAMPのクライアントIDを使用して、パーソナライズされたコンテンツをユーザーに返すこともできます。

パーソナライズされたコンテンツを表示する別の方法は、JSONエンドポイントでamp-bindを使用することです。 これは、予約後に空室状況を表示するホテルのように、ユーザーの操作後にデータを更新する必要がある場合に特に役立ちます。

4.ショッピングカート

ショッピングカートのサポートは、AMPでネイティブになりました。 それを構築するために、Googleはamp-listの使用をお勧めします。これにより、ユーザーが追加したものの動的リストをユーザーに表示できます。

amp-listは、サーバーがセッションのカートの内容を取得できるように、リクエストのヘッダーでセッションCookieを送信する必要があります。 このため、追加の属性としてcredentials =” include”を使用します。

このように配置すると、リストの各行にユーザーのパーソナライズされたショッピング注文を含めることができます。 また、そのリストの各アイテムには、カートからアイテムを削除するためのボタンがあります。 さらに、これらのアイテムの追加のサポートは、このデモが示すとおりです。

5.チェックアウトフローと支払い

かつて、スピードと支払いを受け取る機能が必要な場合は、AMPから始めて、ユーザーをAMP以外のチェックアウトページにリダイレクトする必要がありました。 現在、ユーザーがAMPページからチェックアウトできるようにすることができます。

Chromeでは、Payments requestAPIを使用できます。 これにより、ユーザーはブラウザのダイアログボックスからチェックアウトできるようになります。 これが簡単な例です。

もう1つのオプションは、amp-formを使用してAMP内にチェックアウトフローを構築することです。 製品の支払いにログインが必要な場合は、これらの要素をamp-accessと組み合わせることができます。

また、Webサイトでユーザーをチェックアウトしたい場合でも、訪問者をWebサイトの支払いプロセスにすばやくシームレスに移行できるのであれば、それはオプションです。 WompMobileの例を次に示します。

6.分析

amp-analyticsを使用して、eコマースでのAMPの使用の効果を測定します。 この要素は、サードパーティと社内の両方の分析ツールをサポートします。 これには、Google Analytics、Adobe Analytics、Nielsen、Quantcastなどの一般的なソリューションが含まれます。

訪問者がAMPページをどのように操作しているかについての一般的な考え方については、AMPのネイティブ分析をご覧ください。 現在、amp-analyticsは次のようなイベントを追跡できます。

• ページビュー
• アンカークリック
• タイマー
• スクロール
• AMPカルーセルの変更
• 形

分析データを直接収集するために、ソリューションをAMPと統合できます。 AMPデータが正確に関連付けられていることを確認してください。 これが当てはまるかどうかをテストするには、Google AMPCacheを介してAcceleratedMobilePagesを読み込むことをお勧めします。

7.その他…

上記の機能は、AMPフレームワークによってネイティブにサポートされている機能です。 AMPでまだサポートされていない機能を追加するには、amp-iframeを使用して、コンテンツや、チャットアプリ、マップ、その他のサードパーティソリューションなどのより高度なツールを埋め込むことができます。

もう1つのオプションは、Shopifyユーザー向けに作成されたものなどのサードパーティアプリからのサポートを探すことです。 このようなアプリを使用すると、プラグインや拡張機能でAMPを使用できるようになり、ユーザーはクイック読み込みサイトを簡単に立ち上げることができます。

Shopify用の最も効果的なAMPアプリは、製品、コレクション、ホーム、ブログページなどの多くのページタイプを作成できます。 それらは通常手頃な価格、または無料でさえあり、信頼できるサポートが付属しています：

WordPressユーザー用とMagentoユーザー用の同様のプラグインがあります。

eコマースの例のAMP

コンポーネントを見てきましたが、次に、いくつかの最大のオンラインブランドがeコマースにAMPをどのように使用しているかを見てみましょう。 これがPlumrocketによって編集された短いショーケースです。

Newegg製品ページ

1-800-フラワーズカテゴリページ

Eventbrite製品ページ

ランコム商品カテゴリーページ

ブランドはeコマース用のAMPで成功しましたか？

Forresterによると、トラフィックが多いAMPサイトでは、AMPページの売上コンバージョン率が20％増加し、AMPサイトのトラフィックが前年比で10％増加し、1件あたりのページ数が60％増加すると予想されます。訪問。 では、実際のブランドはどのように進んでいますか？

eコマースユーザー向けのAMP、数字による

• 日本最大の保険比較サイトであるアドバンスクリエイトは、ページの読み込み時間を61.2％削減し、アクションあたりのコストを36.8％削減し、コンバージョン率を28.9％向上させました。
• イベントチケットセンターでは、コンバージョン率が20％増加し、サイト滞在時間が13％増加しましたが、バウンス率は10％低下しました。
• DiscoverCarHire.comは、モバイル訪問数が22％増加し、Google広告を介したモバイルデバイスからのコンバージョン数が29％増加しました。 また、AMPを使用してサイトのモバイルオーガニックトラフィックを73％改善しました。
• Fastcommerceのクライアントは、AMPページと非AMPページを比較すると、200万ページでコンバージョン数が15％増加しました。
• WompMobileでは、非AMPページと比較してeコマースAMPページでコンバージョン率が105％増加し、バウンス率が31％減少しました。
• Wego.comは、主要なランディングページのAMPバージョンを作成した後、パートナーのコンバージョン率を95％増加させ、広告コンバージョンを3倍に増加させました。
• Greenweezは、2017年1月から3月の間にモバイルオーガニックトラフィックの半分がAMPから来ていることを確認しました。また、モバイルの獲得コストを66％削減しながら、モバイルのコンバージョン率を80％向上させました。

eコマース向けのAMPでコンバージョン率を高める

AMPはeコマースWebサイトをサポートできないと主張する人もいますが、そうではないことは明らかです。 ブランドは、ユーザーフレンドリーなエクスペリエンスをはるかに迅速に提供する方法として、AMPですでに成功を収めています。 そしてeコマースでは、時は金なりです。 スピードは収益です。

Shopify、WordPress、MagentoがAMPアプリをサポートする方法と同様に、Instapageも同様です。 つまり、Instapage Builderを使用すると、他のページと同じように直感的にAMPのクリック後のランディングページを作成できます。 Instapageデモで大規模にそれを行う方法を学びます。