このガイドでは、Googleタグマネージャー（GTM）を使用して、Discourseサイト上の「サインアップ」、「ログイン」、「返信」などの特定のボタンのクリックを追跡する方法を説明します。
必要なユーザーレベル：管理者権限とGoogleタグマネージャーへのアクセス権
Googleタグマネージャーでボタンのクリックを追跡する
特定のボタンに対するユーザーの操作を追跡することで、ユーザー行動やコンバージョンパスを理解するための貴重なデータを取得できます。Discourseは標準で多くのイベントを追跡しますが、「サインアップ」ボタンなどの特定のUI要素を監視したい場合があります。GTMのプレビューモードを使用すると、正確な要素を特定し、正確なトリガーを設定するための最も効率的な方法が得られます。
概要
特定のボタンを追跡するには、まずGTMがそのボタンがクリックされたときにどのように「認識」するかを特定する必要があります。このプロセスには、クリック変数の有効化、汎用的なデバッグトリガーの作成、タグアシスタントを使用した要素の固有プロパティの特定、そしてそのボタン専用のタグの作成が含まれます。
クリック変数の有効化
クリックを追跡する前に、GTMがブラウザから必要なデータをキャプチャしていることを確認する必要があります。
- GTMワークスペースで変数に移動します。
- 設定を選択します。
- クリックセクションで、利用可能なすべてのボックスにチェックを入れます：
Click Element、Click Classes、Click ID、Click Target、Click URL、Click Text。
汎用的なクリックトリガーの作成
テスト中にデバッグコンソールですべてのクリックイベントを確認するために、「すべてをキャッチする」トリガーが必要です。
- トリガーに移動し、新規を選択します。
- トリガーの設定をクリックし、クリック - すべての要素を選択します。
- すべてのクリックを選択します。
- トリガーを「すべてのクリック - デバッグ」と名付け、保存します。
タグアシスタント拡張機能の使用
Tag Assistant Companion拡張機能は、サイトを操作したときにGTMがどの要素を受け取ったかを正確に追跡するのに役立ちます。
- ブラウザに拡張機能をインストールします。
- GTMワークスペースで、右上隅にあるプレビューを選択します。
- サイトのURL（
discourse.example.com）を入力し、接続をクリックします。
特定のボタン要素の特定
プレビューウィンドウが開いたら、目的のボタンの固有の識別子を見つけることができます。
- サイト上で追跡したいボタン（例：サインアップボタン）をクリックします。
- タグアシスタントタブに戻ります。
- 左側の概要ペインで最新のクリックイベントを見つけます。
- データレイヤータブを選択して、クリックされた要素のプロパティを表示します。
サインアップボタンを具体的にターゲットにするには、その固有のクラスであるsign-up-buttonを使用できます。
永続的なトリガーを作成する際は、ユーザーがボタン内のテキストをクリックした場合でもクリックを確実にキャプチャするために、CSSセレクタを使用します。サインアップボタンの場合は、以下を使用します。
button.sign-up-button, button.sign-up-button *
セレクタの末尾にある*（ワイルドカード）は、ユーザーがボタン内のテキストスパンをクリックした場合でもトリガーが発火するようにします。
ベストプラクティス
- わかりやすい名前を使用する: トリガーとタグには、「GA4 - イベント - サインアップボタンクリック」のように明確な名前を付けます。
- 匿名でテストする: 「サインアップ」ボタンなどのクリックをテストする場合、ボタンが表示されていることを確認するために、シークレットウィンドウを使用するか、Discourseサイトからログアウトすることが最善であることがよくあります。
- 公開前に検証する: タグアシスタントの概要ペインを常に確認し、意図したボタンがクリックされたときにのみ特定のタグが発火することを確認してください。