Jetpack is een geweldige oplossing voor het samenstellen van een lijst met abonnees, en Intercom is een oplossing waarmee je abonnees kunt beheren en binnen kunt blijven contact met hen.
In deze zelfstudie laten we u zien hoe u uw abonneelijst kunt verhogen met Jetpack en Intercom.
Sommige mensen zijn gekomen om mij te vragen of het mogelijk is om gebruikers toe te staan zich te abonneren en al hun artikelen per e-mail te ontvangen en hun e-mailadressen op te slaan in Intercom. Ik reageerde onmiddellijk positief, vooral omdat de API (Application Programming Interface) is gemakkelijk te gebruiken.
Dus ik dacht erover om een abonnementsplug-in te gebruiken, die de e-mailadressen via de API naar Intercom stuurt. En dat is precies wat ik ga doen.
We hadden Jetpack al geïnstalleerd, dus het enige dat je nodig hebt is de module " Abonnementen …Het is echter niet zo eenvoudig, wat als u de formulier op een aangepaste locatie (aangepaste pagina bijvoorbeeld)? We laten u ook zien hoe u kunt aanpassen waar de formulier.
Eerste stappen
We beginnen met een formulier basis:
Mis nooit onze berichten. Ontvang updates in uw mailbox zodra ze zijn gepost.
Voor iedereen die mogelijk geïnteresseerd is, heb ik het formulier hier toegevoegd met behulp van de actie " genesis_after_entry Genesis-thema, maar als u Genesis niet gebruikt, kunt u het filter ' de inhoud En uw inhoud samengevoegd met die van het artikel.
In ons voorbeeld zullen we het formulier weergeven na de 3e artikel. Als u het filter gebruikt, gebruikt u de functies " ob_start "En" ob_get_clean Om de buffer te initialiseren en de inhoud ervan te gebruiken.
globaal $ bericht, $ wp_query; if (is_home() && $ wp_query->posts[3]->ID == $ bericht->ID) { omvatten(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); }
Hier is een CSS-code voor het stylen van het formulier.
# Blog-archive-registratie { Breedte:100% ! important; duidelijk:zowel; } # Blog-archive-registratie { @include breakpoint ($ tablet) { achtergrond:url ( "images / low-bg.png") niet-herhalen 0 0; Hoogte:200px; } } # blog-archief-aanmeldingsveldset { grens:0; Breedte:100%; -Padding left:50px; } # blog-archief-aanmeldingsveldset { @include breakpoint (maximale breedte $ tablet) { -Padding left:0px } } # legendarische archief-aanmelding legende { padding-top:20px; } # blog-archief-aanmelding # velden-container { Breedte:100% } # blog-archief-aanmeldingsinvoer [naam * = 'email'] { achtergrond:url ( "images / low-field.png") niet-herhalen 0 0; vulling:0; marge:0; Hoogte:44px; grens:0; Breedte:560px; lijnhoogte:22px; drijven:links; } # blog-archief-aanmeldingsinvoer [naam * = 'email'] { @include breakpoint (maximale breedte $ tablet) { vulling:0; marge:0; grens:0; Breedte:50%; drijven:links; } } # blog-archief-inschrijf input [type = 'submit'] { achtergrond:url ( "images / low-button.png") niet-herhalen 0 0; vulling:0; marge:0; Hoogte:44px; grens:0; Breedte:180px; kleur: #fff; text-align:centrum }
Hoe abonnees toe te voegen
We zullen nu gebruikers op Jetpack registreren met " jQuery.ajax .
$("# Blog-archive-registratie").voorleggen(functie(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").verstoppen().verwijderen(); var __button = $('# blog-archive-login-invoer [type = "submit"]').krijgen(0); $('# blog-archive-login-invoer [type = "submit"]').na(codeable_spinner); var __DATA = $(dit).serialize() + '& secure =' + codeableVars.veiligheid + '& action = blog_archive_signup'; $.post(codeableVars.ajaxurl,__DATA,functie(antwoord) { console.inloggen(antwoord); if (antwoord.succes) { $("#codeable_spinner").replaceWith("Succes!").vertraging(5000).fadeout('Slow').verwijderen(); } anders { $("#codeable_spinner").replaceWith(""+antwoord.Bericht+"").vertraging(5000).fadeout('Slow').verwijderen(); } }) })
Nu moeten we de gebruiker opslaan in Jetpack en Intercom. Ik dook in de code van Jetpack om erachter te komen hoe het abonnees toevoegt en vond de klasse "Jetpack_Subscriptions" en de statische methode die e-mail als parameter gebruikt. En voor Intercom is een eenvoudig CURL-verzoek voldoende.
add_action('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); add_action('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); functie blog_archive_signup() { $ Data = reeks( 'E-mail' => $ _POST['Blog_archive_partition_email'], 'Custom_attributes' => reeks('Subscribed_via' => 'Blog_archive_partition') ); $ call = wswp_make_api_call($ Data); $ response = reeks("Succes"=>waar,"Message" => "Bpa_signup"); $ abonneren = Jetpack_Subscriptions::abonneren($ _REQUEST[$ prefix.'_email']); delete_transient('Wpcom_subscribers_total'); stats_update_blog(); // refresh abonnees tellen in wp-admin wp_send_json($ response); afrit(); } functie wswp_make_api_call($ Data) { $ curl = curl_init(); curl_setopt_array($ curl, reeks( CURLOPT_HTTPHEADER => reeks('Content-Type: application / json', 'Accepteer: applicatie / 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 => vals, )); // Opmerking dat u de constanten voor app id en api moet instellen $ Terug te keren = json_decode(curl_exec($ curl), waar); curl_close($ curl); terugkeer $ Terug te keren; }
Dat is alles. Wanneer iemand dit formulier nu invult, krijgen ze onmiddellijk een bevestigingsmail op Jetpack waarin staat dat ze zich hebben aangemeld, en ze zullen e-mails ontvangen met uw artikelen zodra ze zijn gepost.
Achter de schermen worden ze geregistreerd in Intercom met het label "Subscribed_Via => blogarchiefpartitie". De volgende keer zal ik je vertellen hoe je ook je Thrive Leads plugin-abonnees naar Intercom kunt sturen donnees aanvullende informatie waarmee u ze allemaal kunt onderscheiden.
Als u het nut van ' codeableVars.security Je moet weten dat het een " nuntius "WordPress. Normaal gesproken zou dit zijn gedaan met de php-functie " wp_nonce_field () In de vorm, maar het script dat alleen JavaScript bevat, is het nonce-veld al beschikbaar in de JS-functie ' wp_localize_script () .
Dat is ongeveer alles wat er te doen is voor deze tutorial. Stel ons gerust vragen of deel de tutorial met je vrienden op je favoriete sociale netwerken.
