Springe zum Hauptinhalt

Erstellen Sie Ihre Liste der Abonnenten mit Jetpack und Intercom

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Jetpack ist eine hervorragende Lösung zum Erstellen einer Abonnentenliste, und Intercom ist eine Lösung, mit der Sie Abonnenten verwalten und mit ihnen in Kontakt bleiben können.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihre Abonnentenliste mit Jetpack und Intercom erweitern können.

Einige Leute haben mich gefragt, ob es möglich ist, Benutzern das Abonnieren und Empfangen aller ihrer Artikel per E-Mail zu ermöglichen und ihre E-Mail-Adressen in Intercom zu speichern. Ich habe sofort positiv geantwortet, vor allem als API (Programmierschnittstelle) ist einfach zu bedienen.

Daher habe ich mir überlegt, ein Abonnement-Plugin zu verwenden, das die E-Mail-Adressen über die API an Intercom sendet. Und genau das werde ich tun.

Wir hatten Jetpack bereits installiert, Sie müssen also nur das Modul aktivieren. " Abonnements "... Es ist jedoch nicht so einfach, was ist, wenn Sie das Formular an einem benutzerdefinierten Speicherort anzeigen möchten (benutzerdefinierte Seite zum Beispiel)? Wir zeigen Ihnen auch, wie Sie anpassen können, wo das Formular angezeigt wird.

erste Schritte

Wir beginnen mit einer Grundform:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

 Verpassen Sie niemals unsere Beiträge. Erhalten Sie Updates in Ihrer Mailbox, sobald sie veröffentlicht werden. 

Für alle, die interessiert sein könnten, habe ich das Formular hier mit der Aktion " genesis_after_entry Genesis-Thema, aber wenn Sie nicht Genesis verwenden, können Sie den Filter verwenden " the_content Und Ihren Inhalt mit dem des Artikels verkettet.

In unserem Beispiel zeigen wir das Formular nach dem 3 ane Artikel. Wenn Sie den Filter verwenden, verwenden Sie die Funktionen " ob_start "Und" ob_get_clean Initialisieren des Puffers und Verwenden seines Inhalts.

globale  $ post, $ wp_query; 
if (is_home() && $ wp_query->Beiträge[3]->ID == $ post->ID) {       
     das(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); 
}

Hier ist eine CSS, das Formular stylen.

# Blog-Archiv-Anmeldungen { Breite: 100% ! important; klar:beide; } 
# Blog-Archiv-Anmeldungen { @include Breakpoint ($ Tablet) { Hintergrund:url ( "images / low-bg.png") no-repeat 0 0; Höhe:200px; } } 
# Blog-Archiv-Anmeldungen Fieldset { Grenze:0; Breite: 100%; padding-links:50px; } 
# Blog-Archiv-Anmeldungen Fieldset { @include Haltepunkt (max-width $ Tablet) { padding-links:0px } } 
# Blog-Archiv-Anmeldungen Legende { padding-top:20px; } 
# Blog-Archiv-Anmeldungen Felder Container # { Breite: 100% } 
# Blog-Archiv-Anmeldungen Eingabe [name * = 'E-Mail'] { Hintergrund:url ( "images / low-field.png") no-repeat 0 0; Polsterung:0; Marge:0; Höhe:44px; Grenze:0; Breite:560px; line-height:22px; schweben:links; } 
# Blog-Archiv-Anmeldungen Eingabe [name * = 'E-Mail'] { @include Haltepunkt (max-width $ Tablet) { Polsterung:0; Marge:0; Grenze:0; Breite: 50%; schweben:links; } } 
# Blog-Archiv-Anmeldungen input [type = 'submit'] { Hintergrund:url ( "images / low-button.png") no-repeat 0 0; Polsterung:0; Marge:0; Höhe:44px; Grenze:0; Breite:180px; Farbe: #fff; text-align:Zentrum }

So fügen Sie Abonnenten hinzu

Wir werden jetzt Benutzer auf Jetpack registrieren mit " jQuery.ajax ".

