Пропустить

Создайте свой список подписчиков с Jetpack и Интерком

Divi: самая простая тема WordPress для использования

Divi: лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуемые]

Jetpack - отличное решение для создания списка подписчиков, а Intercom - это решение, которое позволит вам управлять подписчиками и поддерживать с ними связь.

В этом уроке мы покажем вам, как увеличить список подписчиков с помощью Jetpack и Intercom.

Некоторые люди пришли спросить меня, разрешено ли пользователям подписываться и получать все свои статьи по электронной почте и хранить их адреса электронной почты в Интерком. Я сразу ответил положительно, тем более, что API (Интерфейс прикладного программирования) прост в использовании.

Поэтому я подумал об использовании плагина подписки, который отправит адреса электронной почты в Intercom через API. И это именно то, что я буду делать.

У нас уже установлен Jetpack, поэтому вам нужно только активировать модуль " Подписки Однако это не так просто, что произойдет, если вы хотите отобразить форму в настраиваемом месте (пользовательская страница, например)? Мы также покажем вам, как настроить, где будет отображаться форма.

первые шаги

Начнем с базовой формы:

Легко создать свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным внешним видом. Перестань дорого платить за то, что можешь сделать сам. [Free]

<Форма ID = "блог-архив-Регистрация"> <! - идентификатор для использования в таргетирования форме через JavaScript // -> <FIELDSET> <Легенда> Никогда не пропустите наши сообщения. Получить обновления в вашем почтовом ящике, как только они размещены. </ Legend> <P ID = "поля-контейнер"> <входного типа = "текст" Name = "blog_archive_partition_email" /> типа = "Отправить" имя <входного = " blog_archive_partition_submit "значение =" SUBSCRIBE «/> </ р> </ FIELDSET> </ form>

Для всех, кто может быть заинтересован, я добавил форму здесь, используя действие " genesis_after_entry Тема Genesis, но если вы не используете Genesis, вы можете использовать фильтр " the_content И связал ваш контент с контентом статьи.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress от Envato и легко создайте свой веб-сайт. Уже более 49.720.000 XNUMX XNUMX загрузок. [ЭКСКЛЮЗИВ]

В нашем примере мы отобразим форму после 3e статья. Если вы используете фильтр, используйте функции " 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% важно!; Очистить:и то и другое; } 
# Блог-архив-подключения { @include точки останова ($ Tablet) { фон:URL ( "изображения / низкий bg.png") нет-Повторяю 0 0; высота:200px; } } 
# Блог-архив-регистрация FIELDSET { граница:0; ширина:100%; обивка левый:50px; } 
# Блог-архив-регистрация FIELDSET { @include точки останова (макс ширина таблетки $) { обивка левый:0px } } 
# Блог-архив-легенда подключений { обивка-топ:20px; } 
# Блог-архив-Signup поля Container # { ширина:100% } 
# Вход Блог-архив-подключения [имя * = 'электронная почта'] { фон:URL ( "изображения / низкий field.png") нет-Повторяю 0 0; набивка:0; маржа:0; высота:44px; граница:0; ширина:560px; Высота строки:22px; плавать:оставил; } 
# Вход Блог-архив-подключения [имя * = 'электронная почта'] { @include точки останова (макс ширина таблетки $) { набивка:0; маржа:0; граница:0; ширина:50%; плавать:оставил; } } 
вход # Блог-архив-подключений [тип = «Отправить»] { фон:URL ( "изображения / низкий button.png") нет-Повторяю 0 0; набивка:0; маржа:0; высота:44px; граница:0; ширина:180px; цвет: #fff; выравнивания текста:центр }

Как добавить подписчиков

Теперь мы зарегистрируем пользователей на Jetpack, используя " jQuery.ajax ».

$(«# Блог-архив-подключения»).отправить(функция(e) {  e.preventDefault(); $("LoadingMessage #, # failMessage").скрывать().удаление(); 
      вар __button = $('# Блог-архив-подключений ввода [тип = „отправить“]).получить(0); $('# Блог-архив-подключений ввода [тип = „отправить“]).после(codeable_spinner); 
      вар __DATA = $(это).сериализации() + '& Secure =' + codeableVars.безопасность + '& Action = blog_archive_signup';   
         
      $.после(codeableVars.ajaxurl,__DATA,функция(ответ) { консоль.журнал(ответ); if (ответ.успех) { 
                    $("#codeable_spinner").ReplaceWith(«Успех!»).задерживать(5000).Затухание(«Медленный»).удаление(); } еще { 
                    $("#codeable_spinner").ReplaceWith(""+ответ.сообщение+"").задерживать(5000).Затухание(«Медленный»).удаление(); 
            } 
}) 
})

Теперь мы должны сохранить пользователя в Jetpack и Intercom. Я углубился в код Jetpack, чтобы узнать, как он добавляет подписчиков, и я нашел класс «Jetpack_Subscriptions» и статический метод, который отправляет электронную почту в качестве параметра. А для Intercom достаточно простого запроса 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() { 
  $ Данных = массив( «Электронная почта» => $ _POST['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-администратора  
  wp_send_json($ ответ); 
  выход(); 
} 
функция wswp_make_api_call($ Данных) { 
   $ завиток = curl_init(); curl_setopt_array($ завиток, массив( CURLOPT_HTTPHEADER => массив('Content-Type: применение / JSON', 'Accept: приложения / 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 => ложный, )); 
   // Обратите внимание, что вам нужно будет установить константу для приложения идентификатор и ключ API для собственных значений  
  $ Вернуться = json_decode(curl_exec($ завиток), правда); 
  curl_close($ завиток); 
  возвращение $ Вернуться; 
}

Вот и все. Теперь, когда кто-то заполняет эту форму, он немедленно получает электронное письмо с подтверждением на Jetpack, в котором он подписывается, и он будет получать электронные письма, содержащие ваши статьи, как только они будут опубликованы.

За кулисами они регистрируются в Intercom с тегом «Subscribed_Via => раздел блога блога». В следующий раз я расскажу вам, как вы также можете отправлять своих подписчиков из плагина Thrive Leads в Intercom с дополнительными данными, которые позволят вам различать их все.

Легко создать свой интернет-магазин

Скачайте бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать физические и цифровые продукты на WordPress. [Рекомендуемые]

Если вы не освоите полезность codeableVars.security Вы должны знать, что он содержит " нунций «WordPress. Как правило, это было бы сделано с помощью php-функции " wp_nonce_field () В форме, но скрипт, содержащий только JavaScript, поле nonce уже доступно в JS-функции " wp_localize_script () ».

Это все, что нужно сделать для этого урока. Не стесняйтесь задавать нам вопросы или делиться учебником с друзьями в ваших любимых социальных сетях.

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля обозначены *

Этот сайт использует Akismet для уменьшения спама. Узнайте больше о том, как используются ваши данные обратной связи.

Вверх
10 акции
доля10
чирикать
Регистрация