آموزش ایجاد فرم اشتراک پاپ آپ برای افزایش لیست ایمیل Opt-in

آموزش ایجاد فرم اشتراک پاپ آپ برای افزایش لیست ایمیل Opt-in

یکی از ساده ترین, قدیمی ترین و کارآمد ترین روش های ارتباط با افرادی که در اینترنت فعال هستند, ایمیل می باشد. اکثر افراد حداقل روزی یک بار ایمیل خود را بررسی می کنند و ایمیل های جدیدی که در inbox خود می بینند را باز می کنند. همچنین کاربران به پیام هایی که به صورت مستقیم و طبیعی برای آنها ارسال شده باشد اعتماد بیشتری می کنند.
اولین کاری که باید برای ارسال ایمیل به کاربران انجام دهید دریافت ایمیل آنها می باشد. برای دریافت ایمیل کاربران روش های زیادی وجود دارد. مثلا می توانید از لیست ایمیل های فعال آماده استفاده کنید یا اینکه لیست ایمیل کاربران سایت های دیگر را خریداری کنید.اما در این روش ها به دلیل اینکه اولا کاربران با رضایت خودشان ایمیل را در اختیار سایت شما قرار ندادند و ثانیا ممکن است آن کاربر اصلا علاقه ای به موضوعات مطرح شده در سایت شما نداشته باشد نتیجه خوبی را برای شما به ارمغان نمی آورد.

اما با استفاده از ترفند های بهتری می توانید ایمیل کاربران را با رضایت خودشان جمع آوری کنید. به لیست ایمیلی که به این شکل جمع آوری می شود Opt-in می گویند. مثلا می توانید یک فرم اشتراک در بخشی از سایت خود که بازدید کنندگان آن بخش را بیشتر می بینند قرار دهید تا با وارد کردن آدرس پست الکترونیکی خود, ایمیل آنها در لیست ایمیلی شما قرار گیرد و بتوانید در آینده از این طریق با آنها در تماس باشید. اما یک روش موثرتر نمایش فرم اشتراک به صورت پاپ آپ در اولین بازدید کاربر از سایت می باشد. در این آموزش ما می خواهیم به کمک jQuery یک فرم اشتراک پاپ آپ درست کنیم که تنها یک بار آن هم در اولین بازدید کاربر برای وی به نمایش در می آید.

توجه : برای استفاده از این آموزش لازم است که حتما با css و html آشنا باشید تا بتوانید ظاهر فرم پاپ آپ را خودتان ایجاد کنید. آشنایی با جاوا اسکریپت و جی کوئری برای استفاده از این آموزش ضروری نیست اما در صورت آشنایی راحت تر می توانید با عملکرد آن آشنا شوید.

نحوه کار کرد این پاپ آپ چگونه است؟

زمانی که یک کاربر برای اولین بار وارد سایت شما می شود پس از بارگذاری کامل سایت در صورتی که کاربر هیچ کاری انجام ندهد (منظور حرکت دادن ماوس و زدن کلید است) یک تایمر شروع به شمارش می کند و در مدت زمان تعیین شده که در حالت پیشفرض ۵ ثانیه می باشد فرم عضویت را به کاربر نشان می دهد. همچینی در مرورگر کاربر مورد نظر یک کوکی ایجاد می شود و تا زمانی که این کوکی در مرورگر باشد دیگر فرم اشتراک به آن کاربر نشان داده نمی شود. در حالت پیشفرض مدت زمان انقضای این کوکی ۳۰ روز می باشد اما شما می توانید مدت زمان انقضای آن را تغییر دهید.

گام اول : فراخوانی فایل های ضروری در قالب

برای اجرای کدهای جی کوئری استفاده شده در پلاگین jQuery Cookie و پاپ آپ باید مطمئن شوید که در هدر سایت شما کتابخانه جی کوئری فراخوانی شده باشد. اگر کتابخانه جی کوئری در قالب سایت شما فراخوانی نشده بود می توانید با قرار دادن کد زیر قبل از بسته شدن تگ head شرایط را برای اجرای برنامه های جی کوئری فراهم کنید.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

حال نوبت به قرار دادن پلاگین jQuery Cookie است. برای قرار دادن این پلاگین باید ابتدا از بین فایل هایی که در آخر همین مطلب برای دانلود قرار داده شده است فایل jquery.cookie.js را پیدا کنید و سپس این فایل را به هاست سایت خود منتقل کنید. سپس کد زیر را بعد از کد فراخوانی کتابخانه جی کوئری باید قرار دهید. توجه داشته باشید که در کد پایین به جای path مسیر قرار گرفتن این پلاگین در هاست سایت خود را باید وارد کنید. اگر از وردپرس استفاده می کنید می توانید این کدها را در فایل header.php قالب فعلی سایت خود, قبل از بسته شدن تگ head قرار دهید.

