게스트 게이트 테마 컴포넌트

커스터마이징 테마 컴포넌트
162

Guest Gate v2.0에 GTM(Google Tag Manager) 지원 및 유연한 커스텀 이벤트 로깅을 갖춘 분석 추적 시스템을 구현했습니다.

추가된 설정

  • enable_analytics (기본값: 비활성화): 요청에 따라 전체 추적 기능을 켜거나 끕니다.

  • analytics_debug_logging: 활성화 시 모든 추적 이벤트를 브라우저 콘솔에 직접 기록합니다. GTM 트리거를 구성하는 설정 단계에서 특히 유용합니다.

핵심 기능

전용 헬퍼 모듈(guest-gate-analytics.js)이 이벤트 디스패치를 처리합니다. 모든 추적 이벤트는 동시에 두 가지 위치로 전송됩니다:

  1. window.dataLayer.push(...): 사이트에 GTM 및 Google Analytics 4(GA4)가 활성화되어 있다면 자동으로 수집됩니다.

  2. discourse-guest-gate:analytics (커스텀 브라우저 이벤트): 추가적인 코드 수정 없이 Matomo, Plausible 또는 커스텀 웹훅과 같은 제3자 도구와 통합할 수 있습니다.

추적되는 이벤트

  • guest_gate_shown (모달이 표시될 때 발생)

    • guest_gate_reason: 트리거 유형 (page_view, time, scroll, 또는 lightbox).

    • guest_gate_path: 모달이 표시된 URL 경로.

  • guest_gate_click (방문자가 모달과 상호작용할 때 발생)

    • guest_gate_click_action: 수행된 특정 동작 (login, signup, sso_login, sso_signup, Google 로그인 버튼과 같은 external_<provider>, 또는 아무런 동작 없이 닫은 경우의 dismiss).

    • 표시 트리거와 상호작용을 쉽게 연관시킬 수 있도록 동일한 reason 및 path 메타데이터를 포함합니다.

개인정보 보호 및 데이터 보호

  • 개인 식별 정보(PII)는 수집하거나 전송하지 않으며, 위에 나열된 최소한의 운영 메타데이터만 수집합니다.

곧 출시 예정…:rocket:

> ./support --coffee

3개의 좋아요
163

Guest Gate v2.0 - 주요 업데이트

꽤 오랜 시간의 작업을 거쳐 Guest Gate v2.0을 출시하게 되어 기쁩니다. :tada:

Guest Gate는 원래 Guest Gate Sign Up Popup 플러그인에 기반한 비교적 단순한 테마 컴포넌트였습니다. 이를 통해 특정 수의 토픽을 본 후 익명 방문자에게 회원가입이나 로그인을 유도하거나 요구할 수 있었습니다.

시간이 지남에 따라 컴포넌트는 상당한 규모로 성장했고, 원래의 구현 방식은 확장하기가 점점 어려워졌습니다.

따라서 v2.0은 단순한 리팩토링이나 시각적 업데이트가 아닙니다. 완전히 새로운 트리거 시스템, 더 나은 커스터마이징, 선택적 분석 기능, 그리고 내부 구조의 여러 가지 개선 사항을 도입했습니다.

v2.0의 새로운 기능

여러 가지 트리거 유형

Guest Gate는 이제 토픽/페이지 뷰에 국한되지 않습니다.

이제 다음 기준으로 게이트를 트리거할 수 있습니다:

  • 페이지 뷰

  • 시간

  • 스크롤 깊이

  • 라이트박스/이미지 열기

  • 모든 것 - 구성된 트리거 조건 중 첫 번째가 충족되면 게이트를 트리거합니다

각 트리거에는 자체적으로 설정 가능한 임계값이 있습니다.

또한 트리거와 모달 표시 사이의 지연 시간도 설정할 수 있습니다.

이를 통해 다양한 유형의 게이트를 만들 수 있습니다. 예를 들어:

3회 페이지 뷰 후 게이트 표시.

또는:

60초 후 게이트 표시.

또는:

방문자가 페이지의 70%를 스크롤했을 때 게이트 표시.

반복 동작

기존의 무작위 페이지 뷰 동작은 적절한 반복 시스템으로 확장되었습니다.

