Composant de thème Guest Gate

[Don]

	Dépôt	GitHub - VaperinaDEV/discourse-guest-gate-theme-component: Forced login / registration popup insired by Quora · GitHub
	Vous avez trouvé cela utile ?	> ./support --coffee
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau aux thèmes Discourse ?	Guide du débutant pour utiliser les thèmes Discourse

Guest Gate v1.0

Bonjour Ce composant de thème est créé à partir de Guest Gate (Sign Up Popup Plugin). Il peut verrouiller les sujets pour les visiteurs anonymes avec une fenêtre modale et les obliger à s’inscrire ou à se connecter. Le composant peut être utilisé pour une fenêtre modale d’alerte, encourageant les visiteurs à s’inscrire tout en leur permettant de fermer la fenêtre (pour cela, ne cochez pas l’option dismissable false). Les options incluent la modification du nombre de sujets qui peuvent être consultés avant l’affichage de la fenêtre modale.

Astuce : Si vous utilisez l’option « porte personnalisée » et souhaitez masquer l’en-tête de la fenêtre modale (comme sur l’image ci-dessus), vous devez supprimer le champ guest_gate.title et appuyer sur la barre d’espace. Cela supprimera le titre de la fenêtre modale, vous permettant ainsi d’utiliser un titre sous l’image.

Vous avez deux options de porte principales :

1. Porte générique (par défaut : elle utilisera le texte d’appel à l’action d’inscription de Discourse dans la fenêtre modale). Elle utilise ces textes : js.signup_cta.intro et js.signup_cta.value_prop

2. Porte personnalisée (vous pouvez personnaliser la fenêtre modale : ajouter une image, un texte personnalisé et des couleurs).

---

Et il y a beaucoup d’autres paramètres

Paramètres globaux de la fenêtre modale Guest Gate

1. max guest topic views
   Nombre de vues de sujets avant l’affichage de la porte. Après la première apparition de la porte, elle apparaît aléatoirement entre 1 et ce nombre.
2. dismissable false
   Supprime le bouton de fermeture, ce qui empêche les visiteurs de la fermer.
3. use gate buttons
   Utiliser des boutons dans le pied de page de la fenêtre modale au lieu de liens.
4. custom url enabled
   Activer les options d’URL de connexion personnalisée et d’URL d’inscription personnalisée. Le comportement normal (si vous laissez cette option décochée) est que la fenêtre modale de connexion ou d’inscription apparaît sur la page du sujet actuel.
5. custom login url
   Par exemple, /login est la page d’accueil avec la fenêtre modale « Connexion » affichée.
6. custom signup url
   Par exemple, /signup est la page d’accueil avec la fenêtre modale « Inscription » affichée.
7. gate footer position
   Position des boutons/liens du pied de page.
8. gate show only once
   La fenêtre modale Guest Gate s’affiche une seule fois par session.

---

Paramètres de la porte personnalisée

1. custom gate enabled
   Activez-le si vous souhaitez personnaliser la fenêtre modale.
2. custom gate image
   Téléchargez une image à afficher en haut de la fenêtre modale.
3. custom gate image width
   Largeur de l’image téléversée. Vous pouvez utiliser px, % etc., par exemple 100% ajoutera une image pleine largeur de la fenêtre modale (moins le padding).
4. custom gate big text color
   Le « grand texte » apparaît sous l’image. Vous pouvez définir la couleur du texte.
5. custom gate little text color
   Le « petit texte » apparaît sous le grand texte. Vous pouvez définir la couleur du texte.
6. custom gate background color
   Modifiez la couleur de fond de la fenêtre modale.
7. custom gate footer text color
   Modifiez la couleur du texte du pied de page. Cela s’applique si le paramètre use gate buttons est désactivé et que vous avez configuré une porte personnalisée.
8. custom gate link color
   Modifiez la couleur des liens du pied de page. Cela s’applique si le paramètre use gate buttons est désactivé et que vous avez configuré une porte personnalisée.

