いざ、Googleタグゲートウェイを実装！悪戦苦闘した体験記
Googleタグゲートウェイの実装は重要だとわかってましたが、「Cloudflare」「CDN」と聞いたことがない単語が並んでいたため、実はかなり腰が重くなっていました。
しかし、「ここで挑戦しなかったら癖になってしまう」と自分を奮いたたせ、Yuwai株式会社さんのこちらのブログを参考にして、できるだけ頑張ってみようと思いました。
本ブログでは、Googleタグゲートウェイの実装に悪戦苦闘した経緯をそのまま記載しています。
実装方法だけ知りたい方は、見出しに「*」がついているセクションだけお読みください。
※「’」がついているセクションは間違った設定を行っていますので、真似しないようご注意ください。
また、この記事では、Googleタグゲートウェイの実装に付随した下記の点についても、自分が理解できた範囲のことを解説しています。
- エックスサーバーとCloudflareの連携方法
- Googleタグの組み合わせ時の基礎知識
私自身、非エンジニアでありGoogleタグにそこまで詳しいわけではないため、認識が間違っている部分がありましたらご指摘いただけると幸いです。
作業は下記の順番で行いました。
- Cloudflareのアカウント作成
- エックスサーバーのDNSをCloudflareに切り替える
- Googleタグの統合（Cloudflareは1つのGoogleタグIDとしか紐付けられないため）
- GoogleタグとCloudflareの接続
- 検証
それでは、まずはCloudflareのアカウント作成からです。
目次
Cloudflareのアカウント作成*
まずは、Cloudflareのアカウント作成を行いました（https://www.cloudflare.com/ja-jp/）。無料です。
Googleアカウントと連携させて、アカウント作成ができるので、非常に簡単です。
もしかして、これでGoogleタグゲートウェイ実装できるのでは？’
と思い、とりあえずGoogleタグマネージャーの管理画面から実装を試みました（後から振り返ると自分は一体何をしているんだと思います笑）。
- 管理＞Googleタグゲートウェイ の順番にクリック
- 下記画像の「続行」をクリック
- 「Cloudflareにログイン」をクリック
- 「許可する」をクリック
結果は、、
そりゃできませんよね。これでできるならもう全ユーザー実装済みのはずです。
やはり、Yawaiさんのブログ通り進めていかなければうまくいきません。
オリジナルのやり方でやろうとするからうまくいかないんですよね。
このポストが身に沁みます、、
まずは、検索したり、Geminiに協力してもらったりして、ドメインのネームサーバーの設定を変更します。
エックスサーバーのDNSレコードをCloudflare指定のものに切り替える’
私はWEBサイトのサーバーとしてエックスサーバーを利用しているため、エックスサーバーのネームサーバーの追加設定を行います（これも後から振り返ると自分は一体何をしているんだ、、と思います、、笑）。
どの方法が正しいかわからなかったので、とりあえずこの方法を試してみます。
- Cloudflareの管理画面で利用するドメインを入力
- 「続く」をクリック
- 割り当てられたDNSレコードをコピー
- 「DNSレコード追加」タブをクリック
- 「ホスト名」はメインドメインを利用する場合は空白でOK
- 「種別」をNSに変更する
- 「内容」に先ほどコピーした文字列をペースト
- 「確認画面へ進む」をクリック
- 次の画面で「追加する」をクリック
以上の設定をCloudflareのDNSレコード2つ分で同じことを行います。
次に、Cloudflareの管理画面の指示通り他のDNSレコードを削除します。
- 該当するDNSレコードの「削除」をクリック
- 「削除する」をクリック
以上の設定をCloudflareから指示のあった分行います。
CloudflareのDNSレコードの追加と既存のエックスサーバーのDNSレコードの削除によって、DNSサーバーはCloudflareになったはずです。
DNSサーバーの変更が反映されるまでに最大で24時間かかるようなので、少し気長に待ちます。
24時間経過してもアクティブにもならないしメールも届かない’
24時間以上待てど暮らせど、Cloudflareの管理画面を見てもアクティブにならないですし、メールでのお知らせも来ませんでした。
「何かがおかしいのかな、、」と思い、Cloudflareとエックスサーバーの接続方法を解説しているブログがないか探しました。
運命のブログに出会う*
20分ほど色々と検索してみたところ運命の出会いをします。
それが、こちらのブログです。
Xserver Domainの管理画面の方から、ネームサーバーの設定変更を行いました。
引用させていただくと、こちらの設定方法です。
[XServer Domain]にログインし[ネームサーバ設定]を開きます。
■[その他のサービスを利用する]に✓を付けCloudflareのネームサーバをコピーして貼り付けます。
■[確認]ボタンを挿入し、変更を確定させます。
すると、、、
数分でメールが届きましたぁ！！！うれしい！！！！
ホームNW研究所さんにはなんとお礼を言って良いか、、本当にありがとうございました。
この場を借りて感謝申し上げます。
この記事がホームNW研究所さんに届くとうれしいです！！！！
ただ、私が最初に行った、DNSレコードの設定はなんだったのか、、
よくわからなかったので、追加したDNSレコードを全て削除、削除したDNSレコードを全て追加をして、元の状態に戻しました。
このように、Cloudflareの設定が無事完了した(？)ので、ここからは冒頭のYuwaiさんのブログを参考に設定を進めていきます。
DNSレコードとネームサーバーの違いは追々キャッチアップしようと思いました。
Googleタグを組み合わせて複数のサービスをリンクさせる*
Google広告、GTM、GA4はそれぞれで別のIDのタグが発行されるので、これらを組み合わせることで、各サービス間でデータが連携されるようにします。
この設定をする際には、アユダンテさんのブログを参考にしました。
Google広告を中心にGoogleタグの利用を考えていたため、Google広告管理画面からGoogleタグの統合を行いました。
- ツール＞データマネージャー の順番にクリックして「Googleタグ」の「管理」をクリックします。
- 下記の場所をクリック
- 「別のタグを組み合わせる」をクリック
- 「統合するGoogleタグを選択」をクリック
- 統合したいタグをクリックする
次に、どのタグの設定を使用するか選択します。
ここで私は悩みましたが、GA4のタグIDの方のGoogleタグの設定を使用することを選択しました。
GA4のタグの設定で内部トラフィックの定義を設定しており、Google広告、Googleタグマネージャーのタグでは特に何も設定していなかったためです。
管理画面にあまり詳細が記載されていなかったですが、ここでは、どのタグの設定をすべてのタグの設定に反映させるかを選択するのだと認識しました。
であれば、GA4でしかタグの設定は行なっていませんでしたので、使用するのはGA4のタグで良いと判断しました。
補足として、タグの設定とは何かについて少し説明します。
「タグの設定」に該当する設定は、下記画像赤枠部分で行ったものと考えて差し支えないと思います。
画像はGoogle広告の画面ですが、Googleタグマネージャー、GA4それぞれで同様の画面があります。
タグを統合する際には、選択したGoogleタグIDのタグで行った設定が、統合したすべてのタグの設定に反映されます（上書きされるようなイメージかなと思います）。
統合以降は、いずれかのツールのタグの設定を行えば、他のすべてのツールのタグにもその設定が反映されるようになり管理が楽になるようです。
これで、Googleタグの統合が完了しました。
次にCloudflareとGoogleタグを接続できれば設定完了です！！
CloudflareとGoogleタグを接続する*
これもYuwaiさんのブログを参考に設定します。
まずは、Googleタグマネージャーにログインします。
- Googleタグのタブをクリック＞今回利用するタグ名をクリック
- 管理＞Googleタグゲートウェイ の順番にクリック
- 測定パスに「metrics」と記載する（パスの文字列はなんでもOKですが、わかりやすいものが良さそうです）
- Cloudflareにログインをクリック
- 「許可する」をクリック
- 先ほどのGoogleタグゲートウィの設定画面に戻るので、「ドメインを選択」をクリック
・該当のドメインを選択＞完了 をクリック
できた、、、のか、、？
ちょっとわかりませんが、「設定を完了」をクリックします。
できたっぽいです！！
「完了」をクリックします。
最後にCloudflare側の設定を確認します。
Cloudflareの設定を確認する*
- Googleタグマネージャー＞Googleタグのタブ＞管理＞Googleタグゲートウェイ＞右上の設定＞Cloudflareで編集をクリック
- 構成の更新をクリック
- GoogleタグIDと測定パスが意図したものになっているか確認する
- タグを設定するをオフに変更（オフに変更する理由はYuwaiさんのブログを参考にしてください)
- 保存をクリックする
これですべての設定作業が完了です！！
念の為、Googleタグアシスタントを使って、データの送信先をチェックしていきます。
データの送信先が指定したものになっているか確認する*
これもYuwaiさんのブログを参考に確認します。
タグアシスタントの拡張機能を使って調べてみたところ、、
このようになっていました。
Yuwaiさんのブログでは下記のような記載がありましたので、設定が正しいことがわかります。
設定が正しければ、GA4は /測定パスに設定した文字列/ag/g/c といったURLに送信されているはずです。ドメインの表示が無いので、これは自社ドメイン（ファーストパーティドメイン）の中がデータの送信先となっていることが分かります。
実際はCloudflare によって、その URL から Google の計測サーバにデータが転送されてるので、この URL 表記は正しいです。
以上で一連の設定作業は終了になります。
まとめ
ここまでお読みいただきありがとうございます。
非常に長い道のりでした。
設定が完了するまでに、10時間くらい時間がかかりました。。
Googleタグに詳しい方やエンジニアの方であれば、もっと早く設定が完了できたのではないかと思います。
ただ、紆余曲折、悪戦苦闘したおかげで、サーバーの知識やGoogleタグに関する理解がとても深まりました。
決して無駄な時間ではなかったと断言できます。
最後に今回の一連の作業で理解したことをまとめます。
- Yuwaiさんのブログにとても助けられた。自分も誰かを助けられるようなブログが書けるようになりたい。
- 最初は難しくて自分にはできないことと思っても、やり始めると意外と楽しんでできることもあるので、食わず嫌いせずにやってみることが大切。
- うまくいっている人がいないかを調べ、その人のやり方を徹底的に真似をする。
- Googleタグの統合はとても便利
お読みいただきありがとうございました！とてもうれしいです。もしご意見、ご感想があれば、こちらからお問い合わせください。