【GA4】 Analytics と Google タグマネージャーを連携(画像解説28枚アリ)

【GA4】 Analytics と Google タグマネージャーを連携(画像解説28枚アリ)

Web解析

タグマネージャーの導入方法とGoogleアナリティクス(旧アナリティクスとGA4)との連携方法を画像多めで初心者でもわかりやすくご紹介しています。

電話発信回数やCVエリアのクリック数を測定したくて設定したのですが、すぐ忘れちゃいそうなのでメモとして記事化しました。

具体的にはタグやトリガー、組み込み変数の使い方やタグ発火の確認方法などを詳しく解説しています。よろしければ参考にしてください。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター(技術責任者)・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。

この記事の対象

  • タグマネージャー初心者
  • GA4とタグマネを連携したい
  • ユニバーサルアナリティクス(旧:アナリティクス)とタグマネを連携したい
かみーゆ
かみーゆ

実はタグマネージャー(通称タグマネ)はサイトが重くなるという理由で今まで使ってませんでした。

計測するものが増え今回思い切ってタグマネに切り替えました。

この記事では簡単なイベント登録方法を紹介していますが、デバック方法なども紹介しています。よろしければ参考に!

【GA4】タグマネで設置したイベントが計測できないときの対処法

Googleタグマネージャーで設置したタグが発火してなくて焦ったこと有りませんか?Googleタグマネージャーにはちゃん...

タグマネージャーとは?

タグマネージャーとは、タグを一括で管理するツールのこと。データを取得するためにタグを設置します。

例えば、ボタンなどのクリック数を計測したいなどありますよね?

タグマネージャーを使わない場合、タグはhtmlへ直書き実装していました。

<a href="tel:000-0000-0000" onclick="gtag('event', 'click', {'event_category': 'button','event_label': 'tell2'});"><i class="fas fa-phone-volume"></i> 000-0000-0000</a>

ちょっとコードを書きなれていない方にはハードルが高いですよね。。。

こんな面倒なコードを書くことなく、タグマネージャーの管理画面からタグを実装できます。

タグマネージャーは計測用のタグを手軽に設置し一元管理できるツール。

タグマネージャーアカウント作成後、コンテナを作る

アカウントを作成し、コンテナを作成します。

タグマネージャーアカウント作成

アカウント作成

  • アカウント名 … 組織名がベストかと
  • 国 … サービスを提供する国で

コンテナ設定

  • コンテナ名 … サイト名とか
  • プラットフォーム … ブログなどはウェブサイトでOK。特殊じゃない限りこれで大丈夫だと思います。


これでタグマネージャー設置用のコードが発行されます。

タグマネージャーのインストールとは、ようは指定された場所にコードを貼るだけ。

タグマネージャーアカウント作成

headタグ内の上部とbody開始タグの直後の2箇所にそれぞれコードを貼り付けます。

<html>
<head>
<!--1個目のコードはできるだけ上の方に設置-->
.
.
.
</head>
<body>
<!--2個目のコードは<body>の直後に-->
.
.
.
もしコードを再取得したいときは、タグマネージャーのIDをクリックすると確認可能です。 タグマネージャーアカウント作成
WordPressなどのプラグインやテーマによってはタグマネージャーのIDさえあれば設置可能のこともあります。

タグを設置してGAと連携

早速Google Analyticsと連携します。今回はユニバーサルアナリティクス(旧)とGA4(新)の連携方法をご紹介しておきます。

※ 私はユニバーサルアナリティクスとGA4のデータを併用して計測しています。

ユニバーサルアナリティクスと連携する

タグを追加します。

タグを追加

タグの種類からユニバーサルアナリティクスを選択します。トラッキングタイプはページビューでOKです。

タグの種類からユニバーサルアナリティクスを選択

Googleアナリティクス設定で新しい変数を定義します(後々イベントトラッキングなどで使用するため)。

新しい変数を定義します(後々イベントトラッキングなどで使用するため)
ユニバーサルアナリティクスのトラッキングIDはGoogle Analyticsの管理(歯車マーク)プロパティから確認できます。 トラッキングコードはGoogle Analyticsの管理(歯車マーク)プロパティから確認

トラッキングIDをコピーしたら、変数のトラッキングIDに貼り付けます。ユニーバーサルアナリティクスIDとかわかりやすい名前で保存しておきます。

entry474 5

最後にトリガーを設定します。All PagesでOKです。

必要であればタグ名を変更して保存します。

entry474 8

タグがきちんと実装できたかは、タグ発火の確認方法とコンテナ公開を参考にしてください。

GA4と連携する

次はGA4と連携しましょう。ユニバーサルアナリティクスよりもっとカンタンです。

ただ、トラッキングIDのある場所がややこしいので注意です。
設定(歯車マーク)からプロパティ、データストリームで指定のストリームを選び、詳細の中に測定IDがあります。

設定(歯車マーク)からプロパティ、データストリームで指定のストリームを選び、詳細の中に測定ID

タグを追加し、タグの種類をGoogleアナリティクス:GA4設定にします。

念の為、アナリティクスの管理画面のリアルタイムで確認

ユニバーサルアナリティクス同様配信トリガーをAll Pagesに設定したらGA4などわかりやすい名前をつけて保存します。

タグがきちんと実装できたかは、タグ発火の確認方法とコンテナ公開を参考にしてください。

タグ発火の確認方法とコンテナ公開

