Kendi WordPress e-posta formunuzu nasıl oluşturabilirsiniz (Optin formu)

İnternette çok büyük bir yalan söyleniyor ve herkes buna inanıyor gibi: Herkes pop-up'lardan nefret eder . Doğru, kötüye kullanılabilirler – ve genellikle öyledir – ancak bu, çalışmadıkları anlamına gelmez. Öyleyse kendi özel WordPress e-posta formu optin açılır penceremizi oluşturalım.

Not: Opt açılır penceresi nedir? Bu genellikle, ziyaretçi sitenizden ayrılmaya çalıştığında veya e-posta adreslerini toplamak için sitenizle etkileşime girdiğinde görünen basit bir formdur. Karşılığında yeni abonelerinize özel indirimler, e-kitaplar, kuponlar vb. sunabilirsiniz. Buna Kurşun Mıknatıs da denir; bir e-posta adresi karşılığında kullanılan rüşvet.

Bu eğitimin amacı için, web sitenizde 50$ değerinde bir ürün sattığınızı ve günlük 1000 ziyaretçiniz olduğunu varsayalım. Hemen çıkma/terk etme oranınız kabaca %50'dir, bu da bu ziyaretçilerin 500'ünün sonsuza kadar kaybolduğu anlamına gelir.

Çıkış amacı tespiti ile (kısa süre içinde daha fazlası), gelecekteki takip ve promosyonlar için e-posta adreslerini deneyebilir ve alabilirsiniz. Neredeyse kaybolan ziyaretçilerinizin %10'unun bunu size verdiğini varsayarsak, bu, ayda yaklaşık 1500 olmak üzere günde 50 e-posta topladığınız anlamına gelir.

Ayda 1500 e-posta ile, ayda 75 ek satış anlamına gelen %5'lik dönüşüm oranını (bazı akıllı e-posta pazarlamalarıyla) kolayca elde edebilirsiniz ve bu da aylık 3.750$'lık ek gelirle sonuçlanır!

Hâlâ pop-up'ların kötü bir fikir olduğunu mu düşünüyorsunuz?

Pekala, sadece benim sözüme güvenmeyin – Crazy Egg'deki insanlar, tercih formlarının ve ziyaretçi davranışlarının kapsamlı bir analizini yaptı ve şaşırtıcı derecede harika sonuçlar keşfetti! Ve Chris Lema da aynı fikirde!

Bu eğitim neden hakkında değil (bunun için yukarıdaki Crazy Egg makalesine bakın), ancak nasıl hakkında: Çıkış amacı algılaması ile kendi özel optin formumuzu oluşturacağız ve bu form gönderildikten sonra ziyaretçileri gönderecek. MailChimp gibi harici bir sağlayıcıya bilgi.

1. Adım: Çıkış amacı algılama komut dosyasını indirin ve yapılandırın

Çıkış amacı, ziyaretçinizin herhangi bir nedenle sitenizden ayrılmaya karar verdiğinde ve bizim bunu tespit etmemiz gerektiğinde web sitenizdeki yolculuğunda bir noktadır. Neyse ki, Ouibounce adlı bir JavaScript çözümünden biraz yardım alarak bunu yapmak oldukça kolay.

ouibounce.js indirin ve temanızın içindeki js dizininize kaydedin, ardından açılır pencerenizin davranışını yapılandırmak için kullanacağınız başka bir JavaScript dosyası ouibounce-config.js oluşturun.

