VWO, Tek Sayfalı Bir Uygulamada (SPA) Denemeler Yaparken Nasıl Sürtünmesiz Bir Ziyaretçi Deneyimi Yaratır?

VWO'nun dinamik web sitelerine yerel desteğinin, ziyaretçileriniz için sorunsuz deneyimler oluştururken denemeyi sizin için nasıl kolaylaştırdığına ilişkin derinlemesine bir inceleme.

Birçok web sitesi, geleneksel statik web sitelerine göre birkaç önemli avantajı olduğundan Tek Sayfa Uygulamaları (SPA) olarak oluşturulmuştur: Dinamik web siteleri hızlı, kompakt ve duyarlıdır. Bu tür web siteleri, ilgi çekici ve benzersiz deneyimler oluşturmak için kullanıcınızın gördüğü içeriği optimize etmenize olanak tanır. Geliştirme ekibinizden web sitenizin React, Vue, AngularJS, Ember veya Backbone kullanılarak oluşturulduğunu duyarsanız, muhtemelen bir SPA ile çalışıyorsunuzdur ve bu makale sizinle alakalıdır.

Bu makalede, VWO'da, SPA testi için yerleşik destekle dinamik web sitelerinde deneyleri nasıl etkili ve kolay hale getirdiğimizden bahsedeceğiz, böylece yalnızca web sitesi deneyimi optimizasyon çabalarına ve başka hiçbir şeye odaklanmayacaksınız.

Ama önce sizi buraya getiren sorundan bahsedelim.

Dinamik web sitelerinde deneme çalıştırmanın zorlukları

Bir SPA üzerinde denemeler yaparken, açılış sayfanızda yaptığınız değişiklikler son kullanıcılar tarafından görülmediği için muhtemelen buradasınız. Sonuç olarak, fikirlerinizi istediğiniz kadar hızlı test edip doğrulayamazsınız ve bu sizi hüsrana uğratır.

Öncelikle SPA'ların geleneksel web sitelerinden farklı olduğunu anlayalım. Web sayfasının tamamı, biri geleneksel bir web sitesini her ziyaret ettiğinde yüklenir. SPA'da ise sayfanın sadece bazı bölümleri güncellenir. Bunun nedeni, SPA'larda web sayfanızın görünümünü ve izlenimini oluşturan HTML, CSS, Komut Dosyaları vb. gibi kaynakların yalnızca bir kez yüklenmesidir.

Kullanıcının web sayfasının farklı bölümleriyle nasıl etkileşime girdiğine bağlı olarak, sayfanın belirli bir bölümünde gördükleriniz, kullanıcının eylemine yanıt olarak dinamik olarak değişir. Diyelim ki, bir kullanıcı bir düğmeyi tıklarsa bir açılır pencere açılır. Bu açılır pencere, performansı etkilemeden kullanıcı etkileşimine göre çerçeve tarafından yapılan dinamik değişikliktir. Bir SPA'da dinamik değişimin olduğu bazı örnekler aşağıdaki gibidir:

• Ayrıntılarını görüntülemek için genişletilebilen bir arama sonucu listesindeki öğeler.
• Bir formda, bazı alanlar yalnızca bir ziyaretçi bir açılır menüden önceden tanımlanmış bir değer seçtiğinde sayfada görünür.
• Web sitesi, kullanıcının her kullanması gerektiğinde yeniden yüklenen takvim, renk seçici vb. gibi bazı bileşenler kullanır.

