Jetpack ve Intercom ile WordPress Abonelerinizi Oluşturun

Jetpack, WordPress aboneliklerinizi yürütmenin harika bir yoludur ve Intercom, abonelerinizi yönetmenin ve hedef kitlenizle iletişim halinde kalmanın gerçekten harika bir yoludur. Jetpack ile blog aboneliklerinizi nasıl oluşturabileceğiniz ve bu e-posta adreslerini Intercom'da nasıl saklayabileceğiniz aşağıda açıklanmıştır.

Pazarlama ekibi bana geldi ve kullanıcılarımızın abone olup tüm blog yazılarımızı e-posta ile almalarına ve e-posta adreslerini Intercom'a kaydetmelerine izin verip vermeyeceğimi sordu. API'sinin kullanımı çok kolay olduğu için Intercom'a kullanıcı eklemenin hemen aptalca olduğunu düşündüm, ancak elbette Intercom, blog gönderilerini şimdi yayınlandıkları gibi gönderemeyecek, değil mi?

Hemen bir abonelik eklentisi kullanmayı düşünüyorum, bağlanın ve e-posta adreslerini API aracılığıyla Intercom'a gönderin. Ben de tam olarak bunu yaptım.

Jetpack'i zaten yüklemiştik, bu yüzden Abonelikler modülünü etkinleştirdim… Bekleyin! Keşke bu kadar basit olsaydı: pazarlama ekibi formu özel bir yerde (blog arşiv sayfasının ortasında) istedi ve bu yüzden aboneleri programlı olarak Jetpack'e eklemem gerekecekti. Şimdi bu eğlenceli olacaktı.

İnşa Başlıyor… Form

İlk önce HTML formunu oluşturdum:

 <form> <!-- the id is for use in targeting the form via javascript //--> <fieldset> <legend>Never Miss Our Posts. Get updates in your mailbox as soon as they are posted. </legend> <p> <input type="text" name="blog_archive_partition_email" /> <input type="submit" name="blog_archive_partition_submit" value="SUBSCRIBE" /> </p> </fieldset> </form&t;

İlgilenebilecek herkes için, genesis_after_entry kancasını kullanarak formu o konuma ekledim ve bir işlevde aşağıdaki kodla üçüncü gönderiyi kontrol ettim.

 global $post, $wp_query; if (is_home() && $wp_query->posts[3]->ID == $post->ID) { include(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); }

Form şu şekilde tasarlanmıştır:

 #blog-archive-signup { width:100% !important; clear:both; } #blog-archive-signup { @include breakpoint($tablet) { background:url("images/bas-bg.png") no-repeat 0 0; height:200px; } } #blog-archive-signup fieldset { border:0; width:100%; padding-left:50px; } #blog-archive-signup fieldset { @include breakpoint(max-width $tablet) { padding-left:0px } } #blog-archive-signup legend { padding-top:20px; } #blog-archive-signup #fields-container { width:100% } #blog-archive-signup input[name*='email'] { background:url("images/bas-field.png") no-repeat 0 0; padding:0; margin:0; height:44px; border:0; width:560px; line-height:22px; float:left; } #blog-archive-signup input[name*='email'] { @include breakpoint(max-width $tablet) { padding:0; margin:0; border:0; width:50%; float:left; } } #blog-archive-signup input[type='submit'] { background:url("images/bas-button.png") no-repeat 0 0; padding:0; margin:0; height:44px; border:0; width:180px; color: #fff; text-align:center }

Abone Ekleme

Artık bu formu dolduran kullanıcılar çok fazla bir şey almayacak, aboneliğinizi etkinleştirmenizi isteyen bir onay e-postası aldıklarında hissettiğiniz o bulanık-sıcak hissi bile alamayacaklar (sic).

Sırada ne var, gönderiyi alın ve o kullanıcıyı bir Jetpack abonesi olarak ekleyin. Bunu jQuery ve wp_ajax kullanarak yapmaya karar verdim – önce jquery.

 $("#blog-archive-signup").submit(function(e) { e.preventDefault(); $("#loadingMessage,#failMessage").hide().remove(); var __button = $('#blog-archive-signup input[type="submit"]').get(0); $('#blog-archive-signup input[type="submit"]').after(codeable_spinner); var __data = $(this).serialize() + '&secure=' + codeableVars.security + '&action=blog_archive_signup'; $.post(codeableVars.ajaxurl,__data,function(response) { console.log(response); if (response.success) { $("#codeable_spinner").replaceWith(" Success! ").delay(5000).fadeOut('slow').remove(); } else { $("#codeable_spinner").replaceWith("

“+yanıt.mesaj+”

 ").delay(5000).fadeOut('slow').remove(); } }) })

Şimdi kullanıcıyı Jetpack ve Intercom'a kaydetmemiz gerekiyor. Bu yüzden, aboneleri nasıl eklediğini öğrenmek için Jetpack kodunu araştırdım ve Jetpack_Subscriptions sınıfını ve daha da önemlisi e-postayı parametre olarak alan statik abone olma yöntemini buldum. Ve Intercom için basit bir kıvrılma isteği iyidir, wswp_make_api_call içindeki koda bakın. İşte gidiyor:

 add_action('wp_ajax_landing_page_signup', 'blog_archive_signup')); add_action('wp_ajax_nopriv_landing_page_signup', 'blog_archive_signup'); Function blog_archive_signup() { $data = array( 'email' => $_POST['blog_archive_partition_email'], 'custom_attributes' => array('subscribed_via' => 'blog_archive_partition') ); $call = wswp_make_api_call($data); $response = array("success"=>true,"message" => "bpa_signup"); $subscribe = Jetpack_Subscriptions::subscribe($_REQUEST[$prefix.'_email']); delete_transient('wpcom_subscribers_total'); stats_update_blog(); //refresh subscribers count in wp-admin wp_send_json($response); exit(); } function wswp_make_api_call($data) { $curl = curl_init(); curl_setopt_array($curl, array( CURLOPT_HTTPHEADER => array('Content-Type: application/json', 'Accept: application/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($data), CURLOPT_HEADER => false, )); //Note you will need to set the constants for app id and api key to the correct values $return = json_decode(curl_exec($curl), true); curl_close($curl); return $return; }

İşte buyur. Şimdi birisi bu formu doldurduğunda, hemen Jetpack'ten abone olduklarını belirten bir onay e-postası alıyorlar ve yayınlanır yayınlanmaz yazıları içeren e-postayı alıyorlar.

Perde arkasında, Intercom'a abone olunan_Via => blog arşiv bölümü etiketiyle kaydedilirler. Bir dahaki sefere, abonelerinizi Thrive Leads eklentisinden Intercom'a harika segmentlere ayırma için bazı ek verilerle nasıl gönderebileceğinizi anlatacağım.

Not: Herhangi codeableVars.security hakkında merak ediyorsa – bir WordPress nonce içerir. Normalde bu, formda bir wp_nonce_field() olurdu, ancak bu javascript'i içeren komut dosyası zaten wp_localize_script() kullanılarak yerelleştirildi ve nonce bunun içinde depolandı.