A/B Testlerini Tek Sayfa Uygulamalarında (SPA) Çalıştırmak için En İyi Uygulamalar

Bu makale, Tek Sayfa Uygulamalarında A/B Testi serisinin 2. bölümüdür.

1. bölümde, tek sayfalı uygulama (SPA) kavramını tanıttık, neden popülaritesinin arttığını gösterdik ve tek sayfalı uygulamalarda kullanabileceğiniz en iyi 10 A/B test platformuna baktık.

Ancak SPA'larda A/B testleri yapmak, işleyiş biçimleri nedeniyle biraz zor olabilir. Bu makalede, size bir SPA'da nasıl deneme çalıştıracağınız ve izlenecek en iyi uygulamalar hakkında uygulamalı tavsiyeler vereceğiz.

SPA Çerçevelerinin Evrimi

SPA'lar yeni bir konsept değil.

2002 tarihli bir patent, SPA'nın çağdaş versiyonuna benzer bir teknolojiyi tanımlamaktadır.

Ancak 2006 yılından itibaren ağ standardı olarak kullanılan AJAX tekniği, uygulamasını kolaylaştırmıştır. Çeşitli istemci tarafı teknolojileri kullanarak eşzamansız web uygulamaları oluşturmaya yönelik bir dizi stratejidir. Yazılım, AJAX sayesinde sayfanın mevcut durumunu veya içerik görüntüleme modunu değiştirmeden ve böylece kullanıcının deneyimine müdahale etmeden arka planda sunucudan veri gönderip alabilir.

AJAX'ın tanıtılması ise SPA'nın benimsenmesinde bir dönüm noktası değildi.

SPA'ların popülaritesindeki artış, son yıllarda ön yüzün hızlı büyümesi ve UX'in artan önemi ile beslenen daha büyük bir eğilimin parçasıdır.

SPA'lar ilk olarak Java uygulamaları veya Flash programları ile "saf" JavaScript veya jQuery kitaplıkları kullanılarak oluşturuldu.

Ancak, tümü nispeten yeni JavaScript çerçeveleri olan Angular.js, React.js ve Vue.js gibi ön uç çerçeveler, geliştirmelerine yardımcı oldu.

SPA Mimarisinin Arkasındaki Teknolojiler Nelerdir?

SPA, esasen HTML5 ve CSS3 destekli bir JavaScript çerçevesidir.

Ancak, bu bileşenleri kullanarak, geliştirme dünyasında birkaç farklı kitaplık ve çerçeve ortaya çıkmış ve benimsenmiştir:

1. Açısal

Google tarafından geliştirilen Angular, kullanımı ayrıntılı belgelere sahip ancak dik bir öğrenme eğrisi olan 3 çerçevenin en olgun ve en eskisidir.

Orijinal bir Model Görünüm Denetleyicisi (MVC) mimarisi ile gömülüdür ancak çoğunlukla birden fazla geliştiricinin aynı uygulama bölümünde ayrı ayrı çalışmasına izin veren bir MVVM (Model-View-ViewModel) kullanır. Yeni sürümlere güncelleme ile ilgili bazı geçiş sorunları olabilir, ancak Angular, ölçeklendirme sırasında en fazla güvenilirliğe sahiptir ve büyük, karmaşık projeler için mükemmeldir.

TypeScript nedeniyle Angular, büyük geliştirici ekipleri için harika bir seçimdir ve bazı şirketler bu teknolojiyi diğer ürünlerinde zaten kullanmaktadır.

GitHub'da, çok sayıda katkıda bulunan, yerleşik, olgun bir çerçevedir.

Google ve Google Drive ve Gmail gibi ürünleri ile Wix, Angular for SPA'ların kullanıcıları arasındadır.

2. React.js

React, Facebook tarafından geliştirildi ve açık kaynak haline getirildi. Öncelikle kullanıcı arayüzleri (Facebook, WhatsApp ve Instagram) oluşturmak için kullanıldı.