---

Crédit Merci beaucoup aux auteurs, mainteneurs et contributeurs du plugin : @vinothkannans, @jgujgu et @michaeld

Guest Gate v2.0

Bonjour

Guest Gate v2.0 est une porte moderne et configurable pour les visiteurs anonymes sur Discourse.

Il peut afficher une fenêtre modale pour encourager les visiteurs à s’inscrire ou se connecter, soit comme une invitation douce à la conversion, soit comme une porte que les visiteurs ne peuvent pas fermer.

Guest Gate a commencé à partir du plugin original Guest Gate Sign Up Popup et a considérablement évolué depuis.

Déclenchement de Guest Gate

La version 2.0 prend en charge plusieurs façons de déclencher la porte :

1. Vues de page
   Afficher la porte après un nombre configurable de vues de page éligibles.

2. Temps
   Afficher la porte après qu’un visiteur a passé une durée configurable sur une page éligible.

3. Défilement
   Afficher la porte après qu’un visiteur a défilé une pourcentage configurable de la page.

4. Lightbox
   Afficher la porte lorsqu’un visiteur anonyme ouvre une image dans la lightbox de Discourse.

5. N’importe lequel
   Activer plusieurs types de déclencheurs et afficher la porte lorsque le premier déclencheur configuré est atteint.

Vous pouvez également configurer un délai entre le déclencheur et l’apparition de la fenêtre modale.

---

Comportement de répétition

Après l’affichage de Guest Gate, vous pouvez contrôler quand il peut réapparaître.

Modes disponibles :

• Déclencheur répété : afficher la porte chaque fois que le déclencheur configuré se déclenche.

• Vues de page aléatoires : afficher la porte après un nombre aléatoire de vues de page.

• Une fois par session : afficher la porte au plus une fois pendant la session du navigateur.

Le paramètre hérité Afficher une seule fois est également pris en charge pour la compatibilité ascendante.

---

Visibilité de l’URL

Deux paramètres contrôlent où Guest Gate est autorisé à apparaître :

url_for_show

Définissez les chemins où Guest Gate peut être déclenché.

Exemples :

• * toutes les pages

• / page d’accueil

• /latest Dernières publications

