Görsel Editör

Önemli

Deney türü bazı sitelerde çalışmayabilir.

Bu, sunucu Cross-Origin-Opener-Policy başlığını same-origin değeriyle ayarlarsa oluşur. Bu ayar, Yandex Metrica arayüzü ile site arasında veri alışverişini yasaklar.

Şu anda bu teknik sınırlamanın farklı bir çözümü bulunmamaktadır.

Görsel Editör, sitenin sayfasında değişiklik yapmanıza olanak tanır:

sayfa metni;
görüntüler;
bağlantılar;
düğmeler gibi öğelerin adları;
background dahil olmak üzere metnin veya öğenin rengi;
CSS stilleri;
HTML;
JavaScript.

Editör web sitenize gömülür ve öğelerin görünümünü değiştirmenize olanak tanır. Tüm değişiklikler gerçek zamanlı olarak uygulanır. Değişikliklerinizi kaydedip deneyi çalıştırdığınızda, editörde yaptığınız düzenlemeler deneye katılan site ziyaretçileri tarafından görülebilecektir.

Bu tür bir deneyde Varioqub, siteye bağlantı sırasında eklenen exp.js’yi kullanarak değişiklikler yapar.

Kullanım örnekleri

Tek sayfa sitenizdeki Tıklama Haritasını analiz ettikten sonra, ziyaretçilerin genellikle bağlantı içermeyen metinlere tıkladığını fark ettiniz. Bir öğeyi tıklanabilir hale getirmek ve bunun dönüşümü ve görüş derinliğini ne kadar artıracağını görmek istiyorum.
Bir ürün satıyorsunuz, kesin fiyatı yöneticiyle yapılan bir telefon görüşmesinden sonra belirleniyor. Karta “X ruble üstü” minimum fiyat eklerseniz hunideki dönüşümün ve ortalama fişin ne kadar artacağını kontrol etmek mi istiyorsunuz.

Görsel Editör ve sınırlamalar hakkında daha fazla bilgi

Bir öğedeki tüm değişiklikler sayfadaki seçicisine bağlıdır. Düzenleyicideki değişiklikleri kaydettikten sonra sitenin düzenini değiştirirseniz, kaydedilen seçicinin yanında başka bir öğe olabilir ve değişiklikler ona uygulanır.

Yapılan değişiklikler web sitesi ziyaretçisinin tarayıcısında uygulanır. Ziyaretçinin tarafında çalışan kod, görsel editörde değiştirilen sayfanın bir bölümünü yeniden çizerse, değişiklikler kaybolur – ziyaretçi bunları görmez.

Bu durumda, görsel editör yerine Kod içindeki bayraklar seçeneğini kullanmanızı öneririz. En yaygın kütüphanelere bağlantı mevcuttur.

Deney türü

Görsel Editör öğesini seçin ve deney için öğeleri değiştirmek istediğiniz sayfanın URL’sini belirtin.

Sayfa seçeneklerinin ayarlanması

Metin veya biçimlendirme için birkaç seçeneği kontrol etmeniz gerekiyorsa, Seçenek Ekle düğmesine basın. Ayar için başka bir deneysel seçenek oluşacaktır. Seçenekler deney sırasında birbirinin yerini alacaklar.
Sayfa seçeneğinde değişiklik yapmak için Düzenle öğesine tıklayın. Görsel Editör bloğunda belirttiğiniz sayfa açılacaktır.
Düzenleme modunu seçin:
Basic

CSS

HTML

JS
Bir öğenin özellik kümesini değiştirmenizi sağlar:
- Elemanın CSS özellikleri (background-colour, color, font-size, display);
- bağlantı adresi;
- görüntü adresi;
- ekleri olmayan metin öğelerinde metin.
Öğenin herhangi bir CSS özelliğini ayarlamanızı sağlar. En fazla 2000 karakter girilebilir.

Bir öğeye HTML kodu eklemenizi veya değiştirmenizi sağlar. En fazla 2000 karakter girilebilir.
JavaScript kodunun bir web sitesindeki bir sayfaya uygulanmasına izin verir. Kodunuz en fazla 2000 karakter içerebilir.

Modun görsel editörde görünmesini sağlamak için:
1. Deneyleri JavaScript ve setConfig yöntemini kullanarak bağlayın.
2. setConfig yönteminde, enableVisual: true ve enableJS: true değerlerini geçirin.
Düzenleme sırasında, kodunuz şu formdaki bir fonksiyona yerleştirilecektir
```
function (element) {
    // kodunuz
}
```
Böyle bir deney uygulandığında, bu özelliğe sahip JavaScript kodu sayfaya eklenecektir. Site, nonce olmadan JavaScript yürütülmesini yasaklayan Content Security Policy teknolojisini kullanıyorsa, setConfig yönteminde, komut dosyasının imzalanacağı bir nonce iletin.
Görsel Editör Ayarları ^β
Ayarlara gitmek için düğmesine basın.

Kişiselleştirebilirsiniz:

Tıklayarak düzenleme

Bu seçenek etkinleştirildiğinde, sayfadaki öğeleri fare tıklamasıyla seçerek düzenleyebilirsiniz. Bunu yaptığınızda öğeler devre dışı kalır. Sayfa ile etkileşime geçmek için bu seçeneği kapatın.

Seçicideki öğenin ID’si

ID – sayfadaki öğenin benzersiz tanımlayıcısıdır. Öğeye giden yolu almak için gereklidir. Sitenizde ID bir sayfa her açıldığında değişiyorsa veya benzersiz değilse, bu seçeneği devre dışı bırakmanızı öneririz.
Düğme, metin veya arka plan gibi değiştirmek istediğiniz öğeyi seçin.
Değişiklikleri yapın ve Kaydet düğmesine basın.

Bir deney kurarken bir bloğun görünür kısmının üst öğesini değiştirmek için bloklar arasında taşı seçeneğini kullanın.

Aynı öğe sitenin birkaç sayfasında kullanılıyorsa, öğeyi sayfalardan birinde düzenleyebilirsiniz. Varioqub, öğenin tüm sayfalarda aynı seçiciye sahip olması koşuluyla, URL filtresini karşılayan tüm sayfalarda öğedeki değişiklikleri uygulayacaktır.

Değişiklikleri tüm sayfalara uygulamak istemiyorsanız, URL filtreleri alanında değişikliklerin uygulanmasını istediğiniz sayfaları belirtin. Deneyi Kontrol Et bloğu, girilen sayfa adresinin URL filtreleri alanında belirtilen koşullarla eşleşip eşleşmediğini belirlemenize yardımcı olur; eşleşiyorsa simgesi görüntülenir.

GitHub’daki görsel editörü kullanarak deneyleri bağlama ve oluşturma örneklerine bakın.