Componente de tema de Guest Gate

[Don]

	Repositorio	GitHub - VaperinaDEV/discourse-guest-gate-theme-component: Forced login / registration popup insired by Quora · GitHub
	¿Te resultó útil?	> ./support --coffee
	Guía de instalación	Cómo instalar un tema o componente de tema
	¿Nuevo en temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

Guest Gate v1.0

Hola Este componente de tema se creó a partir de Guest Gate (Sign Up Popup Plugin). Puede bloquear temas para visitantes anónimos con un modal y obligarlos a Registrarse o Iniciar sesión. El componente se puede usar para un modal de alerta, animando a los visitantes a registrarse pero permitiéndoles cerrar el modal (para esto, deja la configuración dismissable false desmarcada). Las opciones incluyen cambiar el número de temas que se pueden ver antes de que se muestre el modal.

Consejo: Si usas la opción de “puerta personalizada” y deseas ocultar la cabecera del modal (como en la imagen de arriba), debes eliminar el campo guest_gate.title y presionar espacio. Esto eliminará el título del modal, para que en su lugar puedas usar un título debajo de la imagen.

Tienes dos opciones principales de puerta:

1. Puerta genérica (predeterminada: usará el texto de la CTA de registro de Discourse en el modal). Utiliza estos textos: js.signup_cta.intro y js.signup_cta.value_prop

2. Puerta personalizada (puedes personalizar el modal: agregar imagen, texto personalizado y colores).

---

Y hay muchas otras configuraciones

Configuraciones globales del modal de Guest Gate

1. max guest topic views
   Número de vistas de temas hasta que se muestre la puerta. Después de que la puerta aparezca por primera vez, aparece aleatoriamente entre 1 y este número.
2. dismissable false
   Elimina el botón de cerrar, lo que impide que los visitantes lo cierren.
3. use gate buttons
   Usar botones en el pie del modal en lugar de enlaces.
4. custom url enabled
   Habilita las opciones de URL de inicio de sesión personalizada y URL de registro personalizada. El comportamiento normal (si dejas esta opción desmarcada) es que el modal de Inicio de sesión o Registro aparezca en la página del tema actual.
5. custom login url
   Por ejemplo, /login es la página de inicio con el modal de “Inicio de sesión” mostrado.
6. custom signup url
   Por ejemplo, /signup es la página de inicio con el modal de “Registro” mostrado.
7. gate footer position
   Posición de los botones/enlaces del pie de página.
8. gate show only once
   El modal de Guest Gate se muestra solo una vez por sesión.

---

Configuraciones de Puerta Personalizada

1. custom gate enabled
   Habilítalo si deseas personalizar el modal.
2. custom gate image
   Sube una imagen para mostrar en la parte superior del modal.
3. custom gate image width
   El ancho de la imagen subida. Puedes usar px, % etc, por ejemplo, 100% agregará una imagen de ancho completo del modal (menos el relleno).
4. custom gate big text color
   El “texto grande” aparece debajo de la imagen. Puedes establecer el color del texto.
5. custom gate little text color
   El “texto pequeño” aparece debajo del texto grande. Puedes establecer el color del texto.
6. custom gate background color
   Cambia el color de fondo del modal.
7. custom gate footer text color
   Cambia el color del texto del pie de página. Esto se aplica si la configuración use gate buttons está deshabilitada y has configurado una puerta personalizada.
8. custom gate link color
   Cambia el color de los enlaces del pie de página. Esto se aplica si la configuración use gate buttons está deshabilitada y has configurado una puerta personalizada.

---

Crédito Gracias enormes a los autores, mantenedores y contribuyentes del plugin: @vinothkannans, @jgujgu y @michaeld

Guest Gate v2.0

Hola

Guest Gate v2.0 es una puerta moderna y configurable para visitantes anónimos en Discourse.

Puede mostrar un modal para animar a los visitantes a Registrarse o Iniciar sesión, ya sea como un aviso de conversión suave o como una puerta que los visitantes no pueden descartar.

Guest Gate comenzó a partir del plugin original Guest Gate Sign Up Popup y ha evolucionado considerablemente desde entonces.

Activación de la Guest Gate

La versión 2.0 admite varias formas de activar la puerta:

1. Vistas de página
   Mostrar la puerta después de un número configurable de vistas de página elegibles.

2. Tiempo
   Mostrar la puerta después de que un visitante haya pasado una cantidad configurable de tiempo en una página elegible.

3. Desplazamiento (Scroll)
   Mostrar la puerta después de que un visitante haya desplazado un porcentaje configurable de la página.