設定したものの、IDの記載ミスなどでタグがうまく動いていないなんてこともあります。

タグがちゃんと発火しているか確認した上でコンテナを公開します。

タグ発火の確認方法

プレビューをクリックし反映しているか確認します。

プレビューをクリックし反映しているか確認

Tag Assistantというツールが別タブで開きます。確認したいサイトのURLを入力し、「Connect」ボタンをクリック。

entry474 22
For an improved debugging experience, install the Tag Assistant Companion browser extension.と言われるので、ChromeのエクステンションをDLして併用することも可能ですが、なくても大丈夫です。

Continueを押して、全体を確認します。

entry474 23

さらに別タブで対象のサイトが開きます。

entry474 24

*Tags Fired(発火しているタグ)*のなかに設置したタグ名が含まれていればOK!!!

Tags Fired(発火しているタグ)のなかに設置したタグ名が含まれていればOK

さらに管理画面からリアルタイムで確認してみます。

念の為、アナリティクスの管理画面のリアルタイムで確認

イベントなどのタグは、実際にトリガー(クリックなど)されないと発火しません。なので、Tag Assistantで開いたタブの中で実際トリガーさせてみます。

entry474 24
反応しないときはページをリロードするなどしてみましょう。反映しない場合は拡張機能のオプトアウト、IP除外なども確認してみましょう。

コンテナの公開

コンテナを公開します。

entry474 25

コンテナーはバージョンごとに管理できます。もし「前のバージョンに戻したい!」って時は戻せます。

バージョン名とバージョンの説明はなくても公開できますが、元に戻す可能性があれば書いておいた方が良いです。

entry474 26

イベントの登録

イベントをタグマネで登録してみましょう!ユニバーサルアナリテティクスとGA4両方紹介します。

今回は、携帯からの電話発信とコンバージョンボタンのクリック数を計測する方法をご紹介します。

組み込み変数を設定する(共通)

左のメニューの「変数」から設定を開き、必要な組み込み変数を追加しておきます。

「変数」から設定を開き、必要な組み込み変数を追加
変数詳細
Click Classesクリックされる要素のクラス
Click Elementクリックされる要素名
Click IDクリックされる要素のID
Click Targetクリックされる要素のtarget属性
Click Textクリックされる要素のテキスト
Click URLクリックされる要素のURL

トリガーを設定する(共通)

携帯からの電話発信とコンバージョンボタンのトリガーを設定します。

どちらもトリガータイプをリンククリックとし一部のリンククリックにチェックします。

トリガータイプをリンククリックとし一部のリンククリックにチェック

条件を設定します。タグに含まれるリンクやクラスを組み合わせて、一致する要素のクリックされた時をトリガーとします。
条件は「含む」か「一致」でいいと思います。

電話発信 電話発信トリガーの設定
CVクリック CVクリックトリガーの設定

イベント用タグの登録

イベント用のタグを登録します。

ユニバーサルアナリティクスでのタグ設定

タグの種類はユニバーサルアナリティク、ストラッキングタイプをイベントに設定します。

ディメンション名補足と詳細
カテゴリイベントのカテゴリ名です。一般的に行為に対する対象物です
アクションユーザーのアクション
ラベル計測するデータの最小単位など

今回2つともボタンなので、カテゴリはbuttonとしました。

Googleアナリティクス設定でトラッキングIDが格納されている変数を選択します。

それぞれトリガーも設定します。

電話発信
アクションはcall、ラベルは場所も取得したかったので、電話発信:ページパスとしました。

電話発信

CVボタンクリック
アクションはclick、ラベルはサイドバーCVボタン:ページパスとしました。

電話発信

タグ発火の確認方法とコンテナ公開を参考に、プレビューで実際に試してみましょう。

Tags Firedにタグが移動したら成功です。

併せてアナリティクス管理画面のリアルタイム>イベントでも確認しましょう。

電話発信

イベントのカテゴリ・アクション・ラベルを最初めっちゃ考えておいた方がいい

CVに至るまでにたくさんイベントを登録するかと思いますが、今回自分のサイトでめちゃ思ったのがイベントのカテゴリ・アクション・ラベルのルールをちゃんと決めてなかったことを反省しました。

GA4でのタグ設定

タグの種類をGoogle アナリティクス: GA4 イベントとし、設定タグにトラッキング用で作成したGA4用のタグをセットします。

イベント名とタグ名は間違えそうなので同じにしておくのが良さそうです。

電話発信GA4

電話発信GA4
CVボタンクリックGA4
電話発信GA4
entry474 28

まとめ・GA4とタグマネージャーの連携はカンタン

やってみるとタグマネージャーとGA4の連携はユニバーサルアナリティクスよりもカンタンでした。

タグマネージャーでのデバック方法の記事もあります。よろしければ参考に!

【GA4】タグマネで設置したイベントが計測できないときの対処法

Googleタグマネージャーで設置したタグが発火してなくて焦ったこと有りませんか?Googleタグマネージャーにはちゃん...

私のサイトはついでにHotjar、Adもタグマネから追加しました。一元管理サイコー。

かみーゆ
かみーゆ

こんなにラクならさっさと導入すればよかった。。。

皆さんのSEOライフの一助となれば幸いです。

最後までお読みいただきありがとうございました。

お読みいただきありがとうございます。
「銀ねこアトリエ」をより良いブログにするために是非応援してください!

銀ねこアトリエを応援する