E-Ticaret için AMP'yi Daha Fazla Satış Üretmek İçin Kullanmanın 7 Yolu (Örnekler)

Yayınlanan: 2020-02-25

Yavaş web sayfaları düşük dönüşüm oranları sağlar. Araştırmalar, yükleme süresindeki 100 ms'lik bir yavaşlamanın bile bir web sayfasındaki dönüşümleri etkileyebileceğini göstermiştir. Sonuçta, kullanıcılar beklemek istemiyor. Google'ı yıllar önce Accelerated Mobile Pages ile mobil web'i hızlandırmaya sevk eden işte bu gerçek.

AMP çerçevesi, çeşitli sektörlerde çeşitli web sayfalarını barındırabilecek kapasitede büyümüş olsa da, bazıları hala AMP'nin statik bir web sayfasının ötesine geçemeyeceğine inanıyor. Ancak bugün AMP, hafif çerçevesiyle dinamik içerik, ödeme sayfaları, tüm web siteleri ve hatta aşamalı web sunma yeteneğine sahiptir. Sonuç olarak, markalar e-ticaret için giderek daha fazla AMP'ye yöneliyor.

E-ticaret için AMP kullanma

E-ticaret markalarının AMP'ye yatırım yapmakta yavaş olmasının bir nedeni var: İhtiyaçları, AMP'nin başlangıçta hizmet etmek üzere yola çıktığı haber yayıncılarının ihtiyaçlarından çok daha karmaşık. E-ticaret markaları, ürün listelemelerine, oturum açma yeteneklerine, dinamik içeriğe, ödeme sayfalarına ve en yüksek web güvenliği seviyelerine ihtiyaç duyar.

Ancak ilk piyasaya sürülmesinden yıllar sonra AMP, her tür sayfaya yüksek hızlı yükleme süreleri getiren yeni bileşenler ve teknik geçici çözümlerle e-ticaret markalarının bu ihtiyaçları karşılamasını sağlıyor. İşte AMP'nin şimdi destekleyebileceği birkaç etkileyici şey:

  • Dinamik içerik: Bir e-ticaret web sitesinin içeriği sürekli değişmektedir. Dinamik içerik için AMP desteği, müşterilerin her zaman en güncel bilgileri görmesini sağlar.
  • Ödeme/ödemeler: AMP artık alışveriş sepetlerini, ödeme akışlarını ve ödeme işlemlerini desteklemektedir. Artık kullanıcılar doğrudan AMP sayfalarınızdan satın alabilir.
  • Kişiselleştirme/oturum açma: Kişiselleştirme, ilgili herhangi bir pazarlama kampanyasının temel taşıdır. Artık AMP aracılığıyla, önerilen ürünler ve güncellenmiş alışveriş sepetleri gibi müşterilerinize kişiselleştirilmiş içerik sağlayabilirsiniz.

Peki AMP bunu nasıl yapıyor? Ve nasıl yapabilirsin? amp-bind'den amp-selector'a ve ötesine, ürün sayfaları, kategori sayfaları, alışveriş sepetleri ve daha fazlasını oluşturmak için kullanabileceğiniz bazı bileşenleri burada bulabilirsiniz.

E-ticaret için AMP için faydalı bileşenler

1. Ürün sayfaları

Kullanıcılar genellikle bir kategori sayfası, bir ana sayfa, sosyal medya veya ücretli bir reklam aracılığıyla ürün sayfalarınıza ulaşır. Bu sayfalar, ürününüzün özelliklerini ve faydalarını detaylandırır ve ziyaretçinizi bilgilendirmek için cesur kahraman çekimleri ve yeterli açılarla görsel olarak son derece çekicidir.

Bunları AMP ile oluşturmak, çarpıcı kahraman çekimleri, bilgilendirici fotoğraflar ve kapsamlı videolar oluşturmak için kullanabileceğiniz amp-carousel ve amp-video gibi öğeleri içerir.

Fotoğraflarınıza eşlik edecek uzun ürün açıklamaları için, içeriği genişletme ve küçültme yeteneği için amp-akordeon'a bakın. Amp-form öğesi, ziyaretçilerinizin ürününüz hakkında yorum bırakması için bir yorum sistemi oluşturmanıza olanak tanır:

E-ticaret için AMP formu yorum örneği

