Google タグ マネージャーの初回設定手順とGA4の連携方法
投稿日:
更新日:
アカウントを作成する
1. 新しいアカウントの追加
[アカウントの設定]のアカウント名は社名やグループ名を設定すればOKです。国は日本を選択する。
[コンテナ名]にサイトのURLを設定し、[ターゲット プラットフォーム]はWebサイトであれば「ウェブ」を選択してください。
![タグ マネージャーの新しいアカウントの追加画面](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F0396313a19e14557b702d9c2c7f38a43%2Fgtm-setting-1.png&w=3840&q=75)
2. Google タグ マネージャー利用規約
内容を確認し、問題なければ「はい」を押してください。
![Google タグ マネージャー利用規約](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F3ae51248f81e4671804bd9cdc8de018c%2Fgtm-setting-2.png&w=3840&q=75)
3. Google タグ マネージャーをサイトに埋め込む
表示された2つのソースコードを以下の場所に設置してください。
※xxxxxxxx
は測定IDのGTM-以降が入ります。
- 以下のソースコードをすべてのページの
<head>
要素のなるべく上に設置
<!-- 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='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxxxxxx');</script>
<!-- End Google Tag Manager -->
- 以下のソースコードをすべてのページの
<body>
要素の直後に設置
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxxxxxxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
![Google タグ マネージャーのインストール説明](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F4914a0d11269457aa54483ab911ad305%2Fgtm-setting-3.jpg&w=1920&q=75)
以上でGoogle タグ マネージャーの初回設定完了です。
GTMを使用したGA4の導入方法
GA4の設定方法は以下の記事をご覧ください。
1. GA4の測定IDを確認する
GA4の左下の歯車アイコンを押し、[プロパティ設定] > [データの収集と修正] > [データストリーム]から連携したいデータストリームを選択します。
[ストリームの詳細]の測定IDを後ほど使用するので控えておいてください。
![GA4のウェブ ストリームの詳細画面](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fe6f9be597cdb4c78a239d7e4265e6110%2Fgtm-setting-4.jpg&w=3840&q=75)
2. GTMでGA4のタグを設定する
GTMの左のメニューの[タグ]を押し、右上に出てくる[新規]を押します。
![GTMの左のメニュー](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F5b7e821e91f94edc9ccb0ef99cea036e%2Fgtm-setting-5.png&w=640&q=75)
タグの名前はわかりやすい名前(GA4タグ、GA4設定など)にし、
タグの種類は「Google タグ」、タグIDは先ほどコピーしたGA4の測定IDを貼り付けてください。
2023年9月上旬からGA4の設定に使用するタグの種類が「Google アナリティクス: GA4 設定タグ」から「Google タグ」に変更されました。
詳細は以下をご確認ください。
配信トリガーは「Initialization - All Pages」を選択してください。
最後に[保存]を押してください。
![GTMでGA4設定のタグを作成](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F22e07cd1a08d4cdaafc125793f6f5c8f%2Fgtm-setting-6.jpg&w=3840&q=75)
3. 計測テストを行う
正常に計測できているか確認するために右上の[プレビュー]を押してください。
![GTMのタグ一覧画面](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F88e9be8c15d1429b80a71bc247f63720%2Fgtm-setting-7.jpg&w=3840&q=75)
Google Tag Assistantが開くので、計測したいURLを入力して[Connect]を押し、動作確認を行います。
![Google Tag Assistantのポップアップ画面](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fedfaed08ada64507a857742e44f0784f%2Fgtm-setting-8.jpg&w=1920&q=75)
4. 計測を開始する
動作確認が完了したらGTMの右上の[公開]を押して計測を開始してください。
![GTMのタグ一覧画面](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F88e9be8c15d1429b80a71bc247f63720%2Fgtm-setting-7.jpg&w=3840&q=75)
以上でGoogle タグ マネージャーとGA4の連携が完了です。