Hafif kod boyutu ve diğer çerçevelerle sorunsuz bir şekilde bütünleşme yeteneği nedeniyle oldukça popülerdir. Ayrıca sürümler arasında geçiş yapmak için basit bir yöntemi vardır. (Genellikle tek tıkla geçiş).

Uygulama bileşenlerinin durumunu yönetmek için sıklıkla Redux ile birlikte kullanılır. Uber, ürünlerinde React.js teknolojisini de kullanır.

React, JavaScript ön uç çerçevelerine yeni başlayanların yanı sıra yeni başlayanlar ve çevik geliştiriciler için iyi bir seçimdir. Ek olarak, bu JavaScript kitaplığı, geniş bir ortama sahip bir proje üzerinde çalışırken gerçekten yararlı olan çeşitli diğer çerçeveler ve teknolojilerle değerli entegrasyon seçenekleri sunar. Tüm SPA çerçeveleri arasında, geliştiricilerin olası sorunları gidermelerine yardımcı olan GitHub'a en fazla katkıyı React sağlar.

3 çerçevenin en kolay öğrenme eğrisine sahiptir ve en çok, çok fazla ölçeklenebilirlik gerektiren kısa teslim tarihine sahip projeler için kullanılır.

3. Vue.js

Vue.js, Facebook veya Google gibi büyük bir şirkete ait değil, ancak özellikle Asya'da yeni kullanıcılarla hala hız kazanıyor. Eski bir Google çalışanı olan Evan You tarafından 2014 yılında kurulmuş olan yukarıdaki SPA çerçevelerinin en yenisidir. Pek çok belge genellikle Çince'dir, ancak hala orada eğitim kaynakları var.

Çerçeve çok hafiftir ve basitçe yüksek performanslı uygulamalar oluşturmak için kullanılabilir.

Çoğu geliştirici için, bu çerçevelerin herhangi birinde oluşturma ile ilgili önemli bir sorun yoktur, karar gerçekten her birinin ana özelliklerine bağlıdır.

Vue.js artık Baidu, GitLab ve Alibaba gibi kuruluşlar tarafından ihtiyaçları için kullanılıyor.

Tek Sayfa Uygulamaları Nasıl Çalışır?

SPA'lar basit bir tasarıma sahiptir. Hem istemci tarafı hem de sunucu tarafı işleme teknolojileri kullanılır.

SPA dışındaki bir web sitesinde, tarayıcınıza bir URL girdiğinizde, tarayıcı isteği bir sunucuya gönderir ve yanıt olarak bir HTML sayfası alır.

Bir SPA web sitesinde, sunucu yalnızca ilk istekte HTML belgesini ve sonraki isteklerde JSON verilerini sunar. Bu, bir SPA'nın tüm web sitesini yeniden yüklemek yerine mevcut sayfanın içeriğini yeniden yazacağını gösterir.

Özetle, bir SPA şu şekilde çalışır:

1. İstemci önce sunucuyla bir bağlantı kurar ve öncelikle HTML kodu, CSS ve uygulama mantığını çalıştırmak için gereken tüm komut dosyalarını içeren bir JavaScript paketinden oluşan sayfa içeriğini alır.
2. Bir kullanıcının eylemi, ilgili JavaScript(ler)in yürütülmesini etkinleştirir ve ardından sunucuya AJAX isteklerinde bulunur. Veriler genellikle JSON biçimindedir ve tam bir web sayfası yenilemesi gerektirmez.

Tamamen yeni bir sayfa başlatan bir tarayıcının normal tekniği yerine, Tek Sayfa Uygulaması, mevcut web sayfalarını web sunucusundan yeni verilerle zorla değiştirerek kullanıcılarla etkileşime girer. Tarayıcı, gerekli HTML, JavaScript ve CSS kodunu veya diğer uygun kaynakları alır ve gerektiğinde bunları sayfalara ekler.

Web uygulamasında farklı mantıksal sayfaların gezilebilirliğini ve algılanmasını sağlamak için HTML5 geçmiş API'si veya konum karması kullanılabilse de, işlem sırasında sayfa hiçbir zaman yeniden yüklenmez ve kontrolü başka bir sayfaya aktarmaz.

