더 많은 매출을 창출하기 위해 전자상거래용 AMP를 사용할 수 있는 7가지 방법(예시)

느린 웹 페이지는 낮은 전환율을 만듭니다. 연구에 따르면 로드 시간이 100ms 느려져도 웹 페이지의 전환에 영향을 줄 수 있습니다. 궁극적으로 사용자는 기다리기를 원하지 않습니다. 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-list 데이터를 렌더링하기 위한 amp-mustache 기본 동작은 항목 객체 내부를 순환하는 것입니다. 템플릿 내부에 amp-carousel을 추가하면 템플릿이 여러 캐러셀을 렌더링하게 됩니다. 이 문제를 해결하는 한 가지 방법은 amp-list 엔드포인트가 항목의 단일 항목을 반환하도록 하는 것입니다.

또한 amp-list를 사용하여 쿠키(credentials=”include” 속성 사용) 또는 AMP의 클라이언트 ID를 통해 사용자에게 개인화된 콘텐츠를 반환할 수 있습니다.

개인화된 콘텐츠를 표시하는 또 다른 방법은 JSON 엔드포인트와 함께 amp-bind를 사용하는 것입니다. 이는 예약 후 객실 가용성을 표시하는 호텔과 같이 사용자 상호 작용 후에 데이터를 업데이트해야 하는 경우에 특히 유용합니다.

4. 장바구니

이제 AMP에서 기본적으로 장바구니에 대한 지원이 제공됩니다. 이를 구축하기 위해 Google은 사용자가 추가한 동적 목록을 사용자에게 표시할 수 있는 amp-list의 사용을 권장합니다.

amp-list는 서버가 세션에서 장바구니의 내용을 검색할 수 있도록 요청 헤더에 세션 쿠키를 보내야 합니다. 이러한 이유로 우리는 추가 속성으로 자격 증명="포함"을 사용합니다.

이러한 방식으로 정렬하면 목록의 각 행에 사용자의 개인화된 쇼핑 주문이 포함될 수 있습니다. 그리고 해당 목록의 각 항목에는 장바구니에서 항목을 제거하는 버튼이 있습니다. 또한 이러한 항목 추가에 대한 지원은 이 데모에서 볼 수 있는 것과 같습니다.

5. 결제 흐름 및 결제

한 때 속도와 결제 기능을 원하면 AMP로 시작하여 사용자를 AMP가 아닌 결제 페이지로 리디렉션해야 했습니다. 오늘부터 사용자가 AMP 페이지에서 체크아웃하도록 할 수 있습니다.

Chrome에서는 결제 요청 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-꽃 카테고리 페이지

이벤트브라이트 제품 페이지

랑콤 제품 카테고리 페이지

브랜드가 전자상거래용 AMP로 성공했습니까?

Forrester에 따르면 트래픽이 많은 AMP 사이트는 AMP 페이지에서 판매 전환율이 20% 증가하고 AMP 사이트 트래픽이 전년 대비 10% 증가하며 페이지당 페이지 수가 60% 증가할 것으로 예상할 수 있습니다. 방문. 그렇다면 실제 브랜드는 어떻게 운영되고 있습니까?

숫자로 보는 전자상거래 사용자를 위한 AMP

• 일본 최대의 보험 비교 웹사이트인 Advance Create는 페이지 로드 시간을 61.2%, 액션당 비용을 36.8% 줄였으며 전환율을 28.9% 높였습니다.
• Event Tickets Center는 전환율이 20% 증가하고 사이트에 머문 시간이 13% 증가한 반면 이탈률은 10% 감소했습니다.
• DiscoverCarHire.com은 Google Ads를 통해 모바일 방문이 22% 증가하고 휴대기기에서 전환이 29% 증가했습니다. 또한 AMP를 사용하여 사이트의 모바일 유기적 트래픽을 73% 개선했습니다.
• Fastcommerce의 고객은 AMP를 AMP가 아닌 페이지와 비교할 때 2백만 페이지에서 전환이 15% 증가한 것을 확인했습니다.
• WompMobile은 AMP가 아닌 페이지에 비해 전자상거래 AMP 페이지에서 전환율이 105% 증가하고 이탈률이 31% 감소했습니다.
• Wego.com은 주요 방문 페이지의 AMP 버전을 만든 후 파트너의 전환율이 95% 증가하고 광고 전환이 3배 증가했습니다.
• Greenweez는 2017년 1월과 3월 사이에 모바일 오가닉 트래픽의 절반이 AMP에서 발생하는 것을 확인했습니다. 또한 모바일 전환율을 80% 높이고 모바일 획득 비용을 66% 줄였습니다.

전자상거래용 AMP로 전환율 높이기

일부에서는 AMP가 전자상거래 웹사이트를 지원할 수 없다고 주장하지만 그렇지 않다는 것은 분명합니다. 브랜드는 사용자 친화적인 경험을 훨씬 더 빠르게 제공하는 방법으로 AMP를 사용하여 이미 성공을 거두었습니다. 그리고 전자 상거래에서 시간은 돈입니다. 속도는 수익입니다.

Shopify, WordPress 및 Magento가 AMP 앱을 지원하는 방식과 유사하게 Instapage도 마찬가지입니다. 즉, Instapage 빌더를 통해 다른 페이지와 마찬가지로 직관적으로 AMP 클릭 후 방문 페이지를 만들 수 있습니다. Instapage 데모를 통해 대규모로 수행하는 방법을 알아보세요.