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

[Don]

	레포지토리	GitHub - VaperinaDEV/discourse-guest-gate-theme-component: Forced login / registration popup insired by Quora · GitHub
	도움이 되셨나요?	> ./support --coffee
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	디스코urs 테마 초보자?	디스코urs 테마 사용 입문 가이드

Guest Gate v1.0

안녕하세요 이 테마 컴포넌트는 Guest Gate (Sign Up Popup Plugin) 에서 생성되었습니다. 모달을 사용하여 익명 방문자의 토픽을 잠그고 가입 또는 로그인을 강제할 수 있습니다. 이 컴포넌트는 방문자에게 가입을 장려하되 모달을 닫을 수 있도록 하는 알림 모달로도 사용할 수 있습니다(이를 위해 dismissable false 설정을 체크하지 마세요). 옵션에는 모달이 표시되기 전에 볼 수 있는 토픽 수를 변경하는 것이 포함됩니다.

팁: “커스텀 게이트” 옵션을 사용하여 모달 헤더를 숨기고자 한다면(위 이미지와 같이), guest_gate.title 필드를 삭제하고 스페이스바를 한 번 눌러야 합니다. 그러면 모달 제목이 제거되어 대신 이미지 아래에 제목을 사용할 수 있습니다.

주요 게이트 옵션이 두 가지 있습니다:

1. 일반 게이트 (기본값: 모달에 디스코urs 가입 CTA 텍스트를 사용). 이 텍스트들을 사용합니다: js.signup_cta.intro 및 js.signup_cta.value_prop

2. 커스텀 게이트 (모달을 사용자 정의할 수 있습니다: 이미지, 커스텀 텍스트 및 색상 추가).

---

그리고 많은 다른 설정들이 있습니다

Guest Gate 모달 전역 설정

1. max guest topic views
   게이트가 표시되기까지의 토픽 뷰 수. 게이트가 처음 나타난 후, 이 숫자 사이의 무작위 횟수 후에 다시 나타납니다.
2. dismissable false
   닫기 버튼을 제거하여 방문자가 닫는 것을 방지합니다.
3. use gate buttons
   링크 대신 모달 푸터에 버튼을 사용합니다.
4. custom url enabled
   커스텀 로그인 URL 및 커스텀 가입 URL 옵션을 활성화합니다. 이 옵션을 체크하지 않으면, 로그인 또는 가입 모달이 현재 토픽 페이지에 나타나는 것이 일반적 동작입니다.
5. custom login url
   예를 들어, /login은 “로그인” 모달이 표시된 홈 페이지입니다.
6. custom signup url
   예를 들어, /signup은 “가입” 모달이 표시된 홈 페이지입니다.
7. gate footer position
   푸터 버튼/링크 위치.
8. gate show only once
   Guest Gate 모달이 세션당 한 번만 표시됩니다.

---

커스텀 게이트 설정

1. custom gate enabled
   모달을 사용자 정의하려면 활성화합니다.
2. custom gate image
   모달 상단에 표시할 이미지를 업로드합니다.
3. custom gate image width
   업로드된 이미지의 너비. px, % 등을 사용할 수 있으며, 예를 들어 100%는 패딩을 제외한 전체 모달 너비의 이미지를 추가합니다.
4. custom gate big text color
   "큰 텍스트"는 이미지 아래에 나타납니다. 텍스트 색상을 설정할 수 있습니다.
5. custom gate little text color
   "작은 텍스트"는 큰 텍스트 아래에 나타납니다. 텍스트 색상을 설정할 수 있습니다.
6. custom gate background color
   모달 배경색을 변경합니다.
7. custom gate footer text color
   푸터 텍스트 색상을 변경합니다. use gate buttons 설정이 비활성화되고 커스텀 게이트가 설정된 경우에 적용됩니다.
8. custom gate link color
   푸터 링크 색상을 변경합니다. use gate buttons 설정이 비활성화되고 커스텀 게이트가 설정된 경우에 적용됩니다.

---

크레딧 플러그인 저자, 유지보수자 및 기여자들에게 큰 감사를 드립니다: @vinothkannans, @jgujgu and @michaeld