Tek Sayfa Uygulamasının bir örneğini çalışırken görmek istiyorsanız, bu bağlantıya gidin ve ana sayfaya, en son kursların listesine ve üst menüye tıklayın. Bunu yaptığınızda, sayfanın tamamen yeniden yüklenmediğini, kullanıcı uygulamada hareket ettikçe kablo üzerinden yalnızca yeni verilerin gönderildiğini fark edeceksiniz.

Bu bir SPA örneğidir.

SPA'lar En Çok Kimler İçin Uygundur?

SPA'ların faydaları nedeniyle, artık birçok durumda tercih edilen çözümdür.

Performansın ve tatmin edici bir kullanıcı deneyiminin içerikten daha önemli olduğu çeşitli web teknolojilerini içeren projelerde başarılıdırlar.

SPA'ları kullanan birçok büyük oyuncu var. Facebook, Gmail, Google Haritalar, Netflix ve Paypal, bu tür teknolojinin en belirgin örneklerinden bazılarıdır (aşağıya bakın).

SPA'larda A/B Testi Neden Zor?

Her üç çerçeve de – React.js, Angular.js ve Vue.js – JavaScript geliştiricileri arasında çok popülerdir çünkü daha iyi kullanıcı deneyimleri ve daha yüksek dönüşüm oranları yaratan karmaşık kullanıcı arayüzlerinin geliştirilmesine olanak tanırlar.

Geliştiriciler için çok arzu edilirler çünkü

• Sayfayı yenilemek gerekli değil
• Sayfa yükleme hızları daha yüksektir
• Etkileşimler zengin ve akıcıdır
• Veri aktarımları azalır
• Yeniden kullanılabilir parçalar daha hızlı geliştirme sağlar
• Geliştirici topluluğu iyi kurulmuş

Ayrıca, yeni bir SPA'ya başlayan herkes için başvurulacak kaynaktır.

Ancak, önemli bir dezavantaj vardır: Bu çerçevelerin çalışma şekli nedeniyle, istemci tarafı A/B test araçları düzgün çalışmakta zorlanır .

Bir kişi SPA'daki bir web sayfasına göz attığında , URL de dahil olmak üzere sayfa yenilenmez . Sayfanın durumu, her kullanıcı etkileşimine göre değişir (örneğin, ekranda görünen farklı öğeler).

A/B test araçları normalde ilk sayfa yükleme sırasında yalnızca bir kez ayarlama yaptığından, bu sonraki etkileşimler dikkate alınmaz.

İşte iki yaygın senaryo:

1. SPA'nızda sayfa görüntülemeleri etkinleştirdiyseniz, biri bir URL'yi ziyaret ettiğinde bir sayfa görüntüleme alırsınız, ancak sayfa görüntülemelerin etkinleştirildiği farklı bir sayfaya göz atarsa ​​ikinci bir sayfa görüntüleme almazsınız. Bunun nedeni, malzemenin yeni bir sayfa yerine mevcut sayfaya yüklenmesidir.
2. Bir etkinliği belirli bir URL ile sınırlamaya çalışırsanız aynı sorunla karşılaşırsınız. A/B test aracı, kullanıcı farklı bir sayfada olduğunu düşünse bile, ilk yüklendiği sayfada kaldığına "inanacaktır". Parçalar sitenin içine ve dışına taşındığından, tıklamaları veya diğer olayları izlemede zorluk olabilir.

Deneyimleri oluşturmak için, istemci tarafı A/B test yazılımı ve kişiselleştirme platformları, tam sayfa yüklemelerine dayanır.

React, Angular veya Vue gibi SPA çerçeveleri kullanılırken bu kavram bulunmadığından, sayfaya yeni içeriğin eklenip eklenmediğini veya mevcut içeriğin durumunun değişip değişmediğini ve daha da önemlisi, uyarlanmış içeriğin ne zaman enjekte edileceğini belirlemek daha zor hale gelir.

