Ana içeriğe geç

Experiment JavaScript ve Experiment CSS

Son güncelleme: 23 Eki 20262 dk okuma süresi
İçindekiler

Kısaca​

Experiment JavaScript ve Experiment CSS ile, orijinal de dahil olmak üzere bir deneyin tüm varyasyonlarına JavaScript ve CSS kodu iletebilirsin. Deney kodu her zaman tekil varyasyonların kodundan önce çalıştırılır.

Bu, kodun deneydeki her ziyaretçi için aynı şekilde çalışması gerektiğinde, örneğin tüm varyasyonlarda bir takip betiği yüklemek için kullanışlıdır. Deney kodu, programlama deneyimine sahip deneyimli kullanıcılar için tasarlanmıştır.

Bir deneyin üç nokta menüsünün açık olduğu, "Tüm varyasyonlar için uygulanan kod" bölümünü ve Add Experiment JavaScript, Add Experiment CSS ile Add Reset JavaScript girişlerini gösteren Varify kontrol paneli

Experiment JS ve Experiment CSS nerede bulunur​

Her iki işlevi de kontrol panelindeki deney genel bakışında bulabilirsin:

  1. Deneyin sağ üstündeki üç nokta menüsüne tıkla.
  2. Code applied for all variations altında, Add Experiment JavaScript veya Add Experiment CSS seçeneğini seç.
  3. Kodunu gir ve kaydet.

Her girişin yanındaki rozet, kodun daha önce eklenip eklenmediğini gösterir.

Experiment kodu nasıl çalışır​

  • Her varyasyona iletilir: Deney kodu, deneyin tüm varyasyonlarına ve orijinale uygulanır.
  • İlk önce çalıştırılır: Deney kodu her zaman varyasyon kodundan önce çalıştırılır. Bir varyasyon içinde eklediğin kod veya stiller, böylece Deney kodunun zaten kurmuş olduğu şey üzerine inşa edilebilir.
  • Aynı kod, herkes için aynı sonuç: Kod tüm varyasyonlara iletildiği için, aralarında bir fark yaratmaz. Bunu herkese uygulanması gereken şeyler için kullan ve test etmek istediğin değişiklikler için varyasyon kodunu (bkz. Add JavaScript ve Add CSS) kullan.

Uygulama örnekleri​

Tüm varyasyonlarda bir takip betiği çalıştır​

Experiment JavaScript için tipik bir kullanım örneği, her varyasyona eklenmesi gereken bir takip betiğidir. Betiği her varyasyona ayrı ayrı kopyalamak yerine, onu bir kez Experiment JavaScript olarak eklersin.

// Runs on the original and on all variations
window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  event: 'experiment_loaded',
});

Stilleri tüm varyasyonlar arasında paylaş​

Experiment CSS ile her varyasyonda ihtiyaç duyulan stilleri tanımlayabilirsin, örneğin JavaScript ile eklediğin bir öğe için.

.promo-note {
  font-size: 14px;
  color: #333;
}

Yardımcı fonksiyonları kullanma​

Varify yardımcı fonksiyonları Experiment JavaScript içinde de çalışır. Bunları örneğin DOM'daki öğeleri beklemek veya kodun editörde çalışmasını engellemek için kullanabilirsin. Tüm mevcut fonksiyonları ve örnekleri Code Helpers makalesinde bulabilirsin.

window.varify.helpers.waitFor('.product', (element) => {
  // Runs as soon as the element is available in the DOM
});

JavaScript Reset Ekleme​

Aynı menüde Add Reset JavaScript seçeneğini de bulacaksın. Bu, eklediğin kodu kaldırır ve özellikle Single Page Application'lar için yararlıdır. Daha fazla bilgiyi Add JavaScript Reset makalesinde bulabilirsin.

Bu sayfada