タグマネージャーの導入方法とGoogleアナリティクス(旧アナリティクスとGA4)との連携方法を画像多めで初心者でもわかりやすくご紹介しています。
電話発信回数やCVエリアのクリック数を測定したくて設定したのですが、すぐ忘れちゃいそうなのでメモとして記事化しました。
具体的にはタグやトリガー、組み込み変数の使い方やタグ発火の確認方法などを詳しく解説しています。よろしければ参考にしてください。
![](/static/069bc468dd96c224d5c16811d36dce60/e39a3/camille-pic.jpg)
かみーゆ/フロントエンドエンジニア
この記事の対象
- タグマネージャー初心者
- GA4とタグマネを連携したい
- ユニバーサルアナリティクス(旧:アナリティクス)とタグマネを連携したい
![かみーゆ](/static/069bc468dd96c224d5c16811d36dce60/dd515/camille-pic.jpg)
実はタグマネージャー(通称タグマネ)はサイトが重くなるという理由で今まで使ってませんでした。
計測するものが増え今回思い切ってタグマネに切り替えました。
この記事では簡単なイベント登録方法を紹介していますが、デバック方法なども紹介しています。よろしければ参考に!
タグマネージャーとは?
タグマネージャーとは、タグを一括で管理するツールのこと。データを取得するためにタグを設置します。
例えば、ボタンなどのクリック数を計測したいなどありますよね?
タグマネージャーを使わない場合、タグは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>
ちょっとコードを書きなれていない方にはハードルが高いですよね。。。
こんな面倒なコードを書くことなく、タグマネージャーの管理画面からタグを実装できます。
タグマネージャーアカウント作成後、コンテナを作る
アカウントを作成し、コンテナを作成します。
![タグマネージャーアカウント作成](/static/a22a3ca151baeb0ba802b91ef9d6dfca/41099/entry474-1.jpg)
アカウント作成
- アカウント名 … 組織名がベストかと
- 国 … サービスを提供する国で
コンテナ設定
- コンテナ名 … サイト名とか
- プラットフォーム … ブログなどはウェブサイトでOK。特殊じゃない限りこれで大丈夫だと思います。
これでタグマネージャー設置用のコードが発行されます。
タグマネージャーのインストールとは、ようは指定された場所にコードを貼るだけ。
![タグマネージャーアカウント作成](/static/3d1104ad182a3aabdc6f301a8fc19fc4/c08c5/entry474-2.jpg)
headタグ内の上部とbody開始タグの直後の2箇所にそれぞれコードを貼り付けます。
<html>
<head>
<!--1個目のコードはできるだけ上の方に設置-->
.
.
.
</head>
<body>
<!--2個目のコードは<body>の直後に-->
.
.
.
![タグマネージャーアカウント作成](/static/30014bb766deb20b72b6ed947e5514ba/c08c5/entry474-3.jpg)
タグを設置してGAと連携
早速Google Analyticsと連携します。今回はユニバーサルアナリティクス(旧)とGA4(新)の連携方法をご紹介しておきます。
ユニバーサルアナリティクスと連携する
タグを追加します。
![タグを追加](/static/bb77f72c0483ee89d04c224a0a5bc302/c08c5/entry474-0.jpg)
タグの種類からユニバーサルアナリティクスを選択します。トラッキングタイプはページビューでOKです。
![タグの種類からユニバーサルアナリティクスを選択](/static/b3e809cb78af6f7c3128fc244accd772/c08c5/entry474-4.jpg)
Googleアナリティクス設定で新しい変数を定義します(後々イベントトラッキングなどで使用するため)。
![新しい変数を定義します(後々イベントトラッキングなどで使用するため)](/static/7765c4023644ef4056f29446eb0fa61e/f93b5/entry474-6.jpg)
![トラッキングコードはGoogle Analyticsの管理(歯車マーク)プロパティから確認](/static/8b8a7a60d23e30462dd28d85fb503317/c08c5/entry474-7.jpg)
トラッキングIDをコピーしたら、変数のトラッキングIDに貼り付けます。ユニーバーサルアナリティクスIDとかわかりやすい名前で保存しておきます。
![entry474 5](/static/f65ee0b58a91e38abd23f0f6eba21647/c08c5/entry474-5.jpg)
最後にトリガーを設定します。All PagesでOKです。
必要であればタグ名を変更して保存します。
![entry474 8](/static/93eb9b7a55ec10688974b9128ceef065/c08c5/entry474-8.jpg)
タグがきちんと実装できたかは、タグ発火の確認方法とコンテナ公開を参考にしてください。
GA4と連携する
次はGA4と連携しましょう。ユニバーサルアナリティクスよりもっとカンタンです。
ただ、トラッキングIDのある場所がややこしいので注意です。
設定(歯車マーク)からプロパティ、データストリームで指定のストリームを選び、詳細の中に測定IDがあります。
![設定(歯車マーク)からプロパティ、データストリームで指定のストリームを選び、詳細の中に測定ID](/static/067a5d0a2ed11d460e0d67dbd60adf3f/c08c5/entry474-12.jpg)
タグを追加し、タグの種類をGoogleアナリティクス:GA4設定にします。
![念の為、アナリティクスの管理画面のリアルタイムで確認](/static/e6078a871027835a1c2c3152bf0e0686/c08c5/entry474-13.jpg)
ユニバーサルアナリティクス同様配信トリガーをAll Pagesに設定したらGA4などわかりやすい名前をつけて保存します。
タグがきちんと実装できたかは、タグ発火の確認方法とコンテナ公開を参考にしてください。
タグ発火の確認方法とコンテナ公開
設定したものの、IDの記載ミスなどでタグがうまく動いていないなんてこともあります。
タグがちゃんと発火しているか確認した上でコンテナを公開します。
タグ発火の確認方法
プレビュ ーをクリックし反映しているか確認します。
![プレビューをクリックし反映しているか確認](/static/f5f0736fc7cd4784c4b1a18446672fc2/c08c5/entry474-10.jpg)
Tag Assistantというツールが別タブで開きます。確認したいサイトのURLを入力し、「Connect」ボタンをクリック。
![entry474 22](/static/037dd827cef70a52eadd5d9d440d1b78/c08c5/entry474-22.jpg)
Continueを押して、全体を確認します。
![entry474 23](/static/677eee2f54603cebe3e1a267b532639d/c08c5/entry474-23.jpg)
さらに別タブで対象のサイトが開きます。
![entry474 24](/static/4fd0f26ab1f349382830113d6383a939/c08c5/entry474-24.jpg)
*Tags Fired(発火しているタグ)*のなかに設置したタグ名が含まれていればOK!!!
![Tags Fired(発火しているタグ)のなかに設置したタグ名が含まれていればOK](/static/23cdb9174019dcb5cd08e930e7783cd1/066f9/entry474-9.jpg)
さらに管理画面からリアルタイムで確認してみます。
![念の為、アナリティクスの管理画面のリアルタイムで確認](/static/cdca2a9be6c1a2c9c40234bb4a4458b9/c08c5/entry474-11.jpg)
イベントなどのタグは、実際にトリガー(クリックなど)されないと発火しません。なので、Tag Assistantで開いたタブの中で実際トリガーさせてみます。
![entry474 24](/static/4fd0f26ab1f349382830113d6383a939/c08c5/entry474-24.jpg)
コンテナの公開
コンテナを公開します。
![entry474 25](/static/0d6139aaca5a137d819bb7c776cc8d8d/c08c5/entry474-25.jpg)
コンテナーはバージョンごとに管理できます。もし「前のバージョンに戻したい!」って時は戻せます。
バージョン名とバージョンの説明はなくても公開できますが、元に戻す可能性があれば書いておいた方が良いです。
![entry474 26](/static/fc67d4c7eff207673ca117eca614bcb6/c08c5/entry474-26.jpg)
イベントの登録
イベントをタグマネで登録してみましょう!ユニバーサルアナリテティクスとGA4両方紹介します。
今回は、携帯からの電話発信とコンバージョンボタンのクリック数を計測する方法をご紹介します。
組み込み変数を設定する(共通)
左のメニューの「変数」から設定を開き、必要な組み込み変数を追加しておきます。
![「変数」から設定を開き、必要な組み込み変数を追加](/static/84ad1751e05ba0f20a7d7a0219150d32/c08c5/entry474-14.jpg)
変数 | 詳細 |
---|---|
Click Classes | クリックされる要素のクラス |
Click Element | クリックされる要素名 |
Click ID | クリックされる要素のID |
Click Target | クリックされる要素のtarget属性 |
Click Text | クリックされる要素のテキスト |
Click URL | クリックされる要素のURL |
トリガーを設定する(共通)
携帯からの電話発信とコンバージョンボタンのトリガーを設定します。
どちらもトリガータイプをリンククリックとし一部のリンククリ ックにチェックします。
![トリガータイプをリンククリックとし一部のリンククリックにチェック](/static/cb74a47e02c07037f63c053169614368/c08c5/entry474-15.jpg)
条件を設定します。タグに含まれるリンクやクラスを組み合わせて、一致する要素のクリックされた時をトリガーとします。
条件は「含む」か「一致」でいいと思います。
![電話発信トリガーの設定](/static/a8e361e97ce5afd1704227751b6983e0/c08c5/entry474-16.jpg)
![CVクリックトリガーの設定](/static/aa7001e6c9918b2c96d2ede3b96cfec9/c08c5/entry474-17.jpg)
イベント用タグの登録
イベント用のタグを登録します。
ユニバーサルアナリティクスでのタグ設定
タグの種類はユニバーサルアナリティク、ストラッキングタイプをイベントに設定します。
ディメンション名 | 補足と詳細 |
---|---|
カテゴリ | イベントのカテゴリ名です。一般的に行為に対する対象物です |
アクション | ユーザーのアクション |
ラベル | 計測するデータの最小単位など |
今回2つともボタンなので、カテゴリはbuttonとしました。
Googleアナリティクス設定でトラッキングIDが格納されている変数を選択します。
それぞれトリガーも設定します。
電話発信
アクションはcall、ラベルは場所も取得したかったので、電話発信:ページパスとしました。
![電話発信](/static/b51830b315ae0490f3888086f718b69b/b4294/entry474-18.jpg)
CVボタンクリック
アクションはclick、ラベルはサイドバーCVボタン:ページパスとしました。
![電話発信](/static/19b124bd366988ed25da3433b957db8c/b4294/entry474-19.jpg)
タグ発火の確認方法とコンテナ公開を参考に、プレビューで実際に試してみましょう。
Tags Firedにタグが移動したら成功です。
併せてアナリティクス管理画面のリアルタイム>イベントでも確認しましょう。
![電話発信](/static/2ba3704f4cc1e200ae650c5a08e4623a/c08c5/entry474-27.jpg)
イベントのカテゴリ・アクション・ラベルを最初めっちゃ考えておいた方がいい
CVに至るまでにたくさんイベントを登録するかと思いますが、今回自分のサイトでめちゃ思ったのがイベントのカテゴリ・アクション・ラベルのルールをちゃんと決めてなかったことを反省しました。GA4でのタグ設定
タグの種類をGoogle アナリティクス: GA4 イベントとし、設定タグにトラッキング用で作成したGA4用のタグをセットします。
イベント名とタグ名は間違えそうなので同じにしておくのが良さそうです。
電話発信GA4
![電話発信GA4](/static/e0d84e8e25810d18904ba18a9f1d2da9/c08c5/entry474-20.jpg)
![電話発信GA4](/static/8a647d9c59b8bf16ec44d5907980aad4/c08c5/entry474-21.jpg)
![entry474 28](/static/4095d6f3204399e71f356937f0e6bbf9/b4294/entry474-28.jpg)
まとめ・GA4とタグマネージャーの連携はカンタン
やってみるとタグマネージャーとGA4の連携はユニバーサルアナリティクスよりもカンタンでした。
タグマネージャーでのデバック方法の記事もあります。よろしければ参考に!
私のサイトはついでにHotjar、Adもタグマネから追加しました。一元管理サイコー。
![かみーゆ](/static/069bc468dd96c224d5c16811d36dce60/dd515/camille-pic.jpg)
こんなにラクならさっさと導入すればよかった。。。
皆さんのSEOライフの一助となれば幸いです。
最後までお読みいただきありがとうございました。