Bu nedenle, A/B test araçları, ziyaretçinin bir ürün listesine, ayrıntıya veya alışveriş sepeti sayfasına gelip gelmediği ve hangi noktada yeni malzemenin sağlanması gerektiği gibi bağlamını tanıyabilmelidir.

Bu, teknoloji ekibinin modülerleştirilmiş React SPA veya Angular SPA bileşenlerini değiştirmenin yanı sıra bu bileşenleri etkileyen deneyimleri gerçek zamanlı olarak güncelleme konusunda sürekli bilgi sahibi olması gerektiği anlamına gelir.

Örneğin, React.js'deki her kullanıcı etkileşimi, A/B test çözümü tarafından yapılan tüm değişiklikleri silerek, bir veya daha fazla UI öğesinin yenilenmesine neden olur.

SPA'larda İstemci Tarafı Testi ve Sunucu Tarafı Testi

Bir SPA'da A/B testi söz konusu olduğunda iki seçenek vardır:

1. Test etmek istediğiniz uygulamanın çeşitli "durumlarını" yalıtmak, ardından bunları her bir "durum" görüntülendiğinde uygun değişiklikleri yapmak için bir API çağrılacak şekilde ayarlamak. Buna koşullu etkinleştirme denir ve istemci tarafında yapılır .

Bazı "durumlar" örnekleri, bir abonelik formunun gösterilmesini, bir arama sonuçları listesinin yüklenmesini vb. içerir.

2. Değişikliklerin sunucu tarafında sabit kodlanması veya her yeni deneyim için özel bir dağıtım.

Bu seçeneklerin her ikisi de kullanılan SPA çerçevesinden etkilenir. Bu nedenle, tahmin edebileceğiniz gibi, iyi çalışmak için teknik ekip ve pazarlamacılar arasında çok fazla işbirliği gerekiyor.

Şimdi bu seçeneklerin her ikisini de gözden geçirelim ve başarılı olmak için ekiplerin ne yapması gerektiğini görelim.

İstemci Tarafında Koşullu Aktivasyon

Yine de bir SPA uygulamasında istemci tarafı testi yapmanız gerekiyorsa bir geçici çözüm vardır.

Test komut dosyalarının yalnızca uygulama istenen duruma ulaştığında yürütülmesini sağlamak için web geliştiricileri, koşullu etkinleştirme modu adı verilen bir özelliği kullanabilir.

Koşullu etkinleştirmeye aşina değilseniz, kavraması basit bir kavramdır.

Koşullu etkinleştirme, özünde, bir denemenin ne zaman etkinleştirilmesi gerektiğini, standart bir sayfa yenileme yöntemi dışında tanımlama yeteneği verir.

Bu, biraz JavaScript yazarak gerçekleştirilebilir. Bunu yapmanın iki yolu vardır.

1. Yoklama İşlevi

Yoklama işlevi, koşullu etkinleştirmeyi kullanmanın en temel yoludur. İşlev, belirli bir öğe görünene kadar her 50 ms'de bir sayfayı tarar - bu bir modal, div veya hatta tüm sayfa olabilir.

Öğe göründüğünde deney başlar.

A/B test platformu, yoklama işlevinin aramasını istediğiniz öğeye bağlı olarak değiştirmeniz için birkaç JavaScript satırı oluşturur.

İşlev TRUE olarak değerlendirdiğinde deney etkinleştirilir.

2. Geri Arama İşlevi

Geri arama işlevinin yürütülmesi, yoklama işlevininkine benzer, ancak biraz esneklik katar.

Bu işlev, istediğiniz herhangi bir JavaScript koşulunu girmenize ve eğer DOĞRU olarak değerlendirilirse denemeyi başlatmanıza olanak tanır.

Yoklama işlevi, belirli bir öğenin olup olmadığını görmek için sürekli olarak sayfaya ping gönderirken, geri arama işlevi daha pasiftir ve bir olay işleyicisine dayanır.