$("# Blog-Archiv-Anmeldungen").abschicken(Funktion(e) { e.prevent(); $("LoadingMessage #, # FailMessage").verstecken().entfernen(); 
      jung __button = $('# Blog-Archiv-Anmeldungen input [type = "submit"]').bekommen(0); $('# Blog-Archiv-Anmeldungen input [type = "submit"]').nach(codeable_spinner); 
      jung __DATA = $(fehlen uns die Worte.).Serialisierung() + '& Secure =' + codeableVars.Sicherheitdienst + '& action = blog_archive_signup';   
      $.Post(codeableVars.ajaxurl,__DATA,Funktion(Antwort) { trösten.Log(Antwort); if (Antwort.Erfolg) { 
          $("#codeable_spinner").replaceWith(„Erfolg!“).verzögern(5000).fadeOut(‚Langsam‘).entfernen(); } sonst { 
          $("#codeable_spinner").replaceWith(""+Antwort.Nachricht+"").verzögern(5000).fadeOut(‚Langsam‘).entfernen(); 
      } 
}) 
})

Jetzt müssen wir den Benutzer in Jetpack und Intercom speichern. Ich habe mich mit dem Code von Jetpack befasst, um herauszufinden, wie Abonnenten hinzugefügt werden, und die Klasse "Jetpack_Subscriptions" und die statische Methode gefunden, die E-Mail als Parameter verwendet. Und für Intercom reicht eine einfache CURL-Anfrage aus.

add_action('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); 
add_action('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); 
Funktion blog_archive_signup() { 
  $ Data = Feld( ‚E-Mail‘ => $ _POST['Blog_archive_partition_email'], 'Custom_attributes' => Feld('Subscribed_via' => 'Blog_archive_partition') ); 
  $ Anruf = wswp_make_api_call($ Data); 
  $ response = Feld(„Erfolg“=>was immer dies auch sein sollte.,"Message" => "Bpa_signup"); 
  $ abonnieren = Jetpack_Subscriptions::Abonnieren($ _REQUEST[$ prefix.‚_Bestellinformationen‘]); 
  delete_transient('Wpcom_subscribers_total'); 
  stats_update_blog();  
  // Aktualisieren Abonnenten zählen in wp-admin  
  wp_send_json($ response); 
  verlassen(); 
} 
Funktion wswp_make_api_call($ Data) { 
   $ curl = curl_init(); curl_setopt_array($ curl, Feld( CURLOPT_HTTPHEADER => Feld('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 => falsch, )); 
   // Beachten Sie die Konstante für App-ID und api Schlüssel für die richtigen Werte gesetzt werden müssen  
  $ Zurück = json_decode(curl_exec($ curl), was immer dies auch sein sollte.); 
  curl_close($ curl); 
  Rückkehr $ Zurück; 
}

Das ist alles. Wenn jemand dieses Formular ausfüllt, erhält er sofort eine Bestätigungs-E-Mail auf Jetpack, die besagt, dass er sich angemeldet hat, und er erhält E-Mails mit Ihren Artikeln, sobald diese veröffentlicht werden.

Hinter den Kulissen sind sie in Intercom mit der Bezeichnung "Subscribed_Via => Blog-Archivpartition" registriert. Beim nächsten Mal werde ich Ihnen erklären, wie Sie Ihre Abonnenten des Thrive Leads-Plugins mit zusätzlichen Daten an Intercom senden können, mit denen Sie sie alle unterscheiden können.

Wenn Sie den Nutzen von " codeableVars.security Sie müssen wissen, dass es eine enthält " Nuntius WordPress. Normalerweise wäre dies mit der PHP-Funktion gemacht worden. " wp_nonce_field () In dem Formular, aber dem Skript, das nur JavaScript enthält, ist das Nonce-Feld bereits in der JS-Funktion verfügbar. wp_localize_script () ".

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Das ist ungefähr alles, was Sie für dieses Tutorial tun müssen. Sie können uns gerne Fragen stellen oder das Tutorial in Ihren bevorzugten sozialen Netzwerken mit Ihren Freunden teilen.

 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
10 Aktien
Aktie10
tweet
Registrieren