Sayfa hedefleme
Kısaca
Sayfa hedefleme yardımıyla, web sitenizin hangi sayfalarında bir deneyin gösterileceğini belirleyebilirsin. Deney ayarlarında, kurallara dayalı yayını kontrol etmek için „Page targeting“ altında çeşitli seçenekler bulacaksın. Doğru şekilde yapılandırılmış sayfa hedefleme, bir deneyi başlatmak için de bir ön koşuldur.
Sayfa hedefleme seçenekleri
Page Targeting içindeki kurallar yardımıyla, ziyaretçilerin hangi sayfalarda veya sayfa türlerinde deney katılımcısı olacağını belirlersin. Sayfaları benzersiz şekilde tanımlamak için çeşitli yöntemler mevcuttur. Bir deney, yalnızca tanımlanan koşullar karşılandığında yayınlanır.
Birden fazla kuralı birbirine bağlamak ve AND ve OR koşullarını kullanmak da mümkündür.
| Yöntem | Ne zaman mantıklıdır |
|---|---|
| URL kuralları | Sayfalar domain, path veya parametrelerle net şekilde ayırt edilebiliyorsa veya yalnızca belirli bir URL hedeflenmek isteniyorsa. |
| Regex | Birkaç benzer URL'nin bir kalıpla kapsanması isteniyorsa. |
| CSS selector | URL kurallarıyla net şekilde ayırt edilemeyen ancak ortak benzersiz bir element paylaşan birden fazla sayfayı hedeflemek istiyorsan. |
| JavaScript | URL ve DOM'un ötesine geçen karmaşık koşullara ihtiyaç duyuyorsan, örn. mantık, durumlar veya DataLayer girdileri. |
Ziyaretçilerinizin deney katılımcısı haline geldiği sayfaları veya sayfa türlerini tanımlamak için kurallar kullanabilirsiniz. Sayfaları tanımlamak için birkaç seçeneğiniz vardır.
CSS Selector kullanımı, birden fazla sayfayı hedeflemek istediğinizde ancak bunlar URL kuralları ile açıkça tanımlanamıyorsa faydalıdır.
Daha karmaşık hedefleme kuralları tanımlamak için JavaScript kullanabilirsiniz. Örneğin, özel DataLayer girişlerini kontrol etme seçeneğiniz de vardır.
URL Eşleştirme
URL Match ile, deneyinizin gösterildiği sayfaları tanımlamak için URL kuralları kullanırsınız. Birden fazla URL kuralını birleştirebilir ve hangilerinin uygulanması, hangilerinin hariç tutulması gerektiğini tanımlayabilirsiniz.
Birden fazla URL kuralını bağlama
Aynı anda birden fazla URL kuralı oluşturabilir ve bunları birbirine bağlayabilirsin. Ek kurallar eklemek için artı simgesini kullan. Deneyin belirtilen URL'lerde oynatılıp oynatılmayacağını belirtmek için „matches“ veya „does not match“ seçeneğini kullan.
Daha karmaşık kuralları tanımlamak istiyorsan, birden fazla URL eşleşmesini birleştirebilirsin. Örneğin, bir deneyin https://www.demo.de üzerinde gösterilmesini, ancak https://www.demo.de/impressum üzerinde gösterilmemesini belirtebilirsin.
eşleştirme türü
Giriş alanının sağında, hedefleme koşulunuzun eşleştirme türünü belirtebilirsiniz. Seçime bağlı olarak, yanındaki giriş alanındaki URL çeşitli koşullara göre kontrol edilir. Seçebileceğiniz koşullar şunlardır:
- Basit Eşleşme
- Tam Eşleşme
- İçerir
- Regex
Uygulama örnekleriyle birlikte hedefleme koşulları aşağıda daha ayrıntılı şekilde açıklanmıştır.
Basit Eşleştirme
Simple Match ile girilen tüm URL'ler, ilişkili URL parametreleri dahil olmak üzere hedeflenir.
Aşağıdaki örnekte, „Simple Match" sayfa hedeflemesinde www.demo.de URL'si için hangi URL varyantlarının eşleşme olarak kabul edildiğini görebilirsin:
| URL | Hedefleme geçerli mi? |
|---|---|
| www.demo.de | ✅ geçerli |
| www.demo.de#about | ✅ geçerli |
| www.demo.de?color=red | ✅ geçerli |
| www.demo.de/category | ❌ geçerli değil |
| www.demo.com | ❌ geçerli değil |
| subdomain.demo.de | ❌ geçerli değil |
Aynı anda birden fazla sayfayı, sayfa türünü veya alt alan adını hedeflemek istiyorsan, bunun için regex kullanabilirsin. Alternatif olarak, örneğin sayfada belirli bir öğe mevcutsa, hedefleme bir CSS seçici aracılığıyla da yapılabilir. Devam et, okumaya bak.
Tam Eşleşme
Sayfa hedeflemenin yalnızca belirli bir URL için, yani URL parametreleri olmadan geçerli olmasını istiyorsan „Exact Match“ koşulunu kullan.
Aşağıdaki örnekte, www.demo.de URL'si için „Exact Match“ sayfa hedeflemesinde hangi URL varyantlarının eşleşme olarak kabul edildiğini görebilirsin:
| URL | Hedefleme geçerli mi |
|---|---|
| www.demo.de | ✅ geçerli |
| www.demo.de#about | ❌ geçerli değil |
| www.demo.de?color=red | ❌ geçerli değil |
| www.demo.de/category | ❌ geçerli değil |
| www.demo.com | ❌ geçerli değil |
| subdomain.demo.de | ❌ geçerli değil |
İçerir
Belirli bir gruba ait birden fazla sayfayı hedeflemek istediğinde sayfa hedefleme koşulu olarak „İçerir“ (Contains) kullanılır. Bunun ön koşulu, sayfaların tutarlı bir URL yapısı kullanılarak sınırlandırılabilmesidir. Örneğin, yalnızca ürün sayfalarını test etmek istiyorsan, tam olarak bu sayfaları hedeflemek için „/products/“ ile „İçerir“ kullanabilirsin. Belirtilen ifade, URL'de en az bir kez tam olarak yer almalıdır.
Elbette „İçerir“, örneğin bir A/A testi için tüm web sitesini (https://www.demo.com gibi) hedeflemek amacıyla da kullanılabilir. Bunu yapmak için sitenin alan adını girmen yeterlidir.
Aşağıdaki örnekte, „/products/“ sayfa hedeflemesinin geçerli olduğu farklı URL varyantlarını görebilirsin.
| URL | Hedefleme uygulanır |
|---|---|
| www.demo.com | ❌ uygulanmaz |
| www.demo.com/products | ❌ uygulanmaz |
| www.demo.com/products/t-shirts | ✅ uygulanır |
| www.demo.com/products/pants | ✅ uygulanır |
| www.demo.com/blog/products-reviews | ❌ uygulanmaz |
| www.demo.com/blog/products/tests | ✅ uygulanır |
Düzenli İfadeler (Regex)
Düzenli ifadeler, A/B testlerini belirli tek tek sayfalara veya sayfa gruplarına hedeflemene olanak tanır. Çoğu durumda bu, yukarıda sunulan hedefleme koşullarından daha kesindir.
Bu seçenek öncelikle regex ile deneyimi olan veya çok kesin kurallar tanımlamak isteyen ileri düzey kullanıcılara yöneliktir. Başlamanı kolaylaştırmak için regex ile sayfa hedeflemeye yönelik bu kılavuzu hazırladık. Çoğu durumda örneklerimizden birini kopyalayıp kendi URL'inle değiştirmen yeterlidir.
Düzenli ifadelerini doğrulamak için regexr.com gibi regex düzenleyicilerini kullanabilirsin.
Regex oluşturma örneği
Plomo-o-Plata'da Outlet Sale kategorisindeki tüm ürün detay sayfalarında satış fiyatları kırmızı renkte gösterilecek. Diğer kategorilerdeki ürün detay sayfaları değişmeden kalmalı.
URL hedeflemede regex kullanarak bu hedefleme koşulunu açıkça eşleştirme imkanına sahipsin.
Örnek olarak, burada Outlet Sale kategorisinde yer alan bir URL'yi görebilirsin.
Bu kategoride bulunan tüm ürün detay sayfaları için URL yapısı aynıdır:
https://plomo-o-plata.de/collections/plomo-o-plata-outlet-sale/products/…
Useful use cases tablosunda, bu örneği kullanarak web sitenizin URL yapısına uygulayabileceğiniz önceden tanımlanmış regex'leri bulacaksınız. Bizim durumumuzda, use case 3 geçerlidir.
-> path'ten sonra www.demo.de/category/ olan tüm sayfaların hedeflenmesi.
-> ^.*www.demo.de/kategori/.+
Öncelikle https://regexr.com/ adresine gidiyoruz ve benzer kullanım senaryosunu buraya taşıyoruz.
Bu kullanım senaryosunu şimdi bir kılavuz olarak kullanabilir ve Plomo-o-Plata örneğimize uygulayabiliriz.
Ekran görüntüsünde, regex'i kendi kullanım senaryomuza nasıl özelleştirdiğimizi görebilirsin. Plomo-o-Plata'nın URL'si kullanım senaryosundan iki dizin daha fazla içerdiğinden, bunlar kullanım senaryosu örneğine benzer şekilde eklendi. Regex tanımlamak için bir başka çok kullanışlı araç: https://www.autoregex.xyz/ Burada hangi sayfa türlerinin hedeflenmesi gerektiğini İngilizce olarak tanımlayabilirsin. Araç bu tanımı bir regex'e dönüştürür.
Yararlı kullanım senaryoları
| Kullanım senaryosu | Örnek sayfa | Düzenli İfade |
|---|---|---|
| Tam olarak bir sayfayı hedeflemek | www.demo.de/product-list | ^.*www\.demo\.de\/product-list$ |
| Anchor bağlantıları, parametreler ve isteğe bağlı „/“ dahil tam olarak bir sayfayı hedeflemek | www.demo.de/?utm_source=google_cpc | ^.*www\.demo\.de(#.*|\/#.*|$|\/$|\/\?.*) |
| www.demo.de/category/ yolunda asılı tüm sayfaları hedeflemek | www.demo.de/category/product | ^.*www\.demo\.de\/category\/.+ |
| „www.“ olmadan bir sayfanın global olarak hedeflenmesi | demo.de/ | ^.*demo.de\/.* |
| Tüm www.demo.de/ alan adının global olarak hedeflenmesi | www.demo.de/ | ^.*www\.demo.de\/.* |
| blog.demo.de/ alt alan adının hedeflenmesi | blog.demo.de/category/article | ^.*blog\.demo.de\/. |
| Alt alan adları dahil tüm demo.de/ alan adının hedeflenmesi | blog.demo.de/category/article www.demo.de/category/product | ^.*demo.de\/.* |
| İki belirli ürün kategorisinin hedeflenmesi | www.demo.de/shirts/product www.demo.de/pants/product | ^.*www\.demo.de\/(shirts|pants)\/.* |
CSS Seçici
Yalnızca benzersiz bir CSS selector'a sahip belirli bir öğenin bulunduğu sayfaları veya sayfa türlerini hedefle. Bu, sayfaların URL kuralları üzerinden güvenilir bir şekilde ayırt edilemediği durumlarda özellikle yardımcı olur. Örnek: Mağazanın tüm ürün detay sayfalarını hedeflemek istiyorsun, ancak URL yapısı „/products/“ gibi net bir referans içermiyor. Bu durumda, yalnızca ürün detay sayfalarında görünen bir öğeyi, örneğin „Add to cart“ butonunu kullanabilirsin. Ardından bu öğe için CSS selector'ı Page Targeting içinde kaydedersin.
Uygun bir CSS seçici bulmanın en kolay yolu, doğrudan görsel Varify editöründedir: Uygun bir sayfayı açın, yalnızca bu sayfa türünde görünen öğeye tıklayın ve görüntülenen CSS seçiciyi kopyalayın. Ardından bunu Page Targeting altında "CSS Selector" kısmına ekleyebilirsiniz.
JavaScript
Daha karmaşık sayfa hedefleme için JavaScript kullanabilirsin. Bu şekilde, web sitenin DOM'unda herhangi bir etiket veya niteliği de arayabilirsin. JavaScript ayrıca data layer değişkenlerinden veri kontrol etmene de izin verir.
Uygulama örneği - Data layer girişi
Data layer içinde belirli bir parametreye veya belirli bir değere sahip kullanıcıları hedeflemek için data layer üzerinde gezinebilirsin. Aşağıdaki örnekte, sadece daha önce ID 1111 veya ID 2222 numaralı belirli bir ürünü görüntülemiş kullanıcılar hedeflenmektedir.
Kod örneği - Data Layer Targeting
return dataLayer?.some(item => item?.ecommerce?.checkout?.products?.[0]?.id==='1111' || item?.ecommerce?.checkout?.products?.[0]?.id==='2222');
Gelişmiş Ayarlar
URL değişikliğinde Experiment'i temizleme
İçeriği dinamik olarak yeniden yükleyen web siteleri - tek sayfa uygulamaları (SPA'lar) veya ürün detay sayfasında birden fazla ürün varyantı sunan online mağazalar gibi - geleneksel statik sayfalardan farklı davranır. Statik sayfalarda, URL her değiştirildiğinde tüm içerik tamamen yeniden yüklenir. SPA'lar ve benzeri dinamik web sitelerinde ise sadece değişen içerik güncellenir.
URL değişikliklerinde davranış
Varify, varsayılan olarak URL her değiştirildiğinde varyant oynatımının bir sıfırlamasını gerçekleştirir, yani sayfadaki tüm varyasyonlar sıfırlanır, URL tekrar kontrol edilir ve yeni URL için geçerli olan tüm varyasyonlar yeniden uygulanır.
Standart fonksiyonun devre dışı bırakılması
"Cleanup Experiment on URL change" fonksiyonunun devre dışı bırakılması, renk gibi farklı ürün varyantlarını seçebildiğin online mağazalardaki ürün sayfalarında özellikle faydalı olabilir. Böyle bir seçimde, URL seçilen rengi yansıtacak şekilde değişebilir. Ancak değişmeyen içerikle ilgili bir varyasyon varsa (örneğin "Add to cart" butonu), bu varyasyonun silinip yeniden uygulanması istenmeyen bir durum olur. Bu, ekranda titreme gibi istenmeyen etkilere yol açabilir.
DOM Değişikliğinde Deneyi Yeniden Uygula
Bu ayar etkinleştirildiğinde, varyantın optimizasyonunun aktif kalmasını sağlamak için web sitesinin DOM'u sürekli olarak izlenir. Optimizasyon, web sitesinin script'leri veya sayfa elemanları tarafından geçersiz kılınırsa, sistem bunu tespit eder ve optimizasyonu yeniden uygular. Bu, örneğin belirli ürün varyantlarına göre filtreleme yapılırken gerçekleşebilir.
Ayar devre dışı bırakıldığında, optimizasyon yalnızca bir kez uygulanır - sürekli izleme gerçekleşmez.