Интеграция MailChimp в WordPress без использования плагина

Последнее обновление Июл 12, 2021

Содержание

Получите ключ API MailChimp и идентификатор аудитории

Добавить подписчика в аудиторию MailChimp

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

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

В этой статье мы изучаем, как выполнить интеграцию MailChimp в WordPress без использования каких-либо плагинов. Мы собираемся создать нашу собственную форму информационного бюллетеня, отправить форму через WordPress Ajax, подписать пользователя на ваш список аудитории MailChimp.

Получите ключ API MailChimp и идентификатор аудитории

Чтобы начать интеграцию MailChimp в WordPress, вам сначала нужно получить ключ API MailChimp и идентификатор аудитории. Получите эти сведения, выполнив следующие действия.

Войдите в свою учетную запись MailChimp. Из значка пользователя выберите Учетную запись.

На следующей странице нажмите Extra-> API keys.

В разделе «Ваши ключи API» нажмите «Создать ключ» и скопируйте свой ключ API, который нам понадобится в ближайшее время.

Теперь у вас есть ключ API. Затем получите идентификатор аудитории, к которому нужно добавить подписчиков. Для этого щелкните меню «Аудитория», а затем выберите параметр «Настройки» в раскрывающемся списке «Управление аудиторией».

В разделе «Настройки» нажмите на название аудитории и значения по умолчанию.

На следующей странице вы найдете свой идентификатор аудитории.

Создайте шорткод WordPress

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

Откройте файл активной темы functions.phpи добавьте в него код ниже.


add_shortcode('mailchimp', 'mailchimp_form');
function mailchimp_form() {
    ob_start();
    ?>
    <form class="form-inline">
        <div class="form-group mb-2">
            <label for="email" class="sr-only"><?php _e('Email'); ?></label>
            <input type="email" class="form-control-plaintext" id="email">
        </div>
        <button type="button" class="btn btn-primary mb-2 subscribe"><?php _e('Subscribe'); ?></button>
    </form>
    <?php
    return ob_get_clean();
}

После добавления вышеуказанного кода вы теперь можете использовать шорткод [mailchimp]. Поместите его где хотите, и вы должны увидеть форму подписки. Конечно, вам может потребоваться добавить собственный стиль в форму в соответствии с дизайном вашего веб-сайта.

В нашу форму мы добавили идентификатор «электронная почта» в поле электронной почты и класс «подписаться» на кнопку отправки. Этот идентификатор и класс будут использоваться, когда мы отправим форму через Ajax.

Добавить файл JavaScript в WordPress

Поскольку мы собираемся использовать WordPress Ajax, нам нужно написать код JavaScript. Итак, нам нужно включить JS-файл в среду WordPress. WordPress предоставляет стандартный способ включения JS-файла, которому мы должны следовать. Создайте js/awscript.jsфайл в каталоге своей темы. В наш JS-файл мы передадим нашу собственную переменную security, которая действует как одноразовый номер.

Код ниже также находится внутри functions.phpфайла.


add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );
function twentynineteen_scripts() {
    // Register the script
    wp_register_script( 'awscript', get_stylesheet_directory_uri(). '/js/awscript.js', array('jquery') );
 
    // Localize the script with new data
    $script_array = array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'security' => wp_create_nonce("subscribe_user"),
    );
    wp_localize_script( 'awscript', 'aw', $script_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'awscript' );
}

Теперь перейдите к js/awscript.jsи напишите код, который принимает введенную пользователем электронную почту, передает ее Ajax и показывает ответ пользователю.


jQuery(function($){
    $('body').on('click', '.subscribe', function(e) {
        e.preventDefault();
        email = $('#email').val();
        if(isEmail(email)) {
            var data = {
                'action': 'subscribe_user',
                'email': email,
                'security': aw.security
            };
 
            $.post(aw.ajaxurl, data, function(response) {
                if (response == 200) {
                    alert('You have subscribed successfully.');
                } else {
                    alert(response);
                }
            });
        } else {
            alert('This is not a valid email');
        }
    });
});
 
function isEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}

В приведенном выше коде, помимо обработки ответа Ajax, я также добавил функцию, isEmail()которая будет проверять, является ли переданное электронное письмо действительным или нет.

Добавить подписчика в аудиторию MailChimp

На этом мы закончили с формой информационного бюллетеня и вызовом Ajax. Теперь напишите код, который фактически отправляет электронное письмо в API MailChimp и добавляет подписчика к идентификатору аудитории MailChimp.

Здесь, поскольку нам нужно выполнить вызов API, мы будем использовать метод wp_remote_post для отправки запросов и обработки ответов.

Вы должны добавить в functions.phpфайл приведенный ниже код .


add_action('wp_ajax_subscribe_user', 'subscribe_user_to_mailchimp');
add_action('wp_ajax_nopriv_subscribe_user', 'subscribe_user_to_mailchimp');
 
function subscribe_user_to_mailchimp() {
    check_ajax_referer('subscribe_user', 'security');
    $email = $_POST['email'];
    $audience_id = 'YOUR_AUDIENCE_ID';
    $api_key = 'YOUR_API_KEY';
    $data_center = substr($api_key,strpos($api_key,'-')+1);
    $url = 'https://'. $data_center .'.api.mailchimp.com/3.0/lists/'. $audience_id .'/members';
    $auth = base64_encode( 'user:'. $api_key );
    $arr_data = json_encode(array(
        'email_address' => $email,
        'status' => 'subscribed' //pass 'subscribed' or 'pending'
    ));
 
    $response = wp_remote_post( $url, array(
            'method' => 'POST',
            'headers' => array(
                'Content-Type' => 'application/json',
                'Authorization' => "Basic $auth"
            ),
            'body' => $arr_data,
        )
    );
 
    if (is_wp_error( $response)) {
       $error_message = $response->get_error_message();
       echo "Something went wrong: $error_message";
    } else {
        $status_code = wp_remote_retrieve_response_code( $response );
        switch ($status_code) {
            case '200':
                echo $status_code;
                break;
            case '400':
                $api_response = json_decode( wp_remote_retrieve_body( $response ), true );
                echo $api_response['title'];
                break;
            default:
                echo 'Something went wrong. Please try again.';
                break;
        }
    }
    wp_die();
}

При добавлении приведенного выше кода не забудьте заменить заполнители YOUR_AUDIENCE_ID и YOUR_API_KEY на фактические значения. Приведенный выше код вызывает API MailChimp и напрямую добавляет электронное письмо в список аудитории. Если вы собираетесь отправить пользователю электронное письмо с подтверждением перед добавлением его электронной почты в список, установите значение статуса как «ожидающий».

Mailchimp также предоставляет поля Аудитории. Используя эти поля, вы можете хранить дополнительную информацию о пользователях прямо в панели управления MailChimp. На всякий случай, если вы хотите добавить поля аудитории, вы можете сделать это, добавив еще один элемент массива в указанный выше запрос POST. Здесь я добавляю значения для полей аудитории по умолчанию FNAME и LNAME.


<?php
...
...
$arr_data = json_encode(array(
    'email_address' => $email,
    'status' => 'subscribed', //pass 'subscribed' or 'pending'
    'merge_fields'  => array(
        'FNAME' => 'ENTER_FIRST_NAME',
        'LNAME' => 'ENTER_LAST_NAME'
    )
));

Все дело в интеграции MailChimp в WordPress без плагинов. Я рекомендую этот способ, так как он дает вам свободу стилизации вашей формы, а также помогает вам немного узнать о кодировании WordPress. Пожалуйста, поделитесь своими мыслями или предложениями в разделе комментариев ниже.

Статьи по Теме

Источник записи: artisansweb.net