--- title: 【初心者向け】現場Web担当者へ送る、GA4とGTMのセッティングガイド - とりあえず計測できるようにする編 description: GA4とGTMの初期設定方法をキャプチャ付きで解説している初心者向けの記事になります。 --- [お役立ち情報 | amnies \[アムニーズ\]](https://amnies.com/column) # [【初心者向け】現場Web担当者へ送る、GA4とGTMのセッティングガイド - とりあえず計測できるようにする編](https://amnies.com/column/240525) 作成者: [amnies](https://amnies.com/column/author/amnies)｜2024年05月 ### 前書き #### ジーエー、アナリティクス等の飛び交う謎の呪文 「グーグルアナリティクス、ジーエー、GA、GA4、アナリティクス…」 こんな言葉をウェブサイト担当者であれば、呪文のように誰かが毎日どこかで呟いているのは慣れたことでしょう。 Googleアナリティクスの説明については、このページでは割愛します。 Googleが出している計測ツール、とざっくり認識していればひとまずOK。一応Googleアナリティクスのページの公式の引用を下部に載せておきます。   > Google アナリティクスは、ウェブサイトやアプリのパフォーマンスについて理解を深められるプラットフォームとして、何百万ものサイト / アプリ運営者の方にご活用いただいています。Google アナリティクスをデジタル戦略の調整やキャンペーンの最適化に活用し、自社のオンライン プレゼンスをさらなる高みへ導きましょう。 （参考：Googleアナリティクス） [https://developers.google.com/analytics/learn?hl=ja](https://developers.google.com/analytics/learn?hl=ja)   そして、開いてみるもののよくわからない画面ばかりで、何をどう見たらよいのか。というのを考えなら画面をそっ閉じして終わるのも慣れたことでしょう。 先輩からGAの説明を受けるも横文字ばっかりでランチの事を考え始めた図 なんとなくコンバージョンという言葉にも聞きなじみが出てきたころ、突然時はやってきます。   「じゃあ、お客さんのGA設定しておいて^^」   ^^？   #### その時は突然訪れる 前述は、新人のウェブ担当者がお客様のGAを設定するというミッションを急に先輩からぶん投げられるというストーリーで書いてみましたが、現場はもっと急なはずです。 会社でホームページ作った記念に「作った後が大事なんだよこういうのは！あれだあれ、ジーエー？を入れるぞ！」となぜか変なところだけリテラシーが高い上長にお願いされるパターンもあります、あってるけど勘弁してくれ。 実際に筆者は「タイピングが早い」というだけで、ウェブ関連の全担当になり、最終的にECサイトやAmazonの広告含めた運用までやったことがあります（マジ） ネットで調べてみるも知識がある前提のページ多すぎて笑えて来た図   とはいえサラリーマンである以上、我々はファイター！まずは動く状態を作らなければいけない！そんな方向けに、キャプチャつきで初期設定を分かりやすく解説します！社会人って辛いよな、わかる！     ### 設定について #### 必要なものはまず二つ 「GAの話してるのに何で二つなんだよ！誰かコナンくん連れてこい！」と早速突っ込みが入ることは覚悟の上ですが、だまされたと思ってとりあえず流し見してください。ひとまずGAで計測するうえで、下記二つを用意します。   - Googleアナリティクス [https://developers.google.com/analytics/learn?hl=ja](https://developers.google.com/analytics/learn?hl=ja) - Googleタグマネージャー [https://marketingplatform.google.com/intl/ja/about/tag-manager/](https://marketingplatform.google.com/intl/ja/about/tag-manager/)   はい、また横文字のツールです。   「タグマネージャーとかまた聞きなれない横文字きたよ！もうやだよ！」となるかもしれませんが、きっと半年ぐらい経った頃には「タグマネージャー最高じゃねえか。。。」となっていると思うので、超絶ざっくり解説します。   Googleアナリティクスもそうですが、「何かをもとに計測する」というときは情報をツール側へ引き渡すものが必要になります。   今回の場合は下記 何か：Webサイト ツール：Googleアナリティクス Webサイトからツール側へ情報を引き渡す「タグ」というものが該当します。 今はざっくりこれぐらいの認識でOKですが、新しいツールの導入等があると、タグというものはどんどん増えていく可能性があります。   - **Facebookの広告やろうとしたらMETAピクセル入れろって言われたわ！** - **Microsoft広告やろうとしたら、なんか埋めろって言われたわ！** - **Adobeの…割愛**   そのたびにWebサイトにタグを追加していく必要があるのですが、サンクチュアリのようになり担当者変更等が起きると最早何がなんだかわからない状態に。 さらに、いらないタグ等がWebサイトに残っているままだと、Webサイトの表示スピード等に影響を与えたりする可能性もゼロではない。。 なんでタグ消してないんだよ！と言われても引継ぎ受けてないしそれの図   怖いですね、楳図かずおの漫画ぐらい怖い。   そんなタグの管理をしやすくするのが、Googleタグマネージャーです。カモン、公式の概要説明。   > タグ管理が容易に。 > すべてのタグを、コード編集なしで管理できます。Google タグ マネージャーは、シンプルで信頼性が高く、一元管理を容易に実現できるタグ管理ソリューションです。しかも、ご利用は無料です。   何かわからないけど無料で使えるすげーやつ！とっとと説明に入ってくれ？焦るなよ、今からするから。。。   ##### Googleアナリティクスのアカウントを作ろう まずは、Googleアナリティクスのアカウントを作成します。 アカウント作成を選択すると、下記のような画面になるので、赤枠部分に会社名等を入れましょう。 入力したら「次へ」を選択。   今度は、プロパティ名に設定するホームページのドメインを入力し、レポートのタイムゾーン、通貨はそれぞれ「日本」「日本円」に設定します。※日本在住の人対象に書いています。 なれたように「次へ」を選択します。   この後、ビジネスの説明を入力しますが、ここは適宜ご自身のビジネスにあったものを選択して「次へ」を選択してください。 ここまで問題なく行けてますね、なんか自信がついてきたぜ。   すると急にビジネス目標を聞かれます、わからねえよ。一旦これは最下部にある「ベースラインレポートの取得」を選択して「次へ」を選択しましょう。 急に目標とか聞かないでくれよ。。となるかもしれませんが、一旦次へ行きましょう。   利用規約の言語を「日本」に選択、めちゃめちゃ長い利用規約を一読してチェックボックスに同意をいれて「同意する」を選択。   そうするとポケモンのように御三家を選ぶ画面が出てきます。今回はウェブサイトという前提なので、「ウェブ」を選択します。   今度はウェブストリームの設定という画面に遷移します、ソーダでも作るのか？と思ったあなた、僕と思考回路が似ています（うれしくない）。 - ウェブサイトのURL：計測したいURL - ストリーム名：分かりやすい名称を入力 ※コーポレートサイトの場合は、「コーポレートサイト」としちゃいましょう。   拡張計測機能という部分がデフォルトでONになっていますが、ここはONのままでOKです。「あんた一人じゃ心配だから設定しとくからね！」という凄い気が利く幼馴染ばりに色々計測設定してくれます、GAのこと好きになってきた。   そうするとウェブストリームの詳細という画面がでてきます。 「こいつぁ、ストリームだぜ…」 と独り言をつぶやいたのち、一旦GAの画面はこのままにしておきます。 これで設定の半分は終了！続いてタグマネージャーへ移行します。頑張ろう！     ### Googleタグマネージャーのアカウントを作ろう 下記リンクを選択して、Googleタグマネージャーアカウントを作成しましょう。 [https://marketingplatform.google.com/intl/ja/about/tag-manager/](https://marketingplatform.google.com/intl/ja/about/tag-manager/) 「無料で利用する」を選択   さっきの「こいつぁ、ストリームだぜ…」の件なんだったんだ、というのを思い出しながらアカウント設定をしていきます。 - アカウント名：社名等 - 国：日本 - コンテナ名：計測したいURL - ターゲットプラットフォーム：ウェブ 入力したら「作成」を選択   利用規約を一読します、日本語ないの？と思いますが無いんです。翻訳ツールを駆使して全力で読み！チェックボックスに選択を入れ！「はい」を選択！こいつぁ、ストリームだぜ…   そうすると急に呪文がポップアップで出てきます。急にやめてくれよ、と思うかもしれませんが、今回埋め込みたいURLの管理者がいるはずです。ケース別に連絡方法を下記に記載します。 外部の人にホームページ作ってもらったという場合： 制作会社に「Googleタグマネージャーを埋め込みたいのですが」と伝えて、文言も併せてそのままコピペしてこれを渡しましょう。 社内で担当がいる場合： 担当者に「Googleタグマネージャーを埋め込みたいのですが」と伝えて、文言も併せてそのままコピペしてこれを渡しましょう。   一番ラッキーなあなた、Hubspotでウェブサイト制作している方です。Hubspotの場合は連携が超絶簡単なので、このまま方法を記載します。   Googleタグマネージャーの管理画面右上の「GTM」から始まる値をコピー。   Hubspot管理画面＞設定＞ツール＞コンテンツ＞ページ＞連携＞Googleタグマネージャと連携にチェックを入れ、先ほどコピーした値をペースト。 これで終了、簡単すぎる。最高だぜHubspot。   連携が終了したという前提で次の工程へ移ります。   Googleタグマネージャ管理画面＞変数＞新規を選択。   下記キャプチャの赤枠で囲われている部分を選択。   「変数タイプを選択」というメニューが出てくるので「定数」を選択。   GA4の画面に戻り、下記キャプチャ赤枠の「測定ID」をコピー。   Googleタグマネージャーの画面に戻り、赤枠の「値」に先ほどコピーした「測定ID」をペースト。   左上の名称に分かりやすい名称を入れる。命名規則は好みがありますが、ひとまず「ga4 - id」と入力し、右上の「保存」を選択。   Googleタグマネージャー管理画面＞タグ＞新規を選択。   下記キャプチャの赤枠で囲われている部分を選択。   「タグタイプを選択」というメニューが出てくるので「Googleアナリティクス」を選択。   「Googleタグ」を選択。   「タグID」の項目にあるキャプチャの赤枠部分を選択。   「変数を選択」というメニューが出てくるので、どや顔で先ほど作成した「ga4\_id」を選択。 キャプチャ赤枠部分を選択   「All Pages」を選択。   こちらもわかりやすい名称を付けて保存、ひとまず「GA4 - SET - PV」という名称にして、右上の「保存」を選択。   ここまで来てお気づきの方もいるでしょう、こいつ冗談中々はさまなくなってきたな、と。 キャプチャ添付しながら作ると真面目になるさそりゃ。。ここまで来たらあともう一息。 Googleタグマネージャー管理画面＞プレビューを選択   計測したいURLを入力して、「Connect」を選択。   問題なく埋め込みが終了していると、赤枠内の「Tags Fired」の部分に先ほど作成したタグが出てくる。   確認が出来たら管理画面に戻り、右上の「公開」を選択。   バージョン名とバージョンの説明を入力する。ひとまず下記で入力 - バージョン名：作業内容の概要（今回だったらGA4登録など） - バージョンの説明：作業内容を箇条書き 入力し終わったら、「公開」を選択。   GA4の管理画面に戻り、「タグの実装手順を表示する」を選択。   「手動でインストールする」を選択し、ウェブサイトをテストするの項目に計測したいURLを入力して「テスト」を選択。   Googleタグマネージャーの設定が問題なくできていれば、URLの左横にチェックマークが表示される。やったぜ。。。   ### お疲れさまでした。 ざっくりと色々キャプチャで解説させていただきましたが、無事設定できたでしょうか。 「いやいや、ここ違うよ」 「ここ分からないんだけど」 「こういうのも知りたいんだけど」 というご要望等ありましたら、フォームよりご連絡いただければと思います。 [📨フォームはこちら](https://amnies.com/contact) [完全な記事を表示](https://amnies.com/column/240525) ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "amnies" }, "dateModified" : "2024-05-27T10:08:21.145Z", "datePublished" : "2024-05-27T10:01:24Z", "headline" : "【初心者向け】現場Web担当者へ送る、GA4とGTMのセッティングガイド - とりあえず計測できるようにする編", "image" : { "@type" : "ImageObject", "height" : 668, "url" : "https://46254619.fs1.hubspotusercontent-na1.net/hubfs/46254619/Proficient%20young%20male%20employee%20with%20eyeglasses%20and%20checkered%20shirt%2c%20explaining%20a%20business%20analysis%20displayed%20on%20the%20monitor%20of%20a%20desktop%20PC%20to%20his%20female%20colleague%2c%20in%20the%20interior%20of%20a%20modern%20office.jpeg", "width" : 1000 }, "mainEntityOfPage" : "https://amnies.com/column/240525", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : 60.0, "url" : "https://46254619.fs1.hubspotusercontent-na1.net/hubfs/46254619/amnies_logo.png", "width" : 60.0 }, "name" : "お役立ち情報" } } ```