ゲストゲートテーマコンポーネント

Guest Gate v1.0

こんにちは :wave: このテーマコンポーネントは Guest Gate (Sign Up Popup Plugin) から作成されました。モーダルを表示して匿名訪問者をトピックからロックし、サインアップまたはログインを強制することができます。コンポーネントはアラートモーダルとして使用することもでき、訪問者にサインアップを促しつつ、モーダルを閉じることを許可します(この場合、dismissable false の設定にチェックを外してください)。オプションには、モーダルが表示される前に閲覧できるトピックの数を 변경することなどが含まれます。


ヒント: 「カスタムゲート」オプションを使用していて、モーダルのヘッダーを非表示にしたい場合(上記の画像のように)、guest_gate.title フィールドを削除して スペース キーを押す必要があります。これによりモーダルのタイトルが削除され、代わりに画像の下にタイトルを使用できます。

2つの主なゲートオプションがあります:

  1. ジェネリックゲート(デフォルト:モーダルでDiscourseのサインアップCTAテキストを使用します)。これらのテキストを使用します:js.signup_cta.intro および js.signup_cta.value_prop

  2. カスタムゲート(モーダルをカスタマイズ可能:画像、カスタムテキスト、カラーの追加)。


他の多くの設定もあります

Guest Gate モーダルのグローバル設定

  1. max guest topic views
    ゲートが表示されるまでのトピック閲覧回数。ゲートが初めて表示された後、1からこの数までの間でランダムに表示されます。
  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回だけ表示されます。

カスタムゲート設定

  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 設定が無効で、カスタムゲートが設定されている場合に適用されます。

クレジット :heart: プラグインの著者、メンテナー、コントリビューターへの大きな感謝: @vinothkannans, @jgujgu および @michaeld

Guest Gate v2.0

こんにちは :wave:

Guest Gate v2.0 は、Discourse の匿名訪問者向けのモダンで設定可能なゲートです。

訪問者にサインアップまたはログインを促すモーダルを表示でき、ソフトなコンバージョンプロンプトとして、または訪問者が閉じられないゲートとして使用できます。

Guest Gate は元の Guest Gate Sign Up Popup プラグイン から始まり、その後大きく進化してきました。

Guest Gate のトリガー

バージョン 2.0 では、ゲートをトリガーするいくつかの方法をサポートしています:

  1. ページビュー
    設定可能な数の対象ページビューの後、ゲートを表示します。

  2. 時間
    訪問者が対象ページに設定可能な時間過ごした後、ゲートを表示します。

  3. スクロール
    訪問者がページの設定可能なパーセンテージをスクロールした後、ゲートを表示します。

  4. ライトボックス
    匿名訪問者が Discourse ライトボックスで画像を開いた際にゲートを表示します。

  5. 任意
    複数のトリガータイプを有効にし、最初に設定されたトリガーに達した際にゲートを表示します。

トリガーとモーダルの表示の間の遅延も設定できます。


繰り返し動作

Guest Gate が表示された後、次にいつ表示されるかを制御できます。

利用可能なモード:

  • トリガーの繰り返し: 設定されたトリガーが発火するたびにゲートを表示します。

  • ランダムなページビュー: ランダムな数のページビューの後、ゲートを表示します。

  • セッションごとに1回: ブラウザセッション中に最大1回だけゲートを表示します。

レガシーの Show only once 設定も後方互換性のためにサポートされています。


URL の可視性

2つの設定が、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 は、通常の Discourse 認証フローおよびカスタム URL をサポートしています。

use_gate_buttons

テキストリンクの代わりに、モーダルのフッターにボタンを使用します。

custom_url_enabled

Discourse のネイティブな認証アクションの代わりに、カスタムのログインとサインアップ 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\n

アナリティクスの設定中にこれを有効にすると、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 以降 が必要です。


クレジット :heart:
元のプラグインの著者、メンテナー、コントリビューターへの大きな感謝: @vinothkannans, @jgujgu および @michaeld

「いいね!」 62

ありがとうございます!素晴らしいですね :slight_smile:

ログイン/サインアップリンクをボタンに置き換えられるのがとても気に入りました。

