web-dev-qa-db-fra.com

Créer un formulaire d'inscription MailChimp de base à l'aide de leur API

Je suis nouveau sur MailChimp et j'ai besoin d'aide.

Avec leur formulaire d'inscription à la newsletter ... vous intégrez simplement du code HTML préemballé dans votre page. Cependant, le problème avec ceci est que cliquer sur envoyer les redirections vers une page MailChimp. (Je ne veux pas rediriger vers MailChimp, je veux que l'utilisateur reste sur son propre site web après avoir cliqué sur Submit.)

Ils fournissent une API et beaucoup de documentation, mais à peu près aucun exemple utile. L'API est supposée me permettre de faire une intégration complète avec mon site ou mon application. Il semble que lorsque je lis quelque chose qui me concerne dans la documentation, je clique sur le lien pour obtenir plus d'informations et je finis par tourner en rond. Ils vous disent comment le faire, mais ils ne parviennent pas à vous "montrer" comment le faire.

Je peux obtenir une clé API, ils ont des tonnes de documentation, et tout un tas de wrappers & plugins ... PHP, Drupal, Wordpress, etc ...

La confusion qui règne ici en ce qui concerne leurs solutions pré-packagées est que je n'ai qu'une page HTML statique, ce n'est pas Wordpress, PHP ou Drupal ... donc je ne sais pas par où commencer ... je ne sais même pas si je suis supposé utiliser POST ou GET.

Je ne suis pas un novice en matière d'API ... Je réussis très bien à faire en sorte que l'API Google Maps fasse ce que je veux. Toutefois, Google fournit des exemples concrets, en plus de la documentation détaillée, c’est ce que j’ai appris. Je veux juste le voir en action avant de pouvoir saisir les détails de l'API.

Sans exemples concrets ni didacticiels dans leur documentation en ligne, je leur demande comment créer le formulaire d'inscription HTML le plus élémentaire à l'aide de leur API.

htmlajaxmailchimpmailchimp-api-v3.0
73
Sparky

MODIFIÉ:

Depuis la publication de cette réponse, MailChimp a publié les versions 2 et 3 de leur API. La version 3 sera la seule version prise en charge à partir de 2017. Dès que je pourrai la tester, je mettrai à jour cette réponse pour l'API version 3.

API MailChimp v3.0

Selon la notification en haut de cette page , toutes les versions antérieures de l'API ne seront plus prises en charge après 2016.

Ma solution utilise PHP en arrière-plan pour gérer l'API, et jQuery pour faciliter le travail en Ajax.

1) Téléchargez un wrapper PHP qui prend en charge la version 3.0 de l’API. Au moment de la rédaction de cet article, aucun document officiel n’est répertorié dans les derniers documents MailChimp prenant en charge la version 3.0, mais plusieurs sont répertoriés dans GitHub. alors j'ai choisi celui-ci .

2) Créez le fichier PHP suivant, store-address.php] À l’aide de vos propres clé d’API et ID de liste, puis placez-le dans le même répertoire que le wrapper de la première étape. suivez la documentation de votre wrapper, mais elles semblent toutes assez similaires.

<?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) Créez votre formulaire HTML/CSS/JavaScript (jQuery) ( Il n’est pas nécessaire de le placer sur une page PHP, et le visiteur ne le verra jamais PHP est utilisé en arrière-plan.)

La réponse est en JSON, vous devrez donc la gérer correctement.

Voici à quoi ressemble mon fichier 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>

API MailChimp version 1:

( réponse originale)

Après avoir tâtonné pendant un moment, j'ai trouvé un site utilisant l'exemple PHP avec jQuery. À partir de là, j'ai pu créer une simple page HTML avec jQuery contenant le formulaire d'inscription de base. Le = PHP sont "cachés" en arrière-plan, là où l'utilisateur ne les voit jamais, mais jQuery peut toujours y accéder et les utiliser.

1) Téléchargez le PHP 5 exemple jQuery ici ... ( [~ # ~] éditez [~ # ~] : les liens sont morts. Cependant, le seul élément important est le wrapper officiel de l'API pour PHP qui est disponible ICI . )

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

Si vous ne possédez que PHP 4, téléchargez simplement la version 1.2 de MCAPI et remplacez le fichier MCAPI.class.php Correspondant ci-dessus.

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

2) Suivez les instructions du fichier Lisez-moi en ajoutant votre clé API et votre ID de liste au fichier store-address.php Aux emplacements appropriés.

3) Vous pouvez également souhaiter recueillir le nom de vos utilisateurs et/ou d’autres informations. Vous devez ajouter un tableau au fichier store-address.php À l'aide des variables de fusion correspondantes.

Voici à quoi ressemble mon fichier store-address.php Où je rassemble également le prénom, le nom et le type de courrier électronique:

<?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) Créez votre formulaire HTML/CSS/jQuery. Il n’est pas nécessaire d’être sur une page PHP.

Voici à quoi ressemble mon fichier 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>

Pièces requises ...

  • index.html construit comme ci-dessus ou similaire. Avec jQuery, l'apparence et les options sont infinies.

  • store-address.php fichier téléchargé dans le cadre de PHP sur le site Mailchimp et modifié avec votre CLÉ API et ID LISTE. Vous devez ajouter vos autres champs facultatifs au tableau.

  • MCAPI.class.php Fichier téléchargé à partir du site Mailchimp (version 1.3 pour PHP 5 ou version 1.2 pour PHP 4). Placez-le dans le même répertoire que votre store-address.php ou vous devez mettre à jour le chemin de l'URL dans store-address.php afin qu'il puisse le trouver.

68
Sparky

Voici un exemple utilisant la version 2.0 de l'API Mailchimp avec mailchimp-api (une classe d'abstraction php minimale permettant de traiter les API Mailchimp).

<?php

include('MailChimp.php');

$MailChimp = new MailChimp('API_KEY');
$result = $MailChimp->call('lists/subscribe', array(
    'id'                => 'LIST_ID',
    'email'             => array( 'email' => $_POST['email'] ),
    'merge_vars'        => array(
        'MERGE2' => $_POST['name'] // MERGE name from list settings
        // there MERGE fields must be set if required in list settings
    ),
    'double_optin'      => false,
    'update_existing'   => true,
    'replace_interests' => false
));

if( $result === false ) {
    // response wasn't even json
}
else if( isset($result->status) && $result->status == 'error' ) {
    // Error info: $result->status, $result->code, $result->name, $result->error
}

?>

En savoir plus sur ce que vous pouvez envoyer avec l'appel API à l'adresse Documentation sur l'API MailChimp .

20
Jonas Äppelgran

Voici un autre exemple d'utilisation de la version 2.0 de l'API Mailchimp à l'aide de Official PHP Wrapper .

La différence entre mon exemple et ceux postés ici est que j'utilise la méthode subscribe de la classe Mailchimp_Lists , accessible par instanciation de la classe Mailchimp (->lists), plutôt que la méthode générique appel .

$api_key = "MAILCHIMP_API_KEY";
$list_id = "MAILCHIMP_LIST_ID";

require('Mailchimp.php');
$Mailchimp = new Mailchimp($api_key);
$subscriber = $Mailchimp->lists->subscribe($list_id, array('email' => $_POST['email']));

if ( ! empty($subscriber['leid'])) {
    // Success
}
7
davidnknight