Google Tag Manager 導入手順書

【GTM導入：ステップ1】

✏️ 作業手順

1. Google Tag Manager にアクセス
2. Googleアカウントでログイン
3. 「アカウント作成」をクリック
4. 入力する アカウント名 → 例：「Playground」または「Markdown Viewer App」 国 → 日本 コンテナ名 → 例：「markdown-viewer-app」 ターゲットプラットフォーム → 「ウェブ」を選択
5. 「作成」ボタンを押す
6. 利用規約に同意（チェックして進める）

✅ 結果確認

🎉 「GTM-XXXXXXX」という GTMコンテナID が発行されたら【ステップ1 完了】！

【GTM導入：ステップ2】

✏️ 作業手順

GTMから案内されているコードが2つあるので

1つ目（に入れるコード） 2つ目（直後に入れるコード） これをそれぞれに設置。

1. タグの中にこのコードを貼る （例）

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX'+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

👉 これをbase.htmlなど、全ページ共通のHTMLファイルの部分の最上部に設置。

1. タグのすぐ後ろにこのコードを貼る

（例）

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

👉 これは直後に設置。

※「GTM-XXXXXXX」は発行されたIDに置き換え！

✅ 結果確認

コードを設置したら、サイトをブラウザで開く Google Tag Assistant（拡張機能） を使って 「GTMタグが動作しているか」確認！ 🎉 「GTMタグ検出できました！」となったら【ステップ2完了】

【GTM導入：ステップ3】

🎯 ステップでやること

✅ GTM上で「GA4タグ」を再設置する

ここからは、GTM経由でGA4にデータを送る形に切り替え。 将来、タグやイベントを増やしたくなってもGTM画面だけで管理できるようになる！

✏️ 作業手順

1. GTMの管理画面にアクセス 作ったコンテナ（例：「markdown-viewer-app」）を開く。
2. 「タグ」を選択 → 「新規」をクリック
3. 新しいタグを設定 タグ名：例「GA4 計測タグ」 タグタイプ： 「タグの設定」クリック → 「Google Analytics: GA4設定」を選択 測定ID： GA4で発行された「G-XXXXXXXXXX」を入力
4. トリガーを設定 トリガー：「All Pages（すべてのページ）」を選択
5. 保存
6. 公開（Submit） 「送信」→「バージョン名」適当に入れて「公開」

✅ 結果確認

サイトを開く Tag Assistantで「GA4タグが発火しているか」確認 🎉 GA4イベント（page_view）が発火していれば成功！