Aprenda a criar um formulário de captura de e-mail utilizando a API Mailchimp

Neste post quero mostrar como utilizar a API Mailchimp para criar um formulário de captura de e-mail em um tema WordPress. Também utilizaremos um pouco de JQuery e Ajax para dar uma experiência de leitura mais agradável ao nosso leitor.

Para simplificar um pouco o trabalho, colocarei o html da caixa da captura dentro da página index do nosso tema e colocarei alguns trechos de códigos hard coded dentro do arquivo functions.php. Você pode reorganizar estes códigos da forma que for mais coerente com a estrutura de pastas do seu tema e aproveitá-los de forma ainda mais eficiente para criar widgets e plugins.

Mas o que é MailChimp e para quê isto serve?

MailChimp é uma plataforma de e-mail marketing. Com ela você pode criar uma lista de endereços de e-mail, criar formulários para cadastros da sua lista, automatizar o envio de e-mails e muitas outras funcionalidades para criação de um vínculo com o público do seu blog ou site.

Para você colocar um formulário de inscrição em seu site, você pode usar os códigos de formulários já disponibilizados pelo site do MailChimp ou criar seu próprio formulário, com design e comportamentos diferenciados e fazer com que ele chame a API do MailChimp.

Nesta artigo utilizaremos a segunda opção, chamaremos uma API.

Passo 1: Obter a API Key e List Id.

Antes de começarmos a programar você deve criar seu login no site MailChimp e buscar sua chave para utilização da API e o ID da de sua lista.

Para encontrar sua chave ou API Key acesse o menu suspenso que fica no canto superior direito da sua tela, logo ao lado do seu nome e selecione a opção Account.

Em seguida vá em Extras e selecione a opção API Keys:

Logo em seguida, os dados da sua chave serão exibidos em uma tela como a que coloquei na figura abaixo. Guarde este número.

Para pegar o próximo Id, clique na opção Audience do menu principal, no topo esquerdo da página.

Selecione a opção Settings, dentro do menu Manage Audience.

Role até o fim da página para encontrar o campo Audience Id e guarde este número.

Já temos o quê precisamos para começar a programar.

Passo 2: Criar formulário.

Inclua o seguinte trecho html no local onde você deseja que formulário de inscrição seja exibido.

    <form id="form-sofia" action="javascript:void(0)">
        <p><input type="email" required id="email" placeholder="E-mail"></p>
        <p id="newsletter-info-message"></p>
        <p><input type="submit" value="Enviar"></p>
    </form>

Passo 3: Configurar o arquivo functions.php

O código do arquivo functions.php pode assustar, é um pouco trabalhoso mas não é muito complexo.

function register_script()
{
    wp_enqueue_script ('jquery', get_template_directory_uri() . '/jquery-3.4.1.min', false);
	wp_enqueue_script ('newsletter', get_template_directory_uri()."/newsletter.js", array('jquery'));
	wp_localize_script('newsletter', 'ajax_object', array('ajax_url'=>admin_url('admin-ajax.php')));
}

add_action('wp_enqueue_scripts', 'register_script');

add_action('wp_ajax_subscribe','subscribeToNewsletter');
add_action('wp_ajax_nopriv_subscribe', 'subscribeToNewsletter');

function subscribeToNewsletter() {
$data = [
    'email'     => $_POST['email']
];

    
$listId = 'xxx';
$apiKey = 'yyy';

    $memberId = md5(strtolower($data['email']));
    $dataCenter = substr($apiKey,strpos($apiKey,'-')+1);
    $url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listId . '/members/' . $memberId;

    $json = json_encode([
        'email_address' => $data['email'],                
        'status_if_new' => 'subscribed',
    ]);

    $ch = curl_init($url);

    curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $json);                                                                                                                 

    $result = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    echo $httpCode;

	wp_die();
}
  • Entre as linhas 1 e 8, criamos instruções para registrar os scripts jquery.js e newsletter.js. Na linha 9, tratamos das requisições AJAX que serão direcionadas para o arquivo wp-admin/admin-ajax.php.
  • Nas linhas 10 e 11, nos preparamos para receber as ações wp_ajax_subscribe e wp_ajax_nopriv_subscribe. Estas ações serão as respostas às requisições feitas no arquivo admin-ajax.php que preparamos no item anterior. Associamos estas ações com a execução da função subscribeToNewsletter.