다음 중 하나를 선택할 수 있습니다:

  • 반복 트리거: 구성된 트리거가 발동될 때마다 게이트를 표시합니다.

  • 무작위 페이지 뷰: 무작위 수의 페이지 뷰 후 게이트를 표시합니다.

  • 세션당 1회: 브라우저 세션 동안 최대 1회만 게이트를 표시합니다.

기존의 “1회만 표시” 동작도 하위 호환성을 위해 유지됩니다.

더 나은 모달 커스터마이징

v2.0은 모달 자체에 대한 더 많은 제어를 추가합니다.

이제 다음을 설정할 수 있습니다:

  • 모달 크기: 컴팩트, 표준 또는 와이드

  • 본문 정렬

  • 푸터 정렬

  • 제목 표시 여부

  • 제목 위치

  • 로그인 버튼 스타일 및 아이콘

  • 회원가입 버튼 스타일 및 아이콘

커스텀 게이트도 다음과 같은 더 나은 제어를 통해 개선되었습니다:

  • 이미지 정렬

  • 이미지 너비

  • 이미지 대체 텍스트

  • 헤딩 정렬 및 색상

  • 텍스트 정렬 및 색상

  • 배경색

  • 푸터 및 링크 색상

커스텀 이미지는 이제 선택 사항이며, 지연 로딩(lazy loading)과 디코딩 힌트도 사용합니다.

분석(Analytics)

Guest Gate v2.0에는 프라이버시를 고려한 선택적 분석 기능이 포함되어 있습니다.

활성화되면 Guest Gate는 다음을 추적합니다:

  • 게이트 노출 횟수

  • 트리거 이유

  • 페이지 경로

  • 로그인 클릭

  • 회원가입 클릭

  • SSO 작업

  • 닫기(Dismiss) 작업

이벤트는 window.dataLayer를 통해 노출되며, 브라우저 이벤트인 discourse-guest-gate:analytics로도 분기됩니다.

이를 통해 Guest Gate를 Google Analytics, Google Tag Manager, Matomo 또는 커스텀 분석 구현과 같은 분석 및 태그 관리 플랫폼과 통합할 수 있습니다.

Guest Gate는 개인 데이터를 수집하지 않습니다.

분석 기능은 기본적으로 비활성화되어 있습니다.

기존 설치 환경

v2.0의 중요한 부분 중 하나는 기존 설정을 수동으로 다시 만들 필요가 없다는 것입니다.

구버전의 Guest Gate 설정을 v2에 해당하는 설정으로 마이그레이션하기 위한 설정 마이그레이션이 추가되었습니다.

이에는 다음과 같은 설정이 포함됩니다:

  • max_guest_topic_views

  • dismissable_false

  • gate_show_when_thumbnail_clicked

따라서 업그레이드 후에도 기존 설정이 계속 작동해야 합니다.

이 컴포넌트는 이제 공식적으로 Discourse 3.2.0 이상을 요구합니다.

왜 v2.0인가?

원래의 Guest Gate는 주로 익명 방문자가 볼 수 있는 토픽 수를 제한하는 방식으로 설계되었습니다.

v2.0의 목표는 이를 훨씬 더 유연하게 만드는 것입니다.

Guest Gate는 이제 원래의 사용 사례를 지원하면서 일반적인 방문자 전환 및 참여 게이트로 사용될 수 있습니다.

예를 들어, 방문자가 다음을 한 후에 가입을 유도하는 데 사용할 수 있습니다:

  • 여러 개의 토픽 읽기

  • 사이트에 일정 시간 머무르기

  • 기사를 스크롤하기

  • 이미지 열기

  • 구성된 조건 중 어떤 조합을 충족했는지

이것은 꽤 상당한 재작성이었으므로, 아직 개선될 수 있는 부분이 있을 수 있습니다.

수년간 Guest Gate를 사용하시고, 테스트하시며 피드백을 주신 모든 분들께 감사드립니다. :heart:

OP(원문 게시글)도 업데이트했습니다.

Guest Gate v2.0이 이제 사용 가능합니다. :rocket:

> ./support --coffee :heart:

6개의 좋아요