Come aggiungere un popup di abbonamento e-mail a Blogger (tramite Mailchimp)

Pubblicato: 2022-04-20

Vuoi raccogliere Email dai visitatori del tuo sito Web e inviare messaggi personalizzati direttamente alle loro caselle di posta? bene, segui questo tutorial passo dopo passo per come farlo.

L'email marketing è uno dei modi più efficaci per entrare in contatto con il pubblico, ottenere più traffico sui siti e presentare prodotti e servizi al tuo pubblico.

Quindi, per questo, hai bisogno di strumenti di email marketing come Mailchimp , convertkit e un modulo di iscrizione e-mail che collegherà il tuo sito Web a questi strumenti. Puoi utilizzare un modulo di iscrizione o un popup di iscrizione al tuo sito web.

Il popup di abbonamento è più efficace del tradizionale modulo di iscrizione in quanto attira l'attenzione dell'utente facendo apparire sullo schermo. Gli utenti possono facilmente unirsi alla tua lista e-mail fornendo i loro nomi e indirizzi e-mail nel campo.

Successivamente, l'indirizzo e-mail verrà aggiunto al tuo strumento di marketing e-mail e potrai quindi inviare e-mail personalizzate ai tuoi abbonati e fornire loro aggiornamenti sui tuoi nuovi post o prodotti.

Se vuoi fare marketing di affiliazione tramite e-mail, puoi anche prendere in considerazione gli autorisponditori e-mail in cui puoi automatizzare diversi processi e generare risultati migliori.

ok, controlliamo come puoi aggiungere un popup di abbonamento e-mail al tuo sito Web Blogger e integrarlo con il tuo account Mailchimp.

Passaggi per aggiungere il popup di abbonamento e-mail in Blogger

Per aggiungere un popup di abbonamento e-mail in Blogger, segui i passaggi seguenti.

