MailChimpのAPIを使って、基本的なサインアップフォームを作成する

質問

MailChimpを初めて使うので、助けが必要です。

基本的なニュースレター登録フォームでは...単純にパッケージになったHTMLをページに埋め込みます。 しかし、この場合の問題は、送信をクリックするとMailChimpのページにリダイレクトされることです。( MailChimpにリダイレクトさせたくないので、送信を押した後、ユーザが自分のウェブサイトにとどまるようにしたいのですが。 )

APIと多くのドキュメントを提供していますが、有用な例はほとんどありません。 API は、私のサイトまたはアプリケーションと完全に統合することを可能にするはずです。 ドキュメントの中で自分に当てはまるものを読んだとき、より多くの情報を得るためにリンクをクリックすると、結局堂々巡りになってしまうようです。 彼らはそれを行う方法を教えてくれますが、それを行う方法を示すことはできません。

APIキーは手に入るし、ドキュメントもたくさんあるし、ラッパーやプラグインもたくさんあるんだけど...。PHP、Drupal、Wordpressなど...。

彼らのプリパッケージソリューションに関するここでの混乱は、私は普通の静的なHTMLページを持っているということで、それはWordpress、PHP、またはDrupalではありません...だから私はちょうどどこから始めればよいのかわかりません...。何から手をつければいいのかさえわかりません。 POST を使うべきなのか、それとも GET .

私はAPIの初心者ではありません...。Google Maps APIに私が望むことを何でもさせるのはとても上手です。 しかし、Googleは詳細なドキュメントに加え、実際の動作例を提供しており、それが私がそれを学んだ方法です。 私は、APIの細かい点を把握する前に、実際に動いているところを見たいと思っています。

オンラインドキュメントに確かな例やチュートリアルがないため、私はAPIを使用して最も基本的なHTMLサインアップフォームを作成する方法を尋ねています。

どのように解決するのですか?

編集しました。

この回答を投稿してから、MailChimp は API のバージョン 2 & 3 をリリースしました。 バージョン 3 は、2017 年からサポートされる唯一のバージョンになります。 テストする機会があればすぐに、API バージョン 3 用にこの回答を更新します。

MailChimp API v3.0

このページの上部にある通知に従って は、2016年以降、すべての旧バージョンのAPIがサポートされなくなります。

私のソリューションでは、APIを処理するためにバックグラウンドでPHPを使用し、Ajaxを促進するためにjQueryを使用しています。

1) API v3.0をサポートするPHPラッパーをダウンロードする。 この記事を書いている時点では、MailChimp の最新のドキュメントには v3.0 をサポートする公式のものはありませんが、GitHub にはいくつかリストアップされているので、それを選択しました。 これ .

2）以下のPHPファイルを作成します。 store-address.php を作成し、ステップ1からのラッパーと同じディレクトリに配置します。 お使いのラッパーのドキュメントに従うことを忘れないでください。しかし、どれもこれにかなり似ています。

<?php // for MailChimp API v3.0

include('MailChimp.php');  // path to API wrapper downloaded from GitHub

use \DrewM\MailChimp\MailChimp;

function storeAddress() {

    $key        = "xxxxxxxxxxxxxxx-us1";
    $list_id    = "xxxxxx";

    $merge_vars = array(
        'FNAME'     => $_POST['fname'],
        'LNAME'     => $_POST['lname']
    );

    $mc = new MailChimp($key);

    // add the email to your list
    $result = $mc->post('/lists/'.$list_id.'/members', array(
            'email_address' => $_POST['email'],
            'merge_fields'  => $merge_vars,
            'status'        => 'pending'     // double opt-in
            // 'status'     => 'subscribed'  // single opt-in
        )
    );

    return json_encode($result);

}

// If being called via ajax, run the function, else fail

if ($_POST['ajax']) { 
    echo storeAddress(); // send the response back through Ajax
} else {
    echo 'Method not allowed - please ensure JavaScript is enabled in this browser';
}

3) HTML/CSS/JavaScript(jQuery)のフォームを作成する ( PHPのページである必要はなく、訪問者はバックグラウンドでPHPが使用されていることを知ることはありません。 )

レスポンスはJSONなので、それを正しく処理する必要があります。

以下は、私の index.html ファイルは次のようになります。

<form id="signup" action="index.html" method="get">
    First Name: <input type="text" name="fname" id="fname" />
    Last Name: <input type="text" name="lname" id="lname" />
    email Address (required): <input type="email" name="email" id="email" />
    <input type="submit" id="SendButton" name="submit" value="Submit" />
