Configurar Mailchimp en Blogger
Lo primero que necesitas hacer es iniciar sesión o registrar una cuenta nueva en Mailchimp.
Paso 1: Iniciar sesión o registrar cuenta
Dirígete a https://login.mailchimp.com/ y crea una nueva cuenta si no tienes una, o inicia sesión con tus credenciales si ya tienes una cuenta.
Paso 2: Crear un formulario de registro
Una vez que estés dentro de tu cuenta, ve al menú izquierdo, haz clic en "Público", luego selecciona "Formulario de registro" y da clic en "Crear uno nuevo".
Paso 3: Seleccionar tipo de formulario
Te recomendamos elegir la opción de formulario emergente (popup), ya que este tipo de formulario suele tener mayor efectividad y engagement, es decir, atrae más la atención de los usuarios y aumenta las conversiones. Sin embargo, debes tener en cuenta que esta opción puede afectar el puntaje de page speed y la velocidad de carga de tu sitio web, lo que podría impactar la experiencia del usuario y el SEO. Si prefieres priorizar la velocidad de carga, puedes optar por un formulario incrustado, que tiene un menor impacto en el rendimiento pero genera un menor nivel de interacción.
Código de formulario emergente
Si eliges el formulario emergente, el código a utilizar es el siguiente:
<script defer='defer'> //<![CDATA[ setTimeout(function() { var script = document.createElement('script'); script.id = 'mcjs'; script.async = true; script.src = 'https://chimpstatic.com/mcjs-connected/js/users/29926bc9b74d9836b3aec932a/0118f3c6b9e1df67ffa5f051c.js'; document.body.appendChild(script); }, 5000); // Retraso de 5 segundos //]]> </script>
Formulario incrustado
También puedes optar por un formulario incrustado. El código de ejemplo sería el siguiente:
<div id="mc_embed_shell"> <link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; false;clear:left; font:14px Helvetica,Arial,sans-serif; width: 600px;} </style> <div id="mc_embed_signup"> <form action="https://kolectiva.us8.list-manage.com/subscribe/post?u=29926bc9b74d9836b3aec932a&id=b0c24b4646&f_id=0053cce1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> <div id="mc_embed_signup_scroll"><h2>Suscribir</h2> <div class="indicates-required"><span class="asterisk">*</span> indica que es obligatorio</div> <div class="mc-field-group"><label for="mce-EMAIL">Dirección de correo electrónico <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div> <div class="mc-field-group"><label for="mce-FNAME">Nombre </label><input type="text" name="FNAME" class=" text" id="mce-FNAME" value=""></div> <div id="mce-responses" class="clear foot"> <div class="response" id="mce-error-response" style="display: none;"></div> <div class="response" id="mce-success-response" style="display: none;"></div> </div> <div aria-hidden="true" style="position: absolute; left: -5000px;"> <input type="text" name="b_29926bc9b74d9836b3aec932a_b0c24b4646" tabindex="-1" value=""> </div> <div class="optionalParent"> <div class="clear foot"> <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe"> <p style="margin: 0px auto;"><a href="http://eepurl.com/i4lEcU" title="Mailchimp: marketing por correo electrónico fácil y divertido"><img class="refferal_badge" src="https://digitalasset.intuit.com/render/content/dam/intuit/mc-fe/en_us/images/intuit-mc-rewards-text-dark.svg" alt="Intuit Mailchimp" style="width: 220px; height: 40px; display: flex; padding: 2px 0px; justify-content: center; align-items: center;"></a></p> </div> </div> </div> </form> </div>
Insertar el formulario en Blogger
En nuestra plataforma Kolectiva, puedes insertar cualquiera de estos códigos en el área de widgets de tu blog y se mostrará inmediatamente.
Consideraciones finales
Recuerda que puedes elegir tener solo uno de los formularios o ambos, según tus necesidades y prioridades. Si optas por tener ambos, puedes configurar el formulario emergente para que se muestre solo en ciertas páginas o bajo ciertas condiciones, asegurando que no afecte demasiado la experiencia de navegación del usuario.