Bubble.io Tutorial - Browser Informationen des Users in Bubble erhalten

In diesem Video lernt ihr verschiedene Wege, um Browser Informationen in Bubble zu erhalten.

Links:

🔗 Browser Platform Detection von Mintflow https://bubble.io/plugin/browser-platform-detection-1593944068480x773811449950634000

🔗  User Agent: http://wieistmeinuseragent.de/

🔗  Browser Language und Locale Plugin von Digital Eye https://bubble.io/plugin/browser-language-and-locale-1611674652831x297972691674333200

🔗  https://de.wikipedia.org/wiki/Locale

🔗  Toolbox Plugin von Misha V https://bubble.io/plugin/toolbox-1488796042609x768734193128308700

🔗  User Stack API https://userstack.com

Code Snippets:

🤖  User Agent Javascript Snippet:

var ua_result = navigator.userAgent;
bubble_fn_ua(ua_result);
console.log (ua_result);

🤖  Browser Language:

var language_result = navigator.language;
bubble_fn_language(language_result);
console.log (language_result);

Video-Transkript:

Hallo, mein Name ist Chris Strobl, ich bin der Gründer von No Code Germany und heute geht es darum, wie wir Browser Informationen im Bubble erhalten. Dafür haben wir drei Wege. Der erste Weg ist mit dem Browser Platform Detection Plugin. Dies ist ein kostenloses Plugin von Mind Flow und wir legen direkt mal los und schauen uns an, wie wir das verwenden können.

Wir gehen einmal im Plugins, installieren dieses Plugin. Danach gehen wir in das Design Tab und fügen nun unter Visual Elements Platform Detection dieses Plugin hinzu. Ihr könnt das irgendwo auf den Screen einfügen. Sobald ihr dieses Plugin hinzugefügt habt, haben wir nun Zugriff auf die Browser Daten. Ich habe einmal schon ein Textfeld vorbereitet und hier fügen wir nun dynamisch die Daten ein. Das heißt Platform Detection as ua ua bedeutet User Agent. Wenn ihr auf die Webseite. Wie ist mein User Agent D geht, seht ihr was ein User Agent im Detail ist? Unter einem User Agent versteht man einen Teil des http header, der übermittelt wird. Dieser gibt verschiedene Informationen über den Client, also den Computer des Users heraus. Wie dieser diese Webseite erreicht, zum Beispiel bei mir ist das ganze über einen Mac und über einen Browser von Chrome.

Wenn wir nun zurückgehen in das Design Tab, dann können wir die anderen Daten auch hinzufügen und der Name machen wir Platform Detection a Name unter Version. Nehmen wir Version, Layout, Layout. Das Operating System Betriebssystem Plattform Detection os description. Produkt.

Und schließlich Manufaktur, Plattform, Directions Manufaktur. Wir gehen jetzt einmal in das Preview und schauen uns an, was wir hier bekommen. Ihr seht, wir bekommen den User Agent. Dieser ist genau gleich wie hier. Dann bekommen wir den Browser, nämlich Chrome. Wir bekommen die Version, das Layout. Das Operating System mit OS X. Noch mal die Deskription vom Browser Wir bekommen aber nicht das Produkt und auch nicht die Manufaktur.

Das heißt, welcher Laptop oder welches Endgerät hier verwendet wird. Ihr seht aber bereits, wir bekommen relativ viel Daten mit dem Browser Platform Detection Plugin. Und wir gehen jetzt weiter in das zweite Plugin, was ich euch zeigen möchte, nämlich dass Browser Language and local Plugin. Dafür gehen wir noch mal in den Editor. Wir gehen im Plugins Browser Language and Local, dieses installieren wir und dies wiederum ist ein kostenloses Plugin Conditional n und wir gehen jetzt einmal in das Designte, um es zu nutzen.

Unter Visual Elements fügt dir dieses Browser Language ein. Auch dieses ist dann auf der Webseite nicht sichtbar, dieses Element, aber sobald es auf der Seite eingefügt habe, haben wir Zugriff auf die Daten. Wir gehen wieder auf das Textfeld und fügen nun ein Browser Language as. Language und local browser language local. Ihr fragt euch vielleicht, was ein Lokal ist und das ist neben der Browser Sprache quasi der STANDARD Parameter und diesen der könnte zum Beispiel Design für Deutschland. Und dieser hat dann verschiedene Auswirkungen auf zwei Formate Tastatur, Layout, Zeichensatz, aber auch Datums Formate.

Wir gehen jetzt einmal in den Test und schauen uns das Ergebnis an.. Ihr seht das bei mir der Browser Language auf Englisch ist und auch das Lokal das Betriebssystem auf Englisch gesetzt wurde. Im nächsten Schritt zeige ich euch nun, wie wir ebenfalls den User Agent und die Browser Language ohne ein Plugin bekommen, was speziell gemacht ist, sondern mit der JavaScript Toolbox.

Dafür geben wir wiederum in den Editor unter Plugins installiert, die das kostenlose und sehr beliebte Plugin Toolbox und geht danach in den Workflow und wir gehen, wenn Page is loaded. Run mode. JavaScript Hier fügen wir folgende drei Zeilen ein Und was vor allem wichtig ist, ist hier, dass wir diese Bubble Variable u.a. haben, um den User Agent zu bekommen. Ich habe euch dieses Code Snippet auch in die Video Beschreibung gepackt, sodass wir dieses einfügen könnt. Wir gehen jetzt in das designte Visual Elements JavaScript Two Bubble. Wir fügen dies hinzu. Wichtig ist nun, dass wir das Suffix, d.h. wie eben gerade im Workflow einfügen. Und als value type machen wir Text und publish value aktivieren wir. Wir gehen jetzt einmal in Preview und schauen uns in Der Konsul das Ganze an. Weil wir haben ja hier oben Console Log you are set.

