Kişiselleştirme

Kişiselleştirme, siteyi veya tek tek sayfalarını belirli bir kitle için özelleştirmenize olanak tanır: metni, HTML ve CSS’yi, reklam bloklarının görüntüsünü ve biçimlerini değiştirmek. Ayrıca kişiselleştirme, siteye gelen tüm ziyaretçiler için, örneğin bir etkinlik kapsamında tasarımı değiştirmek için de kullanılabilir.

Kişiselleştirmenin deneylerden farkı:

Zaman sınırı yok – yapılan değişiklikler siteye süresiz olarak uygulanabilir;
Değiştirilen parametreler şartlar ve koşullarda belirtilen tüm ziyaretçiler için geçerli olduğundan, varyant ve hedef kitle yoktur;
Kişiselleştirme yapılırken birden fazla varyant olmadığı için metrikler belirlenmez;
Aynı nedenlerden dolayı kişiselleştirmenin örnekleme hesaplayıcısına ihtiyacı yoktur.

Kişiselleştirmeyi bağlama

Varioqub henüz bağlanmadıysa, onu bağlayın. Bunu deneyler için zaten yaptıysanız, kişiselleştirmeyi bağlamak için ek bir ayar gerekmez.

Kişiselleştirme oluşturma

Yandex Metrica’da Varioqub → Kişiselleştirmeler sayfasına geçin.
Kişiselleştirme Oluştur düğmesine tıklayın.
Yeni Kişiselleştirme sayfasında, kişiselleştirmenin adını belirleyin ve bir açıklama ekleyin.

Koşullarını belirleyin:

Süre

Gerekli zaman aralığını belirtin veya süresiz seçeneğini seçin.

Kişiselleştirmeyi Kişiselleştirme sayfasından durdurabilirsiniz: istediğinizin yanındaki üç noktaya basın ve Durdur öğesini seçin.

Uygulama sayfaları