• /t/* sujets

• /c/* catégories

url_for_hide

Définissez les chemins où Guest Gate ne doit jamais apparaître.

Les motifs de masquage ont toujours la priorité sur la liste d’affichage.

---

Paramètres de la fenêtre modale

dismissable

Autoriser les visiteurs à fermer la fenêtre modale Guest Gate.

Désactivez cette option pour créer une porte non fermable.

gate_modal_size

Choisissez la largeur de la fenêtre modale :

• compact

• standard

• wide

gate_body_alignment

Choisissez l’alignement horizontal du contenu principal de la fenêtre modale :

• left

• center

• right

gate_footer_position

Choisissez l’alignement des liens ou boutons Connexion / Inscription :

• left

• center

• right

gate_title_visibility

Afficher ou masquer le titre de la fenêtre modale.

gate_title_position

Contrôlez la position de la marge du titre.

---

Connexion et Inscription

Guest Gate prend en charge le flux d’authentification normal de Discourse ainsi que des URL personnalisées.

use_gate_buttons

Utiliser des boutons dans le pied de page de la fenêtre modale au lieu de liens texte.

custom_url_enabled

Utiliser des URL de connexion et d’inscription personnalisées au lieu des actions d’authentification natives de Discourse.

custom_login_url

Destination utilisée pour la connexion lorsque les URL personnalisées sont activées.

custom_signup_url

Destination utilisée pour l’inscription lorsque les URL personnalisées sont activées.

Vous pouvez également configurer indépendamment les styles des boutons et les icônes Font Awesome.

---

Discourse Connect

Guest Gate prend en charge Discourse Connect.

Lorsque Discourse Connect est activé, vous pouvez fournir facultativement une URL d’inscription séparée en utilisant :

• enable_discourse_connect_signup

• discourse_connect_signup_url

---

Porte personnalisée

La Porte personnalisée vous permet de personnaliser complètement le contenu et l’apparence de la fenêtre modale.

Activez-la avec :

custom_gate_enabled

Activez la conception de la porte personnalisée.

custom_gate_image

Image optionnelle affichée au-dessus du texte personnalisé.

custom_gate_image_alt

Texte alternatif pour l’image personnalisée.

custom_gate_image_width

Définissez la largeur de l’image en utilisant des valeurs telles que :

• 150px

• 50%

• 100%

custom_gate_image_position

Alignez l’image :

• left

• center

• right

custom_gate_big_text_position

Alignez le titre personnalisé :

• left

• center

• right

custom_gate_little_text_position

Alignez le texte personnalisé :

• left

• center

• right

La porte personnalisée fournit également des paramètres pour les couleurs du titre, du texte, du fond, du pied de page et des liens.

---

Analyses

Guest Gate v2.0 inclut des analyses optionnelles respectueuses de la vie privée.

Activez-le avec :

enable_analytics

Lorsqu’il est activé, Guest Gate suit :

• Impressions de la porte

• Raison du déclenchement

• Chemin de la page

• Clics sur Connexion

• Clics sur Inscription

• Actions SSO

• Actions de fermeture

Les événements sont exposés via window.dataLayer et sont également émis en tant qu’événement du navigateur :

discourse-guest-gate:analytics

Cela permet à Guest Gate d’être intégré avec des plateformes d’analyse et de gestion de balises telles que Google Analytics, Google Tag Manager, Matomo, ou des implémentations d’analyse personnalisées.

Aucune donnée personnelle n’est collectée par Guest Gate.

Les analyses sont désactivées par défaut.

analytics_debug_logging

Activez ceci pendant la configuration des analyses pour afficher les événements Guest Gate dans la console du navigateur.

Il est recommandé de désactiver cette option en production.

---

Migration depuis v1

Guest Gate v2.0 inclut une migration des paramètres pour les installations existantes.

Les paramètres hérités suivants sont automatiquement migrés :

• max_guest_topic_views

• dismissable_false

• gate_show_when_thumbnail_clicked

Les configurations existantes n’ont donc pas besoin d’être recréées manuellement après la mise à niveau.

---

Exigences

Guest Gate v2.0 nécessite Discourse 3.2.0 ou plus récent.

---

Crédit
Merci beaucoup aux auteurs, mainteneurs et contributeurs du plugin original : @vinothkannans, @jgujgu et @michaeld

[markersocial]

Merci ! C’est super

J’aime beaucoup que les liens de connexion / inscription puissent être remplacés par des boutons.

Je suggérerais que le bouton d’inscription soit de couleur vive (bleue) et que le bouton « J’ai déjà un compte » soit gris. Cela semble plus standard, du moins d’après mes observations de sites populaires. La plupart des personnes qui verront la fenêtre modale n’auront probablement pas de compte, donc cela semble logique.

[Don]

Bonjour @markersocial,

Merci pour la suggestion !

J’ai ajouté ces deux paramètres. Vous pouvez maintenant modifier le style des boutons de connexion et d’inscription de la modale de la porte d’invité.

btn-primary ou btn-default

Feature: ability to change login and signup button style

[markersocial]

Fantastique, merci beaucoup @Don ! Je l’ai mis à jour maintenant et ça fonctionne à merveille

Ma seule autre suggestion serait de pouvoir personnaliser la fréquence des invites récurrentes.

Paramètre : nombre maximum de vues de sujet par un invité
« Nombre de vues de sujet jusqu’à l’affichage de la porte. Une fois que la porte apparaît pour la première fois, elle apparaît aléatoirement entre 1 et ce nombre. »

Avoir un nombre maximum de vues de sujet par un invité défini sur 1 ou 2 est bien, encourageant l’inscription tôt - mais si l’utilisateur refuse (et que l’affichage une fois par session n’est pas activé), il serait bien de pouvoir afficher à nouveau la modale à une fréquence moins élevée afin qu’elle ne soit pas trop agressive envers les observateurs. Par exemple, toutes les 5 vues de sujet ou plus.

[davidkingham]

Salut Don, super composant ! Auriez-vous une chance de rendre le bouton d’inscription personnalisable afin qu’une URL puisse y être insérée ? J’utilise Memberful pour le SSL, donc le lien d’inscription normal ne fonctionne pas, il renvoie simplement à la page de connexion. Merci !

[Don]

Bonjour David,

Merci, c’est une excellente suggestion !

Je l’ai ajoutée. J’ai remplacé le paramètre redirect_to_home par custom_url_enabled et deux options.

1. custom_login_url : /login
   (par défaut, cela redirige vers la page d’accueil et ouvre la fenêtre modale de connexion)
2. custom_signup_url : /singup
   (par défaut, cela redirige vers la page d’accueil et ouvre la fenêtre modale d’inscription)

Feature: abality to change guest gate buttons url

[davidkingham]

Fantastique ! Un seul problème, les options de texte de porte personnalisées ne fonctionnent plus

[Don]

J’ai vérifié votre site et cela fonctionne pour moi. Essayez peut-être un rafraîchissement forcé ou rouvrez le navigateur, je pense que vous voyez une version mise en cache.

[davidkingham]

C’est ce que je pensais aussi, j’ai vidé mon cache, j’ai essayé 4 navigateurs différents et tous étaient identiques, très étrange ! Si cela ne vous dérange pas d’essayer à nouveau, je viens de changer guest_gate.title en ‘Test’, voyez-vous cette mise à jour ?

[Don]

Oui, c’est ce que je vois maintenant.

Je vais essayer de vérifier d’autres navigateurs et appareils.

[davidkingham]

Mêmes résultats via VPN, sur mon téléphone, sur un réseau différent. C’est la chose la plus étrange qui soit ! Je suppose que tant que tout le monde peut voir le texte correct, ça va !

[Don]

Salut David,

Je pense que ce n’est pas normal. Il y a peut-être un bug de locale. Mon meilleur conseil est le réglage définir la locale à partir de l'en-tête d'acceptation du langage.
Comme je vois que vous l’utilisez sur votre site, c’est peut-être pour cela que vous voyez les textes par défaut sur la modale car la langue de votre navigateur est différente et Discourse la renvoie au texte par défaut.

Pouvez-vous désactiver ce réglage et réessayer ?

---

Maintenant, je peux reproduire cela. J’ai changé la langue de Chrome de l’anglais (Royaume-Uni) à l’anglais (États-Unis) et c’est ce qui s’est passé.

et revenir à l’anglais (Royaume-Uni)

[davidkingham]

Merci Don, tu es incroyablement serviable ! Je pense qu’il y a un bug dans mon installation avec les langues. Comme cela ne semble pas être causé par votre composant, je vais ouvrir un nouveau sujet. J’apprécie que vous vous penchiez sur la question.

EDIT : J’ai découvert que ma locale d’administration avait été changée en UK au lieu de US, très étrange ! Je l’ai reconfigurée et rempli à nouveau les champs, tout va bien maintenant dans le monde.

[Jonathan5]

Cela fonctionne très bien. Merci.

J’ai apporté quelques modifications mineures pour rendre le premier message plus facile à lire. Il y avait une phrase que je ne pouvais pas du tout comprendre :

URL personnalisée activée
Ajoutez une URL personnalisée aux boutons/liens de connexion et d’inscription. Par défaut, cela redirige le visiteur après avoir cliqué sur le bouton de connexion ou d’inscription vers la page d’accueil et ouvre la fenêtre modale de connexion ou d’inscription. Remarque : Si vous ne cochez pas cette case, le visiteur reste sur la page du sujet après avoir cliqué sur les boutons et la fenêtre modale Guest Gate change avec la fenêtre modale de connexion ou d’inscription qui est dismissible, de sorte que le visiteur peut la fermer et lire le sujet.

[Don]

Merci Jonathan J’apprécie vraiment Malheureusement, mon anglais n’est pas le meilleur Désolé pour ça ! Je vais changer cela dans le composant Thème ou bien sûr, vous pourriez aussi envoyer une PR.

Le paramètre de site custom url enabled signifie.
Vous pouvez ajouter des URL personnalisées aux boutons/liens de connexion et d’inscription de la porte d’entrée invité qui, par défaut, utilisent ces URL personnalisées /login et /signup qui redirigent le visiteur vers la page d’accueil et ouvrent la fenêtre modale de connexion ou d’inscription. Donc, si vous l’avez coché, cela activera les deux paramètres ci-dessous. Les custom login url et custom signup url.

Si vous laissez ce paramètre décoché, le visiteur restera sur la page du sujet après avoir cliqué sur les boutons/liens de connexion ou d’inscription de la porte d’entrée invité et ouvrira la fenêtre modale de connexion ou d’inscription sur la même page de sujet. Après cela, le visiteur peut fermer la fenêtre modale.

J’espère que cela vous aide à comprendre et encore merci pour votre temps pour rendre cela plus compréhensible

[Jonathan5]

Votre anglais est bon et il n’y a rien de mal avec votre JavaScript, ce qui est le plus important Qu’en est-il de ceci ?

4. URL personnalisée activée – Activez les options URL de connexion personnalisée et URL d'inscription personnalisée. Le comportement normal (si vous laissez cette option décochée) est que la fenêtre modale de connexion ou d’inscription apparaisse sur la page du sujet actuelle.
5. URL de connexion personnalisée – Par exemple, /login est la page d’accueil avec la fenêtre modale « Connexion » affichée.
6. URL d'inscription personnalisée – Par exemple, /signup est la page d’accueil avec la fenêtre modale « Inscription » affichée.

[Don]

@Jonathan5

et il n’y a rien de mal avec votre JavaScript

C’est en grande partie grâce aux auteurs et contributeurs de plugins également. Mais je fais de mon mieux pour développer ceci et ajouter plus de fonctionnalités, de corrections, etc.

---

Merci pour la correction cela semble beaucoup mieux. Je corrigerai également cela dans le composant de thème.

[Himanshu_Singh]

Salut à tous,

J’ai récemment installé ce composant et il fonctionne à merveille, mais je ne suis pas sûr si le mécanisme de blocage ralentit le robot de Google dans son exploration des sujets.

Quelqu’un connaît-il l’impact sur les robots d’exploration ?

[Himanshu_Singh]

J’ai des problèmes de configuration avec Guest Gate lorsque j’utilise l’authentification unique (SSO) avec Discourse Connect.

L’utilisateur peut se connecter sur le site principal et semble ensuite être connecté dans Discourse, mais après avoir cliqué sur quelques sujets, la fenêtre modale Guest Gate s’affiche. C’est inhabituel car l’utilisateur est connecté.

J’ai des URL personnalisées pour la connexion, donc lorsque l’utilisateur clique sur “Je suis déjà connecté”, il est redirigé vers la page de connexion personnalisée et le cycle se répète.

La seule façon de contourner cela est lorsque l’utilisateur clique sur le bouton de connexion natif dans Discourse et qu’il est automatiquement connecté.

Il semble que pour une raison quelconque, Guest Gate n’honore pas la connexion SSO et nécessite une connexion native pour s’activer.

D’autres personnes ont-elles rencontré ce problème ? Des suggestions de solution ou de contournement ?