Ana içeriğe geç

Kod Yardımcıları

Son güncelleme: 24 Mar 20261 dk okuma süresi
İçindekiler

Kısaca​

Kod Yardımcıları, bir web geliştirici olarak A/B testleri kurmana, özellikle tek sayfa uygulamaları (single page applications) için A/B testleri geliştirirken yardımcı olur.

JavaScript Yardımcı Fonksiyonları​

waitFor -> DOM içindeki elementleri bekle​

waitFor fonksiyonu ile tanımlanan bir elementi beklemek için bir mutation observer kullanılır. Tanımlanan seçiciyle eşleşen yeni elementler DOM'a eklendiğinde (örneğin AJAX veya JavaScript ile), callback fonksiyonu çalıştırılır.

Callback fonksiyonu, yeni tespit edilen her element için çağrılır.

Kod örneği​

<div>
  <p>This is existing content.</p>
  <!-- <p class="lazyloaded-content">This content will be loaded later.</p> -->
</div>
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
  // After the content was loaded, we want to color it red.
  element.style.color = 'red';
});

Birden fazla seçici ekleme​

window.varify.helpers.waitFor('.lazyloaded-content, .another-selector, and-another-selector', (element) => {
  // After the content was loaded, we want to color it red.
  element.style.color = 'red';
});

onDomChanged -> DOM'daki Değişiklikler​

Bu fonksiyon, DOM'a her eleman eklendiğinde veya silindiğinde CallBack'i çağırır. Bu da bir Mutation Observer'a dayanmaktadır.

window.varify.helpers.onDomChanged(() => {
  // Write code here, which will run everytime the dom changes.
});

onDomLoaded -> DOM yüklendi​

Bu fonksiyon, DOM yüklenir yüklenmez callback'i çağırır. DOM zaten yüklenmişse, callback hemen çağrılır.

window.varify.helpers.onDomLoaded(() => {
  // Write code here, which will run, when the DOM has loaded.
});

isInView -> Eleman görüntü alanında tamamen görünür​

isInView fonksiyonu ile belirli bir DOM elementinin viewport içinde tamamen görünür olması beklenir. Callback varsayılan olarak yalnızca bir kez çalıştırılır, ancak isteğe bağlı olarak element viewport içinde olduğu her seferinde çalıştırılabilir.

// The callback here will be triggered ONE TIME, when the element is in view.
window.varify.helpers.isInView('.product', (element) => {
  window.dataLayer.push({
    event: 'product viewed',
    element,
  });
});

// Adding true as third parameter
// will trigger the callback EVERY TIME the element is in view.
window.varify.helpers.isInView('.product', () => {}, true);

isInEditor -> Varify Editor Kontrolü​

Şu anda Varify Editor içinde olup olmadığınızı kontrol etmek için bu yardımcı fonksiyonu kullanabilirsiniz. Bu, kodunuzun yalnızca canlı web sitesinde çalıştırılmasını sağlar - editörde değil.

Bu, özellikle scriptiniz örneğin JavaScript ile Yönlendirme tetiklendiğinde faydalıdır: Editörde yönlendirmeyi özellikle engellemek için bu sorguyu kullanabilirsiniz, böylece orada sorunsuz bir şekilde test etmeye ve düzenlemeye devam edebilirsiniz.

if (window.varify.helpers.isInEditor()) {
  return
}

// Your JavaScript Code (won't run in editor)

resetListeners -> Tüm gözlemcileri sıfırla​

Bu fonksiyon, yukarıdaki fonksiyonların tüm gözlemcilerini (intersection ve mutation observer) sıfırlar. Böylece, tanımlanan callback fonksiyonları artık çalıştırılmaz.

// As an example, we setup a waitFor listener here. This will use a MutationObserver under the hood.
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
  element.style.color = 'red';
});

// The next resetting function call could e.g. be located in a navigation callback function.
window.varify.helpers.resetListeners()
Bu sayfada