[Integrating Google Tag Manager with Google Analytics](https://meta.discourse.org/t/integrating-google-tag-manager-with-google-analytics/47335) からの議論を継続します。
カスタムイベントを Google Tag Manager および Analytics にプッシュする
このガイドでは、Discourse サイトを設定してカスタムイベントを Google Tag Manager (GTM) および Google Analytics に送信し、特定のユーザー操作を追跡する方法について説明します。
必要なユーザーレベル: 管理者
前提条件
カスタムイベントを実装する前に、以下のことを確認してください。
- Setup Google Tag Manager for Analytics ガイドに従って、Discourse サイトに Google Tag Manager を設定したこと
- サイトの
gtm container id設定に GTM コンテナ ID を追加したこと - Google スクリプトを許可するようにサイトの
content security policy script src設定を更新したこと
カスタムイベントの追加
テーマコンポーネントの作成
- 管理 (Admin) > カスタマイズ (Customize) > コンポーネント (Components) に移動します
- 「新規 (New)」をクリックし、「新規コンポーネントの作成 (Create new component)」を選択します
- コンポーネントに名前を付けます
- JS タブを選択し、コードを追加します。たとえば、以下のコードは appEvent トリガーを取得し、次のイベントを dataLayer にプッシュします。
post:likedpost:createdtopic:created
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
window.dataLayer = window.dataLayer || [];
// トピックへの「いいね」を追跡
api.onAppEvent("page:like-toggled", (post, likeAction) => {
let topic = post.topic;
if (post && topic && likeAction && likeAction.acted) {
window.dataLayer.push({
'event': 'postLiked',
'postId': post.id
});
}
});
// 新しい投稿を追跡
api.onAppEvent("post:created", post => {
if (post) {
window.dataLayer.push({
'event': 'postCreated',
'postId': post.id
});
}
});
// 新しいトピックを追跡
api.onAppEvent("topic:created", (post, composerModel) => {
if (post) {
window.dataLayer.push({
'event': 'topicCreated',
'topicCategory': composerModel.get("category.name"),
'topicId': post.topic_id
});
}
});
});
- コンポーネントを保存します
- サイト上のアクティブなすべてのテーマにコンポーネントを追加します
利用可能なイベント
利用可能なトリガーイベントはすべてこちらに記載されています: AppEvents triggers reference
GTM の設定
トリガーの作成
- https://tagmanager.google.com/ にアクセスします
- サイドメニューから「トリガー (Triggers)」を選択します
- 「新規 (New)」をクリックします
- トリガーに名前を付けます
- トリガータイプとして「カスタムイベント (Custom Event)」を選択します
- イベント名を入力します (例:
postCreated) - トリガーが「すべてのカスタムイベント (All Custom Events)」で発生するように設定します
データレイヤー変数の作成
- GTM のサイドメニューから「変数 (Variables)」を選択します
- ユーザー定義変数 (User-Defined Variables) セクションで「新規 (New)」をクリックします
- 変数に名前を付けます
- 変数タイプとして「データレイヤー変数 (Data Layer Variable)」を選択します
- データレイヤー変数名を入力します (例:
postCreated) - データレイヤーのバージョンを「バージョン 2 (Version 2)」に設定します
イベント追跡用の Google タグの作成
2024年現在、推奨されるアプローチは、古い「Google Analytics: GA4 イベント」タグタイプではなく、新しい「Google タグ (Google Tag)」テンプレートを使用することです。「Google タグ」は GA4 との統合が改善され、同意モード v2 のサポートが組み込まれています。
- GTM のサイドメニューから「タグ (Tags)」を選択します
- 「新規 (New)」をクリックします
- タグに名前を付けます (例: 「GT - Post Created」)
- タグ設定 (Tag Configuration) の下:
- 「Google タグ (Google Tag)」を選択します
- GA4 設定を選択します (これが最初のタグの場合は新しいものを設定します)
- 「イベント名 (Event Name)」には、GA4 の命名規則に従った説明的な名前を入力します (例:
post_created) - 「設定パラメータ (Configuration settings)」の下で、「行を追加 (Add Row)」をクリックしてデータレイヤー変数を含めます。
- 設定パラメータ: (例:
postId) - 値: データレイヤー変数 (例:
{{postCreated}})
- 設定パラメータ: (例:
- 「トリガー (Triggering)」の下:
- 事前に作成したカスタムイベントトリガーを選択します
現在「Google Analytics: GA4 イベント」タグを使用している場合、それらは引き続き機能しますが、新しい実装では将来の互換性と機能向上のために「Google タグ」テンプレートを使用する必要があります。
イベント名の要件
GA にはイベント名に関する特定の要件があります。
- snake_case (アンダースコアで区切られた小文字) を使用します
- 最大長は 40 文字
- 英数字とアンダースコアのみを含めることができます
Google タグのテスト
- GTM で「プレビュー (Preview)」ボタンをクリックします
- Discourse サイトに移動します
- 追跡したい操作を実行します (例: 投稿を作成する)
- GTM のプレビューモードで:
- カスタムイベントが左側のパネルに表示されていることを確認します
- Google タグが正しく発火したことを確認します
- すべてのパラメータが期待どおりに渡されていることを確認します
- Google Analytics で:
- 「設定 (Configure)」>「イベント (Events)」に移動します
- カスタムイベントは、トリガーされた後にリストに表示されるはずです
- 注意: 新しいイベントが GA4 レポートに表示されるまで最大 24 時間かかる場合があります
トラブルシューティング
GTM でイベントが表示されない場合:
- Discourse で GTM コンテナ ID が正しく設定されているか確認します
- テーマコンポーネントがすべての有効なテーマに追加されていることを確認します
- イベントが発火していることを確認するために
console.logステートメントを追加します。
api.onAppEvent("post:created", post => {
console.log("post:created event triggered");
if (post) {
window.dataLayer.push({
'event': 'postCreated',
'postId': post.id
});
}
});
- Chrome 拡張機能 Simple Data Layer Viewer を使用してデータレイヤーを監視します
- コンテンツセキュリティポリシー (CSP) エラーが表示される場合は、上記の前提条件を参照し、詳細な手順については Mitigate XSS Attacks with Content Security Policy を確認してください。
ga universal tracking codeが設定されている場合は、GTM が追跡スクリプトを処理するため、空にしてください。