Guest Gate v2.0

안녕하세요

Guest Gate v2.0은 디스코urs의 익명 방문자를 위한 현대적이고 설정 가능한 게이트입니다.

이것은 방문자에게 가입 또는 로그인을 장려하기 위해 모달을 표시할 수 있으며, 부드러운 전환 프롬프트나 방문자가 닫을 수 없는 게이트로 사용할 수 있습니다.

Guest Gate는 원래 Guest Gate Sign Up Popup 플러그인에서 시작되어 그 이후로 상당히 발전했습니다.

Guest Gate 트리거

버전 2.0은 게이트를 트리거하는 여러 가지 방법을 지원합니다:

1. 페이지 뷰
   설정 가능한 수의 대상 페이지 뷰 후에 게이트를 표시합니다.

2. 시간
   방문자가 대상 페이지에서 설정 가능한 시간을 보낸 후에 게이트를 표시합니다.

3. 스크롤
   방문자가 페이지의 설정 가능한 비율을 스크롤한 후에 게이트를 표시합니다.

4. 라이트박스
   익명 방문자가 디스코urs 라이트박스에 이미지를 열 때 게이트를 표시합니다.

5. 어떤 것
   여러 트리거 유형을 활성화하고 첫 번째로 설정된 트리거가 도달하면 게이트를 표시합니다.

트리거와 모달이 나타나는 사이의 지연 시간도 설정할 수 있습니다.

---

반복 동작

Guest Gate가 표시된 후, 언제 다시 나타날 수 있는지 제어할 수 있습니다.

사용 가능한 모드:

• 트리거 반복: 설정된 트리거가 발동할 때마다 게이트를 표시합니다.

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

• 세션당 한 번: 브라우저 세션 중에 게이트를 최대 한 번만 표시합니다.

레거시 한 번만 표시 설정도 하위 호환성을 위해 지원됩니다.

---

URL 가시성

두 가지 설정이 Guest Gate가 나타날 수 있는 위치를 제어합니다:

url_for_show

Guest Gate가 트리거될 수 있는 경로를 정의합니다.

예시:

• * 모든 페이지

• / 홈 페이지

• /latest 최신