Sunucu Tarafı Testi

Sunucu tarafı testi yaptığınızda tarayıcı düzeyinde herhangi bir değişiklik yapılmaz. Bunun yerine, deneme varyasyon parametreleri ("Kullanıcı 1, Varyasyon A'yı görür") sunucu düzeyinde belirlenir ve bir servis sağlayıcı aracılığıyla doğrudan JavaScript uygulamasına bağlanır, bu da statik sınırların ötesine geçen daha karmaşık, dinamik içeriğin test edilmesini kolaylaştırır. web sitesinin kullanıcı arayüzü.

Örneğin, çoğunlukla SPA olan sosyal medya uygulamalarını ele alalım. Bunları denemek için ön uç istemci tarafı testi kullanılabilse de, içerdiği dinamik içerik nedeniyle çok daha karmaşıktır, bu nedenle sunucu tarafı testine geçmek süreci çok daha kolay hale getirir.

SPA'larda A/B Testi Örnekleri

Tek sayfalı uygulamalarda karşılaşabileceğiniz bazı gerçek dünyadaki A/B testi örnekleri nelerdir?

Açılış Sayfasındaki Bir Resmi Değiştirme

Belirli bir sayfaya ulaşan hedef kitlenin %50'sine dinamik bir resim göstermek için bir SPA üzerinde bir deneme ayarlamanız gerektiğini varsayalım. Bu örnekte kullanılan SPA çerçevesi, sayfanın değiştiği ve resimlerin düzenli olarak değiştirildiği anlamına gelen React.js'dir.

Varyant görüntüsünü görüntülerseniz, titreme sorunları meydana gelebilir, bu da orijinal görüntü-değişken görüntü-orijinal görüntü dizisinin gözlemleneceği anlamına gelir.

Bu sorun, belirli açılış sayfası yüklendiğinde yoklama tetiklenerek tamamen önlenebilir.

CTA'nın altındaki Ek Kopyayı Test Etme

Angular.js ile oluşturulmuş bir SPA sitesindeki başka bir deney, hedef kitlenin %30'una ana CTA'nın altında ek bir metin satırı göstermeyi içerebilir.

Bu örnekte, Sürüm A, ana CTA'nın altında ek kopya satırını gösterirken, Sürüm B göstermeyecektir. Trafiğimizin %30'unu Sürüm A'ya ve %70'ini Sürüm B'ye göndereceğiz ve ardından dönüşüm oranlarında önemli bir fark olup olmadığını görmek için sonuçları karşılaştıracağız.

Web sitesi Angular.js ile oluşturulduğundan, öğeler düzenli olarak değiştirilir. Buradaki geri arama olayı, varyanttaki değişiklikleri görüntülememize yardımcı olabilir.

Hediye Çeki Görüntüleme

Bu örnekte, bir kullanıcı premium bir markanın ürününü sepetine eklediğinde, özel bir hediye çekinin görüntülenmesini istediğimizi varsayalım. Kullanıcı, premium ürünü sepetten çıkardığında, kupon sayfadan kaydırılır.

1. Burada olması gereken, bir kullanıcı gerekli eylemi gerçekleştirdiğinde manuel aktivasyon olayının gönderilmesi gerektiğidir. Bu olay sonucunda deney etkinleştirilecektir.
2. Kullanıcı premium ürünü sepetten çıkardığında, denemeyi devre dışı bırakarak bir etkinleştirme olayı başlatılmalıdır.
3. Tüketici tekrar eklerse premium ürünü göstermek için denemenin yeniden etkinleştirilmesi gerekir.

'Şimdi Satın Al' CTA'sının altında Kısa Açıklama gösteriliyor

'Şimdi Satın Al' CTA düğmesinin altında benzersiz bir etiket satırı görüntülemek istiyorsanız, geçmiş değişikliğinde bir etkinleştirme olayına basarsanız denemeyi etkinleştirebilirsiniz.

