Πώς να εντοπίσετε τη συσκευή του χρήστη σας, ώστε να μπορείτε να βελτιώσετε την εμπειρία χρήστη τους

Πριν από μερικούς μήνες παρακολούθησα μια υπέροχη συζήτηση από τη Διάσκεψη κορυφής του Chrome για την απόδοση σε αργές συσκευές.

Μου έριξε όλη τη δουλειά που έκανε το Facebook στον εντοπισμό συσκευών για να δημιουργήσει μια καλύτερη εμπειρία χρήστη. Γρήγορα προχωρήστε τώρα και αποφάσισα να μελετήσω λίγο περισσότερο για το θέμα και να δω τι μπορώ να κάνω στο Thinkific (την εταιρεία στην οποία εργάζομαι).

Πράκτορες χρηστών

Οι πράκτορες χρηστών είναι γνωστοί από προγραμματιστές. Τα χρησιμοποιούμε για να εντοπίσουμε bots, να ανακατευθύνουμε τους χρήστες σε μια συγκεκριμένη έκδοση του ιστότοπού μας ή να προσθέτουμε μαθήματα CSS στη σελίδα μας, ώστε να μπορούμε να δημιουργήσουμε διαφορετικές εμπειρίες.

Στη Thinkific χρησιμοποιούμε ήδη το πρόγραμμα περιήγησης Ruby gem για να αναλύσουμε τον παράγοντα χρήστη και να λάβουμε σχετικές πληροφορίες (για παράδειγμα ανίχνευση bot). Έτσι, αποφάσισα να διατηρήσω τις κύριες πληροφορίες σε έναν πίνακα επισκεπτών_εξοπλισμού - εδώ είναι το σχήμα:

tenant_id: the course creator school the visitor is checkingraw: the raw uatype: desktop / mobile / tablet / bot / otherbrowser_namebrowser_versionplatform_nameplatform_versionhardware: hstore containing memory, processor, device_model, device_nameconnection: hstore containing downlink_max, connection_type

Πιθανότατα παρατηρήσατε ότι μερικά πράγματα δεν υπάρχουν στη συμβολοσειρά UA. Ώρα για νέα API JavaScript:

Λήψη πληροφοριών υλικού χρησιμοποιώντας JavaScript

Όπως καλύπτεται στο βίντεο του Chrome Dev Summit, μπορούμε να χρησιμοποιήσουμε το JS για να λάβουμε αυτές τις πληροφορίες.

Μνήμη

navigator.deviceMemoryθα επιστρέψει έναν αριθμό κινητής υποδιαστολής. Υπάρχουν πράγματα που πρέπει να λάβετε υπόψη εδώ:

  • Λειτουργεί μόνο μέσω HTTPS
  • Η υποστήριξη είναι αρκετά περιορισμένη (μόνο το Chrome βασικά)

Περισσότερα γι 'αυτό:

  • Προδιαγραφή από το W3C
  • Έγγραφα MDN
  • Μπορώ να χρησιμοποιήσω το DeviceMemory

Επεξεργαστές

navigator.hardwareConcurrencyθα επιστρέψει τον αριθμό των λογικών πυρήνων της CPU του χρήστη. Η υποστήριξη για αυτό είναι αξιοπρεπές.

Εντοπισμός πληροφοριών σύνδεσης χρησιμοποιώντας JavaScript

navigator.connectionείναι ένα νέο API που περιέχει πληροφορίες σχετικά με τη σύνδεση του συστήματος, όπως το τρέχον εύρος ζώνης της συσκευής του χρήστη ή εάν η σύνδεση μετριέται. Η υποστήριξη είναι αρκετά περιορισμένη (μόνο το Chrome βασικά), αλλά τα πράγματα είναι πολλά υποσχόμενα.

Περισσότερα γι 'αυτό:

  • Παράδειγμα Chrome
  • Έγγραφα MDN
  • Μπορώ να χρησιμοποιήσω το API πληροφοριών δικτύου

Ανίχνευση του μοντέλου της συσκευής

Ο πράκτορας χρήστη μπορεί να επιστρέψει ορισμένες πληροφορίες σχετικά με το όνομα του μοντέλου. Το userstack είναι μια υπηρεσία που σας παρέχει πληροφορίες βάσει του πράκτορα χρήστη. Λειτουργεί καλά και είναι εύκολο να ενσωματωθεί, ωστόσο, ανάλογα με τις ανάγκες σας, δεν μπορούν να βοηθήσουν.

Πάρτε για παράδειγμα iDevices. Ο πράκτορας χρήστη τους είναι βασικά ο ίδιος, οπότε δεν μπορείτε να διαφοροποιήσετε ένα iPad Pro από ένα παλιό iPad που τρέχει το τελευταίο iOS. Για αυτές τις περιπτώσεις, μπορεί να χρειαστείτε καλύτερη ανίχνευση βάσει ανάλυσης, πυκνότητας εικονοστοιχείων και άλλων πληροφοριών υλικού που εκτίθενται στο πρόγραμμα περιήγησης. Έκανα μια γρήγορη έρευνα για αυτό και βρήκα 3 προϊόντα μέχρι στιγμής: WURFL.io, DeviceAtlas και 51Degrees. Δεν είχα χρόνο να δοκιμάσω τα προϊόντα τους, αλλά ανυπομονώ να το κάνω (και να δημοσιεύσω σχετικά)

Συχνές ερωτήσεις

Ερώτηση: Γιατί να μην χρησιμοποιήσετε το Google Analytics / Mixpanel / Kibana / New Relic / το εργαλείο σας εδώ;

Θα μπορούσαμε να λάβουμε πληροφορίες προγράμματος περιήγησης σε άλλα εργαλεία. Ωστόσο, ως προϊόν SaaS δεν χρησιμοποιούμε τη δική μας ιδιότητα Google Analytics (οι πελάτες προσθέτουν τη δική τους). Επίσης, οι αποκλειστές διαφημίσεων ενδέχεται να αποκλείσουν αυτά τα εργαλεία τρίτων. Τελευταίο αλλά όχι λιγότερο σημαντικό, έχοντας αυτές τις πληροφορίες στο πλευρό μας μπορούμε να προσαρμοστούμε καλύτερα.

Ερώτηση: Έχετε μια λίστα με συσκευές χαμηλού ή υψηλού επιπέδου;

Όχι. Ίσως αυτό να δημιουργηθεί συνδυάζοντας τον αριθμό των επεξεργαστών και της μνήμης, αλλά δεν έχω επενδύσει πολύ χρόνο σε αυτό. Σε αυτό το έργο, ο συνάδελφός μου δημιούργησε έναν βοηθό Rails που θα καθορίζει αν ο χρήστης θα χρησιμοποιήσει την lite ή την προεπιλεγμένη έκδοση ενός ιστότοπου που βασίζεται σε υλικό. Σε αυτό το θέμα, είναι σημαντικό να αναφέρουμε ότι το Facebook διαθέτει μια βιβλιοθήκη για Android που ονομάζεται Device Year Class.

Επίσης δημοσιεύτηκε στο blog μου. Αν σας αρέσει αυτό το περιεχόμενο, ακολουθήστε με στο Twitter και στο GitHub.

Παρεμπιπτόντως - Η Thinkific προσλαμβάνει αρκετές θέσεις αν σας ενδιαφέρει.