Biraz daha basit bir şey için, özel CSS, ürün derecelendirmeleri için bir yıldız inceleme sistemini etkinleştirmeyi mümkün kılacaktır:

E-ticaret yıldız incelemesi için AMP sistem kodu

Ve amp-social-share öğesiyle, kullanıcılara ürünü sosyal medyada paylaşma olanağı sunabilirsiniz.

AMP artık bir alışveriş sepetini ve ziyaretçiler satın almaya hazır olduğunda "sepete ekle" düğmesini de destekleyebilir. Değillerse, tüm sayfalarda bir gezinme menüsü uygulamak için amp-sidebar öğesini kullanabilirsiniz. Bu, AMP'de yerleşik bir ürün sayfasının yalnızca bir örneğidir:

E-ticaret ürün sayfası örneği için AMP

2. Ürün kategorisi sayfası

Kullanıcılar genellikle yolculuklarına bir sitenin ana sayfasından veya bir ürün kategorisi sayfasından başlar. Bunlar, eBay'in gönderilerinde tartıştığı gibi, önce AMPlify için harika sayfalardır.

Bu tür sayfalar AMP için çok uygundur. İçerik tipik olarak statiktir ve mevcut ürünlerin en iyi vitrinini sunmaya yöneliktir.

Ziyaretçilere ürün ve alt kategoriye göz atabilecekleri galeriler oluşturmaları için bir yol sağlayan amp-carousel ve amp-bind gibi öğeler, ürün kategorisi sayfalarında özellikle yararlıdır. Bunlar, görüntüyü kısaca açıklayan altyazıları da içerebilir.

Belirli bir ürünü aramaları gerektiğinde, bir arama çubuğu oluşturmak için amp-form'u kullanabilir ve bu sonuçları farklı bir sayfada veya aynı sayfada sunabilirsiniz. Hatta terimleri otomatik olarak tamamlayabilirsiniz:

E-ticaret için AMP otomatik tamamlama örneği

AMP'de yerel olarak gelen ürün veya türe göre arama ve düzenleme özelliğinin dışında, ürün kategorisi sayfaları genellikle oldukça basittir. Bir dizi görsel ve minimal metinle, benzersiz hızlarda deneyimler sunabilen basit bir tasarımdır.

AMP, arama işlevine ve ürün organizasyonuna sahip bu ürün sayfası örneğini sunar:

E-ticaret için AMP arama işlevi örneği

AMP ile oluşturabileceğiniz bir ürün kategorisi sayfasının daha iyi bir göstergesi:

E-ticaret Myntra ürün kategorisi sayfası için AMP

Bu, Hindistan'daki en büyük çevrimiçi moda markası olan Myntra'dan geliyor. AMP'ye yatırım yaptıklarında, en önemli tıklama sonrası açılış sayfalarında hızda %60'lık bir iyileşme ve hemen çıkma oranlarında %40'lık bir azalma gördüler. Ve amp-bind'in yardımıyla, kullanıcı deneyiminden ödün vermek zorunda kalmadılar. Ziyaretçiler, AMP olmayan herhangi bir sayfada olduğu gibi ürünleri ve boyutları sıralayabilir ve filtreleyebilir. Göz açıp kapayıncaya kadar harika bir kullanıcı deneyimi sağladılar.

3. Kişiselleştirilmiş içeriği görüntüleyin

Pazarlamacıların dönüşümleri artırmak için en güçlü taktiği kişiselleştirmedir. Bir teklif hedef kitleniz için ne kadar alakalıysa, talep etme olasılıkları da o kadar yüksek olur.

Artık, amp-access bileşeniyle, pazarlamacılar, oturum açıp açmadıkları gibi, kullanıcının durumuna göre içerik bloklarını görüntüleyebilir. Kullanıcılar, bir karuselde kişiselleştirilmiş içerik veya önerileri görüntülemek için amp-listesinden yararlanabilir. Google diyor ki:

amp-list verilerini işlemek için amp-mustache varsayılan davranışı, item nesnelerinin içinde dolaşmaktır; şablonun içine bir amp-atlıkarınca eklemek, şablonun birden çok döngü oluşturmasını sağlar; Bunu çözmenin bir yolu, amp-list uç noktasının öğelerde tek bir giriş döndürmesini sağlamaktır.

Ayrıca amp-list'i, çerezler (kimlik bilgileri=”include” özniteliğini kullanarak) veya AMP'nin müşteri kimliği yardımıyla kullanıcıya kişiselleştirilmiş içerik döndürmek için kullanabilirler:

E-ticaret için AMP kişiselleştirilmiş içerik listesi kodu

AMP, kişiselleştirilmiş içeriği görüntülemenin başka bir yolunun da JSON uç noktasıyla amp-bind kullanmak olduğunu söylüyor. Bu, özellikle bir rezervasyondan sonra oda müsaitliğini gösteren bir otel gibi bir kullanıcı etkileşiminden sonra verilerin güncellenmesi gerektiğinde yararlıdır.

4. Alışveriş sepeti

Alışveriş sepeti desteği artık AMP'de yerel olarak geliyor. Bunu oluşturmak için Google, kullanıcıya eklediklerinin dinamik bir listesini görüntüleyebilen amp-list'in kullanılmasını önerir:

amp-list, sunucunun oturumdaki sepetin içeriğini alabilmesi için isteğin başlığına oturum tanımlama bilgisini göndermelidir. Bu nedenle, ek bir öznitelik olarak kimlik bilgileri=”include” kullanıyoruz.

Bu şekilde düzenlenen listenin her satırı, kullanıcının kişiselleştirilmiş alışveriş siparişlerini içerebilir. Ve bu listedeki her öğenin, sepetten öğeleri çıkarmak için bir düğmesi olacaktır. Ek olarak, bu öğeleri ekleme desteği, bu gösterinin gösterdiği gibidir.

5. Ödeme akışı ve Ödemeler

Bir zamanlar hız ve ödeme alabilmek istiyorsanız, AMP ile başlamanız ve kullanıcılarınızı AMP olmayan bir ödeme sayfasına yönlendirmeniz gerekiyordu. Bugün, kullanıcıların AMP sayfalarınızdan ödeme yapmasını sağlayabilirsiniz.

Chrome'da Ödeme isteği API'sini kullanabilirsiniz. Bu, kullanıcıların tarayıcılarındaki bir iletişim kutusu aracılığıyla ödeme yapmasına olanak tanır. İşte hızlı bir örnek.

Diğer seçenek, ödeme akışınızı amp-form ile AMP içinde oluşturmaktır. Bir ürün için ödeme yapmak için oturum açmanız gerekiyorsa, bu öğeleri amp-access ile birleştirebilirsiniz.

Ve web sitenizdeki kullanıcıları kontrol etmeyi tercih ederseniz, ziyaretçileri web sitenizin ödeme sürecine hızlı ve sorunsuz bir şekilde geçirebilmeniz şartıyla bu hala bir seçenektir. İşte WompMobile'dan bir örnek:

6. Analitik

amp-analytics ile e-ticaret için AMP kullanımınızın etkinliğini ölçün. Bu öğe, hem üçüncü taraf hem de şirket içi analiz araçlarını destekler. Buna Google Analytics, Adobe Analytics, Nielsen, Quantcast ve daha fazlası gibi popüler çözümler dahildir.

Ziyaretçilerin AMP sayfalarıyla nasıl etkileşimde bulunduğuna dair genel bir fikir için AMP'nin yerel analizlerine bakın. Şu anda amp-analytics aşağıdaki gibi olayları izleyebilir:

  • Sayfa görünümü
  • Bağlantı Tıklamaları
  • zamanlayıcı
  • kaydırma
  • AMP Döngüsü değişiklikleri
  • Biçim

Analitik verilerini doğrudan toplamak için çözümünüzü AMP ile entegre edebilirsiniz. AMP verilerinizin doğru bir şekilde ilişkilendirildiğinden emin olun. Durumun böyle olup olmadığını test etmek için Google, hızlandırılmış mobil sayfalarınızı Google AMP Önbelleği aracılığıyla yüklemenizi önerir.

7. Ve daha fazlası…

Yukarıdaki özellikler, AMP çerçevesi tarafından yerel olarak desteklenen özelliklerdir. Henüz AMP tarafından desteklenmeyen özellikler eklemek için içeriği veya sohbet uygulamaları, haritalar veya diğer üçüncü taraf çözümleri gibi daha karmaşık araçları gömmek için amp-iframe kullanabilirsiniz.