Bunun nedeni, 'Şimdi Satın Al' CTA düğmesini içeren sayfanın ilk başta yüklenmemesidir.

Convert SPA'larda Test Etme Sorununu Nasıl Atladı?

SPA'lar üzerindeki deneylerin diğer deneylerden farklı şekilde ele alınması gerekir. Dönüştürme komut dosyası, bir web sitesi ziyaretçisinin gezindiği URL'yi okuyamadığından, standart yöntemlerle denemeleri tetikleyemez.

İşte bunun yerine nasıl yapıldığı.

Bu makalede açıklandığı gibi Dönüştürme izleme kodunu yükleyerek başlayın.

Ardından, aşağıdaki 3 yöntemden birini uygulayın:

1. Anketi Tetikleme

Belirtildiği gibi, yoklama, söz konusu deneyimin tetiklenmesi gerekip gerekmediğini belirlemek için deneyim koşullarının test edildiği süreçtir.

Bu, testi çalıştırmak için ziyaretçi URL'sini, Kitle Koşullarını veya JavaScript koşullarını izlemeyi içerir.

Yoklama genellikle yeni bir sayfa yüklendiğinde Convert tarafından tetiklenir. SPA'larda genellikle web uygulamasına yeni sayfa yüklenmez.

Bu durumda, yoklamayı başlatmak için aşağıdaki koda ihtiyacınız olacaktır:

 window._conv_q = _conv_q || [];
window._conv_q.push(["run","true"]);

