Google Analytics와 연결하여 실제 브라우저 지원을 표시하는 방법

반응형

내가 사용하는 웹캔은 오늘날 모든 웹 개발자에게 없어서는 안 될 부분입니다. 데스크탑 및 모바일 웹 브라우저에서 프런트 엔드 웹 기술을 지원하기 위한 최신 브라우저 지원 표를 사용할 수 있습니까?

개별 기술에 대한 브라우저 지원은 컬러로 강조 표시됩니다(기능을 지원하는 브라우저는 녹색, 이를 지원하지 않는 브라우저는 빨간색, 일부 또는 폴리필을 지원하는 브라우저는 진흙 녹색으로 표시됩니다).

오른쪽 상단에서 해당 기술을 지원하는 브라우저의 비율도 확인할 수 있습니다. 어떤 브라우저가 어떤 기능을 지원하는지 알 수 있고, 동시에 얼마나 많은 브라우저가 사용되는지 알 수 있을까요? 이를 바탕으로 애플리케이션은 새로운 기능을 사용할 수 있는 사용자의 비율을 계산할 수 있습니다. 그러나 이 수치는 근사치일 뿐이며, 일반적으로 애플리케이션 사용자에 따라 몇 퍼센트 차이가 날 수 있습니다. 이 문서에서는 Google Analytics를 사용하여 이 수치를 정확하게 만드는 방법을 보여드리고자 합니다.

브라우저 문제

 

브라우저의 레이아웃은 나라마다 조금씩 다르며, 우리의 앱이 핸드폰과 컴퓨터 중 어느 것을 더 많이 방문하느냐에 따라서도 다릅니다. 만약 우리가 이 숫자를 더 정확하게 만들고 싶다면, 우리는 우리의 방문자들을 더 잘 알아야 합니다. 기본적으로 사용자들이 어떤 브라우저를 가지고 있는지 알아야 합니다. 이것이 바로 Google Analytics에서 수집하는 것이며 "사용할 수 있습니까"에 사용할 수 있습니다.

예를 들어 Productboard에서는 Product Management를 위한 응용 프로그램을 개발하며, 방문자들은 대부분 미국에서 와서 전화기가 아닌 대부분의 컴퓨터에서 애플리케이션을 사용합니다. 현대 브라우저의 미국 내 표현력이 뛰어나고, 모바일 브라우저에 문제가 있을 때도 있기 때문에 굳이 많은 것을 다룰 필요가 없기 때문에 우리에게 좋은 일입니다.

이 가설을 바탕으로 브라우저의 기능에 대한 지원이 글로벌 통계보다 더 높을 수 있다고 가정할 수 있다.

왜 그것이 중요한 이유

위 가설을 확인하기 위해 구글 애널리틱스로부터 직접 데이터를 가져와 어떤 차이가 있는지 알아보겠습니다. 몇 퍼센트에 불과할 수도 있지만, 웹 트래픽이 높기 때문에, 이 수치는 상당한 수준이며, 구현에서 오래된 브라우저에 대한 지원을 생략할 수 있는지 여부를 알아보는 데 사용할 수 있습니다.

 

하드 데이터 덕분에, 누군가 이 기술이나 저 기술을 사용하기로 한 우리의 결정에 반대한다면 우리는 또한 매우 효과적으로 주장할 수 있다. 오래된 브라우저에서 어떻게든 새로운 기능을 시뮬레이션해야 하는 어떤 폴리필이나 솔루션은 추가 작업이 많이 소요되며, 오래된 브라우저를 사용하는 소수의 방문자의 경우 실제 구현이 전혀 성과를 거두지 못하고 있다. 이 구현에는 제품 자체를 개선하는 데 부족할 수 있는 자원이 필요합니다. 많은 관람객에게 불이익을 주지 않도록 균형점을 찾는 동시에 일감몰아주는 기술을 활용할 수 있도록 해야 하는 이유다.

Google Analytics에서 데이터 가져오기

이 단계별 가이드에서는 Google Analytics에서 CAN I로 데이터를 가져오는 방법을 설명합니다. 예를 들어, 방문자의 브라우저 중에서 CSS Scroll Snapping이 어떤 기능을 지원하는지 알아보려고 합니다. 이 기능을 자바스크립트로 대체하면 성능이 좋지 않을 뿐만 아니라 많은 코드를 추가하거나 외부 라이브러리를 사용해야 하는데, 우리가 원하지 않습니다.

Scroll Snapping에 대한 총 지원률은 97.31%입니다(이 비율은 브라우저 지원 및 표현 방식이 변경됨에 따라 "사용할 수 있습니까" 라이브에서 다를 수 있음).

 

• 설정 버튼을 클릭합니다.

2. "가져오기 열기"를 클릭합니다.

참고: Google Analytics가 없는 경우 이 옵션을 사용하여 프로그램 사용자에 대한 국가 또는 지역을 선택할 수 있습니다. 그것은 그렇게 정확하지는 않지만, 결정을 내리는 데 도움을 줄 수도 있습니다.

 

3. "Google Analytics"를 클릭하십시오.

4. Google 계정에 로그인합니다.

5. 확인할 Google Analytics 프로필을 선택합니다.

 

6. 확인하려는 날짜 범위를 선택합니다.

7. 모달 창을 닫습니다.

 

8. 가져온 데이터를 선택하고(프로파일 이름에 따라 레이블이 달라짐):

다 끝냈어!

맞춤형 메트릭을 살펴보겠습니다.

 

이제 Google Analytics의 데이터를 기반으로 직접 표시되는 정확한 데이터를 볼 수 있습니다. Scroll Snapping 지원률은 97.4%로 글로벌 데이터(95.31%)보다 여전히 몇 퍼센트 더 높습니다.

동시에 트랙을 사용할 수 있는 모바일 기기에서 직접 얼마나 좋은지 필터링할 수 있습니다.

결론

지금까지 Google Analytics에서 정확한 기기 데이터를 사용해도 되나요로 가져오는 방법을 알려드렸고, 새로운 기술을 사용할 가치가 있는지, 아니면 다른 방식으로 진행할 가치가 있는지 알아보았습니다.

 

이 데이터를 바탕으로 사용자 브라우저에서 Scroll Snapping 지원이 충분히 가능하기 때문에 자체적인 방식으로 회전목마를 구현하지 않기로 했습니다.

Google Analytics와 함께 사용할 수 있습니까? 댓글로 관찰 내용 알려주세요.