Das heißt einmal Preview. Dann Rechtsklick untersuchen und dort gehen wir auf die Konsole und ihr seht jetzt, dass wir unseren User Agent hier einmal darstellen und somit haben wir schon mal erfolgreich den User Agent bekommen. Als nächstes wollen wir die nun in dem Textfeld darstellen. Dafür gehen wir zurück in das Designte, gehen in dieses Textfeld und wählen aus User Agent. JavaScript to Bubble value. User Agent. Wir klicken noch mal auf Preview.

Und sehen jetzt, dass wir genau den gleichen User Agent auch hier bekommen. Jetzt wollen wir noch über Toolbox die Browser Language bekommen. Dafür gehen wir zurück in Editor Workflow. Wenn Page is loaded. Wieder Plugins Run JavaScript. Wir kopieren nun diese drei Zeilen und diesmal ist das Suffix language und wir haben wiederum so lock, um es einmal zu testen. Anschließend gehen wir in das designte machen noch das Visual Element JavaScript to Bubble, diesmal das Suffix language. Public Value. Text.

Und gehen einmal jetzt auf Preview.

Untersuchen. In die Konsole und wir sehen hier nun. Die Language des Browsers in GB. Anschließend wollen wir genau wiederum analog in der Browser Language darauf zugreifen. Diesmal JavaScript zu Bubble by value und gehen noch einmal auf Preview. Und ihr seht analog zum Browser Language Plugin, dass wir das gleiche auch mit Toolbox schaffen. Wenn ihr nun komplexere Informationen über eure User braucht, gibt es auch Services wie zum Beispiel User Stack Users. ICQ ist eine API, die euch erlaubt, in Realtime Informationen über Browser Devices oder Operating Systems zu bekommen. Und dieses können wir im Bubble wunderbar integrieren mit einer API. Am besten loggt ihr euch einfach einmal in Users ICQ ein, um das dann mit dem API Connector zu verbinden.

Ich selbst habe bereits die Registrierung durchgeführt und gehe deswegen direkt in die Dokumentation. Für User Steeg braucht ihr euren Access Keys, den findet ihr in euren Settings. Wir gehen jetzt einmal im Bubble in den API Connector und dort habe ich bereits Users Stack konfiguriert. Das heißt, ihr nehmt den API vom User Stack ActionScript wie in der Dokumentation.

Und fügt hier euren API Keys ein Als Authentifizierung nehmt ihr privat Keys in URL und dann. Macht dir einen Call, nämlich einen Get Call an API, dort users dot com slash. Anschließend fügte er noch hinzu Eure User Agent, diesen kopiert ihr aus dem Browser, den hier oben bekommen habt. Und macht das Format ohne Hier lass dir alles offen. Dann gehen wir auf rheinische Keys Call. Und jetzt seht jetzt, dass wir quasi alle möglichen Informationen hier von User Steeg direkt bekommen, zum Beispiel, dass ich einen Apple nutze, einen Mac, dass wir welches genaue Operating System benutzen und auch weitere Informationen. Dies speichern wir und können es jetzt direkt in Bubble verwenden.

Dafür geben wir wiederum in das Textfeld und fügen nun ein. Get data Froman, external API, User Steeg Und diesen Parameter machen wir dynamisch mit JavaScript zu Bubble a value das unser User Agent und anschließend u.a. für User Agent, danach Get data from external API. Wir machen das ganze analog. Und nehmen hier den Namen. Browser nehmen. Hier nun Get data from the external API USA steigt direkt. Und brauchen hier nun die Browser Version. Anschließend die Browser Engine Get data from external API. Browser Engine. Get data from external API User Steeg Dies machen wir wiederum dynamisch.

Und fragen, ob das Ganze ein Mobil Device ist. Die Weiß ist mobil. Anschließend das Operating System. Operating System Name. Und hier machen wir Typekit und schließlich noch die Brant Get data from an external API. Dies machen wir wiederum dynamisch und die Brant. Wir gehen jetzt einmal auf Preview und schauen uns das Ganze an.. Und ihr seht, wie wir jetzt haben, dass wir den User Agent gleich bekommen wie oben. Und auf den anderen Wegen. Wir haben aber zusätzlich die Information, dass wir einen Mac nutzen, dem Browser Name haben. Die Browser Version ähnlich wie bei den anderen. Wir sehen aber auch die Browser Engine. Wir können die testen, ob wir ein Mobile Devices nutzen.

In diesem Fall ist das Ganze auf dem Desktop. Wir bekommen das Operating System und wir sehen auch, dass wir einen Apple nutzen und somit könnt ihr sehen, dass wir unterschiedliche Wege haben Browser Informationen im Bubble zu bekommen. Dass Browser Language Plugin ist in allen Bereichen fehlbar. Dass Browser Detection Plugin oder die Toolbox haben beide ihre Vor und Nachteile. Und wenn ihr mehr Informationen braucht, seht ihr das Services wie User Stack auch relativ einfach im Bubble integrierbar sind.

Bei der Nutzung von APIs wie User SDK müsst ihr dann nur überlegen, wie das Pricing aussieht. Gerade wenn man mehr Nutzer hat, sind diese Services natürlich auch nicht mehr kostenlos.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button, subscribed unseren Channel bei Fragen, schreibt uns gerne die Kommentare. Ich wünsche euch weiterhin viel Erfolg und auf bald.