Yukarıdaki kodu tetiklemek için SPA'nızdaki en iyi olayın ne olacağını belirlemelisiniz. Proje Ayarları > Global Proje JavaScript bölümüne eklenmesi gereken örnek kod.

 konsol.log('Global Proje Javascript'inde SPA/Dönüştürme Kodu yürütüldü');
if (!window.globalExecutedTs) {
window.globalExecutedTs = true;
var oldPushState = window.history.pushState;
window.history.pushState = işlev(veri) {
denemek {
setTimeout(işlev() {
oldPushState.apply(bu, argümanlar);
konsol.log('pushstate'den dönüştürme etkinleştirildi');
window._conv_q = _conv_q || [];
window._conv_q.push(["çalıştır", "doğru"]);
}, 0);
} yakalama (e) {
konsol.log(e);
}
};
window.onpopstate = işlev(olay) {
setTimeout(işlev() {
konsol.log('popstate'den etkinleştirilen dönüştürme');
window._conv_q = _conv_q || [];
window._conv_q.push(["çalıştır", "doğru"]);
}, 0);
};
}

2. Site Alanında JavaScript Koşullarını Kullanın

Dönüştürme komut dosyası bir SPA'daki URL değişikliklerini okuyamadığından, bir denemeyi tetiklemek için URL eşleşme koşulu yerine bir JavaScript koşulu kullanmanız gerekir.

Aşağıdaki makalede bunun nasıl yapılacağına dair ayrıntılı bir açıklama bulun.

3. Bir Deneyi Manuel Olarak Etkinleştirin

Belirli bir akışın gerçekleştiğini belirledikten sonra denemeleri manuel olarak tetikleyebilirsiniz. Bu yöntemi kullanarak, Site Alanı ve Kitle Koşulları, kodla yoklama tetiklendikten sonra test edilmeye devam edecektir. Bir denemeyi manuel olarak etkinleştirme hakkında daha ayrıntılı bilgi için bu makaleye bakın.

Yukarıdaki 3 yöntemle, bir SPA uygulamasında deneyleri doğru anda tetikleyebilmelisiniz.

Dönüştürme SPA'larda Titreme Riskini Artırır mı?

Kısa cevap, hayır.

Tüm SPA çerçeveleri Convert'in titreme önleyici teknolojisiyle uyumludur. Convert, dinamik sayfa yeniden yüklemeleri sırasında bile, deneme değişikliklerinin SPA'nızda uygun zamanda uygulanmasını veya yeniden uygulanmasını sağlamak için arka planda SmartInsert ^TM teknolojisinden yararlanır.

Titreşim etkisi hakkında daha fazla bilgi edinmek ve neden ne pahasına olursa olsun bundan kaçınmanız gerektiğine ilişkin teknik incelememizi okumanızı öneririz.

Tek Sayfalı Uygulama Sitelerinde A/B Testi Yaparken Sık Karşılaşılan Sorunlar

Gördüğünüz gibi SPA sitelerinde testler yaparken akılda tutulması gereken birkaç şey var. Kullanılan çerçeveyi, araç test yöntemini ve tetik olayını ele aldıktan sonra, ana sorun genellikle tarayıcıda yeni bir sayfa veya görünüm görüntülendiğinde test öğesinin yeniden yüklenmemesidir.

Bu birkaç şeyden kaynaklanabilir:

1. İlk Sayfa Görünümünde Görünen, Sonrakilerde Görünmeyen Test Değişiklikleri

Bazen görüntülemeyi amaçladığınız değişiklik, tarayıcınıza yüklediğiniz ilk sayfada gösterilir, sonraki görünümlerde gösterilmez. Bunun nedeni, Dönüştür komut dosyasının deneyleri değerlendiren ve etkinleştiren bölümünün sitenin yeni bir görünümüne veya "sayfasına" erişirken çalışmamasıdır.

2. Görsel Düzenleyicide Görünen Değişiklikler Dışında Önizlenirken Görünmüyor

Bazen Görsel Düzenleyici ile yapılan değişikliklerin düzenleyici önizlemesinin dışında görünmemesi olabilir.

Çoğu SPA çerçevesi, DOM API'sini kullanmaz ve bunun yerine değişiklikleri sayfada dağıtmak için kendi yöntemlerini kullanır. Bu, SPA tarafından güncellendiğinde DOM'nin senkronizasyondan çıkmasına neden olur. Bu, React ve Angular'da yaygındır ve Jquery kodunda bulunan CSS seçicilerinin çalışmamasına neden olur.

3. Sonraki 'Görünümlerde' Değişiklikler Görünmeye Devam Ediyor

Bu senaryoda, doğru (sayfa) görünümünde bir deneme değişikliği görüntülenir. Ancak, yeni (sayfalar) görünümleri ziyaret ederken değişiklik ortadan kalkmaz. Bunun nedeni, bir SPA sitesinde, yeni bir sayfa yeniden yüklenirken değişikliklerin kaldırılmamasıdır.

Dönüştür komut dosyası, deneme koşulları, yoklama çağrıldığında değişikliklerin dağıtıldığı sonraki görünümle eşleşmediğinde eklenen kodu kaldırır. Ancak bu yeterli değildir, çünkü sayfanın deneme kodu kaldırıldığında bile jquery değişiklikleri kaybolmaz.

Denemenin getirdiği değişiklikleri geri alan kodu çalıştırmanız gerekecek.

Sıra sizde: SPA'nızı Optimize Ederken Bu Hatalardan Kaçının

Bilgilerin nasıl işlendiği ve sağlandığı konusundaki ilerlemeler nedeniyle, SPA'lar daha yaygın olarak kabul edilebilir hale gelebilir, ancak bu yeni teknolojinin normalde daha klasik kurulumlarla çalışan optimizasyon ve deneme platformları ile entegre edilirken sorunları olduğunu unutmamak çok önemlidir.

Bu makalenin, SPA'ların çeşitli bileşenlerini ve ziyaretçilere daha hızlı, daha sezgisel ve kişiselleştirilmiş dijital deneyimler sağlama arayışınızda bu engellerin üstesinden gelmek için bazı çözümleri kapsadığını umuyoruz.

Ancak, kaynak kodunu değiştirmeden dinamik özelleştirme için UI bileşenlerindeki ve sayfa türlerindeki değişiklikleri algılama yeteneği gibi SPA'lar için kesintisiz destek sağlayabilen bir çözüm sağlayıcıyla çalışmak daha iyi olacaktır. Aşağıdaki kutudaki gibi.