بناء قائمة من المشتركين مع Jetpack لوالاتصال الداخلي

Jetpack هو حل رائع لبناء قائمة المشتركين ، والاتصال الداخلي هو الحل الذي سيسمح لك بإدارة المشتركين والبقاء في التواصل معهم.

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية زيادة قائمة المشتركين لديك مع Jetpack و Intercom.

جاء بعض الأشخاص لسؤالي عما إذا كان من الممكن السماح للمستخدمين بالاشتراك وتلقي جميع مقالاتهم عن طريق البريد الإلكتروني ، وتخزين عناوين البريد الإلكتروني الخاصة بهم في الاتصال الداخلي. لقد استجابت على الفور بشكل إيجابي ، لا سيما واجهة برمجة التطبيقات (واجهة برمجة التطبيقات) سهل الاستخدام.

لذلك فكرت في استخدام مكون إضافي للاشتراك ، والذي سيرسل عناوين البريد الإلكتروني إلى Intercom من خلال API. وهذا بالضبط ما سأفعله.

لدينا بالفعل تثبيت Jetpack ، لذلك كل ما تحتاجه هو تنشيط الوحدة " الاشتراكات ... ومع ذلك ، فالأمر ليس بهذه البساطة ، ماذا لو كنت تريد عرض ملف استمارتنا في موقع مخصص (صفحة مخصصة على سبيل المثال)؟ سنوضح لك أيضًا كيفية تخصيص مكان ملف استمارتنا.

الخطوات الأولى

سنبدأ مع أ استمارتنا أساسي :

 لا تفوت منشوراتنا. احصل على التحديثات في صندوق البريد الخاص بك بمجرد نشرها. 

بالنسبة لأي شخص قد يكون مهتمًا ، أضفت النموذج هنا باستخدام الإجراء " genesis_after_entry سمة Genesis ، ولكن إذا كنت لا تستخدم Genesis ، يمكنك استخدام عامل التصفية " the_content وسلس المحتوى الخاص بك إلى أن من المادة.

في مثالنا ، سوف نعرض النموذج بعد 3^e المادة. إذا كنت تستخدم عامل التصفية ، استخدم الوظائف " ob_start "و" ob_get_clean لتهيئة المخزن المؤقت واستخدام محتوياته.

شامل $ آخر, $ wp_query; 
if (is_home() && $ wp_query->المشاركات[3]->ID == $ آخر->ID) {       
     تتضمن(get_stylesheet_directory()."/Includes/templates/snippets/blog-archive-signup.php"); 
}

إليك رمز CSS لتصميم النموذج.

# مقالات-أرشيف الاشتراك { عرض:100% ! هامة; واضح:على حد سواء; } 
# مقالات-أرشيف الاشتراك { تضمين @ نقطة توقف (قرص $) { خلفية:رابط ( "صور / منخفضة bg.png") لا كرر 0 0; ارتفاع:200px; } } 
# حقل أرشيف أرشيف الاشتراك { الحدود:0; عرض:100%; يسار الحشو:50px; } 
# حقل أرشيف أرشيف الاشتراك { تضمين @ نقطة توقف (قرص أقصى عرض $) { يسار الحشو:0px } } 
# أسطورة أرشيف الاشتراك { الحشو أعلى:20px; } 
# blog-archive-signup # حقول الحاويات { عرض:100% } 
# إدخال أرشيف الأرشفة الاشتراك [name * = 'email'] { خلفية:رابط ( "صور / المنخفضة للfield.png") لا كرر 0 0; حشوة:0; هامش:0; ارتفاع:44px; الحدود:0; عرض:560px; خط الطول:22px; الطفو:اليسار; } 
# إدخال أرشيف الأرشفة الاشتراك [name * = 'email'] { تضمين @ نقطة توقف (قرص أقصى عرض $) { حشوة:0; هامش:0; الحدود:0; عرض:50%; الطفو:اليسار; } } 
# إدخال أرشيف أرشيف الاشتراك [type = 'submit'] { خلفية:رابط ( "صور / المنخفض button.png") لا كرر 0 0; حشوة:0; هامش:0; ارتفاع:44px; الحدود:0; عرض:180px; اللون: # الاتحاد الفرنسي; مواءمة النصوص:مركز }

كيفية إضافة المشتركين

سنقوم الآن بتسجيل المستخدمين على Jetpack باستخدام " jQuery.ajax ".

