تشخیص مدل دستگاه کاربران سایت با جاوا اسکریپت – از صفر تا صد

۸۹۵ بازدید

آخرین به‌روزرسانی: ۷ شهریور ۱۴۰۲

زمان مطالعه: ۲ دقیقه

دانلود PDF مقاله

امروزه ما در دنیایی زندگی می‌کنیم که از هر زمان دیگری در طول تاریخ بیشتر شخصی‌سازی‌شده است. برای این که بتوانیم صفحه‌های وب را به شیوه‌ای که با نیازهای کاربر تطبیق بیشتری داشته باشد دربیاوریم، باید اطلاعاتی از سمت وی دریافت کنیم. به عنوان یک دانشمند داده یا توسعه‌دهنده وب ممکن است گردآوری داده‌هایی در مورد بازدیدکنندگان وب‌سایت کار آسانی نباشد. یکی از این دشواری‌ها در زمینه تعیین نوع دستگاه بازدیدکننده است. در این مقاله با روش تشخیص مدل دستگاه کاربران سایت با جاوا اسکریپت آشنا خواهیم شد.

فهرست مطالب این نوشته

قابلیت‌های API تشخیص دستگاه

پیاده‌سازی همگام

پیاده‌سازی ناهمگام

سخن پایانی

در ادامه مثالی از یک فروشگاه آنلاین فروش قاب گوشی را مورد بررسی قرار می‌دهیم. تصور کنید یک فروشگاه آنلاین بتواند تشخیص دهد که کاربر چه نوع دستگاه موبایل دارد و سپس تنها قاب‌های مرتبط با آن را نمایش می‌دهد. با بهره‌گیری از این API تشخیص دستگاه (+) می‌توانیم این قابلیت را به سادگی پیاده‌سازی کنیم. در ادامه روش و مراحل آن را با هم مرور خواهیم کرد.

قابلیت‌های API تشخیص دستگاه

هیچ کدام از API-های تشخیص دستگاه جاوا اسکریپت نمی‌توانند به خوبی این API نوع دستگاه‌ها را تشخیص دهند. با پیاده‌سازی این API امکان تشخیص و دسترسی به قابلیت‌های زیادی از قبیل موارد زیر به دست خواهد آمد:

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

deviceAPI.deviceType – نوع دستگاه مثلاً موبایل.
deviceAPI.deviceBrand – برند دستگاه مثلاً اپل.
deviceAPI.deviceName – نام دستگاه مثلاً iPhone XS.
deviceAPI.screenWidth – عرض صفحه دستگاه مثلاً 1600.
deviceAPI.screenHeight – ارتفاع صفحه دستگاه مثلاً 800.
deviceAPI.screeenRatio – نسبت طول و عرض صفحه دستگاه مثلاً 2.
deviceAPI.GPU – پردازنده گرافیکی دستگاه مثلاً Apple GPU.
deviceAPI.browserName – نام مرورگر دستگاه مثلاً Safari.
deviceAPI.browserVersion – نسخه مرورگر دستگاه مثلاً 13.0.1.
deviceAPI.osName – نام سیستم عامل دستگاه مانند iOS.
deviceAPI.osVersion - نسخه سیستم عامل دستگاه مثلاً 13.1.
deviceAPI.touchScreen – لمسی بودن یا نبودن صفحه دستگاه مثلاً true.

پیاده‌سازی همگام

در ادامه به بررسی شیوه پیاده‌سازی ناهمگام API خواهیم پرداخت، اما ابتدا آن را به صورت همگام پیاده‌سازی می‌کنیم. به این منظور کارهای زیر انجام می‌شوند:

یک کد یکتا برای نسخه آزمایشی API از این آدرس (+) بگیرید. سپس اسکریپت زیر را در بخش تگ‌های head وب‌سایت قرار دهید:

1<script src=”https://theapicompany.com/deviceAPI.js?id=deviceAPI-123456"></script>

به جای id همان شناسه یکتایی که قبلاً گرفتید را قرار دهید. با استفاده از متغیر deviceAPI چنان که در کد زیر می‌بینید، به قابلیت‌های API دسترسی پیدا کنید. به این ترتیب می‌توانید صفحه وب را شخصی‌سازی کنید:

1<html>
2<head>
3  <script src="https://theapicompany.com/deviceAPI.js?id=deviceAPI-123456"></script>
4</head>
5
6<body>
7    <script>
8      var devicename = deviceAPI.deviceName;
9
10      if(devicename == "iPhone XS"){
11        window.location.href = "https://www.yourwebsite.com/iphone-xs-cases";
12      }
13      else{
14        window.location.href = "https://www.yourwebsite.com/all-cases";
15      }
16
17    </script>
18</body>
19</html>

مشاهده کامل کدها

پیاده‌سازی ناهمگام

برای افزایش سرعت بارگذاری وب‌سایت می‌توان نسخه ناهمگام این API را پیاده‌سازی کرد. به این منظور باید کارهای زیر را انجام دهید:

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

یک کد یکتا برای نسخه آزمایشی از این آدرس (+) بگیرید. سپس اسکریپت زیر را در بخش تگ‌های head وب‌سایت قرار دهید:

1<script async src=”https://theapicompany.com/deviceAPI2.js?id=deviceAPI-123456"></script>

به جای ID شناسه یکتایی که از وب‌سایت گرفتید را وارد کنید. در نهایت با استفاده از متغیر deviceAPI به صورتی که در کد زیر می‌بینید، به قابلیت‌های API دسترسی پیدا کنید:

1<html>
2<head>
3  <script async src="https://theapicompany.com/deviceAPI2.js?id=deviceAPI-123456"></script>
4</head>
5
6<body>
7   <script>
8      function deviceAPIcallback(result){
9          if(result.deviceName == "iPhone XS"){
10            window.location.href = "https://www.yourwebsite.com/iphone-xs-cases";
11          }
12          else{
13            window.location.href = "https://www.yourwebsite.com/all-cases";
14          }
15      }
16   </script>
17</body>
18</html>

مشاهده کامل کدها

اینک زمانی که یک کاربر با گوشی iPhone XS وارد وب‌سایت می‌شود، به صفحه‌ای هدایت می‌شود که قاب‌های مربوط به این گوشی نمایش یافته‌اند.

سخن پایانی

شخصی‌سازی و بهینه‌سازی تجربه مشتری (CXO) این روزها یکی از مهمترین موضوعات در بحث توسعه وب محسوب می‌شوند. با کمک گرفتن از API تشخیص دستگاهی که در این مقاله معرفی کردیم می‌توانید با یک خط کد وب‌سایت خود را تا حدود زیادی برای کاربر شخصی‌سازی کنید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

محصول، خدمات یا برند خود را در مجله فرادرس معرفی کنید.

کلیک کنید

بر اساس رای ۵ نفر

آیا این مطلب برای شما مفید بود؟

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

ثبت نظر

منابع:

better-programming

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.