サインアップボタンはハイライトされた(青い)色にし、「すでにアカウントをお持ちの場合」ボタンはグレーにするのが良いのではないでしょうか。少なくとも人気のあるサイトの観察からすると、それがより標準的だと思われます。おそらく、このモーダルを見る人のほとんどはアカウントを持っていないでしょうから、それが理にかなっているのでしょう。

「いいね!」 2

Hello @markersocial

ご提案ありがとうございます!:slightly_smiling_face:

これらの2つの設定を追加しました。これで、ゲストゲートモーダルのログインおよびサインアップボタンのスタイルを変更できます。

btn-primary または btn-default

「いいね!」 4

素晴らしい、@Don さん、本当にありがとうございます!今更新して、素晴らしい動作をしています :slight_smile:

他に提案があるとすれば、繰り返し表示されるプロンプトの頻度をカスタマイズできるようにすることです。

設定:最大ゲストトピック表示回数
「ゲートが表示されるまでのトピック表示回数。ゲートが最初に表示された後、この数値の間でランダムに表示されます。」

最大ゲストトピック表示回数を1または2に設定すると、早期のサインアップを促すことができて良いのですが、ユーザーが拒否した場合(セッションごとに1回表示が有効になっていない場合)、モダールをより低い頻度で再度表示できるようにすると、潜んでいるユーザーに対して攻撃的になりすぎないでしょう。例えば、5回以上のトピック表示ごとに表示するなどです。

「いいね!」 2

ドンさん、素晴らしいコンポーネントですね!サインアップボタンをカスタマイズしてURLを挿入できるようにする可能性はありますか?SSLにはMemberfulを使用しているため、通常のサインアップリンクは機能せず、ログインページにリダイレクトされてしまいます。よろしくお願いします!

「いいね!」 3

こんにちは、デビッドさん

ありがとうございます。素晴らしい提案です!:slightly_smiling_face:

これを追加しました。redirect_to_home 設定を custom_url_enabled と 2 つのオプションに置き換えました。

  1. custom_login_url: /login
    (デフォルトではホームページにリダイレクトされ、ログインモーダルが開きます)
  2. custom_signup_url: /singup
    (デフォルトではホームページにリダイレクトされ、サインアップモーダルが開きます)
「いいね!」 4

素晴らしい!1つ問題があります。カスタムゲートテキストのオプションが機能しなくなりました。

「いいね!」 1

サイトを確認しましたが、問題なく動作しました。キャッシュされたバージョンが表示されている可能性があるので、ハードリフレッシュを試すか、ブラウザを再起動してみてください。

「いいね!」 1

私もそう思いました。キャッシュをクリアし、4つの異なるブラウザで試しましたが、すべて同じでした。非常に奇妙です!もしよろしければもう一度試していただけますか?guest_gate.title を「Test」に変更したのですが、この更新は表示されますか?

はい、今これが見えています。

他のブラウザやデバイスでも確認してみます。

VPN経由でも、携帯電話でも、別のネットワークでも同じ結果です。これは今までで最も奇妙なことです!他の人が正しいテキストを見ることができる限り、問題ないと思います!:rofl:

こんにちは、Davidさん。

それは普通ではないと思います。 :slightly_smiling_face: ロケールにバグがあるのかもしれません。私のおすすめは、「accept language header からロケールを設定する」設定です。
あなたのサイトでこれを使用しているのを見ましたが、ブラウザの言語が異なるため、モーダルでデフォルトのテキストが表示されているのかもしれません。Discourse はデフォルトのテキストに戻しています。

この設定をオフにして、もう一度試していただけますか?

Screenshot 2022-05-12 at 8.45.19


これで再現できました。Chrome の言語を英語(イギリス)から英語(アメリカ)に変更したところ、このようになりました。

そして英語(イギリス)に戻しました。

「いいね!」 4

ドン、ありがとうございます。信じられないほど助かります!言語に関するインストールにバグがあるようです。これはあなたのコンポーネントが原因ではないようなので、新しいトピックを開始します。調べていただき感謝しています。