Site alan adını ve URL yolunu protokol (http/https) ve hash (URL’deki # karakteri ve ondan sonraki değer) olmadan belirtin. Örneğin, kişiselleştirmeyi yalnızca ana sayfa için ayarlamak üzere example.com belirtin. Esnek koşullar ayarlamak için özel operatörler kullanın. Bununla birlikte nokta (.) bir operatör olarak kabul edilmez.

Bir satırdaki birden fazla koşul Varioqub tarafından VE/VEYA operatörü ile dikkate alınır.

Operatörlerin kullanım örnekleri	Deneyde neler dikkate alınıyor
`example.com*`	Alan adının tüm sayfaları.
`example.*`	`example` ile başlayan tüm alan adlarının tüm sayfaları.
`example.com/search`	Adreslerinde `search`’ın bulunduğu sitelerin tüm sayfaları.
`example.com/search?`	Satır sonunda karakter içermeyen veya bir karakter içeren sayfaların adresleri. Örneğin: `example.com/search, example.com/search/, example.com/search2`.
`example.com/search+`	Satır sonunda bir veya daha fazla karakter bulunan sayfa adresleri. Örneğin: `example.com/search/, example.com/search2, example.com/search_goods`.

Ayrıca olumsuzluk içeren bir koşul da kullanabilirsiniz – ! operatörü.

URL yapısı hakkında daha fazla bilgi

https://<host>/<path>?<params>#<fragment>

<host> sitenin alan adı.
<path>: Hiyerarşik yapıya sahip olabilen yol. Yapı, "/" karakteri ile belirlenir.
<params>: “?” işaretiyle yoldan ayrılan parametreler bloğu. “GET parametreleri” olarak da adlandırılır.
<fragment> – rastgele içeriğe sahip bir dize. GET parametrelerinden “#” karakteri ile ayrılmıştır. “Hash” olarak da adlandırılır. Kişiselleştirme uygulama sayfaları koşullarda dikkate alınmaz.

GET parametreleri

Kişiselleştirme site sayfalarının yalnızca bir kısmı için gerekliyse, adreslerinde bulunan veya bulunmayan GET parametrelerini belirtin. Esnek koşullar ayarlamak için özel operatörler kullanın. Bununla birlikte nokta (.) bir operatör olarak kabul edilmez.

Varioqub’un birden fazla koşulu aynı anda dikkate alması için, bunları virgülle ayırarak belirtin: aparam=avalue,bparam=bvalue (“VE” operatörü uygulanacaktır). Ayrı koşul blokları “VEYA” operatörü ile birleştirilir.

Parametreler ve değerleri ile kullanılabilecek karakterler:

= – parametre adı ile değeri arasında yer alır, mevcut değilse sadece parametrenin varlığı dikkate alınır. Örnek: param=value
? – sıfır veya bir kez geçen herhangi bir karakteri ifade eder. Örnek: pa?am=va?ue
* – sıfır veya daha fazla kez geçen herhangi bir karakteri ifade eder. Örnek: p*m=v*e
+ – bir veya daha fazla kez geçen herhangi bir karakteri ifade eder. Örnek: p+m=v+e
! – koşulun olumsuzluğunu veya parametrenin deney üzerindeki etkisinden çıkarılması anlamına gelir. Örnek !param=val

Önemli

Olumsuzluk ! anahtarda sadece ilk karakter olarak konur.

Doğru örnek: !param=value.
Yanlış örnekler: param!=value veya param=!value.

Kullanım örnekleri

Kullanım örneği	Deneyde ne dikkate alınıyor
`param`	Değerinden bağımsız olarak sadece parametrenin varlığı.
`param=value`	Parametrenin tam adı ve tam değerinin varlığı.
`!param`	Herhangi bir değere sahip parametrenin yokluğu.
`param=value`	`value` değerine sahip `param` parçasını içeren tüm parametreler.
`!param=value`	`param` parçasını içeren herhangi bir parametrenin değeri `value` değerine eşit olmamalıdır.
`!param=value`	`param` parçasını içeren herhangi bir parametrenin değeri `value` içermemelidir.
`!param`	`param` parçasını içeren parametrenin yokluğu.

Bölge

Bölge, site ziyaretçisinin IP adresine göre belirlenmektedir. Rusya bölge detayları ile, BDT ve kıtalar ülke detayları ile mevcuttur. Seçili bölgeleri hariç tut seçeneği kullanılarak bölgeler eklenebilir veya hariç tutulabilir.

Platform

Akıllı telefonlar, tabletler, masaüstü cihazlar (PC), televizyonlar (TV). Cihaz türü, site ziyaretçisinin User Agent’ine göre belirlenir. Kullanıcıların sitenizi en sık hangi cihazlarla ziyaret ettiğini Yandex Metrica’nın Cihazlar raporunu kullanarak öğrenebilirsiniz.

Kullanıcı ayarları

Not

Sadece Varioqub’un genişletilmiş versiyonunda mevcuttur.

Bu koşulu kullanmak için, sitede, örneğin siteye gelen ziyaretçileri karakterize edebilecek parametrelerin iletimini sağlayın. Müşterinin önemine dair bir işaret veya siteye kayıt olabilir.

Daha sonra Kullanıcı değerleri alanına parametreleri ve değerlerini belirtin – Varioqub bunları tanıyacak ve kişiselleştirme dikkate alacaktır.

Parametreler ve değerleri ile kullanılabilecek karakterler:

= – parametre adı ile değeri arasında yer alır, mevcut değilse sadece parametrenin varlığı dikkate alınır. Örnek: param=value
? – sıfır veya bir kez geçen herhangi bir karakteri ifade eder. Örnek: pa?am=va?ue
* – sıfır veya daha fazla kez geçen herhangi bir karakteri ifade eder. Örnek: p*m=v*e
+ – bir veya daha fazla kez geçen herhangi bir karakteri ifade eder. Örnek: p+m=v+e
! – koşulun olumsuzluğunu veya parametrenin deney üzerindeki etkisinden çıkarılması anlamına gelir. Örnek !param=val

Önemli

Olumsuzluk ! anahtarda sadece ilk karakter olarak konur.

Doğru örnek: !param=value.
Yanlış örnekler: param!=value veya param=!value.

Kullanım örnekleri

Kullanım örneği	Deneyde ne dikkate alınıyor
`param`	Değerinden bağımsız olarak sadece parametrenin varlığı.
`param=value`	Parametrenin tam adı ve tam değerinin varlığı.
`!param`	Herhangi bir değere sahip parametrenin yokluğu.
`param=value`	`value` değerine sahip `param` parçasını içeren tüm parametreler.
`!param=value`	`param` parçasını içeren herhangi bir parametrenin değeri `value` değerine eşit olmamalıdır.
`!param=value`	`param` parçasını içeren herhangi bir parametrenin değeri `value` içermemelidir.
`!param`	`param` parçasını içeren parametrenin yokluğu.

Arama motoru robotlarını hariç tutmak

Kişiselleştirmenin kendilerini tanıtan (User-agent’i biliniyor) arama robotlarına uygulanmasını istemiyorsanız bu koşulu belirtin.

Kişiselleştirme seçenekleri

Birkaç kişiselleştirme seçenekleri mevcuttur:

Görsel Editör. Başlıklar, metinler, düğmeler veya resimler gibi web sitesi öğelerini görsel olarak değiştirmeniz gerektiğinde kullanın.
Yönlendirme bağlantıları. Tek bir sayfanın birden fazla hazır versiyonunu karşılaştırmak, farklı açılış sayfalarını veya birden fazla tasarımı test etmek için kullanın.
Kod içindeki bayraklar. Bir ürün veya sitenin işlevselliğine daha derin bir entegrasyonla her türlü karmaşıklıktaki hipotezleri test etmeniz gerektiğinde kullanın.
Reklam blokları. Bir sayfadaki farklı reklam bloku biçimlerinin yerleşiminin etkinliğini karşılaştırmak için kullanılır.
Widget'lar. Kişiselleştirilmiş teklifler, indirimler içeren bilgi bloklarını koymak veya bize yeni fırsatlar hakkında bilgi vermek için kullanın (sadece Genişletilmiş Varioqub sürümünde kullanılabilir).

Görsel Editö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.

Öğelerini değiştirmek istediğiniz sayfanın URL’sini belirtin.

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. Değişiklikleri 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.

Ayrıntılar için bkz. Görsel editörde çalışma.

Yönlendirme bağlantıları

Bir sayfa veya sitenin bir sürümünü değişikliklerle zaten hazırladıysanız bu türü kullanın. Alan adı olmadan doğrudan bir bağlantı belirtin, örneğin /catalog/page/.

Bu adresin Yandex Metrica sayacının kurulu olduğu alan adını ifade ettiğinden emin olun. Sitenizin bir alt alan adına veya başka bir siteye ait adresler vermeyin.

Birden fazla yönlendirmeyi önlemek için, URL filtresi kurallarını karşılayan bir açılış sayfası kullanmanızı önermiyoruz. Çoklu yönlendirmeler kişiselleştirme kontrolünde yeniden üretilmez.

Kod içindeki bayraklar

Site kodunuza, deneysel değişiklikleri tanımlayan özel bayraklar ekleyin. Sitenin herhangi bir öğesi için kullanılabilirler. Bayrak bir “anahtar-değer” çiftini temsil eder. Örneğin, kişiselleştirme için düğmenin rengini işaretleyebilirsiniz: color=red.

Reklam blokları

Sekme, reklam bloklarının konumu ve biçimiyle kişiselleştirme oluşturmanıza olanak tanır. Bu, reklam bloku kodu (context.js) eklemeden yapılabilir, sadece Varioqub’u bağlamak yeterli (exp.js).

Ayrıntılar için bkz. Reklam blokları.

Widget'lar

Not

Sadece Varioqub’un genişletilmiş versiyonunda mevcuttur.

Sekme, widget ile kişiselleştirme oluşturmanıza olanak tanır. Kullanıcılara indirimlerden, sitenizdeki yeni özelliklerden bahsedin veya kişiselleştirilmiş bir teklif oluşturun. Farklı bilgi kutusu formatları arasından seçim yapılabilir ve bunlar kolayca özelleştirilebilir.

Kullanıcıları istenen sayfaya yönlendirmek için bir bağlantı ekleyin.

Ayarlamanız için aşağıdaki widget türleri mevcuttur:

Köşedeki banner – sayfanın köşesinde küçük bir pencere. İçeriğe müdahale etmez ve her türlü site düzenine uyar.
Köşedeki banner (sınırlı özelleştirme) – sayfanın köşesinde küçük bir pencere, Varioqub’un temel sürümünde de mevcuttur. İçeriğe müdahale etmez ve her türlü site düzenine uyar. Genişletilmiş sürüme sahip köşede banner’ın aksine, stilleri, sayfa kenarı mesafelerini veya z-index özelliğinin değerini değiştirmenize izin vermiyor.
Ekran Genişliğince Banner – animasyonlu açılır pencere. Ekranın üst veya alt kısmına yerleştirilebilir. Kullanıcının dikkatini bağlantıya çekmek istiyorsanız, Dikkat Çek düğme efektini ekleyin.
Tam sayfa banner'ı: Sitedeki en belirgin tam sayfa widget'ı. Böyle bir banner, bağlantıya tıklamak veya pencereyi kapatmak zorunda kalacak olan kullanıcı tarafından kesinlikle fark edilecektir.

Kişiselleştirme türüne bağlı olarak, deneysel sürümde değişiklikler farklı şekillerde yapılır:

Görsel Editör, Yönlendirme bağlantıları, Reklam blokları veya Widget'lar seçilirse, değişiklikler Varioqub tarafından bağlantı sırasında siteye eklenen exp.js yardımıyla yapılır.
Kod içindeki bayraklar türü seçildiğinde, veri işleme aşağıdaki gibidir. Bayrak verilerini hangi noktada almanız gerektiği, sitenizin bilgileri nasıl işlediğine bağlıdır:

Client-Side Rendering
Bu durumda, bayraklar sayfa kodu işlendikten sonra, ancak UI oluşturulmadan önce alınabilir. Ayrıca asenkron bayrak sorgusu kullanabilir ve değeri aldıktan sonra düğmenin rengi değiştirilebilir. Bu durumda ziyaretçi, bayrak değeri uygulandığı anda sayfanın kaynak kodunu görebilir.
Server-Side Rendering
Bu durumda, bayraklar yanıt oluşturulurken alınabilir. Varioqub sitenizi yavaşlatmayacak kadar hızlıdır. Bu durumda aktarılacak olanlar:
- açık olarak ziyaretçinin tanımlayıcısını ve yeni bir tanımlayıcı alındığında (bayraklarla birlikte) bunu HTTP yanıtına kurmak;
- ön uçtaki Yandex Metrica sayacı için teknik veriler ve onları sayacın ilgili alanına kurmak, ayrıntılar için API usersplit bölümüne bakın.

Görsel editörde çalışın

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şiklikleri kaydettikten ve kişiselleştirmeyi başlattıktan sonra, düzenleyicide yaptığınız düzenlemeler, kişiselleştirme hüküm ve koşullarında belirtilen sitenin tüm ziyaretçileri tarafından görülebilir.

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.

Çeşitli düzenleme modları mevcuttur:

Basic

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.

CSS

Öğenin herhangi bir CSS özelliğini ayarlamanızı sağlar. En fazla 2000 karakter girilebilir.

HTML

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:

Deneyleri JavaScript ve setConfig yöntemini kullanarak bağlayın.
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.

Özelleştirilebilir:

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.

Sayfayı değiştirmek için:

Düzenle düğmesine basın. Görsel Editör bloğunda belirttiğiniz sayfa açılacaktır.
Düzenleme modunu seçin.
Düğme, metin veya arka plan gibi değiştirmek istediğiniz öğeyi seçin.

Kişiselleştirmeyi ayarlarken 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.

Değişikliklerin doğrulanması

Değişikliklerin uygulandığını doğrulamak için Değişiklikleri Kontrol Et bloğunda Kontrol Et düğmesine tıklayın. Varioqub tarafından oluşturulan bağlantı kullanılarak web sitesinin kişiselleştirme ayarlarına sahip bir sürümü açılacaktır. Bu bağlantıyı oluşturduktan sonraki 24 saat içinde paylaşabilirsiniz. Tekrar Kontrol Et tuşuna basarsanız, yeni bir bağlantı oluşturulur.

Çoklu kişiselleştirmelerin doğrulanması

Aynı anda birden fazla kişiselleştirmedeki değişiklikleri uygulayabilir ve sayfada nasıl görüneceğini test edebilirsiniz.

Bunu yapmak için

Kişiselleştirmeler listesine gidin: Varioqub → Kişiselleştirmeler.
düğmesinin yanındaki Üç Nokta menüsüne tıklayın.
Kişiselleştirmeleri Kontrol Et düğmesine basın.

Проверка персонализаций

Açılan pencerede

Açılır listede, uygulamak istediğiniz kişiselleştirmeleri işaretleyin.
Kişiselleştirme uygulamak istediğiniz sayfanın adresini girin.
Ortaya çıkan bağlantıyı parametrelerle birlikte kopyalamak için Kopyala veya bağlantıyı yeni bir tarayıcı sekmesinde açmak için Aç öğesine tıklayın.

GitHub’da deneyleri bağlama ve oluşturma örneklerine bakın.

Destek Ekibi'ne yaz

Yazı yararlı oldu mu?

Reklam deneyleri

Deney sonuçları hakkında rapor