کتاب آموزش برنامه نویسی Ext JS
برای اولین بار در ایران
Ext JS
در مورد Ext JS بیشتر بدانید
خرید کتاب
تشخیص کارایی طراحی ریسپانسیو با Google Analytics
دسته بندی ها :Html و Css , html5
۲۰ مهر ۱۳۹۳
1451 بازدید

طراحی ریسپانسیو به روش غالب برای توسعه و طراحی وب سایت ها تبدیل شده است. در این روش بهتر می توان به صورت “mobile first” (یعنی طراحی وب سایت از نسخه ی موبایل شروع شود) فکر کرد و وبسایتی را طراحی کرد که با کیفیت بهتری بر روی دستگاه های موبایل نمایش داده شود.

در روز های اولیه ی طراحی ریسپانسیو، ایجاد breakpoint ها در CSS برای صفحاتی با اندازه های مشخص مانند ۳۲۰ پیکسل برای iPhone و ۷۶۸ پیکسل برای iPad رایج بود، سپس آن دستگاه ها آزمایش و کنترل می شد. همچنان که طراحی ریسپانسیو ارتقا می یابد، اکنون اکثر مواقع با محتوا شروع می کنیم و هنگامی که متن می شکند یا break می شود، breakpoint ها را مشخص می کنیم. به عبارت دیگر، در نهایت شما breakpoint هایی محتوا محور خواهید داشت و دیگر به دستگاه خاصی نیاز ندارید که وب سایت را بر روی آن تست کنید.

البته، اکنون فقط حدس می زنیم که طراحی های ما در دستگاه های مختلف و form factor های مختلف و در مدل های تعاملی مختلف به خوبی عمل می کند. باید مداوما عملکرد یک طراحی را با ترافیک واقعی کنترل کنیم.

Breakpoint های محتوا محور روش خوبی برای این کار است اما آنها به معنای کنترل وب سایت برای تعیین مهمترین زمان شکست متن است. این اطلاعات، هنگامی که به راحتی در دسترس باشند، نکاتی را در مورد اینکه چه نوع دستگاه یا form factor را باید بیشتر مورد تست قرار داد، ارائه می دهند.

Google Analytics دارای ویژگی های فوق العاده ای برای دستگاه های متعدد است. البته در مورد طراحی ریسپانسیو، ما در واقع برای form factor ها طراحی می کنیم نه برای دستگاه ها. در این مقاله، ما نشان می دهیم که چگونه WURFL.jsو Google Analytics با همکاری هم می توانند معیار های عملکرد را در form factor ها نشان دهند. دیگر نیازی به حدس زدن نیست.

چرا Form Factor؟

افزایش سرعت و بهینه سازی تجربه ی کاربری برای یک دستگاه خاص یا گروهی از دستگاه هایی که از یک خانواده هستند، کار ساده تری می باشد. در حقیقت، اگرچه ایجاد تجربه ی کاربری برای یک دستگاه خاص، برای انواع دستگاه ها امکان پذیر نیست، اما با این فرض باز هم تنوع دستگاه هایی که قابلیت وب را دارند روز به روز در حال افزایش است. البته هر دستگاهی دارای یک form factor مخصوص به خود است. سه دسته بندی برای مشخص نمودن تجربه کار با دستگاه وجود دارد:

– کاربرد یا وضعیت

– متد ورودی

– خروجی یا صفحه نمایش

به دلیل اینکه تنوع دستگاه ها بین این سه دسته می باشد، پس form factor های متفاوتی خواهیم داشت. از این رو، در نظر گرفتن form factor به عنوان بعد اصلی نظارت بر یک وب سایت ریسپانسیو، منطقی می باشد. این نشان می دهد که کارایی کدام دستگاه باید تست شود.

مثال های گفته شده در این مقاله همه از WURFL.js استفاده می کنند که شامل form factor های ارائه شده توسط آن نیز می باشد که در زیر آمده است:

– دسکتاپ

– اپلیکیشن

– تبلت

– گوشی هوشمند

– تلویزیون هوشمند

– روبات

ارائه ی اطلاعات به Google Analytic

گام اول این است که WURFL.js را در تمام صفحاتی که می خواهید رهگیری کنید قرار دهید. کافیست این خط کد را در کد HTML خود کپی کنید:

<script type=”text/javascript” src=”//wurfl.io/wurfl.js”></script>

این کد باعث ایجاد یک شیء global از WURFL می شود که می توان از طریق جاوا اسکریپت می توان به آن دسترسی یافت.

console.log(WURFL.form_factor);

اکنون که تگ script  در جای خود قرار دارد، کار دیگری که باید انجام دهید افزودن خطوط هایلایت شده به کد رهگیری Google Analytic است:

/* Google Analytics' standard tracking code */
_gaq.push(['_setAccount', 'UA-99999999-1']);
_gaq.push(['_setDomainName', example.com']);
_gaq.push(['_trackPageview']);
/* Tell Google Analytics to log WURFL.js' data */
 _gaq.push(['_setCustomVar',       ۱,’complete_device_name’,WURFL.complete_device_name,1]);

 _gaq.push(['_setCustomVar',       ۲,'form_factor',WURFL.form_factor,1]);
 _gaq.push(['_setCustomVar',       ۳,'is_mobile',WURFL.is_mobile,1]);
/* The rest of Analytics' standard tracking code */
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

 

یا اگر Google Analytics خود را به Universal Analytic آپدیت کرده اید، باید این کد را به آن اضافه کنید:

/* Google Analytics' new universal tracking code */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-99999999-1, 'auto');

/* Define the custom dimensions */
ga('send', 'pageview', {
  'dimension1': WURFL.complete_device_name,
  'dimension2': WURFL.form_factor,
  'dimension3': WURFL.is_mobile
});

علاوه بر این، اگر از GA Universal Analytics استفاده می کنید، به یاد داشته باشید که ابعاد custom را برای آن تعریف کنید. این کار را با به ترتیب کلیک کردن بر روی این موارد انجام دهید:

Admin → Custom Definitions → Custom Dimensions




نظراتتان را با ما در میان بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. با سلام و احترام
    خواستم تشکر کنم بابت مطالب خوب شما

    لطفا به این رویه ادامه بدید و بیشتر مطالب بذارید.
    به سایت ما سر بزنید
    تشکر
    طراحی سایت

    1. Summit گفت:

      سلام ،
      ممنون از لطف شما، ان شاالله به مرور زمان مطالب کامل تر و جدیدتری هم ارائه خواهیم کرد.