Dentro da função subscribeToNewsletter()

  • Nas linhas 14 e 15 recuperamos o endereço de e-mail que digitamos no formulário da página index.
  • Na linha 19, troque o valor “xxx” pelo valor do List id que você anotou no início deste artigo
  • Na linha 20, troque o valor “yyy” pelo número da API Key que você anotou no início deste artigo
  • Nas linhas 22, 23 e 24 estamos formando o a url para acesso à API do Mailchimp.
  • Entre as linhas 26 e 29 estamos montando o objeto que contém o endereço de e-mail que queremos cadastrar e que enviaremos no corpo da chamada da API.
  • Entre as linhas 33 e 39, fazemos uso da biblioteca cURL para criar e configurar uma requisição do tipo PUT.
  • Na linha 42 pegamos o código HTTP que resulta desta requisição e o armazenamos na variável $httpCode
  • Por fim, na linha 43 nós fechamos a sessão da nossa requisição e na linha 45 devolvemos o código que guardamos na variável $httpCode, que é o conteúdo que iremos receber no arquivo Js que explicarei a seguir.
  • Na linha 47 utilizamos o comando wp_die para evitar que o wordpress concatene o valor “0” após o valor da variável $httpCode.

Passo 4: Criar o arquivo Newsletter.js

Já estamos quase no fim. Por último vamos criar o arquivo newsletter.js para capturar o clique do botão do nosso formulário e chamar a função subscribeToNewsletter que criamos na classe Functions.php.

jQuery(document).ready(function($) {

    $("#form-sofia").submit(function(){
    var dados={
        'action':'subscribe',
        'email':$('#email').val()
    }
    
    $.post(ajax_object.ajax_url,dados, function(resposta) {
    if (resposta == 200) {
                    $("#newsletter-info-message").text("Obrigado. Você agora faz parte da nossa lista.");
                    $('#email').val("");
                }
                else {
                    $("#newsletter-info-message").text("Opa. Alguma coisa deu errado, cheque seu e-mail e tente novamente");
                }});
    return false;
        });
    
    });
  • Na linha 3 estamos capturando a ação submit do formulário
  • Nas linhas 4,5 6 e 7 estamos montando o objeto dados, que contém o e-mail que digitamos na campo texto do nosso formulário e o nome da ação da nossa requisição. Lembra quando falamos de wp_ajax_subscribe e wp_ajax_nopriv_subscribe ? É aqui que estes comandos se encaixam.
  • Na linha 9 fazemos a chamada para admin-ajax.php que encaminhará nossa requisição para a classe subscribe do arquivo Functions.php. A função anônima nesta mesma linha irá tratar o retorno desta requisição de acordo com o código retornado dentro do parâmetro resposta. Exibiremos uma mensagem de sucesso e limparemos o valor da caixa de texto quando o valor obtido no parâmetro resposta for igual a 200, do contrário exibiremos uma mensagem de erro e manteremos o valor do e-mail digitado para que o usuário possa ver o o que digitou errado.

Testando o resultado

Para validar o funcionamento do formulário, digite contato@meuteste.com.br e clique no botão enviar.

No site MailChimp, acesse o menu Audience e em seguida clique no botão View Contacts. Será exibida uma lista de endereços de e-mail, encontre o e-mail contato@meuteste.com.br.

Seu Audiência no painel do MailChimp

Pronto. Estilize a visualização do seu formulário, inclua um loader e mensagens de sucesso e erro de acordo com o layout do seu blog. Posicione-o em um local bem visível e forneça conteúdos exclusivos o para assinantes da sua lista recém criada.

Sê o primeiro

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *