Progresif Web Uygulamanızı (PWA) yüklemek, kullanıcıların uygulamanızı bulmasını ve kullanmasını kolaylaştırabilir. Tarayıcı tanıtımı yapıldığında bile bazı kullanıcılar PWA yükleyebileceklerinin farkında değildir. Bu nedenle, PWA'nızın yüklenmesini tanıtmak ve etkinleştirmek için kullanabileceğiniz bir uygulama içi deneyim sunmanız faydalı olabilir.
![PWA'daki basit yükleme düğmesinin ekran görüntüsü.](https://web.dev/static/articles/promote-install/image/screenshot-simple-instal-3b0b6b042e079.png?authuser=5&hl=tr)
Bu makale çok kapsamlı değildir ancak PWA'nızın yüklenmesini tanıtmanın farklı yolları için bir başlangıç noktası sunar. Kullandığınız kalıptan bağımsız olarak veya kalıplardan bağımsız olarak, Kendi uygulama içi yükleme deneyiminizi sunma başlıklı makalede açıklandığı gibi, yükleme akışını tetikleyen aynı kod kullanılır.
En iyi uygulamalar
Sitenizde hangi promosyon kalıplarını kullanıyor olursanız olun, geçerli olan bazı en iyi uygulamalar vardır.
- Tanıtımları, kullanıcı yolculuklarının dışında tutun. Örneğin, PWA giriş sayfasında harekete geçirici mesajı giriş formunun altına yerleştirip gönder düğmesini kullanın. Tanıtım kalıplarının rahatsız edici kullanımı, PWA'nızın kullanılabilirliğini azaltır ve etkileşim metriklerinizi olumsuz etkiler.
- Promosyonu reddetme veya reddetme olanağı bulunmalıdır. Kullanıcı bu işlemi yaptığında kullanıcının tercihini hatırlayın ve yalnızca kullanıcının içeriğinizle ilişkisinde bir değişiklik olursa (ör. oturum açması veya bir satın alma işlemini tamamlaması gibi) tekrar istem gönderin.
- Teknikleri PWA'nızın farklı bölümlerinde birleştirin, ancak yükleme tanıtımıyla kullanıcınızı bunaltmamaya veya rahatsız etmemeye dikkat edin.
- Promosyonu yalnızca
beforeinstallprompt
etkinliği tetiklendikten sonra gösterin.
Otomatik tarayıcı tanıtımı
Belirli ölçütler karşılandığında çoğu tarayıcı, kullanıcıya İleri Web Uygulamanızın yüklenebilir olduğunu otomatik olarak belirtir. Örneğin, masaüstü Chrome, çok amaçlı adres çubuğunda bir yükle düğmesi gösterir.
![Görünür bir yükleme göstergesinin bulunduğu çok amaçlı adres çubuğunun ekran görüntüsü.](https://web.dev/static/articles/promote-install/image/screenshot-omnibox-a-vi-4d92411b4427d.png?authuser=5&hl=tr)
![Tarayıcı tarafından sağlanan yükleme tanıtımının ekran görüntüsü.](https://web.dev/static/articles/promote-install/image/screenshot-browser-provi-bd3e42c38ef14.png?authuser=5&hl=tr)
Android için Chrome, kullanıcıya mini bir bilgi çubuğu gösterir, ancak bu durum beforeinstallprompt
etkinliğinde preventDefault()
çağrısı yapılarak engellenebilir.
preventDefault()
yöntemini çağırmazsanız banner, bir kullanıcı sitenizi ilk kez ziyaret edip Android'de yüklenebilirlik ölçütlerini karşıladığında, ardından yaklaşık 90 gün sonra tekrar gösterilir.
Kullanıcı arayüzü tanıtım kalıpları
Kullanıcı arayüzü tanıtım kalıpları, neredeyse tüm PWA türleri için kullanılabilir ve sitede gezinme ile banner'lar gibi yerlerde görünür. Diğer tüm promosyon türlerinde olduğu gibi, kullanıcı yolculuğunun kesintiye uğramasını en aza indirmek için kullanıcının bulunduğu bağlama dikkat etmek önemlidir.
Tanıtım kullanıcı arayüzünü ne zaman tetikleyeceklerine dikkat eden siteler daha fazla yükleme elde eder ve yüklemeyle ilgilenmeyen kullanıcıların yolculuklarını sekteye uğratmaz.
Basit yükleme düğmesi
Mümkün olan en basit kullanıcı deneyimi, web içeriğinizde uygun bir yere "Yükle" veya "Uygulamayı al" düğmesi eklemektir. Düğmenin diğer önemli işlevleri engellemediğinden ve kullanıcının uygulamanızdaki yolculuğunun dışında olduğundan emin olun.
![Özel yükle düğmesi..](https://web.dev/static/articles/promote-install/image/custom-install-button-c31a48092e91c.png?authuser=5&hl=tr)
Sabit başlık
Bu, sitenizin başlığının parçası olan bir yükle düğmesidir. Diğer başlık içerikleri genellikle logo ve hamburger menü gibi site marka öğelerini içerir. Başlıklar, sitenizin işlevine ve kullanıcı ihtiyaçlarına bağlı olarak position:fixed
olabilir veya olmayabilir.
![Başlıktaki özel yükleme düğmesi.](https://web.dev/static/articles/promote-install/image/custom-install-button-he-ae67d1ee86ff3.png?authuser=5&hl=tr)
Uygun bir şekilde kullanıldığında, sitenizin başlığından PWA yüklemesini tanıtmak, en sadık müşterilerinizin deneyiminize dönmesini kolaylaştırmanın mükemmel bir yoludur. PWA başlığınızdaki pikseller değerlidir. Bu nedenle, yüklemenizin harekete geçirici mesajının uygun boyutta, olası diğer başlık içeriğinden daha büyük ve rahatsız edici olmadığından emin olun.
![Başlıktaki özel yükleme düğmesi](https://web.dev/static/articles/promote-install/image/custom-install-button-he-37ffcc16ba69b.png?authuser=5&hl=tr)
Aşağıdakilerden emin olun:
beforeinstallprompt
etkinleşmeyene kadar yükle düğmesini göstermeyin.- Yüklü kullanım alanınızın değerini kullanıcılarınız için değerlendirin. Tanıtımınızı yalnızca faydalanma olasılığı yüksek kullanıcılara sunmak için seçici hedeflemeyi düşünün.
- Değerli başlık alanını verimli bir şekilde kullanın. Kullanıcıya başlıkta başka neler sunmanın yararlı olacağını düşünün ve yükleme tanıtımının önceliğini diğer seçeneklere göre değerlendirin.
Gezinme menüsü
![Gezinme menüsündeki özel yükleme düğmesi](https://web.dev/static/articles/promote-install/image/custom-install-button-na-58019edc6068c.png?authuser=5&hl=tr)
Menüyü açan kullanıcıların deneyiminizle etkileşimine işaret ettiği için gezinme menüsü, uygulamanızın yüklenmesini teşvik etmek için ideal bir yerdir.
Aşağıdakilerden emin olun:
- Gezinmeyle ilgili önemli içerikleri kesintiye uğratmaktan kaçının. PWA yükleme promosyonunu diğer menü öğelerinin altına yerleştirin.
- Kullanıcının PWA'nızı yüklemenin neden faydalı olacağına dair kısa ve alakalı bir satış konuşması sunun.
Açılış sayfası
Açılış sayfalarının amacı, ürünlerinizi ve hizmetlerinizi tanıtmaktır. Bu nedenle, PWA'nızı yüklemenin avantajlarını tanıtırken geniş kapsamlı bir başlangıç yapmanın uygun olduğu yer burası.
![Açılış sayfasındaki özel yükleme istemi.](https://web.dev/static/articles/promote-install/image/custom-install-prompt-a-5843b12d5bc42.png?authuser=5&hl=tr)
Önce sitenizin değer teklifini açıklayın, ardından ziyaretçilerle kurulumdan ne elde edeceklerini belirtin.
Aşağıdakilerden emin olun:
- Ziyaretçileriniz için en önemli özelliklere hitap edin ve onları açılış sayfanıza getirmiş olabilecek anahtar kelimeleri vurgulayın.
- Yükleme promosyonunuzun ve harekete geçirici mesajınızın dikkat çekici olmasını sağlayın (yalnızca değer teklifinizi netleştirdikten sonra). Sonuçta burası sizin açılış sayfanız.
- Uygulamanızın, kullanıcıların zamanlarının çoğunu geçirdiği bölümüne bir yükleme promosyonu eklemeyi düşünün.
Banner yükle
Çoğu kullanıcı, mobil deneyimlerde yükleme banner'larıyla karşılaşmıştır ve banner'ın sunduğu etkileşimlere aşinadır. Banner'lar, kullanıcının çalışmasını bozabileceğinden dikkatli kullanılmalıdır.
![Sayfanın üst kısmındaki özel yükleme banner'ı.](https://web.dev/static/articles/promote-install/image/custom-install-banner-to-3aa411a9214c1.png?authuser=5&hl=tr)
Aşağıdakilerden emin olun:
- Banner'ı göstermeden önce, kullanıcının sitenize ilgi duyduğunu gösterene kadar bekleyin. Kullanıcı banner'ınızı kapatırsa kullanıcı, içeriğinizle daha yüksek düzeyde etkileşim sağladığını gösteren bir dönüşüm etkinliğini (ör. bir e-ticaret sitesinde satın alma işlemi veya hesaba kaydolma) tetiklemediği sürece banner'ınızı bir daha göstermeyin.
- Banner'da PWA'nızı yüklemenin değerini kısaca açıklayın. Örneğin, PWA'nın kullanıcının cihazında neredeyse hiç depolama alanı kullanmadığını veya mağaza yönlendirmesi olmadan anında yükleneceğini belirterek iOS/Android uygulamalarının bu uygulamalardan ayırt edilmesini sağlayabilirsiniz.
Geçici kullanıcı arayüzü
Snackbar tasarım deseni gibi geçici kullanıcı arayüzü, kullanıcıyı bilgilendirir ve bu durumda uygulama yükleme işlemi gibi bir işlemi kolayca tamamlamasına olanak tanır. Bu tür kullanıcı arayüzü kalıpları, doğru kullanıldığında kullanıcı akışını kesintiye uğratmaz ve kullanıcı tarafından yoksayıldıklarında otomatik olarak kapatılır.
![Snackbar olarak özel yükleme banner'ı.](https://web.dev/static/articles/promote-install/image/custom-install-banner-sn-fc0c5df5e9391.png?authuser=5&hl=tr)
Uygulamanızla birkaç etkileşimden sonra atıştırmalık çubuğunu gösterin. Sayfa yüklenirken veya bağlam dışında görünüyorsa kolayca gözden kaçabilir ya da bilişsel aşırı yüklenmeye yol açabilir. Böyle bir durumda kullanıcılar gördükleri her şeyi reddederler. Sitenize gelen yeni kullanıcıların PWA'nızı yüklemeye hazır olmayabileceğini unutmayın. Bu nedenle, bu modeli kullanmadan önce kullanıcıdan güçlü ilgi alanı sinyalleri (ör. yinelenen ziyaretler, kullanıcı oturum açma veya benzer bir dönüşüm etkinliği) almadan önce beklemeniz önerilir.
![Snackbar olarak özel yükleme banner'ı.](https://web.dev/static/articles/promote-install/image/custom-install-banner-sn-b294fb32a9249.png?authuser=5&hl=tr)
Aşağıdakilerden emin olun:
- Snackbar'ı 4 ila 7 saniye boyunca göstererek kullanıcılara engel olmadan, görüp tepki vermeleri için yeterli zaman tanıyın.
- Banner'lar gibi diğer geçici kullanıcı arayüzünün üzerinde göstermekten kaçının.
- Bu modeli kullanmadan önce kullanıcıdan güçlü ilgi alanı sinyalleri (ör. yinelenen ziyaretler, kullanıcı oturum açma veya benzer bir dönüşüm etkinliği) gelene kadar bekleyin.
Dönüşümden sonra
Bir kullanıcı dönüşüm etkinliğinden hemen sonra, örneğin bir e-ticaret sitesinde yapılan satın alma işleminden hemen sonra, PWA'nızın yüklenmesini tanıtmak için mükemmel bir fırsattır. Kullanıcı, içeriğinizle açık bir şekilde etkileşimde bulunur ve dönüşüm genellikle kullanıcının hizmetlerinizle tekrar etkileşimde bulunacağına işaret eder.
![Dönüşümden sonra yükleme promosyonu.](https://web.dev/static/articles/promote-install/image/an-install-promotion-con-effd5a7b38e75.png?authuser=5&hl=tr)
Rezervasyon veya ödeme yolculuğu
Rezervasyon veya ödeme akışları gibi sıralı bir yolculuk sırasında ya da sonrasında bir yükleme promosyonu gösterin. Promosyonu kullanıcı yolculuğu tamamladıktan sonra gösteriyorsanız yolculuk tamamlandıktan sonra genellikle daha belirgin hale getirebilirsiniz.
![Kullanıcı yolculuğundan sonra yükleme promosyonu.](https://web.dev/static/articles/promote-install/image/an-install-promotion-a-u-2e0b33d2ff618.png?authuser=5&hl=tr)
Aşağıdakilerden emin olun:
- Alakalı bir harekete geçirici mesaj ekleyin. Uygulamanızı yüklemek hangi kullanıcılarda fayda sağlayacak? Neden? Bu bilgi, mevcut yolculuklarıyla ne derece alakalı?
- Markanızın yüklü uygulama kullanıcıları için benzersiz teklifleri varsa bunlardan bahsedin.
- Promosyonu yolculuğunuzdaki sonraki adımların dışında tutun. Aksi takdirde yolculuğun tamamlanması oranlarını olumsuz yönde etkileyebilirsiniz. Yukarıdaki e-ticaret örneğinde, ödeme için temel harekete geçirici mesajın uygulama yükleme tanıtımının üzerinde nasıl olduğuna dikkat edin.
Kaydolma, oturum açma veya oturumu kapatma akışı
Bu promosyon, promosyon kartının daha belirgin olabileceği yolculuğun özel bir durumudur.
![Kaydolma sayfasında özel bir yükleme düğmesi.](https://web.dev/static/articles/promote-install/image/a-custom-install-button-401ffb4e23752.png?authuser=5&hl=tr)
Bu sayfalar genellikle yalnızca, PWA'nızın değer teklifinin önceden belirlenmiş olduğu, etkileşimde bulunan kullanıcılar tarafından görüntülenir. Ayrıca genellikle bu sayfalara yerleştirilebilecek çok fazla faydalı içerik bulunmaz. Sonuç olarak, sizi engellemediği sürece daha büyük bir harekete geçirici mesaj oluşturmak daha az rahatsız edicidir.
Aşağıdakilerden emin olun:
- Kayıt formu içinde kullanıcıların yolculuğunu kesintiye uğratmaktan kaçının. Bu çok adımlı bir işlemse kullanıcının yolculuğunu tamamlayana kadar beklemeniz önerilir.
- Kayıt yaptıran kullanıcılara en alakalı özellikleri tanıtın.
- Uygulamanızın oturum açılan alanlarına ek bir yükleme promosyonu eklemeyi düşünün.
Satır içi promosyon kalıpları
Satır içi tanıtım teknikleri, tanıtımları site içeriğiyle bir araya getirir. Bu, genellikle bazı ödünleri olan kullanıcı arayüzünde yapılan tanıtımdan daha üstü kapalıdır. Tanıtımınızın, ilgilenen kullanıcıların onu fark edeceği kadar öne çıkmasını istersiniz. Ancak tanıtımın, kullanıcı deneyiminizin kalitesini düşürecek kadar fazla olmaması gerekir.
Feed içi
PWA'nızdaki haber makaleleri veya diğer bilgi kartı listeleri arasında feed içi yükleme promosyonu gösterilir.
![İçerik feed'indeki bir yükleme promosyonu.](https://web.dev/static/articles/promote-install/image/an-install-promotion-with-06735d525d2b5.png?authuser=5&hl=tr)
Amacınız, kullanıcılara sevdikleri içeriğe nasıl daha kolay erişebileceklerini göstermektir. Kullanıcılarınıza faydalı olacak özellik ve işlevleri tanıtmaya odaklanın.
Aşağıdakilerden emin olun:
- Kullanıcıları rahatsız etmemek için tanıtımların sıklığını sınırlayın.
- Kullanıcılarınıza promosyonları kapatma olanağı sunun.
- Kullanıcınızın reddetme seçimini hatırlayın.