• /t/* 토픽

• /c/* 카테고리

url_for_hide

Guest Gate가 절대 나타나서는 안 되는 경로를 정의합니다.

숨김 패턴은 항상 표시 목록보다 우선합니다.

---

모달 설정

dismissable

방문자가 Guest Gate 모달을 닫을 수 있도록 허용합니다.

이 옵션을 비활성화하면 닫을 수 없는 게이트를 만들 수 있습니다.

gate_modal_size

모달 너비를 선택합니다:

• compact

• standard

• wide

gate_body_alignment

주요 모달 콘텐츠의 수평 정렬을 선택합니다:

• left

• center

• right

gate_footer_position

로그인 / 가입 링크 또는 버튼의 정렬을 선택합니다:

• left

• center

• right

gate_title_visibility

모달 제목을 표시하거나 숨깁니다.

gate_title_position

제목 마진 위치를 제어합니다.

---

로그인 및 가입

Guest Gate는 일반적인 디스코urs 인증 흐름 및 커스텀 URL을 지원합니다.

use_gate_buttons

텍스트 링크 대신 모달 푸터에 버튼을 사용합니다.

custom_url_enabled

디스코urs의 네이티브 인증 동작 대신 커스텀 로그인 및 가입 URL을 사용합니다.

custom_login_url

커스텀 URL이 활성화된 경우 로그인에 사용되는 대상입니다.

custom_signup_url

커스텀 URL이 활성화된 경우 가입에 사용되는 대상입니다.

버튼 스타일과 Font Awesome 아이콘을 독립적으로 설정할 수도 있습니다.

---

Discourse Connect

Guest Gate는 Discourse Connect를 지원합니다.

Discourse Connect가 활성화되면 다음을 사용하여 별도의 가입 URL을 선택적으로 제공할 수 있습니다:

• enable_discourse_connect_signup

• discourse_connect_signup_url

---

커스텀 게이트

커스텀 게이트를 사용하면 모달의 콘텐츠와 외관을 완전히 사용자 정의할 수 있습니다.

다음으로 활성화합니다:

custom_gate_enabled

커스텀 게이트 디자인을 활성화합니다.

custom_gate_image

커스텀 텍스트 위에 표시되는 선택적 이미지입니다.

custom_gate_image_alt

커스텀 이미지에 대한 대체 텍스트입니다.

custom_gate_image_width

다음과 같은 값을 사용하여 이미지 너비를 설정합니다:

• 150px

• 50%

• 100%

custom_gate_image_position

이미지를 정렬합니다:

• left

• center

• right

custom_gate_big_text_position

커스텀 헤딩을 정렬합니다:

• left

• center

• right

custom_gate_little_text_position

커스텀 텍스트를 정렬합니다:

• left

• center

• right

커스텀 게이트는 또한 헤딩, 텍스트, 배경, 푸터 및 링크 색상을 위한 설정을 제공합니다.

---

분석

Guest Gate v2.0에는 선택적인 프라이버시 중심 분석 기능이 포함되어 있습니다.

다음으로 활성화합니다:

enable_analytics

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

• 게이트 노출

• 트리거 이유

• 페이지 경로

• 로그인 클릭

• 가입 클릭

• SSO 작업

• 닫기 작업

이벤트는 window.dataLayer를 통해 노출되며 브라우저 이벤트로도 분기됩니다:

discourse-guest-gate:analytics

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

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

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

analytics_debug_logging

분석을 구성하는 동안 Guest Gate 이벤트를 브라우저 콘솔에 출력하려면 이 기능을 활성화합니다.

프로덕션 환경에서는 비활성화하는 것이 좋습니다.

---

v1에서 마이그레이션

Guest Gate v2.0에는 기존 설치 환경을 위한 설정 마이그레이션이 포함되어 있습니다.

다음과 같은 레거시 설정이 자동으로 마이그레이션됩니다:

• max_guest_topic_views

• dismissable_false

• gate_show_when_thumbnail_clicked

따라서 업그레이드 후 기존 구성을 수동으로 다시 만들 필요가 없습니다.

---

요구 사항

Guest Gate v2.0은 Discourse 3.2.0 이상이 필요합니다.

---

크레딧
원래 플러그인 저자, 유지보수자 및 기여자들에게 큰 감사를 드립니다: @vinothkannans, @jgujgu and @michaeld

[markersocial]

Thank you! This is great

I really like that the log in / sign up links can be replaced with buttons.

I’d suggest that perhaps the sign up button should be the highlighted (blue) color with the ‘I already have an account’ button being grey. That seems to be more standard, at least from my observations of popular sites. Likely most people seeing the modal don’t have an account, so it probably makes sense.

[Don]

Hello @markersocial,

Thanks for the suggestion!

I’ve added these two settings. Now you can change the guest gate modal login and signup buttons style.

btn-primary or btn-default

https://github.com/VaperinaDEV/discourse-guest-gate-theme-component/pull/4

[markersocial]

Fantastic, thanks so much @Don! Updated it now and it’s working awesome

My only other suggestion would be to be able to customise the frequency of recurring prompts.

Setting: max guest topic views
“Number of topic views until gate displays. After the gate first appears, it appears randomly between 1 and this number.”

Having max guest topic views set to 1 or 2 is nice, encouraging sign up early - but if the user declines (and show once per session isn’t enabled), it would be nice to be able to show the modal again at a less frequent rate so it isn’t too aggressive on lurkers. Like every 5 or more topic views for example.

[davidkingham]

Hey Don, great component! Any chance you could make the sign up button be customizable so a url could be inserted? I use Memberful for SSL so the normal sign up link doesn’t work, just throws you to the login page. Thanks!

[Don]

Hello David,

Thanks, this is a great suggestion!

I’ve added this. I replaced the redirect_to_home setting with custom_url_enabled and two options.

1. custom_login_url: /login
   (by default this is redirect to homepage and open login modal)
2. custom_signup_url: /singup
   (by default this is redirect to homepage and open signup modal)

https://github.com/VaperinaDEV/discourse-guest-gate-theme-component/pull/6

[davidkingham]

Fantastic! Only one issue, now the custom gate text options are not working

[Don]

I checked your site and works for me. Maybe try a hard refresh or reopen the browser I think you see a cached version.

[davidkingham]

That’s what I thought too, cleared my cache, tried 4 different browsers and all were the same, very strange! If you don’t mind trying again, I just changed the guest_gate.title to be ‘Test’, do you see this update?

[Don]

Yes, this is what I see now.

I’ll try to check other browsers and devices.

[davidkingham]

Same results over vpn, on my phone, different network. This is the strangest thing ever! I guess as long as everyone else can see the correct text it’s okay!

[Don]

Hi David,

I think that’s not normal. Maybe there is a locale bug. My best tip is the set locale from accept language header setting.
As I see you using this on your site and maybe that’s why you see the default texts on modal because your browser language different and Discourse return it to the default text.

Can you turn off this setting and try again?

---

Now I can replicate this. I changed the Chrome language from English (United Kingdom) to English (United States) and this happened.

and go back to English (United Kingdom)

[davidkingham]

Thank you Don, you are incredibly helpful! I think there is a bug in my install with languages. Since this doesn’t seem to be caused by your component I’ll start a new topic. I appreciate you looking into this.

EDIT: I figured out that my admin locale had somehow been changed to UK instead of US, very strange! Switched it back and filled out the fields again, now all is well in the world.

[Jonathan5]

This works really well. Thank you.

I’ve made some minor edits to make the first post easier to read. There was one sentence I couldn’t understand at all, though:

custom url enabled
Add custom url to Login and Signup buttons / links by default this is redirect the visitor after click the Login or Signup button to the homepage and open Login or Signup modal. Note: If you leave unchecked this than the visitor left on topic page after click the buttons and the Guest Gate modal changes with Login or Signup modal which is dismissable so the visitor can close it and read the topic.

[Don]

Thank you Jonathan I really appreciate it Unfortunately my english is not the best Sorry for this! I will change these in the Theme Component or of course you could send a PR too.

The custom url enabled site setting means.
You can add custom urls to the Guest Gate Login and Signup buttons/links which by default use these custom urls /login and /signup these redirect the visitor to the homepage and open the Login or Signup modal. So if you checked it, it will activate the two settings below this. The custom login url and custom signup url.

If you leave this setting unchecked then it will keep the visitor on topic page after click the Guest Gate Login or Signup buttons/links and open the Login or Signup modal on the same topic page. After this the visitor can close the modal.

I hope it helps to understand and again thank you for your time to makes it more understandable

[Jonathan5]

Your English is fine, and there’s nothing wrong with your JavaScript, which is the important thing What about this?

4. custom url enabled – Enable the custom login url and custom signup url options. The normal behaviour (if you leave this option unchecked) is for the Login or Sign Up modal to appear on the current topic page.
5. custom login url – For example, /login is the home page with the “Login” modal displayed.
6. custom signup url – For example, /signup is the home page with the “Sign Up” modal displayed.

[Don]

@Jonathan5

and there’s nothing wrong with your JavaScript

That mostly thanks to the plugin authors and contributors too. But I do my best to develop this and add more features, fixes etc.

---

Thanks for the correction that seems much better. I will correct these in the theme component too.

[Himanshu_Singh]

Hey all,
I recently installed this component and it works like a charm but I am not sure if the gating mechanism slows down the google bot from crawling the topics.

Does anyone know about the impact on crawlers?

[Himanshu_Singh]

I am having some configuration issues with Guest Gate when I am using SSO with Discourse Connect.

The user is able to login in the main site and then appears to be logged in Discourse but after clicking a few topics the guest gate modal shows up. This is unusual as the user is logged in.

I have custom URLs for login so when user clicks on I am already logged in they are taken based custom login page and the cycle repeats itself.

Only way around this is when user clicks on the native login button in Discourse and is automatically logged in.

It appears that for some reason Guest Gate is not honoring the login from SSO and requires native login to activate.

Have other people faced this issues? Any suggestion on a solution or a workaround?