Bu, kullanıcı deneyimi için iyi olsa da, web sayfalarınızda bu dinamik öğelerden (arama sonucu listeleri, açılır menüler, widget'lar, açılır pencereler, afişler vb.) herhangi birinde yapılan değişikliklerle bir test kampanyası yürütmek zorlaşır. Bunun nedeni, bir bileşende yapılan değişikliklerin, web sitesinde dinamik olarak bir şey her değiştiğinde uygulanmasının gerekmesidir.

Bunu şu şekilde düşünün – bir web sayfasında bir test yapıyorsunuz. Web sayfası her yüklendiğinde (sayfayı ziyaret eden bir kullanıcı tarafından) veya sayfa yukarıda açıklandığı gibi dinamik bir öğe oluşturduğunda, SPA çerçevesi orijinal durumu gösterir (testinizin bir parçası olarak göstermek istediğiniz varyasyondan farklıdır).

İhtiyacınız olan şey, kullanıcıların görmelerini istediğiniz varyasyonu görmeleri için test varyasyonunuzun orijinal görünümün yerini almasını sağlayan bir deneme platformudur. Bu nedenle, bir SPA'da bir test ayarlarken (bir açılır kutu içindeki içeriği test ettiğinizi söyleyin), test kontrolünün ve varyasyonunun şöyle görünmesini bekleyebilirsiniz:

Ancak, SPA desteğinin yokluğunda, varyasyonda yapılan değişiklikler kontrole geri dönerek her ikisinin de aynı görünmesini sağlar. Aynen şöyle:

Bu, olup bitenlerin sadece basitleştirilmiş bir versiyonudur. Ekranın arkasında ne olduğunu teknik olarak anlamakla ilgileniyorsanız, okumaya devam edin, aksi takdirde makalenin sonraki bölümüne geçebilirsiniz.

GatsbyJS, Next.js, ReactJS vb. gibi bazı web sitesi çerçeveleri, sunucu tarafı oluşturmayı kullanır ve yüklenmesi gerektiği gibi orijinal web sayfanızın anlık görüntüsünü depolar. Bu nedenle, test amacıyla sayfadaki bir öğeyi değiştirdiğinizde, çerçeve değişikliği bir 'sorun' olarak algılar ve sayfayı depolanan anlık görüntüde göründüğü gibi orijinal durumuna döndürür. Bu da A/B testinizi engeller.

İkinci olarak, React, Gatsby, Next.js, Vue.js, Angular vb. gibi en son çerçeveler durum tabanlı işleme kavramını kullanır. Örneğin, React'te, A/B testi varyasyonu nedeniyle durumlardan birinde bir değişiklik uygulandığında, web sitesinin arayüzü otomatik olarak kendini orijinal biçimine yeniden yükler, böylece kullanıcılar varyasyonu asla görmez. Bu, web sitesi ziyaretçileri için optimal olmayan bir deneyim yaratır.

VWO, Tek Sayfa Uygulamalarında deney yapmayı nasıl zahmetsiz hale getirir?

Şimdi sorunu tartıştığımıza göre, çözüm hakkında konuşalım. VWO Testinin bir parçası olan Görsel Düzenleyicisindeki VWO'nun gelişmiş yerel SPA desteği, kampanyaların güvenilirliğini sağlamak ve ziyaretçilerinize sorunsuz bir deneyim sunmak için bir deneyde yapılan değişikliklerin SPA'larda uygulanmasını sağlar.

1. Web sitenizdeki dinamik öğeleri test etme

Dinamik öğeler önceki bölümde tanımlanmış olsa da, belirli bir örnekle bunlara yakından bakalım. Bir e-ticaret web siteniz olduğunu düşünün. 'Sepet sayfası'nda 'X' (Kapat) düğmesine tıklandığında, açılır bir pencere olarak bir uyarı belirir. Şimdi, eyleme dönüştürülebilir mesajlaşmanın ve Harekete Geçirici Mesajın insanların Sepet sayfasını kapatmasını engelleyip engelleyemeyeceğini görmek için eylem kutusundaki kopya değişikliklerini test etmek istiyorsunuz. Uyarı kutusu başlangıçta web sitesi kodunda bulunmaz, ancak ziyaretçi 'X' (Kapat) düğmesine tıkladığında SPA çerçevesi tarafından eklenir. Burada, üzerinde testi çalıştırdığınız pop-up'ı açan butona hedef eleman adı verilir.

VWO, test etmek istediğiniz değişikliğin açılır pencereye yüklenir yüklenmez uygulanmasını sağlar. Tek yapmanız gereken, bir düğmeye tıklayarak bir ayarı etkinleştirmek. Bu ayar hakkında daha fazla bilgiyi bilgi bankası makalemizde okuyabilirsiniz.

VWO, değişikliklerin doğru bir şekilde uygulanmasını nasıl sağlıyor?

Kolay.

VWO, herhangi bir zamanda bunlarda yapılan değişiklikler için sayfa öğelerini (videolar, resimler, tablolar, bölümler vb.) izler. Bu nedenle hedef eleman (yukarıdaki örnekte Kapat 'X' düğmesi) yüklendiğinde VWO bunu algılar ve Varyasyonda yaptığınız değişikliği uygular. Bu, web sayfası yeniden yüklenmese bile olur, ancak kullanıcı yalnızca web sitesindeki bir bölümle etkileşime girer.

Biraz teknik bilgi alalım ve daha fazla inceleyelim. Bunu rahatlıkla atlayabilir ve teknik detaylar size göre değilse bir sonraki noktaya geçebilirsiniz.

Dinamik bir web sitesinde, kullanıcı davranışına bağlı olarak öğeler eklenir, kaldırılır veya değiştirilir. Bir DOM ağacı, tüm web sitesi bileşenlerinin (düğmeler, afişler, açılır pencereler, widget'lar vb.) bir deposu gibidir ve web sitesinin mevcut durumunun anlık görüntüsünü tutar.

VWO'nun kitaplığı, VWO'nun bir SPA'nın DOM ağacındaki değişiklikleri gözlemlemesine izin veren bir tarayıcı arayüzü olan Mutation Observer'ı kullanır. Bu, sayfada eklenen, kaldırılan veya değiştirilen yeni öğelerin algılanmasına yardımcı olur. Böyle bir durumda VWO, elemanlar üzerindeki değişiklikleri otomatik olarak uygular. Bu nedenle, öğeler dinamik olarak yüklendiğinde, değişiklikler ziyaretçiye gösterilmeden önce uygulanır. Bu, kampanyaların güvenilirliğini artırarak varyasyonlardaki değişikliklerin eksiksiz uygulanmasını sağlar.

VWO, çerçeve oluşturma tarafından engellenen değişiklikleri nasıl yönetir ?

VWO, çerçeve oluşturma tamamlanana kadar CTA düğmesini gizli tutar. VWO, işlemenin yapılıp yapılmadığını tekrar tekrar kontrol eder. Çerçeve oluşturma işlemi tamamlandıktan sonra VWO kampanyası yürütülmeye başlar.

Bu ayarlar hakkında daha fazla bilgiyi bilgi bankası makalemizde okuyabilirsiniz.

2. Web sitenizdeki diğer sayfa öğelerini test etme

Bir sayfa yüklendiğinde, modern SPA çerçeveleri, web sitesi her yüklendiğinde değiştirilmiş öğeleri orijinal durumlarına döndürür. Bu nedenle, sayfayı test ediyorsanız, tüm değişiklikleriniz orijinaline döndürülecektir. VWO, yalnızca dinamik öğeler için değil, sayfadaki tüm öğeler için SPA çerçevesiyle test etme zorluğunun üstesinden gelmek için yaptığınız değişiklikleri takip eder. Bu değişiklikleri web sayfanıza uygularken, VWO sayfada yapılan tüm değişiklikleri (DOM düğümlerinin eklenmesi, silinmesi ve değiştirilmesi) test tarafından tespit eder ve kullanıcı deneyiminde düzenliliği sağlamak için bunları yeniden uygular.

VWO'da bu iyileştirmeyi etkinleştirmek için açık bir eylem gerekli değildir. Bu, web sitenizin oluşturulduğu çerçeveden bağımsız olarak Görsel Düzenleyici ile oluşturulmuş tüm VWO kampanyaları için kullanılabilen yerleşik bir özelliktir.

VWO Görsel Düzenleyici'nin gerçekleştirdiği değişikliklerin bazı kullanım durumu örneklerine bakalım.

1. Bu değişikliğin birincil CTA'daki tıklama sayısını etkileyip etkilemediğini test etmek için e-ticaret web sitenizden ikincil bir CTA düğmesini ("İstek listesine ekle" deyin) kaldırdığınızı varsayalım ("Sepete ekle" deyin). Bu, web sitesindeki bir öğeyi sildiğiniz bir test kullanım durumudur. Düğmeyi silmiş olsanız bile, React gibi çerçeveler tarafından oluşturulan sanal DOM'de kalır ve web sitesi yüklendiğinde bir hata verir.

2. Şimdi, e-Ticaret web sitenizin, 'Şimdi Gönder' düğmesinin yanı sıra, ziyaretçilerin e-posta adreslerini yakalamak için bir metin giriş kutusu gösteren bir kayıt akışı olduğunu hayal edin. Metin giriş kutusunun görünümünde ve izleniminde değişiklik yaptığınızda, onunla ilişkili web sitesinin stil bileşenleri değişir. VWO'nun Görsel Düzenleyicisi, uygulanan en son değişikliklerin kullanıcıların gördüğü gibi olmasını sağlar. Bir SPA'daki bir form alanında nasıl değişiklik yapabileceğinizi izleyin ve varyasyon için örneklenen ziyaretçilerin kontrolü görmek yerine bu değişiklikleri görmesini sağlayın.

Tek Sayfa Başvurunuz için VWO nasıl kullanılır?

SPA'nız için VWO'yu kullanmak için, web sitenizin baş bölümüne VWO SmartCode'u eklemeniz ve SPA web siteleri için varsayılan desteğin keyfini çıkarmanız yeterlidir.

Bu kadar basit entegrasyon ile hemen başlayabilirsiniz. Ücretsiz deneme için kaydolun, VWO'nun yeteneklerini keşfedin veya ürün uzmanlarımızdan bir demo talep edin. Ayrıca en son, heyecan verici ürün güncellemelerimiz hakkında daha fazla bilgi edinebilirsiniz.