Başka bir seçenek de Shopify kullanıcıları için oluşturulanlar gibi bir üçüncü taraf uygulamasından destek aramaktır. Bunun gibi uygulamalar, AMP'yi eklentiler ve uzantılarla birlikte kullanmayı mümkün kılar ve kullanıcıların hızlı yüklenen bir siteyi kolayca başlatmasını sağlar.

Shopify için en etkili AMP uygulamaları, ürün, koleksiyon, ana sayfa ve blog sayfaları gibi birçok sayfa türü oluşturabilir. Genellikle uygun fiyatlı, hatta ücretsizdir ve güvenilir destekle gelirler:

Shopify örneği için e-ticaret uygulamaları için AMP

WordPress kullanıcıları ve Magento kullanıcıları için de benzer eklentiler var.

E-ticaret örnekleri için AMP

Bileşenleri gördünüz, şimdi en büyük çevrimiçi markalardan bazılarının e-ticaret için AMP'yi nasıl kullandığına bir göz atalım. İşte Plumrocket tarafından derlenen kısa bir vitrin.

Newegg ürün sayfası

E-ticaret için AMP Newegg örneği

1-800-Çiçekler kategori sayfası

e-ticaret için AMP 1-800-Çiçekler örneği

Eventbrite ürün sayfası

E-ticaret Eventbrite için AMP örneği

Lancome ürün kategorisi sayfası

E-ticaret Lancome örneği için AMP

Markalar e-ticaret için AMP ile başarılı oldu mu?

Forrester'a göre, önemli miktarda trafiği olan AMP'li bir site, AMP sayfalarında satış dönüşüm oranında %20'lik bir artış, AMP site trafiğinde yıldan yıla %10'luk bir artış ve sayfa başına %60'lık bir artış bekleyebilir. ziyaret. Peki, gerçek hayattaki markalar nasıl gidiyor?

Rakamlarla e-ticaret kullanıcıları için AMP

  • Japonya'nın en büyük sigorta karşılaştırma web sitesi olan Advance Create, sayfa yükleme süresini %61,2 ve işlem başına maliyeti %36,8 azaltırken, dönüşüm oranını %28,9 artırdı.
  • Etkinlik Biletleri Merkezi, dönüşüm oranında %20 ve sitede geçirilen sürede %13 artış sağlarken hemen çıkma oranını %10 düşürdü.
  • DiscoverCarHire.com, Google Ads aracılığıyla mobil ziyaretlerde %22 artış ve mobil cihazlardan %29 daha fazla dönüşüm elde etti. Ayrıca, AMP kullanarak sitenin mobil organik trafiğini %73 oranında iyileştirdiler.
  • Fastcommerce müşterileri, AMP'yi AMP olmayan sayfalarla karşılaştırırken 2 milyon sayfadaki dönüşümlerde %15'lik bir artış gördü.
  • WompMobile, AMP olmayan sayfalara kıyasla e-ticaret AMP sayfalarıyla dönüşüm oranlarında %105 artış ve hemen çıkma oranlarında %31 düşüş gördü.
  • Wego.com, anahtar açılış sayfalarının AMP sürümlerini oluşturduktan sonra ortaklarının dönüşüm oranlarında %95 ve reklam dönüşümlerinde 3 kat artış sağladı.
  • Greenweez, 2017 yılının Ocak ve Mart ayları arasında mobil organik trafiğinin yarısının AMP'den geldiğini gördü. Ayrıca mobil dönüşüm oranlarını %80 oranında artırırken mobil edinme maliyetlerini %66 oranında düşürdüler.

E-ticaret için AMP ile dönüşüm oranınızı artırın

Bazıları AMP'nin e-ticaret web sitelerini destekleyemediğini iddia etse de, durumun böyle olmadığı açık. Markalar, kullanıcı dostu deneyimleri çok daha hızlı sunmanın bir yolu olarak AMP ile zaten başarılı oldular. Ve e-ticarette vakit nakittir. Hız gelirdir.

Shopify, WordPress ve Magento'nun AMP uygulamalarını destekleme şekline benzer şekilde Instapage de öyle. Bu, Instapage oluşturucu aracılığıyla, diğer herhangi bir sayfada olduğu gibi sezgisel olarak AMP tıklama sonrası açılış sayfaları oluşturabileceğiniz anlamına gelir. Bunu bir Instapage demosu ile geniş ölçekte nasıl yapacağınızı öğrenin.