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

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

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

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

  • 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 وب‌سایت قرار دهید:

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

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

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

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

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

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

سخن پایانی

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

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

==

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

بر اساس رای 1 نفر

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

نظر شما چیست؟

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