Bu yeni oluşturulan dosyaya aşağıdaki kodu yapıştırın:

 jQuery(function($) { "use strict"; ouibounce($('#js-optin-wrap')[0], { // Uncomment the line below if you want the modal to appear every time // More options here: https://github.com/carlsednaoui/ouibounce aggressive: true, sitewide: true, }); $("#js-optin-submit").click(function(event) { event.preventDefault(); $(this).val('Subscribing...').prop('disabled'); var data = { 'action': 'process_optin_submission', 'nonce': window.OuibounceVars.nonce, 'email': $('#js-optin-email').val() }; $.post(window.OuibounceVars.ajaxUrl, data, function(response) { console.log('Server returned:', response); // Handle the response (take care of error reporting!) $('#js-optin-step1').hide().next('#js-optin-step2').show(); }); }); $('.js-optin-close').on('click', function(event) { event.preventDefault(); $('#js-optin-wrap').hide(); }); });

Ouibounce herhangi bir form işlevi sağlamaz – yalnızca çıkış amacını algılar ve ilk argüman olarak ona hangi öğeyi ilettiğinizi gösterir, bu nedenle formunuzun davranışını jQuery ve bir çizgi ajax ile yapılandırmanız gerekir (resmi belgeleri okuyun) ajax'ın WordPress'te nasıl çalıştığı hakkında bilginizi yenileyin).

Perde arkasında, aynı zamanda bir çerez ( son kullanma süresini yapılandırabileceğiniz) ayarlar, böylece formun bir ziyaretçiye ayda yalnızca bir kez görünmesini sağlar – gerçekten müdahaleci olma riskini en aza indirmek için.

Peki yukarıdaki script ne işe yarıyor? Formunuzun gönder düğmesine bir dinleyici kaydeder, ardından bu düğmeye tıklandığında bir ajax araması yapar. Başarılı yanıt üzerine, giriş alanını gizler ve abone olduğu için ziyaretçiye teşekkür eder.

Not: Bu, yalnızca bir (e-posta) alanı olan ve herhangi bir doğrulaması olmayan çok basit bir örnektir. Bununla ilgilenmeyi sizin takdirinize bırakıyorum.

Ayrıca agresif parametreye de dikkat edin, eğer ayarlanırsa, bir ziyaretçi web sitenizden her ayrılmaya çalıştığında açılır pencereyi tetikleyecektir. Bu büyük olasılıkla ziyaretçilerinizi rahatsız edecektir, bu yüzden üretim ortamında kapatmanızı öneririm!

2. Adım: Bir işleme komut dosyası oluşturun

Bir ajax çağrısı yaptığınız için, isteğinizi yakalayacak ve işleyecek bir komut dosyasına ihtiyacınız var ve ben nesne yönelimli programlamanın büyük bir hayranı olduğum için, bunun için bir sınıf oluşturalım; Bu sınıfın iki işlevi olacaktır ( yöntemler olarak adlandırılır) – biri isteği işlemek için, diğeri ise açılır penceremizin HTML'sini görüntülemek için:

 <?php class Optin_Form { public function __construct() { add_action( 'wp_ajax_process_optin_submission', array( $this, 'process' ) ); add_action( 'wp_ajax_nopriv_process_optin_submission', array( $this, 'process' ) ); } public function process() { if( ! wp_verify_nonce( $_POST['nonce'], 'ouibounce' ) ) return; $data = array( 'email' => $_POST['email'] ); $curl = curl_init(); curl_setopt_array( $curl, array( CURLOPT_HTTPHEADER => array( 'Content-Type: application/json', 'Accept: application/json' ), // -H parameter CURLOPT_RETURNTRANSFER => 1, // so that we can catch the response in a variable CURLOPT_URL => 'http://reqr.es/api/users', // The endpoint CURLOPT_POST => 1, // -X POST CURLOPT_USERPWD => 'app_id:api_key', // -u parameter (not always needed) CURLOPT_POSTFIELDS => json_encode( $data ) // because we set Content-Type to JSON ) ); $resp = curl_exec( $curl ); curl_close( $curl ); print_r( $resp ); wp_die(); } public function render() { ?> <div class="modal-cover"> <div class="modal"> <div> <h1>Hey there!</h1> <p>Want to be <strong>awesome</strong>? Subscribe!</p> <form> <input type="text" placeholder="Your email" /> <input type="submit" value="Sign me up!" /> </form> <br /> <a href="#" class="js-optin-close">No thanks.</a> </div> <div> <h1>You've been subscribed!</h1> <br /> <a href="#" class="js-optin-close">Close.</a> </div> </div> </div> <?php } }

İlk önce render() yöntemine bir göz atalım, çünkü bu ikisi arasında daha kolay; Tek yaptığı, açılır pencerenizin HTML çıktısını almaktır. İdeal olarak, bunun ayrı bir dosyada olması gerekir, ancak bu eğitimin amacı doğrultusunda işe yarayacaktır. js- ile başlayan id niteliklerine dikkat edin: Bu, belirli bir seçicinin stil için değil JavaScript/jQuery için kullanıldığını kendinize hatırlatmak için güzel bir kuraldır.

Oluşturulan açılır pencerede/formda bir giriş alanı (e-posta), bir gönder düğmesi ve bir kapat bağlantısı bulunur. Ayrıca iki adımı vardır; ikincisi, formunuz gönderildiğinde ve yanıt döndürüldüğünde görüntülenir.

Sınıfın ilk kısmı ( process() yöntemi) işlerin ilginçleştiği yerdir; İlk olarak, nonce'nin geçerli olup olmadığını kontrol ederiz (güvenlik açısından iyi bir uygulamadır) ve ardından bir cURL çağrısı başlatırız.

Bilmeyenler için cURL, tarayıcınızın sunucuyla nasıl iletişim kurduğunun programlı eşdeğeridir – adres çubuğuna bir istek oluşturan bir URL girersiniz ve sunucu, tarayıcınızın daha sonra yorumladığı bir yanıt döndürür. cURL de aynısını yapar, ancak tarayıcı olmadan – bir istek oluşturur ve yanıtı ayrıştırır.

Bu yaklaşım ilk başta biraz kafa karıştırıcı görünse de, çoğu (hepsi değilse de) büyük e-posta pazarlama sağlayıcıları API'ler (bilgisayarların konuşabileceği URL'ler, WordPress'in XML-RPC'si gibi) sağlar.

Örneğimizde, sahte bir API hizmeti REQ|RES kullanıyorum, ancak canlı çözümümüzde müşteri destek sistemimiz Intercom'u arıyorum.

Kodunuzun bundan sonra ne yaptığına baktığınızda, CURLOPT_ ile başlayan bir dizi ayar göreceksiniz; Bunlar, cURL aramasını yaptığınız ayarlardır:

• CURLOPT_HTTPHEADER , gönderdiğiniz ve beklediğiniz içerik türü gibi istek başlıklarını ayarlar.
• CURLOPT_RETURNTRANSFER , yanıtı bir değişkende yakalayabilmenizi sağlar
• CURLOPT_URL iyi, arama yaptığınız URL
• CURLOPT_POST , çağrı türünü POST olarak ayarlar
• CURLOPT_USERPWD , başarılı bir şekilde bağlanmak için API kimlik bilgilerinizi kullanmanız gerekiyorsa isteğe bağlı bir parametredir ve çoğu durumda kullanırsınız.
• CURLOPT_POSTFIELDS , normalleştirilmiş verilerinizdir – bizim durumumuzda bu yalnızca bir e-posta adresidir, ancak API hizmetinin desteklemesi koşuluyla istediğiniz kadar alanınız olabilir.

Çağrınız şimdi yapılandırıldığında, bunu gerçekten yapmanın zamanı geldi, bu nedenle yöntemimizdeki son birkaç satır bunu yapıyor, ardından kapatın, verileri yazdırın (JavaScript'imizin okuyabildiği) ve PHP'nin başka bir şey yapmasını önleyin. wp_die() .

3. Adım: Komut dosyalarınızı WordPress'e yükleyin

Artık gerekli tüm işlevselliklere sahip olduğunuza göre, tüm komut dosyalarını WordPress'e kaydetme zamanı geldi, bunun için yalnızca functions.php dosyanıza aşağıdaki kodu eklemeniz gerekiyor:

 /** * Load Optin form class and let it render just before */ require get_template_directory() . '/inc/class-optin-form.php'; $optin_form = new Optin_Form(); add_action( 'wp_footer', array( $optin_form, 'render' ) ); /** * Enqueue all the necessary scripts and set proper JavaScript variables */ function enqueue_ouibounce() { wp_enqueue_script( 'ouibounce', get_stylesheet_directory_uri() . '/js/ouibounce.js', array() ); wp_enqueue_script( 'ouibounce-config', get_stylesheet_directory_uri() . '/js/ouibounce-config.js', array( 'jquery' ) ); wp_localize_script( 'ouibounce-config', 'OuibounceVars', array( 'ajaxUrl' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'ouibounce' ) ) ); } add_action( 'wp_enqueue_scripts', 'enqueue_ouibounce' );

Bu kodun ilk kısmı sınıfı yükler ve render() yöntemini çalıştırabilmeniz için onu başlatır – bu, açılır HTML'yi “kapanış etiketinden hemen önce verir.

İkinci kısım tüm JavaScript'leri kuyruğa alır ve wp_localize_script() aracılığıyla bazı değişkenleri ayarlar.

Şimdi, bunu denemeden önce, açılır pencerenizi de biçimlendirmeniz veya daha da önemlisi onu gizlemeniz gerekir , böylece yalnızca bir kez görünür.

4. Adım: Açılır pencerenizin stilini belirleyin

Açılır pencereniz için başlangıç ​​noktası olarak kullanabileceğiniz bazı temel stiller şunlardır:

 .modal-cover { display: none; background: rgba(0, 0, 0, 0.75); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; padding-top: 20px; } /* ouibounce adds 'ouibounce-open' class on the <body> tag */ .ouibounce-open .modal-cover { display: block; } .modal { width: 600px; margin: 0 auto; background: #fff; }

Burada dikkat edilmesi gereken en önemli şey, .modal-cover (pop-up sarmalayıcı sınıfımız) varsayılan olarak gizli olmasıdır ve yalnızca Ouibounce tetiklendiğinde ortaya çıkar – bu gerçekleştiğinde, “ etiketine bir .ouibounce-open sınıfı eklenir, modeli ortaya çıkarmak.

Nihai sonuç daha sonra şöyle görünür:

Uyarılar ve sonuç

Bu noktada, piyasada bulunan tüm barındırılan (ve hatta bazı oldukça pahalı) çözümlere neden ihtiyacınız olduğunu merak edebilirsiniz. İhtiyaçlarınıza bağlı olarak, DIY çözümümüzün sağlamadığı aşağıdaki işlevselliğe ihtiyacınız olabilir:

• Pop-up'larınızın etkinliğini daha da artırmak için A/B testi
• Diğer algılama türleri (örneğin, bir ziyaretçinin belirli bir noktayı geçtiğinde veya belirli bir sayfada daha fazla zaman harcadığında gösterilmesi)
• Görüntüleri, alanları ve düğmeleri kolayca eklemek için işaretle ve tıkla basitliğiyle form oluşturucu
• Tasarım için zaman harcamanıza gerek kalmaması için, aralarından seçim yapabileceğiniz önceden hazırlanmış şablonlar
• Pop-up'ların içinde çok adımlı formlar
• Giderek daha popüler hale gelen mobil destek
• Diğer 3. taraf hizmetleriyle otomatik entegrasyon

Her şey ihtiyaçlarınıza ve tercihlerinize bağlıdır – bizim için bunların çoğu önemlidir, ancak kendi başımıza entegre etmeye karar verdik, bu da zaman ve daha da önemlisi para alır.

Sadece hızlı bir şekilde başlamak istiyorsanız ve çok teknik değilseniz, OptinMonster ile gidin

Tüm öğreticiyi okuduğunuza ve artık başlamaya hevesli olduğunuza göre, kodu alıp onunla oynamaya başlamanız için bir özet hazırladım.