Optimizely & Visual Web Sitesi Optimize Edici görsel DOM düzenleme işlemlerini nasıl yapar?

Question

Optimize Edici & Visual Web Sitesi Optimize Edici, kullanıcıların basit A ​​/ B Testlerini gerçekleştirmelerine izin veren iki harika site.

Yaptıkları en havalı şeylerden biri görsel DOM düzenlemesidir. Bir web sayfasını görsel olarak işleyebilir ve değişiklikleri çevrimdışı kaydedebilirsiniz. Değişiklikler daha sonra bir JS yükü üzerinden rastgele bir ziyaretçi sayfası görünümü sırasında uygulanır.

Görsel editörler nasıl çalışır?

Answer 1

Benim adım Pete Koomen ve Optimizely'nin kurucularından biriyim, bu yüzden işlerin bizim tarafımızda nasıl çalıştığını konuşabiliyorum. http://www.mypage.com'da bir deneme oluşturmak istediğinizi varsayalım.

1. Sen (isteğe bağlıdır) asla böyle görünüyor sayfasına sizin Optimizely hesap pasajı ekleyerek başlayıp olabilir değiştirir: iç

   <script src="//cdn.optimizely.com/js/XXXXXX.js"></script>

2. Optimizely Editör yükler http://www.mypage.com iframe ve window.postMessage sayfasını kullanarak sayfa ile iletişim kurar. Bu yalnızca, bu sayfada zaten yukarıdaki gibi bir pasaj varsa çalışır. Durum böyle değilse, iframe'd sayfasından bir mesaj beklenirken editör zaman aşımına uğrar ve pasajı sayfaya yerleştiren bir proxy üzerinden tekrar yükler. Bu yükleme işlemi, editörün sayfalar ile çalışmasını sağlar. bir hesap snippet'i içerir. b. Bir hesap snippet'i içermez veya c. Güvenlik duvarının arkasına oturun (c. snippet'i gerektirir.)

3. Kullanıcımız, bu noktada, metni değiştirmek, resimleri değiştirmek veya etrafındaki öğeleri taşımak gibi değişiklikler yapabilir.

   $j("img#hplogo").css({"width":254, "height":112});
|__IDENTIFIER__||____________ACTION______________|

4. Yani, bir şekilde bir sayfanın "değişim" düşünebilirsiniz: editörü ile yapılan her değişiklik aşağıdaki gibi görünür JavaScript bir çizgi olarak kodlanmış Bu sayfada çalıştırıldığında, istenen varyasyonun görünmesine neden olan JavaScript ifadeleri kümesi. Merak ediyorsanız, bu kodu doğrudan Düzenleme Düzenleyicisi'nin sağ alt köşesindeki "Kodu Düzenle" yi tıklayarak görüntüleyebilir ve düzenleyebilirsiniz.

5. Artık, hesap snippet'inizi bu sayfaya eklediğinizde ve denemenizi başlattığınızda, hesap snippet'inin işaret ettiği JS dosyası, gelen her ziyaretçiyi otomatik olarak koyacaktır ve ardından sayfa yüklenirken ilgili JavaScript'i yürütecektir. .

ziyaretçinin boşanırcasına ve sayfa yükleme sırasında mümkün olduğunca çabuk bu değişiklikleri yürütme gider çok fazla mantık var, ancak bu temel bakış olarak hizmet etmelidir!

Pete