$("# مقالات-أرشيف الاشتراك").تقدم(وظيفة(e) { e.preventDefault(); $("LoadingMessage # # failMessage").إخفاء().إزالة(); 
      فار __button = $(# # إدخال أرشيف الأرشفة - [type = "submit"]).دولار فقط واحصل على خصم XNUMX% على جميع (0); $(# # إدخال أرشيف الأرشفة - [type = "submit"]).بعد(codeable_spinner); 
      فار __DATA = $(
).تسلسل() + '& secure =' + codeableVars.أمن + "& عمل = blog_archive_signup";   
      $.بريد.. اعلاني(codeableVars.ajaxurl,__DATA,وظيفة(استجابة) { يرجى العلم بأن يوجد سن محدد للمشاركة بهذه البطولات. الرجاء قراءة القواعد أدناه..سجل(استجابة); if (استجابة.تحقيق النجاح ) { 
          $("#Codeable_spinner").replaceWith("النجاح"!).تأخير(5000).الاختفاء التدريجي("بطيئة").إزالة(); } آخر { 
          $("#Codeable_spinner").replaceWith(""+استجابة.الرسالة+"").تأخير(5000).الاختفاء التدريجي("بطيئة").إزالة(); 
      } 
}) 
})

نحتاج الآن إلى حفظ المستخدم في Jetpack و Intercom. لقد حفرت في كود Jetpack لمعرفة كيفية إضافة المشتركين ووجدت فئة "Jetpack_Subscriptions" والطريقة الثابتة التي تأخذ البريد الإلكتروني كمعامل. وبالنسبة إلى الاتصال الداخلي ، يكفي طلب CURL البسيط.

ADD_ACTION("Wp_ajax_landing_page_signup", "Blog_archive_signup")); 
ADD_ACTION("Wp_ajax_nopriv_landing_page_signup", "Blog_archive_signup"); 
وظيفة blog_archive_signup() { 
  $ البيانات = مجموعة( "البريد الإلكتروني" => $ _ وظيفة["Blog_archive_partition_email"], "Custom_attributes" => مجموعة("Subscribed_via" => "Blog_archive_partition") ); 
  $ الدعوة = wswp_make_api_call($ البيانات); 
  $ استجابة = مجموعة("النجاح"=>صحيح,"رسالة" => "Bpa_signup"); 
  $ الاشتراك = Jetpack_Subscriptions::الاشتراك($ _REQUEST[$ البادئة."_Email"]); 
  delete_transient("Wpcom_subscribers_total"); 
  stats_update_blog();  
  // تحديث عدد المشتركين في wp-admin  
  wp_send_json($ استجابة); 
  خروج(); 
} 
وظيفة wswp_make_api_call($ البيانات) { 
   $ حليقة = curl_init(); curl_setopt_array($ حليقة, مجموعة( CURLOPT_HTTPHEADER => مجموعة("نوع المحتوى: application / json", قبول: 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($ البيانات), CURLOPT_HEADER => زائف, )); 
   // لاحظ أنك ستحتاج إلى ضبط حق التطبيق ومفتاح القيم الصحيحة  
  $ العودة = json_decode(curl_exec($ حليقة), صحيح); 
  curl_close($ حليقة); 
  عائد أعلى $ العودة; 
}

هذا كل شيئ. الآن عندما يملأ شخص ما هذا النموذج ، يحصل على الفور على رسالة تأكيد بالبريد الإلكتروني على Jetpack تفيد بأنه قد اشترك ، وسيتلقى رسائل بريد إلكتروني بمقالاتك بمجرد نشرها.

خلف الكواليس ، تم تسجيلهم في الاتصال الداخلي بالتسمية "Subscrib_Via => blog Archive section". في المرة القادمة سأخبرك كيف يمكنك أيضًا إرسال مشتركي المكون الإضافي Thrive Leads إلى الاتصال الداخلي باستخدام DONNEES معلومات إضافية تتيح لك التمييز بينها جميعًا.

إذا كنت لا تتقن فائدة " codeableVars.security يجب أن تعرف أنه يحتوي على " السفير البابوي "وورد. عادة ، قد يتم ذلك مع وظيفة php " wp_nonce_field () في النموذج ، ولكن النص الذي يحتوي على JavaScript فقط ، يكون الحقل nonce متاحًا بالفعل في وظيفة JS " wp_localize_script () ".

هذا هو كل ما يجب القيام به لهذا البرنامج التعليمي. لا تتردد في طرح الأسئلة أو مشاركة البرنامج التعليمي مع أصدقائك على الشبكات الاجتماعية المفضلة لديك.