</form>
<div id="message"></div>

<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#signup').submit(function() {
        $("#message").html("Adding your email address...");
        $.ajax({
            url: 'inc/store-address.php', // proper url to your "store-address.php" file
            type: 'POST', // <- IMPORTANT
            data: $('#signup').serialize() + '&ajax=true',
            success: function(msg) {
                var message = $.parseJSON(msg),
                    result = '';
                if (message.status === 'pending') { // success
                    result = 'Success!  Please click the confirmation link that will be emailed to you shortly.';
                } else { // error
                    result = 'Error: ' + message.detail;
                }
                $('#message').html(result); // display the message
            }
        });
        return false;
    });
});
</script>

MailChimp API バージョン 1:

( オリジナルの回答 )

しばらく手探りでやっていたら、jQueryを使ったPHPのサンプルを使っているサイトが見つかりました。 そこから、基本的なサインアップ フォームを含む、jQuery を使用したシンプルな HTML ページを作成することができました。 PHP ファイルは、ユーザーが見ることのないバックグラウンドに隠されていますが、jQuery はまだアクセスおよび使用することができます。

1) PHP 5 jQuery のサンプルはこちらからダウンロードできます... ( EDIT : リンクが切れています。 しかし、唯一重要なのは、PHP用の公式APIラッパーが公開されていることです。 こちら .)

http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip

PHP 4 しか持っていない場合は、MCAPI のバージョン 1.2 をダウンロードし、対応する MCAPI.class.php のファイルは上記の通りです。

http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip

2) Readme ファイルの指示に従い、API キーとリスト ID を store-address.php ファイルの適切な場所に追加します。

3) ユーザーの名前とその他の情報を収集したい場合もあるでしょう。 そのためには、配列を store-address.php ファイルに対応する Merge Variables を使用して配列を追加する必要があります。

以下は、私の store-address.php ファイルでは、名前、姓、および電子メールの種類を収集します。

<?php

function storeAddress() {

    require_once('MCAPI.class.php');  // same directory as store-address.php

    // grab an API Key from http://admin.mailchimp.com/account/api/
    $api = new MCAPI('123456789-us2');

    $merge_vars = Array( 
        'EMAIL' => $_GET['email'],
        'FNAME' => $_GET['fname'], 
        'LNAME' => $_GET['lname']
    );

    // grab your List's Unique Id by going to http://admin.mailchimp.com/lists/
    // Click the "settings" link for the list - the Unique Id is at the bottom of that page. 
    $list_id = "123456a";

    if ($api->listSubscribe($list_id, $_GET['email'], $merge_vars , $_GET['emailtype'])) {
        // It worked!   
        return 'Success!&nbsp; Check your inbox or spam folder for a message containing a confirmation link.';
    } else {
        // An error ocurred, return error message   
        return '<b>Error:</b>&nbsp; ' . $api->errorMessage;
    }

}

// If being called via ajax, autorun the function
if($_GET['ajax']) { 
    echo storeAddress(); 
}

4) HTML/CSS/jQueryのフォームを作成します。 PHPのページである必要はありません。

以下は、私の index.html ファイルは次のようになります。

<form id="signup" action="index.html" method="get">
    First Name: <input type="text" name="fname" id="fname" />
    Last Name: <input type="text" name="lname" id="lname" />
    email Address (required): <input type="email" name="email" id="email" />
    HTML: <input type="radio" name="emailtype" value="html" checked="checked" />
    Text: <input type="radio" name="emailtype" value="text" />
    <input type="submit" id="SendButton" name="submit" value="Submit" />
</form>
<div id="message"></div>

<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#signup').submit(function() {
        $("#message").html("Adding your email address...");
        $.ajax({
            url: 'inc/store-address.php', // proper url to your "store-address.php" file
            data: $('#signup').serialize() + '&ajax=true',
            success: function(msg) {
                $('#message').html(msg);
            }
        });
        return false;
    });
});
</script>

必要なパーツ...

• index.html といった具合に構築します。 jQueryを使えば、見た目もオプションも無限大です。

• ストアアドレス.php ファイルをダウンロードし、あなたの APIキー と リストID . 他のオプションフィールドを配列に追加する必要があります。

• MCAPI.class.php ファイルをMailchimpのサイトからダウンロードします（PHP 5の場合はバージョン1.3、PHP 4の場合はバージョン1.2）。 と同じディレクトリに置きます。 store-address.php と同じディレクトリに置くか、または、URLのパスを ストアアドレス.php を更新する必要があります。