<script src="path/jquery.cookie.js"></script>

گام دوم : قرار دادن اسکریپت فرم پاپ آپ در سایت

در این مرحله باید اسکریپت زیر را مانند فایل های جاوا اسکریپت قبلی, در یک فایل js جداگانه یا به صورت مستقیم در فایل html قالب سایت خود بعد از فراخوانی کتابخانه جی کوئری و پلاگین کوکی قرار دهید.

idleTime = 0;
$(document).ready(function(){
	$limit = 5;
	
	if ($.cookie('test_status') != '1') {
		$.get('form.html', function(data) {
			$('.subs-popup').html(data);
		});
		function timerIncrement() {
			idleTime = idleTime + 1;
			if (idleTime > $limit) { 
				$('.subs-popup ').show();
				idleTime = 0;
			}
		}
		
		var idleInterval = setInterval(timerIncrement, 1000); // 1 second

		$(this).mousemove(function (e) {
			idleTime = 0;
		});
		$(this).keypress(function (e) {
			idleTime = 0;
		});
		
		$.cookie('test_status', '1', { expires: 30 });
	}
});

در ابتدا ما با پلاگین jQuery Cookie بررسی می کنیم که آیا کوکی مورد نظر ما در مرورگر کاربر وجود داره یا خیر. در صورتی که این کوکی ست شده بود اسکریپت از فراخوانی فایل form.html صرف نظر می کند اما اگر کوکی ست نشده بود فرم اشتراک که در فایل form.html قرار گرفته است فراخوانی می شود و زمانی که شرایط گفته شده در بالا (حرکت نکردن ماوس و استفاده نکردن از صفحه کلید) محیا شد این فرم بعد از ۵ ثانیه به کاربر نشان داده می شود.

برای تغییر مدت زمان تاخیر که در حالت پیشفرض ۵ ثانیه می باشد باید مقدار متغییر $limit که در خط سوم می باشد تغییر داده شود. همچنین برای تغییر مدت زمان انقضای کوکی های ست شده هم باید عدد ۳۰ در خط ۲۶ را تغییر دهید.

گام سوم: قرار دادن فرم اشتراک در فایل form.html

حال می توانید فرم اشتراک در لیست ایمیل خود را که از سرویس هایی مانند mailchimop, feedburner و … دریافت کرده اید را در فایلی به نام form.html ذخیره کنید و این فایل را در کنار فایلی که اسکریپت بالا را در آن قرار دادید آپلود کنید. در مرحله آخر هم باید مثل زیر یک المان با کلاس subs-popup در صفحه ای که می خواهید فرم پاپ آپ ظاهر شود قرار دهید.

<div class="subs-popup"></div>

گام چهارم: ساخت ظاهر پاپ آپ با استفاده از css

بقیه کار برای ایجاد ظاهر فرم پاپ آپ هم مربوط به نوشتن کدهای css می شود. همانطور که در ابتدای این آموزش هم گفتیم این کار به خودتان واگذار می شود تا با توجه به سلیغه خود ظاهر فرم پاپ آپ را ایجاد کنید.

پیش نمایش دانلود منابع

اگر در مورد این آموزش سوالی برای شما پیش آمده است می توانید آن را در بخش دیدگاه های همین مطلب با ما در میان بگذارید تا شما را راهنمایی کنیم.

دیدگاه کاربران

  1. خیلی عالی بود دستتون درد نکنه

  2. امین

    سورسی که برای دانلود گزاشتید مشکل داره چک کنید!

    • سعید شعبانی

      نه مشکلی نداره فقط دلیل اینکه فرم باز نمیشه این هست که برای نمایش فرم درخواست ajax ارسال می شود. درخواست های ajax هم به دلایل امنیتی برخی از مواقع پاسخ مناسبی نمی دهد. اما پس از قرار دادن همه کد ها در یک هاست واحد این مشکل رفع می شود.

  3. سلام
    این مطلب عالی بود . دستتون درد نکنه

  4. amir

    سلام…ببخشید فرم اشتراک در میل چیمپ رو از کجا باید دریافت کنیم؟؟؟

  5. عالی و کامل
    البته از نظر من استفاده از این گونه پاپ آپ ها می تونه باعث آزار کاربرا بشه

کاربر گرامی برای ارسال دیدگاه اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.