platformOS는 어떻게 사용자의 프라이버시를 보호하는 동시에mixpanel을 사용합니까?

platformOS는 방문객의 프라이버시, 시간과 돈을 중시한다.우리는 자신의 가치관으로 살아가기 때문에 기술을 더욱 깊이 연구하여 이러한 가치관을 구현한다.오늘 우리는 사이트의 성능을 파괴하거나 방문객의 프라이버시를 희생하지 않는 상황에서mixpanel을 어떻게 사용하는지 깊이 있게 연구할 것이다.
우리는mixpanel을 사용하여 방문객이 어디에서 곤혹스러움을 느끼는지 파악하고 우리의 페이지를 남긴다

왜 믹스판이야?

Mixpanel은 방문자가 웹 사이트에서 무엇을 하는지 파악하는 업계 표준입니다.
Google Analytics처럼 모든 컨텐츠를 추적하지 않으며 알려준 컨텐츠만 추적합니다.적어도 우리는 상황이 이와 같기를 희망하지만, 문서와 교육 자료를 보면, 우리는 실제로 수집한 데이터가 우리가 제공하고자 하거나 필요로 하는 데이터보다 많다고 믿는다.
그럼에도 불구하고mixpanel은 매우 전면적인 도구를 가지고 있어 방문자들이 사이트에서의 스케줄을 깊이 있게 이해할 수 있다.이것은 입사 절차에 매우 중요하다. 왜냐하면 당신은 병목 부분에 집중할 수 있기 때문에 잘못된 부분을 최적화하는 데 시간을 낭비하지 않을 것이다.

mixpanel은 일반적으로 어떻게 실현됩니까

대부분의 제3자 서비스와 마찬가지로mixpanel은 보통javascript를 사용하여 전방에서 실현한다.CDN에서 스크립트를 로드하든 Mixpanel CDN에서 스크립트를 로드하든 여러 가지 결과가 발생합니다.

불러와야 합니다 - 페이지가 커집니다 (약 80KB)

이것은 반드시 해석하고 실행해야 한다. 페이지가 느려질 것이다. 특히 속도가 느린 장치(이동 장치)에서

설치하고 매번 업데이트

를 하기 전에mixpaneljavascript 클라이언트 코드 라이브러리를 검사하지 않으면 그 기능(또는 추적)을 제대로 알지 못합니다.

According to documentation GDPR 규정 준수 설정은 선택적 가입이므로 추가 마찰과 완료해야 할 작업이 발생할 수 있음

기본적으로 AdBlocker가 mixpanel CDN을 막았기 때문에 데이터에 결함이 생길 수 있습니다.차이가 얼마나 나나요?응, 일부 정보원은 50퍼센트의 차이를 보고했는데, 이것은 클라이언트의 측정에 의존하지 않기에 충분하다.

이 모든 결점은 우리의 가치관과 배치된다.그러나mixpanel은 충분한 제품으로 연구를 할 수 있습니다. 우리의 위대한 엔지니어는 어떤javascript도 사용하지 않고mixpanel을 사용할 수 있는 방법을 찾았습니다.

mixpanel을 어떻게 사용합니까

platformOS에서 HTTP 요청을 보내는 것은 매우 간단합니다. 이 점을 실현에 활용하기로 했습니다.
먼저 네트워크 호출을 수행하는 API 호출을 정의했습니다.

---
name: mixpanel_create_event
to: https://api.mixpanel.com/track
format: https
request_type: POST
callback: >
  {%- assign response_data = response.body | to_hash -%}
  {% if response_data.error %}
    {%- log response_data.error, type: 'modules/monitoring/mixpanel_create_event' -%}
  {% endif %}