編集:管理者のロケールが、米国ではなく英国にいつの間にか変更されていたことが判明しました。非常に奇妙です!元に戻してフィールドを再度入力したところ、すべてがうまくいきました。

「いいね!」 3

3件の投稿が新しいトピックに分割されました:Components not respecting text overrides

これは非常にうまく機能します。ありがとうございます。

最初の投稿を読みやすくするために、いくつかの軽微な編集を行いました。ただし、まったく理解できなかった文が1つありました。

カスタムURLが有効になりました

デフォルトでは、ログインボタン/リンクにカスタムURLを追加すると、訪問者はログインまたはサインアップボタンをクリックした後にホームページにリダイレクトされ、ログインまたはサインアップモーダルが開きます。注:これをチェックしないままにすると、訪問者はボタンをクリックした後にトピックページに残ります。ゲストゲートモーダルはログインまたはサインアップモーダルに変更され、これは解除可能なので、訪問者はそれを閉じてトピックを読むことができます。

「いいね!」 2

ジョナサン、ありがとうございます :slightly_smiling_face: 本当に感謝しています :heart: 残念ながら私の英語は最高ではありません :confused: この件については申し訳ありません!テーマコンポーネントで変更します。もちろん、PRを送っていただいても構いません。 :slightly_smiling_face:

カスタムURLを有効にするサイト設定は、以下の意味です。
デフォルトでこれらのカスタムURL /login および /signup を使用するゲストゲートのログインおよびサインアップボタン/リンクにカスタムURLを追加できます。これらは訪問者をホームページにリダイレクトし、ログインまたはサインアップモーダルを開きます。したがって、チェックした場合、この下の2つの設定がアクティブになります。カスタムログインURL および カスタムサインアップURL

この設定のチェックを外すと、訪問者はゲストゲートのログインまたはサインアップボタン/リンクをクリックした後もトピックページに留まり、同じトピックページでログインまたはサインアップモーダルが開きます。その後、訪問者はモーダルを閉じることができます。

理解の助けになれば幸いです。そして、より分かりやすくしてくださったお時間、改めて感謝いたします :slightly_smiling_face:

「いいね!」 2

あなたの英語は問題ありませんし、JavaScriptにも何も問題はありません。それが重要なことです :slight_smile: こちらはどうですか?

  1. カスタムURLを有効にするカスタムログインURLカスタムサインアップURLオプションを有効にします。このオプションのチェックを外した場合の通常の動作は、ログインまたはサインアップモーダルが現在のトピックページに表示されることです。
  2. カスタムログインURL – 例えば、/login は「ログイン」モーダルが表示されたホームページです。
  3. カスタムサインアップURL – 例えば、/signup は「サインアップ」モーダルが表示されたホームページです。
「いいね!」 2

これも主にプラグインの作成者や貢献者のおかげです。しかし、私はこれを開発し、より多くの機能や修正などを追加するために最善を尽くしています :slightly_smiling_face:


修正ありがとうございます :slightly_smiling_face: それはずっと良さそうです。テーマコンポーネントでもこれらを修正します。

皆さん、こんにちは。
最近このコンポーネントをインストールしたのですが、とてもうまく機能しています。しかし、ゲーティングメカニズムがGoogleボットのトピックのクロールを遅くするのではないかと心配しています。

クローラーへの影響についてご存知の方はいらっしゃいますか?

「いいね!」 2

SSO を Discourse Connect で使用している際に、Guest Gate の設定に問題が発生しています。

ユーザーはメインサイトにログインでき、Discourse にもログインしているように見えますが、いくつかのトピックをクリックすると Guest Gate のモーダルが表示されます。これは、ユーザーがログインしているため、通常とは異なります。

ログイン用のカスタム URL を使用しているため、ユーザーが「すでにログインしています」をクリックすると、カスタムログインページにリダイレクトされ、このサイクルが繰り返されます。

この問題を回避するには、ユーザーが Discourse のネイティブログインボタンをクリックして自動的にログインする必要があります。

どうやら、何らかの理由で Guest Gate が SSO からのログインを認識せず、ネイティブログインを要求しているようです。

他の人もこの問題に直面しましたか?解決策や回避策の提案はありますか?

「いいね!」 1