4. Lightbox
   Mostrar la puerta cuando un visitante anónimo abre una imagen en el lightbox de Discourse.

5. Cualquiera (Any)
   Habilitar múltiples tipos de activación y mostrar la puerta cuando se alcance la primera activación configurada.

También puedes configurar un retraso entre la activación y la aparición del modal.

---

Comportamiento de repetición

Después de que la Guest Gate se haya mostrado, puedes controlar cuándo puede aparecer de nuevo.

Modos disponibles:

• Repetir activación: mostrar la puerta cada vez que se dispare la activación configurada.

• Vistas de página aleatorias: mostrar la puerta después de un número aleatorio de vistas de página.

• Una vez por sesión: mostrar la puerta como máximo una vez durante la sesión del navegador.

La configuración legada Mostrar solo una vez también se admite por compatibilidad hacia atrás.

---

Visibilidad de URL

Dos configuraciones controlan dónde se permite que aparezca la Guest Gate:

url_for_show

Define las rutas donde se puede activar la Guest Gate.

Ejemplos:

• * todas las páginas

• / página de inicio

• /latest Lo último

• /t/* temas

• /c/* categorías

url_for_hide

Define las rutas donde la Guest Gate nunca debe aparecer.

Los patrones de ocultar siempre tienen precedencia sobre la lista de mostrar.

---

Configuraciones del modal

dismissable

Permitir a los visitantes cerrar el modal de Guest Gate.

Deshabilita esta opción para crear una puerta que no se pueda descartar.

gate_modal_size

Elige el ancho del modal:

• compact

• standard

• wide

gate_body_alignment

Elige la alineación horizontal del contenido principal del modal:

• left

• center

• right

gate_footer_position

Elige la alineación de los enlaces o botones de Inicio de sesión / Registro:

• left

• center

• right

gate_title_visibility

Mostrar u ocultar el título del modal.

gate_title_position

Controla la posición del margen del título.

---

Inicio de sesión y Registro

Guest Gate admite el flujo de autenticación normal de Discourse, así como URLs personalizadas.

use_gate_buttons

Usar botones en el pie del modal en lugar de enlaces de texto.

custom_url_enabled

Usar URLs personalizadas de Inicio de sesión y Registro en lugar de las acciones de autenticación nativas de Discourse.

custom_login_url

Destino usado para el Inicio de sesión cuando las URLs personalizadas están habilitadas.

custom_signup_url

Destino usado para el Registro cuando las URLs personalizadas están habilitadas.

También puedes configurar los estilos de los botones y los iconos de Font Awesome de forma independiente.

---

Discourse Connect

Guest Gate admite Discourse Connect.

Cuando Discourse Connect está habilitado, puedes proporcionar opcionalmente una URL de Registro separada usando:

• enable_discourse_connect_signup

• discourse_connect_signup_url

---

Puerta Personalizada

La Puerta Personalizada te permite personalizar completamente el contenido y la apariencia del modal.

Habilítala con:

custom_gate_enabled

Habilita el diseño de puerta personalizada.

custom_gate_image

Imagen opcional mostrada encima del texto personalizado.

custom_gate_image_alt

Texto alternativo para la imagen personalizada.

custom_gate_image_width

Establece el ancho de la imagen usando valores como:

• 150px

• 50%

• 100%

custom_gate_image_position

Alinea la imagen:

• left

• center

• right

custom_gate_big_text_position

Alinea el encabezado personalizado:

• left

• center

• right

custom_gate_little_text_position

Alinea el texto personalizado:

• left

• center

• right

La puerta personalizada también proporciona configuraciones para los colores del encabezado, texto, fondo, pie de página y enlaces.

---

Analítica

Guest Gate v2.0 incluye analítica opcional consciente de la privacidad.

Habilítala con:

enable_analytics

Cuando está habilitada, Guest Gate rastrea:

• Impresiones de la puerta

• Razón de activación

• Ruta de la página

• Clics en Inicio de sesión

• Clics en Registro

• Acciones de SSO

• Acciones de descartar

Los eventos se exponen a través de window.dataLayer y también se despachan como el evento del navegador:

discourse-guest-gate:analytics

Esto permite que Guest Gate se integre con plataformas de analítica y gestión de etiquetas como Google Analytics, Google Tag Manager, Matomo, o implementaciones de analítica personalizadas.

Guest Gate no recopila datos personales.

La analítica está deshabilitada por defecto.

analytics_debug_logging

Habilita esto mientras configuras la analítica para imprimir los eventos de Guest Gate en la consola del navegador.

Se recomienda deshabilitar esto en producción.

---

Migración desde v1

Guest Gate v2.0 incluye una migración de configuraciones para instalaciones existentes.

Las siguientes configuraciones legadas se migran automáticamente:

• max_guest_topic_views

• dismissable_false

• gate_show_when_thumbnail_clicked

Por lo tanto, las configuraciones existentes no necesitan recrearse manualmente después de actualizar.

---

Requisitos

Guest Gate v2.0 requiere Discourse 3.2.0 o más nuevo.

---

Crédito
Gracias enormes a los autores originales, mantenedores y contribuyentes del plugin: @vinothkannans, @jgujgu y @michaeld

[markersocial]

¡Gracias! Esto es genial

Me gusta mucho que los enlaces de inicio de sesión/registro se puedan reemplazar con botones.

Sugeriría que quizás el botón de registro sea del color destacado (azul) y el botón ‘Ya tengo una cuenta’ sea gris. Eso parece ser más estándar, al menos según mis observaciones de sitios populares. Probablemente la mayoría de las personas que vean el modal no tengan una cuenta, así que probablemente tenga sentido.

[Don]

Hola @markersocial,

¡Gracias por la sugerencia!

He añadido estas dos configuraciones. Ahora puedes cambiar el estilo de los botones de inicio de sesión y registro del modal de la puerta de invitados.

btn-primary o btn-default

Feature: ability to change login and signup button style

[markersocial]

¡Fantástico, muchas gracias @Don! Lo he actualizado ahora y funciona de maravilla

Mi única otra sugerencia sería poder personalizar la frecuencia de los avisos recurrentes.

Configuración: máximo de vistas de temas para invitados
“Número de vistas de temas hasta que se muestra la puerta de acceso. Después de que la puerta de acceso aparece por primera vez, aparece aleatoriamente entre 1 y este número.”

Tener un máximo de vistas de temas para invitados de 1 o 2 es bueno, anima a registrarse pronto, pero si el usuario lo rechaza (y no está habilitada la opción de mostrar una vez por sesión), sería bueno poder mostrar el modal de nuevo a una frecuencia menor para que no sea demasiado agresivo con los que solo observan. Como cada 5 o más vistas de temas, por ejemplo.

[davidkingham]

Hola Don, ¡gran componente! ¿Hay alguna posibilidad de que puedas hacer que el botón de registro sea personalizable para que se pueda insertar una URL? Uso Memberful para SSL, por lo que el enlace de registro normal no funciona, simplemente te redirige a la página de inicio de sesión. ¡Gracias!

[Don]

Hola David,

¡Gracias, es una gran sugerencia!

Lo he añadido. He reemplazado la configuración redirect_to_home con custom_url_enabled y dos opciones.

1. custom_login_url: /login
   (por defecto, esto redirige a la página de inicio y abre el modal de inicio de sesión)
2. custom_signup_url: /singup
   (por defecto, esto redirige a la página de inicio y abre el modal de registro)

Feature: abality to change guest gate buttons url

[davidkingham]

¡Fantástico! Solo un problema, ahora las opciones de texto de puerta personalizadas no funcionan

[Don]

He revisado tu sitio y funciona para mí. Quizás intenta una actualización forzada o vuelve a abrir el navegador, creo que estás viendo una versión en caché.

[davidkingham]

Eso es lo que pensé, borré mi caché, probé 4 navegadores diferentes y todos eran iguales, ¡muy extraño! Si no le importa intentarlo de nuevo, acabo de cambiar guest_gate.title a ‘Test’, ¿ve esta actualización?

[Don]

Sí, esto es lo que veo ahora.

Intentaré comprobar otros navegadores y dispositivos.

[davidkingham]

Mismos resultados a través de VPN, en mi teléfono, en una red diferente. ¡Esto es lo más extraño que jamás haya ocurrido! ¡Supongo que mientras todos los demás puedan ver el texto correcto, está bien!

[Don]

Hola David,

Creo que eso no es normal. Quizás haya un error de configuración regional. Mi mejor consejo es la configuración establecer configuración regional desde la cabecera de aceptación del idioma.
Como veo que estás usando esto en tu sitio, y tal vez por eso ves los textos predeterminados en la ventana modal porque el idioma de tu navegador es diferente y Discourse lo devuelve al texto predeterminado.

¿Puedes desactivar esta configuración y volver a intentarlo?

---

Ahora puedo replicar esto. Cambié el idioma de Chrome de inglés (Reino Unido) a inglés (Estados Unidos) y sucedió esto.

y volví a inglés (Reino Unido)

[davidkingham]

¡Gracias Don, eres increíblemente útil! Creo que hay un error en mi instalación con los idiomas. Como esto no parece ser causado por tu componente, iniciaré un nuevo tema. Agradezco que hayas investigado esto.

EDITAR: Descubrí que mi configuración regional de administrador se había cambiado a Reino Unido en lugar de EE. UU., ¡muy extraño! La cambié de nuevo y completé los campos nuevamente, ahora todo está bien en el mundo.

[Jonathan5]

Esto funciona muy bien. Gracias.

He hecho algunas ediciones menores para que la primera publicación sea más fácil de leer. Sin embargo, hubo una oración que no pude entender en absoluto:

url personalizada habilitada
Agrega una url personalizada a los botones/enlaces de Inicio de sesión y Registro; por defecto, esto redirigirá al visitante después de hacer clic en el botón de Inicio de sesión o Registro a la página de inicio y abrirá la ventana modal de Inicio de sesión o Registro. Nota: Si dejas esto sin marcar, el visitante permanecerá en la página del tema después de hacer clic en los botones y la ventana modal de Puerta de invitado cambiará a la ventana modal de Inicio de sesión o Registro, que se puede descartar para que el visitante pueda cerrarla y leer el tema.

[Don]

Gracias Jonathan Realmente lo aprecio Desafortunadamente, mi inglés no es el mejor ¡Perdón por esto! Cambiaré esto en el Componente de Tema o, por supuesto, también podrías enviar una PR.

La configuración del sitio custom url enabled significa:
Puedes agregar URLs personalizadas a los botones/enlaces de inicio de sesión y registro de Guest Gate, que por defecto usan estas URLs personalizadas /login y /signup, estas redirigen al visitante a la página de inicio y abren la ventana modal de inicio de sesión o registro. Por lo tanto, si la marcas, activará las dos configuraciones debajo de esta: custom login url y custom signup url.

Si dejas esta configuración sin marcar, mantendrá al visitante en la página del tema después de hacer clic en los botones/enlaces de inicio de sesión o registro de Guest Gate y abrirá la ventana modal de inicio de sesión o registro en la misma página del tema. Después de esto, el visitante puede cerrar la ventana modal.

Espero que ayude a entender y, de nuevo, gracias por tu tiempo para hacerlo más comprensible

[Jonathan5]

Tu inglés está bien, y no hay nada malo en tu JavaScript, que es lo importante ¿Qué tal esto?

4. custom url enabled – Habilita las opciones custom login url y custom signup url. El comportamiento normal (si dejas esta opción sin marcar) es que aparezca la ventana modal de Inicio de sesión o Registro en la página del tema actual.
5. custom login url – Por ejemplo, /login es la página principal con la ventana modal de "Inicio de sesión" mostrada.
6. custom signup url – Por ejemplo, /signup es la página principal con la ventana modal de "Registro" mostrada.

[Don]

@Jonathan5

y no hay nada malo en tu JavaScript

Eso es en gran parte gracias a los autores y colaboradores de los plugins también. Pero hago mi mejor esfuerzo para desarrollar esto y agregar más funciones, correcciones, etc.

---

Gracias por la corrección eso parece mucho mejor. Corregiré esto en el componente del tema también.

[Himanshu_Singh]

Hola a todos,

Recientemente instalé este componente y funciona de maravilla, pero no estoy seguro de si el mecanismo de compuerta ralentiza al bot de Google al rastrear los temas.

¿Alguien sabe sobre el impacto en los rastreadores?

[Himanshu_Singh]

Tengo algunos problemas de configuración con Guest Gate cuando uso SSO con Discourse Connect.

El usuario puede iniciar sesión en el sitio principal y luego parece estar conectado en Discourse, pero después de hacer clic en algunos temas, aparece la ventana modal de Guest Gate. Esto es inusual ya que el usuario ha iniciado sesión.

Tengo URL personalizadas para iniciar sesión, por lo que cuando el usuario hace clic en “Ya he iniciado sesión”, se le redirige a la página de inicio de sesión personalizada y el ciclo se repite.

La única forma de evitar esto es cuando el usuario hace clic en el botón de inicio de sesión nativo en Discourse y se conecta automáticamente.

Parece que por alguna razón Guest Gate no respeta el inicio de sesión de SSO y requiere el inicio de sesión nativo para activarse.

¿Otras personas se han enfrentado a este problema? ¿Alguna sugerencia para una solución o un método alternativo?