request_headers: >
  {% if data %}
    {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  {% endif %}
---
data={{ data }}

--- 사이의 모든 내용은api 호출의 정의이고 아래의 모든 내용은 보낼 요청의 주체입니다.또한 callback는 API 호출을 보낸 후 실행됩니다.우리의 예에서 mixpanel 서버가 되돌아오면 로그 오류입니다.
API 호출을 정의한 후 필요한 경우 적절한 데이터를 사용하여 수행해야 합니다.여기서는 다양한 소스에서 다양한 이벤트를 전달할 수 있는 또 다른 추상을 만들었습니다.

{% liquid
  graphql instance = 'modules/monitoring/instance' | dig: 'instance'
  unless data
    assign data = '{}' | parse_json
  endunless
  hash_assign data['distinct_id'] = instance.id
  hash_assign data['instance_id'] = instance.id
  hash_assign data['token'] = "377404cb3e579051250ca9a2b129ea7b"
%}
{% parse_json mixpanel_data %}
{
  "event": "{{ event_name }}",
  "properties": {{ data }}
}
{% endparse_json %}

{% liquid
  graphql r = 'modules/monitoring/api_call', data: mixpanel_data, template: 'modules/monitoring/mixpanel_create_event'
  log r, type: 'monitoring/migration/track_first_deploy'
  return r
%}

각 활동에 다음과 같은 기본 데이터를 첨부합니다.

공공 영패(mixpanel 요구),

실례id-어느 사이트에서 이벤트를 보냈는지 알아보기

그리고 일부 변수는 시스템의 다른 부분에서 전달된 것이다. 하나는 event_name이다. 이것은 하나의 이름일 뿐이고mixpanel 계기판에서 그것들을 쉽게 필터할 수 있다. 다른 하나는 data이다. 이것은 JSON 대상이고 우리가 원하는 모든 내용을 포함할 수 있다. 예를 들어 id, 전자메일, 브라우저 데이터(사용자 에이전트에서 추출) 등이다.
현재, 이 코드 (partial) 는passing event_name 과some data 을 포함하여 프로그램의 어느 곳에서든 호출할 수 있습니다.가장 간단한 예는 우리marketplace_install 이벤트입니다. 누군가가 우리의 시장 템플릿을 처음 설치할 때마다 이 이벤트를 호출합니다.
이벤트 이름 marketplace_install 을 호출해서 모든 이벤트를 버킷으로 그룹화합니다.우리의 템플릿은 서로 다른 변형(지역사회 사이트, 전자상거래)이 있기 때문에 우리의 data 대상은 이러한 변형을 식별할 수 있다. 그러면 우리는 우리의 합작 파트너와 고객이 어떤 유형의 시장을 설치하고 있는지 알 수 있다.

{% parse_json data %}
  {
    "marketplace": "products"
  }
{% endparse_json %}

{% liquid
  if context.location.host != 'getmarketplace-qa.staging.gapps.platformos.com'
    function res = 'modules/monitoring/commands/track_event', event_name: 'marketplace_install', data: data
  endif
%} 

이윤.

mixpanel 서버 측을 사용하면 다음과 같은 결과가 발생합니다.

프런트엔드

성능 불이익 없음

백엔드는 성능 손실이 없습니다. 코드가 비동기적으로 실행될 수 있기 때문에 방문자가 사이트

를 방문할 때mixpanel에 데이터가 전송될 때까지 기다릴 필요가 없습니다.

서버는 브라우저가 알려준 정보만 알고 로그인한 사용자가 제공한 모든 정보

를 포함한다

Mixpanel은 브라우저 쪽이나 서버 쪽에서 코드를 실행하지 않기 때문에 해커 공격을 가정하면 클라이언트가 안전합니다.억지스럽고 한 요소도 아니라고 생각할 수도 있지만 해커/비밀 누설은'만약'의 문제가 아니라'언제'의 문제이며 아무리 안전회사가 잘 실시하든지 간에 역사는 우리에게 알려준다.이것이 바로 우리가 데이터 저장과 제공을 최대한 줄이는 원인 중의 하나이다.

여러 사이트에서 추적

우리 같은 사이트(문서, 마케팅 페이지, 파트너 포털)가 여러 개 있을 때 모든 사이트의 방문객 여정을 추적하고 싶을 수도 있습니다.우리도 이런 생각을 가지고 있지만, 이것은 단일 사용자를 식별하는 것을 의미한다.
긴 말은 짧게 해도 이 모든 것은 fingerprinting 로 귀결된다. 이것은 대다수 대형 매체, 광고 네트워크 등의 표준적인 방법이지만 우리는 받아들일 수 없다.방문객들이 원하지 않는 자바스크립트를 많이 보냈을 뿐만 아니라 지문을 원하느냐고 물으면'아니야'라고 대답할 수도 있다. 어쨌든.
우리는 여러 페이지에서 추적을 하지 않고 입사 절차를 약간 조정하여 서로 다른 영역/사이트의 이동을 최대한 줄이기로 결정했다.그것은 시각적으로 더욱 일치하고 방문객에게도 더욱 표현력이 있다.

리소스

Mixpanel Documentation
platformOS Documentation
platformOS Marketing page
platformOS product template github repository

자세히 보기

만약 당신이 성능을 더욱 중시하는 내용에 관심이 있다면, 저를 따라오세요. 저는 오리지널을 제공하거나 적어도 효과적인 방법으로 당신의 사이트를 개선할 것을 보증합니다.

기존 웹 페이지에서 WebP 사용

PawełKowalski・ 11월 17일 20일.・ 4분 읽기

#webperf #design

네트워크를 위한 이미지 최적화

PawełKowalski・ 4월 24일 20일・ 8분 읽기

#beginners #node

사이트 속도를 유지하는 팁 3개

PawełKowalski・ 6월 24일 20일・ 6 분 읽기

#webperf #webpack #javascript #css