skip to Main Content

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

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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 :

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

<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.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Dans notre exemple, nous afficheront le formulaire après le 3e 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.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

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.

 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
10 Partages
Partagez10
Tweetez
Enregistrer