メール購読ポップアップを Blogger に追加する方法 (Mailchimp 経由)

公開: 2022-04-20

Web サイトの訪問者から電子メールを収集し、パーソナライズされたメッセージを受信トレイに直接送信しますか? これを行う方法については、この段階的なチュートリアルに従ってください。

メールマーケティングは、オーディエンスとつながり、サイトへのトラフィックを増やし、製品やサービスをオーディエンスに売り込むための最も効果的な方法の 1 つです。

したがって、このためには、 Mailchimp 、 convertkitなどのメールマーケティングツールと、Web サイトをこれらのツールに接続するメールサインアップフォームが必要です。サインアップフォームまたは Web サイトへのサブスクリプションポップアップを使用できます。

サブスクリプションポップアップは、画面上にポップアップすることでユーザーの注意を引くため、従来のサインアップフォームよりも効果的です。ユーザーは、フィールドに名前と電子メールアドレスを入力することで、簡単に電子メールリストに参加できます。

その後、電子メールアドレスが電子メールマーケティングツールに追加され、カスタマイズされた電子メールを購読者に送信して、新しい投稿や製品に関する最新情報を提供できます。

メールを介してアフィリエイトマーケティングを行いたい場合は、さまざまなプロセスを自動化し、より良い結果を生み出すことができるメールの自動応答を検討することもできます。

では、Blogger の Web サイトにメールサブスクリプションポップアップを追加して、Mailchimp アカウントと統合する方法を確認しましょう。

Blogger にメール購読ポップアップを追加する手順

Blogger で電子メールサブスクリプションポップアップを追加するには、次の手順に従います。

Blogger ダッシュボードに移動し、テーマセクションをクリックします。
[HTML の編集] セクションをクリックして、</body> タグを見つけます。
次に、指定されたコードをその上に貼り付け、Mailchimp フォームアクションリンクを置き換えます。
コードを保存すると、E メールサブスクリプションポップアップが Blogger Web サイトに追加されます。

 <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 { 幅: 75%; }}

#mc_embed_signup div.mce_inline_error {マージン: 0 0 1em 0;z-index: 1;color: #000;}
#mc_embed_signup div.mce_inline_error {パディング: 5px 10px;font-weight: bold;background-color: white;}
.response {font-weight: 600;color: black;margin: -5px 0 5px 0;}
  </style>

<!-- メール購読ポップアップ -->
<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='text-content'>
<h2> 申し込む</h2>
<p> 最新の SEO アップデートの Techyleaf </p>

<div class='コンテナ'>
<div>
<フォームアクション=' # ' 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='Your Email Address' type='email' value=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- 実際の人はこれに記入して良いことを期待するべきではありません - これを削除したり、ボットのサインアップからリスクを冒したりしないでください-->
<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;メール&#39;;ftypes[0]=&#39;メール&#39;;fnames[ 1]=&#39;NAME&#39;;ftypes[1]=&#39;テキスト&#39;;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
</div></div></div></div>

  <スクリプト>
    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(「アクティブ」);
        localStorage.setItem(&#39;popupClosed&#39;, &#39;true&#39;);
    }
}、3000);

emailCloseButton.addEventListener(&quot;クリック&quot;, () =&gt; {
    emailSubscriptionOverlay.classList.remove(「アクティブ」);
});
  </script>

Mailchimp をポップアップフォームと統合するには?

フォームアクションリンク( #を置き換える) を Mailchimp URL に変更する必要があります。 (つまり、<form action='#' class='validate')。

このリンクを取得するには、MailChimp アカウントで無料アカウントにサインアップし、そこでサインアップフォームを作成する必要があります。その後、そのコードからフォームアクションリンクを抽出する必要があります。 ビデオチュートリアルに従って、ステップバイステップで確認してください。

ポップアップサインアップフォームをカスタマイズするには?

Median UI や Fletro proテーマなどのテーマを使用している場合、モバイルデバイスでは正しく動作しない可能性があります。そのためには、CSS コードでポップアップの幅を調整する必要があります。

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

このコードを見つけて、このようにコンテナーの幅を75%から85%に変更します。

上記のコードで使用されているh2および段落タグ(上で強調表示されている) も変更する必要があります。ウェブサイトに合わせてテキストを変更するだけです。

また、ビデオチュートリアルで、ポップアップの表示時間を変更する方法も示しました。デフォルトでは、3 秒に設定されています。そのため、ポップアップはページ読み込みの 3 秒後に読み込まれます。

画像を変更する場合は、email-signup-form-Image を検索して、画像のソース URL (src) を変更します。まず、画像を Blogger Web サイトにアップロードし、画像を右クリックして画像の URL を取得します。

Mailchimp と Blogger を統合する別の方法については、こちらをご覧ください。

結論

ポップアップサインアップフォームを Blogger Web サイトに正常に追加し、Mailchimp を統合して訪問者のメールアドレスを収集できたことを願っています。

それでも不明な点がありましたら、コメント欄でお気軽にお尋ねください。