Vai alla dashboard del tuo Blogger e fai clic sulla sezione del tema.
Ora fai clic sulla sezione Modifica HTML e trova il tag </body>.
Quindi incolla il codice indicato sopra di esso e sostituisci il link dell'azione del modulo Mailchimp su di esso.
Ora salva il codice e il popup di abbonamento e-mail viene aggiunto al tuo sito Web Blogger.

 <style> .email-subscription-overlay {display: flex;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0);z-index: -100;transition: all 400ms;} .email-subscription-overlay.active {background: rgba(0, 0, 0, 0.9);z-index: 200;} .email-subscription-container {background: #fff;padding: 32px;text-align: center;display: flex;box-shadow: 0 2px 12px 3px rgba(0, 0, 0, 0.3);border-radius: 8px;transform: translateY(-200px);opacity: 0;transition: all 200ms;} .email-subscription-overlay.active .email-subscription-container {transform: translateY(0);opacity: 1;} .email-subscription-container form {display: flex;flex-direction: column;margin-top: 32px;} .email-subscription-overlay .email-close-btn {top: 24px;right: 24px;position: fixed;font-size: 50px;font-weight: 600;color:#eee;background: none;border: none;cursor: pointer;pointer-events: none;transition: all 400ms;opacity: 0;} .email-subscription-overlay.active .email-close-btn {opacity: 1;pointer-events: auto;} .email-subscription-container img {width: 300px;object-fit: contain;} .email-subscription-container h2 {font-size: 35px;text-transform: uppercase;margin-bottom: 15px;margin-top: 12px;color: #0a0908;} .email-subscription-container p {margin-top: 10px;font-weight: bold;color: #1d3557;font-size:16px;} .email-subscription-container .text-content {padding: 48px;} .email-subscription-container form .email-input-field {margin-bottom: 16px;padding: 12px 24px;font-size: 16px;border: 1px solid #777;} .email-subscription-container form .email-submit-btn {background: #f50057;border: none;font-weight: 600;font-size: 20px;color: #fff;padding: 10px 60px; cursor: pointer;text-transform: uppercase;transition: all 400ms;} .email-subscription-container form .email-submit-btn:hover {background: #069b7a;} @media (max-width: 800px) {.email-subscription-container {flex-direction: column;width: 400px;align-items: center;}.email-subscription-container .text-content {padding: 0;width: 100%;}} @media (max-width: 500px) {.email-subscription-container { larghezza: 75%; }}

#mc_embed_signup div.mce_inline_error {margine: 0 0 1em 0;z-index: 1;colore: #000;}
#mc_embed_signup div.mce_inline_error {padding: 5px 10px; peso carattere: grassetto; colore sfondo: bianco;}
.response {font-weight: 600;color: black;margin: -5px 0 5px 0;}
  </stile>

<!-- Popup di iscrizione e-mail-->
<div class='email-subscription-overlay'>
<button class='email-close-btn'>&#215;</button>
<div class='email-subscription-container'>
<img alt='email-signup-form-Image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TPAOsLb2-sDqk1TUCfkg_Qj2vnK9KnDPPEd94_TKlHtTw6iVhMMwIG7NjdQYseYXG4cCsdNKhkM7zEEe9qwrORpFvQ54cgqDViw7SSXEVFraofdZItMXStgo_2z_LJCXEebwopU0Pf7FWPAlaBkuxjibbvn8zmTLZZ9X81LYFsqUZU4eIjSs6MHJFw/s1600/undraw_Opened_re_i38e%20%281%29.png'/>

<div class='testo-contenuto'>
<h2> sottoscrivi </h2>
<p> Techyleaf per gli ultimi aggiornamenti SEO </p>

<classe div='contenitore'>
<div>
<azione modulo=' # ' class='validate' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div><div class='mc-field-group'><input class='email-input-field required email' name='EMAIL' placeholder='Il tuo indirizzo email' type='email' value=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- le persone reali non dovrebbero compilare questo campo e aspettarsi cose buone - non rimuoverlo o rischiare le iscrizioni ai bot dal modulo-->
<div aria-hidden='true'><input name='b_ac52e8b1ce2a06907e0091d7c_63bf572981' tabindex='-1' type='text' value=''/></div>
<div class='clear'><input class='email-submit-btn Subscribe' name='subscribe' type='submit' value='Subscribe'/></div>
</div></form></div>
<script src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js' type='text/javascript'/><script type='text/javascript'>(function($ ) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=&#39;EMAIL&#39;;ftypes[0]=&#39;email&#39;;fnames[ 1]=&#39;NAME&#39;;ftypes[1]=&#39;text&#39;;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
</div></div></div></div>

  <script>
    const emailSubscriptionOverlay = document.querySelector(&quot;.email-subscription-overlay&quot;);
const emailCloseButton = document.querySelector(&quot;.email-close-btn&quot;);

setTimeout(() =&gt; {
    if (!localStorage.getItem(&#39;popupClosed&#39;)) {
        emailSubscriptionOverlay.classList.add(&quot;attivo&quot;);
        localStorage.setItem(&#39;popupClosed&#39;, &#39;true&#39;);
    }
}, 3000);

emailCloseButton.addEventListener(&quot;clicca&quot;, () =&gt; {
    emailSubscriptionOverlay.classList.remove(&quot;attivo&quot;);
});
  </script>

Come integrare Mailchimp con il modulo Popup?

Devi modificare il link dell'azione del modulo (Sostituisci il # ) con il tuo URL Mailchimp. (cioè <form action='#' class='validate').

Per ottenere questo collegamento, devi registrarti per un account gratuito con un account MailChimp e creare un modulo di registrazione lì. Successivamente, è necessario estrarre il collegamento all'azione del modulo da quel codice. Segui il video tutorial per verificarlo passo dopo passo.

Come personalizzare il modulo di iscrizione popup?

Se utilizzi temi come l'interfaccia utente mediana o il tema Fletro pro , potrebbe non funzionare correttamente sui dispositivi mobili. È necessario regolare la larghezza del popup nel codice CSS per questo.

 @media (max-width: 500px) {.email-subscription-container {width: 75%;}}

Trova questo codice e modifica la larghezza del contenitore dal 75% all'85% in questo modo.

È inoltre necessario modificare il tag h2 e paragrafo (evidenziato sopra) utilizzato nel codice sopra. Basta cambiare il testo in base al tuo sito web.

Ho anche mostrato come modificare la durata mostrata nel popup nel video tutorial. Per impostazione predefinita, è impostato su 3 secondi. Quindi, il popup verrà caricato dopo 3 secondi di caricamento della pagina.

Se vuoi cambiare l'immagine, cerca semplicemente email-signup-form-Image e quindi cambia l'URL di origine (src) dell'immagine. Innanzitutto, carica l'immagine sul tuo sito Web Blogger, quindi ottieni l'URL dell'immagine facendo clic con il pulsante destro del mouse sull'immagine.

Puoi anche controllare i modi alternativi per integrare Mailchimp con Blogger qui.

Conclusione

Spero che tu abbia aggiunto con successo il modulo di iscrizione Popup al tuo sito web Blogger e integrato Mailchimp per raccogliere gli indirizzi email dei tuoi visitatori.

Se hai ancora dei dubbi, non esitare a chiedermelo nella sezione commenti.