Construisez votre liste d’abonnés avec Jetpack et Intercom

Jetpack est une excellente solution pour créer une liste d’abonnés, et Intercom est une solution qui vous permettra de gérer les abonnés et de rester en contact avec eux.

Dans ce tutoriel, nous allons vous montrer comment augmenter votre liste d’abonnés avec Jetpack et Intercom.

Certaines personnes sont venues me demander s’il est possible de permettre à des utilisateurs de souscrire et de recevoir tous leurs articles par e-mail, et de stocker leurs adresses e-mail dans Intercom. J’ai immédiatement répondu positivement, surtout que l’API (Application Programming Interface) est facile à utiliser.

J’ai donc pensé à utiliser un plugin d’abonnement, qui enverra les adresses e-mail à Intercom via l’API. Et c’est exactement ce que je ferai.

Nous avions déjà installé Jetpack, donc tout ce qu’il faut, c’est activer le module « Abonnements » … Cependant, ce n’est pas aussi simple que cela, que se passera-t-il si vous souhaitez afficher le formulaire dans un emplacement personnalisé (page personnalisée par exemple) ? Nous allons également vous montrer comment personnaliser l’emplacement où s’affichera le formulaire.

Premiers Pas

Nous allons commencer avec un formulaire basique :

<form id="blog-archive-signup"> <!-- 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 id="fields-container"> <input type="text" name="blog_archive_partition_email" /> <input type="submit" name="blog_archive_partition_submit" value="SUBSCRIBE" /> </p> </fieldset> </form>

Pour tous ceux qui peuvent être intéressés, j’ai ajouté le formulaire à cet endroit en utilisant l’action « genesis_after_entry » du thème Genesis, mais si vous n’utilisez pas Genesis, vous pouvez utiliser le filtre « the_content » et concaténé votre contenu à celui de l’article.

Dans notre exemple, nous afficheront le formulaire après le 3^e article. Si vous utilisez le filtre, utilisez les fonctions « ob_start » et  « ob_get_clean » pour initialiser le tampon et utiliser son contenu.

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"); 
}

Voici un code CSS pour styler le formulaire.

#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 }

Comment ajouter des abonnés

Nous allons maintenant enregistrer les utilisateurs sur Jetpack en utilisant « jQuery.ajax ».

$("#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(""+response.message+"").delay(5000).fadeOut('slow').remove(); 
      } 
}) 
})

Maintenant, nous devons sauver l’utilisateur dans Jetpack et Intercom. Je fouillé dans le code de Jetpack pour savoir comment il ajoute des abonnés et j’ai trouvé la classe « Jetpack_Subscriptions » et la méthode statique qui prend l'email comme un paramètre. Et pour Intercom une simple requête CURL suffira.

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; 
}

C’est tout. Maintenant, quand quelqu’un remplit ce formulaire, il obtient immédiatement un email de confirmation sur Jetpack disant qu’il a souscrit, et il obtiendra des emails contenant vos articles dès qu’ils seront publiés.

Dans les coulisses, ils sont inscrits dans Intercom avec l’étiquette « Subscribed_Via => blog archive partition ». La prochaine fois, je vous dirai comment vous pouvez également envoyer vos abonnés du plugin Thrive Leads vers Intercom avec des données supplémentaires qui vous permettront de tous les distinguer.

Si vous ne maitrisez pas l’utilité de « codeableVars.security », vous devez savoir qu’il contient une « nonce » WordPress. Normalement, cela aurait été fait avec la fonction php « wp_nonce_field() » dans le formulaire, mais le script contenant que du JavaScript, le champ nonce est déjà disponible dans la fonction JS « wp_localize_script() ».

C’est à peu près tout ce qu’il y à faire pour ce tutoriel. N’hésitez pas à nous poser des questions ou à partager le tutoriel avec vos amis sur vos réseaux sociaux préférés.