Costruisci la tua lista di abbonati con Jetpack e citofono

Jetpack è un'ottima soluzione per creare un elenco di abbonati e Intercom è una soluzione che ti consentirà di gestire gli abbonati e rimanere in contatti con loro.

In questo tutorial, ti mostreremo come aumentare il tuo elenco di abbonati con Jetpack e Intercom.

Alcune persone sono venute a chiedermi se è possibile consentire agli utenti di iscriversi e ricevere tutti i loro articoli via e-mail e memorizzare i loro indirizzi e-mail in interfono. Ho immediatamente risposto positivamente, soprattutto come API (Application Programming Interface) è facile da usare.

Quindi ho pensato di utilizzare un plug-in di abbonamento, che invierà gli indirizzi email a Intercom tramite l'API. Ed è esattamente quello che farò.

Jetpack era già installato, quindi è sufficiente attivare il modulo " Sottoscrizioni …Tuttavia, non è così semplice, cosa succede se si desidera visualizzare il file forma in una posizione personalizzata (pagina personalizzata per esempio)? Ti mostreremo anche come personalizzare dove il file forma.

primi passi

Inizieremo con un forma fondamentale:

 Non perdere mai i nostri post. Ricevi gli aggiornamenti nella tua casella di posta non appena vengono pubblicati. 

Per chiunque possa essere interessato, ho aggiunto il modulo qui utilizzando l'azione " genesis_after_entry Tema Genesis, ma se non si utilizza Genesis, è possibile utilizzare il filtro " the_content E ha concatenato il tuo contenuto a quello dell'articolo.

Nel nostro esempio, visualizzeremo il modulo dopo 3^e articolo. Se si utilizza il filtro, utilizzare le funzioni " ob_start "E" ob_get_clean Per inizializzare il buffer e utilizzare il suo contenuto.

globale $ postale, $ WP_Query; 
if (is_home() && $ WP_Query->correlati[3]->ID == $ postale->ID) {       
     includere(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); 
}

Ecco un CSS per lo stile del modulo.

# Blog-archive-iscrizione { larghezza:100% ! important; pulire campo:entrambi; } 
# Blog-archive-iscrizione { breakpoint @include ($ Tablet) { sfondo:url ( "immagini / bassa bg.png") no-repeat 0 0; altezza:200px; } } 
# Blog-archive-iscrizione fieldset { sistema:0; larghezza:100%; padding-left:50px; } 
# Blog-archive-iscrizione fieldset { breakpoint @include (max-width Tablet $) { padding-left:0px } } 
# Blog-archive-iscrizione leggenda { padding-top:20px; } 
# Campi Blog-archivio-iscrizione Container # { larghezza:100% } 
# Ingresso Blog-archivio-iscrizione [nome * = 'email'] { sfondo:url ( "immagini / bassa field.png") no-repeat 0 0; imbottitura:0; margine:0; altezza:44px; sistema:0; larghezza:560px; altezza della linea:22px; galleggiante:a sinistra; } 
# Ingresso Blog-archivio-iscrizione [nome * = 'email'] { breakpoint @include (max-width Tablet $) { imbottitura:0; margine:0; sistema:0; larghezza:50%; galleggiante:a sinistra; } } 
Ingresso # Blog-archive-iscrizione [type = 'submit'] { sfondo:url ( "immagini / low-button.png") no-repeat 0 0; imbottitura:0; margine:0; altezza:44px; sistema:0; larghezza:180px; colore: #fff; text-align:centro }

Come aggiungere abbonati

Ora registreremo gli utenti su Jetpack usando " jQuery.ajax '.

$("# Blog-archive-iscrizione").inviare(function(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").nascondere().rimuovere(); 
      var __button = $('# Blog-archive-iscrizione di input [type = "submit"]').ottenere(0); $('# Blog-archive-iscrizione di input [type = "submit"]').dopo(codeable_spinner); 
      var __DATA = $(questo).serializzare() + "& secure =" + codeableVars.problemi di + "& action = blog_archive_signup";   
      $.settimana(codeableVars.ajaxurl,__DATA,function(risposta) { consolle.ceppo(risposta); if (risposta.il successo) { 
          $("#codeable_spinner").ReplaceWith("Il successo!").ritardo(5000).fadeOut('Lento').rimuovere(); } altro { 
          $("#codeable_spinner").ReplaceWith(""+risposta.messaggio+"").ritardo(5000).fadeOut('Lento').rimuovere(); 
      } 
}) 
})

Ora dobbiamo salvare l'utente in Jetpack e Intercom. Ho scavato nel codice di Jetpack per scoprire come aggiunge abbonati e ho trovato la classe "Jetpack_Subscriptions" e il metodo statico che accetta la posta elettronica come parametro. E per Intercom sarà sufficiente una semplice richiesta CURL.

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 = schieramento( 'E-mail' => $ _POST['Blog_archive_partition_email'], 'Custom_attributes' => schieramento('Subscribed_via' => 'Blog_archive_partition') ); 
  $ chiamata = wswp_make_api_call($ Data); 
  $ risposta = schieramento("Successo"=>vero,"Messaggio" => "Bpa_signup"); 
  $ iscriversi = Jetpack_Subscriptions::sottoscrivi($ _REQUEST[$ prefix.'_email']); 
  delete_transient('Wpcom_subscribers_total'); 
  stats_update_blog();  
  contano // aggiornamento abbonati in wp-admin  
  wp_send_json($ risposta); 
  exit(); 
} 
function wswp_make_api_call($ Data) { 
   $ ricciolo = curl_init(); curl_setopt_array($ ricciolo, schieramento( CURLOPT_HTTPHEADER => schieramento('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 => falso, )); 
   // Nota: è necessario impostare la costante per App ID e la chiave API per i valori corretti  
  $ Tornare = json_decode(curl_exec($ ricciolo), vero); 
  curl_close($ ricciolo); 
  ritorno $ Tornare; 
}

È tutto. Ora, quando qualcuno compila il modulo, riceve immediatamente un'e-mail di conferma su Jetpack che dice che si è iscritto e riceverà e-mail contenenti i tuoi articoli non appena vengono pubblicati.

Dietro le quinte, sono registrati in Intercom con l'etichetta "Subscribe_Via => partizione archivio blog". La prossima volta ti dirò come puoi anche inviare i tuoi abbonati al plug-in Thrive Leads a Intercom con dati informazioni aggiuntive che ti permetteranno di distinguerli tutti.

Se non si padroneggia l'utilità di " codeableVars.security Devi sapere che contiene un " nonce "WordPress. Normalmente, questo sarebbe stato fatto con la funzione php " wp_nonce_field () Nel modulo, ma lo script contenente solo JavaScript, il campo nonce è già disponibile nella funzione JS " wp_localize_script () '.

Questo è tutto quello che c'è da fare per questo tutorial. Sentiti libero di farci domande o condividere il tutorial con i tuoi amici sui tuoi social network preferiti.