중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
한 줄 요약
This is a plugin that enables recognizing environment of user such as Device Type, Browser, OS, location etc
서비스에 접속한 유저의 환경(장치 타입, 브라우저, OS, 위치 등)을 확인할 수 있습니다.
버블박스를 운영하는 페임리가 궁금하다면?
If you're curious about FameLee?
Intro
1. Why
The users who visit our service come from various environments, each with its own unique characteristics. Moreover, each environment has different UX patterns that users are accustomed to. For example, Android and iPhone have completely different UI and UX experiences. To provide higher satisfaction and better experiences to users with such diverse UX patterns, it's essential to first understand the environments of each user. This plugin was developed to identify the environments of each user.
Using this plugin, you can obtain the following information about the user
•
User Agent value
•
User's device type (PC, Mobile, Tablet)
•
User's browser (Chrome, Firefox, etc.)
•
User's operating system (Android, Windows, etc.)
•
User's default language (English, Korean, etc.)
•
User's current country and region (South Korea, Seoul; United States, Washington, etc.)
서비스를 찾아온 유저, 각각의 환경은 다릅니다. 그리고, 각 환경마다 유저가 지닌 UX 패턴도 완전히 다릅니다. 예를 들어, 안드로이드와 아이폰은 전반적인 UI 및 UX가 완전히 다릅니다. 이렇게 다른 UX 패턴을 지닌 유저들에게 더 높은 만족감과 경험을 주기 위해선, 먼저 각 유저들의 환경을 파악할 수 있어야만 합니다. 각 유저의 환경을 알아내기 위해 본 플러그인을 제작했습니다.
해당 플러그인을 사용하면 아래의 정보를 확인할 수 있습니다.
•
유저 Agent 값 확인
•
유저의 접속 장비 확인 ( PC, Mobile, Tablet )
•
유저의 접속 브라우저 확인 ( 크롬, 파이어폭스 등 )
•
유저의 접속 OS 확인 ( 안드로이드, 윈도우 등 )
•
유저의 기본 언어 확인 ( 영어, 한국어 등 )
•
유저의 현재 접속 국가 및 지역 확인 ( 대한민국 서울, 미국 워싱턴 등 )
2. ChangeLog
1.0.0
•
User Agent value
유저 Agent 값 확인
•
User's device type (PC, Mobile, Tablet)
유저의 접속 장비 확인 ( PC, Mobile, Tablet )
•
User's browser (Chrome, Firefox, etc.)
유저의 접속 브라우저 확인 ( 크롬, 파이어폭스 등 )
•
User's operating system (Android, Windows, etc.)
유저의 접속 OS 확인 ( 안드로이드, 윈도우 등 )
•
User's default language (English, Korean, etc.)
유저의 기본 언어 확인 ( 영어, 한국어 등 )
•
User's current country and region (South Korea, Seoul; United States, Washington, etc.)
유저의 현재 접속 국가 및 지역 확인 ( 대한민국 서울, 미국 워싱턴 등 )
Core
1. Related Docu
플러그인 페이지
데모 링크
에디터 링크
2. Instruction
This plugin utilizes the User Agent and IP address of the users accessing the service to retrieve information. Users must be informed about the collection of personal information, and all legal liabilities related to personal information are the responsibility of the individuals using the plugin.
해당 플러그인은 서비스에 접속한 유저의 User Agent와 IP 값을 활용해 정보를 확인합니다. 개인 정보 수집에 대해 유저에게 안내해야 하며, 개인정보와 관련해 발생하는 모든 법적 문제는 플러그인을 사용한 분들에게 있습니다.
The collected information is solely based on the user's User Agent and IP. If the user utilizes an IP evasion service or similar methods, the plugin will still collect and process that information accordingly.
수집 정보는 모두 유저의 User Agent와 IP에 기반합니다. 만약 유저가 IP 우회 서비스 등을 사용할 경우, 해당 정보를 그대로 수집합니다.
3. Element
a. user analytics
Element that automatically collects user information when the page is executed.
페이지가 실행될 때, 자동으로 유저 정보를 수집하는 요소입니다.
Element
[user analytics] element collects user information only on pages where it is present. When the page is loaded, this element automatically gathers user information.
[user analytics] 요소가 있는 페이지에서만 유저 정보를 수집합니다. 페이지가 실행될 때, 해당 요소가 유저 정보를 자동으로 수집합니다.
States
[user analytics] 요소가 유저의 agent와 IP를 분석해 정보를 자동으로 수집해 각 states로 반환합니다.
[user analytics] elem automatically collects information by analyzing the user's agent and IP, then returns the data organized by states.
field | type | desc |
userAgent | String | 유저 Agent 값을 모두 불러옵니다.
Read user Agent's value |
deviceType | String | 유저의 디바이스 타입을 불러옵니다. (ex. PC, Tablet, Mobile)
Read user's device type (ex. PC, Tablet, Mobile) |
OS | String | 유저의 OS 정보를 불러옵니다. (ex. Android, mac, Unknown etc)
Read user's OS (ex. Android, mac, Unknown etc) |
browser | String | 유저의 브라우저 정보를 불러옵니다. (ex. Chrome, FIrefox, Unknown etc)
Read user's browser (ex. Chrome, FIrefox, Unknown etc) |
language | String | 유저의 언어 정보를 불러옵니다. (ex. EN, ko-KR etc)
Read user's language (ex. EN, ko-KR etc) |
locationCountry | String | 유저의 국가 정보를 불러옵니다. (ex. south Korean)
Read user's country (ex. south Korean) |
locationRegion | String | 유저의 지역 정보를 불러옵니다. (ex. seoul)
Read user's region (ex. seoul) |
Tutorial
1. Setting
Download the plugin and create a [user analytics] element on your page. Then, whenever the page is executed, the created element will verify the user's agent and IP to collect information.
플러그인을 다운 받고, 페이지에 [user analytics] 요소를 생성합니다. 그러면 페이지가 실행될 때마다, 생성한 요소가 유저의 agent와 IP를 확인하고 정보를 수집합니다.
The collected information is returned as state values of the element. You can directly utilize these state values. If not collecting any info, return “Unknown”
수집된 정보는 요소의 state 값으로 반환됩니다. 해당 state 값을 직접 사용하시면 됩니다. 만약 정보를 수집하지 못했다면, “Unknown” 값이 반환됩니다.
2. Use case
The [language] state value in the [user analytics] element can be utilized to determine the language preference of the user. This can be leveraged to display customized information tailored to each language. For example, in the [conditional] tab of a text element, you can add a condition by entering "user analytics's language contains KR" as the condition. Then, input "안녕하세요" (which means "hello" in Korean) as the text to be displayed when this condition is met.
[user analytics] 요소에서 [language] state 값을 활용해 유저가 어떤 언어를 사용하는지 알 수 있습니다. 이를 활용해 언어 별로 맞춤형 정보를 보여줄 수 있습니다. 예를 들어, text 요소의 [conditional] 탭에서 조건을 추가하고, “user analytics’s language contains KR”를 조건문으로 입력합니다. 그리고, 출력되는 글자로 한국어(”안녕하세요”)를 입력합니다.
Next, add another condition and enter "user analytics's language contains EN" as the condition. Input "hello" as the text to be displayed when this condition is met. This way, you can show customized text for each language preference.
그 다음에 새로운 조건을 추가하고, “user analytics’s language contains EN”을 조건문으로 입력합니다. 그리고, 출력되는 글자로 영어(”hello”)를 입력합니다. 그러면, 각 언어 별로 맞춤형 글자를 보여줄 수 있습니다.
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
