Jetpack, bir abone listesi oluşturmak için harika bir çözümdür ve Intercom, aboneleri yönetmenize ve içeride kalmanıza olanak tanıyan bir çözümdür. UAF ile onlarla.
Bu eğitici yazıda, abone listenizi Jetpack ve Intercom ile nasıl artıracağınızı göstereceğiz.
Bazı insanlar, kullanıcıların tüm makalelerini e-posta ile abone olmalarına, e-posta yoluyla almalarına ve e-posta adreslerini Intercom'da saklamalarına izin verilip verilmeyeceğini sormaya geldi. Hemen, özellikle de API olarak olumlu cevap verdim (Uygulama Programlama Arayüzü) kullanımı kolaydır.
Bu yüzden e-posta adreslerini API üzerinden Intercom'a gönderecek bir abonelik eklentisi kullanmayı düşündüm. Ben de aynen bunu yapacağım.
Jetpack'i kurduk, bu yüzden ihtiyacınız olan tek şey modülü aktif hale getirmek. " Abonelikler …Ancak, o kadar basit değil, ya formulaire özel bir konumda (örneğin özel sayfa)? Ayrıca, nerede nasıl özelleştirileceğini de göstereceğiz. formulaire.
ilk Adımlar
Bir ile başlayacağız formulaire temel :
Gönderilerimizi Asla Kaçırmayın. Posta kutunuza gönderildikleri anda güncellemeler alın.
İlgilenebilecek herkes için işlemi kullanarak formu buraya ekledim " genesis_after_entry Genesis teması, ancak Genesis kullanmıyorsanız, filtreyi kullanabilirsiniz " the_content Ve içeriğinizi makalenin içeriğiyle birleştirdi.
Örneğimizde, 3'tan sonraki formu görüntüleyeceğize makale. Filtreyi kullanıyorsanız, işlevleri kullanın " ob_start "Ve" ob_get_clean Tamponu başlatmak ve içeriğini kullanmak için.
global $ sonrası, $ WP_Query; if (is_home() && $ WP_Query->mesajları[3]->ID == $ sonrası->ID) { dahil(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); }
İşte üslup ve biçim CSS olduğunu.
# Blog-arşiv-kaydolma { genişlik:%100 !önemli; açık:her ikisi de; } # Blog-arşiv-kaydolma { @include kesme noktası ($ Tablet) { arka fon:url ( "images / düşük bg.png") 0 0 no-tekrar; yükseklik:200px; } } # Blog-arşiv-kayıt fieldset { sınır:0; genişlik:%100; padding-left:50px; } # Blog-arşiv-kayıt fieldset { @include kesme (maksimum genişlik $ tablet) { padding-left:0px } } # Blog-arşiv-kayıt efsanesi { padding-top:20px; } # Blog-arşiv-kayıt alanları Konteyner # { genişlik:%100 } # Blog-arşiv-kayıt girişi [isim * = 'email'] { arka fon:url ( "images / düşük field.png") 0 0 no-tekrar; dolgu malzemesi:0; kenar:0; yükseklik:44px; sınır:0; genişlik:560px; satır yüksekliği:22px; şamandıra:sol; } # Blog-arşiv-kayıt girişi [isim * = 'email'] { @include kesme (maksimum genişlik $ tablet) { dolgu malzemesi:0; kenar:0; sınır:0; genişlik:%50; şamandıra:sol; } } # Blog-arşiv-kayıt girişi [type = 'to'] { arka fon:url ( "images / düşük button.png") 0 0 no-tekrar; dolgu malzemesi:0; kenar:0; yükseklik:44px; sınır:0; genişlik:180px; renk: #fff; text-align:merkez }
Aboneler nasıl eklenir?
Şimdi "kullanarak Jetpack kullanıcıları kayıt edeceğiz jQuery.ajax '.
$("# Blog-arşiv-kaydolma").sunmak(işlev(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").gizlemek().Kaldır(); var __button = $('# Blog-arşiv-kayıt girişi [type = "Gönder"]').almak(0); $('# Blog-arşiv-kayıt girişi [type = "Gönder"]').sonra(codeable_spinner); var __DATA = $( Re-Tweet).serialize() + '& güvenli =' + codeableVars.güvenlik + '& action = blog_archive_signup'; $. Facebook post(codeableVars.ajaxurl,__DATA,işlev(yanıt) { konsol.log(yanıt); if (yanıt.başarı) { $("#codeable_spinner").replaceWith("Başarı!").geciktirmek(5000).fadeOut('Yavaş').Kaldır(); } başka { $("#codeable_spinner").replaceWith(""+yanıt.mesaj+"").geciktirmek(5000).fadeOut('Yavaş').Kaldır(); } }) })
Şimdi kullanıcıyı Jetpack ve Intercom'a kaydetmemiz gerekiyor. Aboneleri nasıl eklediğini öğrenmek için Jetpack'in kodunu araştırdım ve parametre olarak e-posta alan "Jetpack_Subscriptions" sınıfını ve statik yöntemini buldum. Ve Intercom için basit bir CURL isteği yeterli olacaktır.
ADD_ACTION('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); ADD_ACTION('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); işlev blog_archive_signup() { $ veri = dizi( 'E-posta' => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => dizi('Subscribed_via' => 'Blog_archive_partition') ); $ çağrı = wswp_make_api_call($ veri); $ tepkisi = dizi("Başarı"=>gerçek,"Mesaj" => "Bpa_signup"); $ abone = Jetpack_Subscriptions::abone ol($ _REQUEST[$ önek.'Sağlamamız gerekti']); delete_transient('Wpcom_subscribers_total'); stats_update_blog(); // yenileme Aboneler wp-admin saymak wp_send_json($ tepkisi); çıkış(); } işlev wswp_make_api_call($ veri) { $ bukle = curl_init(); curl_setopt_array($ bukle, dizi( CURLOPT_HTTPHEADER => dizi('Content-Type: application / json', 'Kabul: Uygulama / json'), CURLOPT_RETURNTRANSFER => 1, CURLOPT_URL => 'Https://api.intercom.io/users', CURLOPT_POST => 1, CURLOPT_USERPWD => INTERCOM_APP_ID . "" . INTERCOM_API_KEY, CURLOPT_POSTFIELDS => json_encode($ veri), CURLOPT_HEADER => yanlış, )); // Doğru değerlere uygulama kimliği ve API anahtarı için sürekli ayarlamak gerekir Not $ dönüş = json_decode(curl_exec($ bukle), gerçek); curl_close($ bukle); dönüş $ dönüş; }
Bu kadar. Şimdi birisi bu formu doldurduğunda, Jetpack'te abone olduğunu belirten bir onay e-postası alır ve yayınlanır yayınlanmaz makalelerinizle birlikte e-posta alırlar.
Perde arkasında ise Intercom'a “Subscription_Via => blog arşiv bölümü” etiketi ile kayıt oluyorlar. Bir dahaki sefere size Thrive Leads eklentisi abonelerinizi Intercom'a nasıl gönderebileceğinizi anlatacağım. veri hepsini ayırt etmenizi sağlayacak ek bilgiler.
Eğer işe yararlığı konusunda uzman değilseniz " codeableVars.security İçinde bulunduğunu bilmelisin " papalık elçisi "WordPress. Normalde bu php işleviyle yapılabilirdi " wp_nonce_field () Formda, ancak sadece JavaScript içeren komut dosyası, nonce alanı JS işlevinde zaten var " wp_localize_script () '.
Bu, bu eğitim için yapılacaklar hakkında. Bize sorular sormakta veya öğreticiyi en sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşmakta özgürsünüz.
