Membangun daftar pelanggan dengan Jetpack dan Intercom

Jetpack adalah solusi hebat untuk membuat daftar pelanggan, dan Intercom adalah solusi yang memungkinkan Anda mengelola pelanggan dan tetap tinggal kontak dengan mereka.

Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana meningkatkan daftar pelanggan Anda dengan Jetpack dan Intercom.

Beberapa orang datang untuk bertanya kepada saya apakah mungkin untuk memungkinkan pengguna berlangganan dan menerima semua artikel mereka melalui email, dan menyimpan alamat email mereka di Intercom. Saya segera merespons secara positif, terutama sebagai API (Application Programming Interface) mudah digunakan.

Jadi saya berpikir untuk menggunakan plugin berlangganan, yang akan mengirim alamat email ke Intercom melalui API. Dan itulah yang akan saya lakukan.

Kami sudah menginstal Jetpack, jadi yang Anda butuhkan hanyalah mengaktifkan modul " Abonnements …Namun, tidak sesederhana itu, bagaimana jika Anda ingin menampilkannya bentuk di lokasi khusus (halaman khusus misalnya)? Kami juga akan menunjukkan cara menyesuaikan tempat bentuk.

Langkah pertama

Kita akan mulai dengan a bentuk dasar :

Jangan Pernah Lewatkan Posting Kami. Dapatkan pembaruan di kotak surat Anda segera setelah diposkan.

Bagi siapa saja yang mungkin tertarik, saya telah menambahkan formulir di sini menggunakan tindakan " genesis_after_entry Tema Genesis, tetapi jika Anda tidak menggunakan Genesis, Anda dapat menggunakan filter " the_content Dan menyatukan konten Anda dengan artikel tersebut.

Dalam contoh kami, kami akan menampilkan formulir setelah 3^e artikel. Jika Anda menggunakan filter, gunakan fungsi " ob_start "Dan" ob_get_clean Untuk menginisialisasi buffer dan menggunakan kontennya.

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

Berikut adalah CSS untuk gaya formulir.

# Blog-arsip-pendaftaran { lebar:100% Penting!; jelas:kedua; } 
# Blog-arsip-pendaftaran { @include breakpoint ($ Tablet) { latar belakang:url ( "images / rendah bg.png") no-ulangi 0 0; tinggi:200px; } } 
# Blog-arsip-pendaftaran fieldset { batas:0; lebar:100%; padding-left:50px; } 
# Blog-arsip-pendaftaran fieldset { @include breakpoint (max-width $ Tablet) { padding-left:0px } } 
# Legenda Blog-arsip-pendaftaran { padding-top:20px; } 
# Bidang Blog-arsip-pendaftaran Kontainer # { lebar:100% } 
# Masukan Blog-arsip-pendaftaran [nama * = 'email'] { latar belakang:url ( "images / rendah field.png") no-ulangi 0 0; lapisan:0; batas:0; tinggi:44px; batas:0; lebar:560px; tinggi garis:22px; mengapung:meninggalkan; } 
# Masukan Blog-arsip-pendaftaran [nama * = 'email'] { @include breakpoint (max-width $ Tablet) { lapisan:0; batas:0; batas:0; lebar:50%; mengapung:meninggalkan; } } 
# Blog-arsip-pendaftaran input [type = 'submit'] { latar belakang:url ( "images / rendah button.png") no-ulangi 0 0; lapisan:0; batas:0; tinggi:44px; batas:0; lebar:180px; warna: # fff; text-align:pusat }

Bagaimana cara menambahkan pelanggan

Kami sekarang akan mendaftarkan pengguna di Jetpack menggunakan " jQuery.ajax '.

$("# Blog-arsip-pendaftaran").menyerahkan(fungsi(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").menyembunyikan().menghapus(); 
      adalah __button = $('# Blog-arsip-pendaftaran input [type = "submit"]').mendapatkan(0); $('# Blog-arsip-pendaftaran input [type = "submit"]').setelah(codeable_spinner); 
      adalah __DATA = $(ini).cerita() + '& secure =' + codeableVars.keamanan + '& action = blog_archive_signup';   
      $.pos(codeableVars.ajaxurl,__DATA,fungsi(tanggapan) { konsol.mencatat(tanggapan); if (tanggapan.sukses) { 
          $("#codeable_spinner").replaceWith("Sukses!").menunda(5000).fadeOut('Lambat').menghapus(); } lain { 
          $("#codeable_spinner").replaceWith(""+tanggapan.pesan+"").menunda(5000).fadeOut('Lambat').menghapus(); 
      } 
}) 
})

Sekarang kita perlu menyimpan pengguna di Jetpack dan Intercom. Saya menggali kode Jetpack untuk mengetahui cara menambahkan pelanggan dan menemukan kelas "Jetpack_Subscriptions" dan metode statis yang menggunakan email sebagai parameter. Dan untuk Intercom, permintaan CURL sederhana sudah cukup.

ADD_ACTIONsebagai('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); 
ADD_ACTIONsebagai('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); 
fungsi blog_archive_signup() { 
  $ data = susunan( 'Email' => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => susunan('Subscribed_via' => 'Blog_archive_partition') ); 
  $ panggilan = wswp_make_api_call($ data); 
  $ tanggapan = susunan("Sukses"=>benar,"Pesan" => "Bpa_signup"); 
  $ berlangganan = Jetpack_Subscriptions::berlangganan($ _REQUEST[$ prefix.'_email']); 
  delete_transient('Wpcom_subscribers_total'); 
  stats_update_blog();  
  // Pelanggan penyegaran menghitung dalam wp-admin  
  wp_send_json($ tanggapan); 
  keluar(); 
} 
fungsi wswp_make_api_call($ data) { 
   $ keriting = curl_init(); curl_setopt_array($ keriting, susunan( CURLOPT_HTTPHEADER => susunan('Content-Type: application / json', 'Terima: 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 => palsu, )); 
   // Catatan Anda akan perlu mengatur konstan untuk aplikasi id dan kunci api dengan nilai-nilai yang tepat  
  $ return = json_decode(curl_exec($ keriting), benar); 
  curl_close($ keriting); 
  kembali $ return; 
}

Itu saja. Sekarang ketika seseorang mengisi formulir ini, mereka segera mendapatkan email konfirmasi di Jetpack yang mengatakan bahwa mereka telah berlangganan, dan mereka akan mendapatkan email berisi artikel Anda segera setelah diposting.

Di belakang layar, mereka terdaftar di Intercom dengan label "Subscribed_Via => partisi arsip blog". Lain kali saya akan memberi tahu Anda bagaimana Anda juga dapat mengirim pelanggan plugin Thrive Leads Anda ke Intercom données informasi tambahan yang memungkinkan Anda membedakan semuanya.

Jika Anda tidak menguasai kegunaan " codeableVars.security Anda harus tahu bahwa itu mengandung " duta paus WordPress. Biasanya, ini akan dilakukan dengan fungsi php " wp_nonce_field () Dalam formulir, tetapi skrip yang hanya berisi JavaScript, bidang nonce sudah tersedia di fungsi JS " wp_localize_script () '.

Itulah semua yang harus dilakukan untuk tutorial ini. Jangan ragu untuk bertanya kepada kami atau berbagi tutorial dengan teman-teman Anda di jejaring sosial favorit Anda.