Ateam Brides Inc. Advent Calendar 2021の8日目は
株式会社エイチームブライズ エンジニア
新卒2年目になった@takaHALが担当します！
はじめに
前回のServerSide GTMをデプロイした後の続きになります。
GA4ではなくて
コンバージョンタグなどを利用したい方は以下の記事がおすすめです。
これは何?
https://qiita.com/takaHAL/items/38781b4f7d3f022508f1
前回のServerSide GTMをデプロイした後の続きになります。
- 今回作成するウェブコンテナとデプロイしたサーバコンテナを利用してGA4の接続確認
- ウェブコンテナを使わずにサイトに直接gtagを入れて、サーバコンテナでGA4の接続確認
上記２パターンを書きます。
利用するもの
-
Google Tag Manager
-
Google Analytics
-
Netlify
- これはサイトのテストのためだけなのでなくても可
-
ServerSide GTM
- まだない方は前回作成したので作成お願いします
- https://qiita.com/takaHAL/items/38781b4f7d3f022508f1
サクッとサイトを用意する
ReactでもSvelteでもいいのですが今回はただ試したいだけなのでindex.htmlを作ってNetlifyにデプロイしてそれを利用します。
index.htmlが入ったフォルダをドラッグ&ドロップするだけでいいですからね
やり方に関しては下記を参考にするといいかもです。
<html>
<head>
</head>
<body>
<h1>サーバーサイドGTMテスト君</h1>
</body>
</html>
人生でこんなに質素なhtmlファイルを書いたのは何気に初めてですw
というわけでサイトを用意できたのでGA4とか設定していきますか
GA4の準備
プロパティを作成
管理からプロパティ作成画面へ移ります
詳細オプションはいじらずに作成していただければOKです。
データストリームを作成
これでGA側の設定は終わりです。測定IDに関してはあとで使うので控えておきましょう。
ウェブコンテナを利用して検証する
1. ウェブコンテナをGTMに用意する
コンテナを作成
作成が完了するとサイトに埋め込むスクリプトが出てくるのでhtmlに追記します。
スクリプトを埋め込む
取得したスクリプトをheadとbodyの下に添付してください
<html>
<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-EXAMPLE');
</script> <!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-EXAMPLE" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<h1>サーバーサイドGTMテスト君</h1>
</body>
</html>
2. サーバー側GTMの設定
前回作成したサーバーのGTMで作業をします。
クライアントにウェブコンテナを追加する
Google タグマネージャー ウェブコンテナを選択して、許可されたコンテナIDに先程作成したウェブコンテナのIDを入れて保存します。
GA4のタグを追加する
クライアントの設定
クライアントのGA4で有効化の条件で以下にチェックを入れる
- デフォルトのGA4パス
- 特定ID向けのデフォルトのgtag.jsパス
特定ID向けのデフォルトのgtag.jsパスには作成したGA4の測定IDを入れる
タグの設定
タグから新規作成でGoogle アナリティクス: GA4を選択し、GA4の設定時に生成された測定IDを設定します
トリガーの選択でAll Pagesを選択して保存でOKです
このまま公開したら完了です。
3. ウェブコンテナからGA4のタグを配信する設定をする
ここからは作成したウェブコンテナに設定を移ります
タグの作成から Google アナリティクス: GA4設定を選択し、今回作ったGA4の測定IDと前回GAEにデプロイしたServerSide GTMのURLを設定します。
トリガーをAll Pagesに設定して保存でOKです。
このまま公開したら完了です。
4. GA4の確認
- サイトにアクセスしてリアルタイムでユーザーが表示されるか確認する
- GTMのプレビューでも発火を確認する
ウェブコンテナを使用しない方はこちら
サイトのスクリプトを設置する
作成したデータストリームから新しいタグを追加で表示させるスクリプトを設置する
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-EXAMPLE');
</script>
</head>
<body>
<h1>サーバーサイドGTMテスト君</h1>
</body>
</html>
この状態から送信先をサーバーコンテナに変えます
こちらでデプロイしたURLを利用します。
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
- gtag('config', 'G-EXAMPLE');
+ gtag('config', 'G-EXAMPLE', {
transport_url: 'デプロイしたURL',
});
</script>
</head>
<body>
<h1>サーバーサイドGTMテスト君</h1>
</body>
</html>
この状態でNetlifyにデプロイします。
サーバー側GTMの設定をする
下記の内容を設定します。
GA4の確認
プレビューに関してはサーバーGTMでプレビューをつけてtagassistantで検証サイトを確認すると
サーバーGTMのプレビュー画面で確認できます
GA4のリアルタイムでも確認できればOKです
参考サイト
最後に
GA周りなどは知らないことたくさんあるのでこっちの方がいいよなどのアドバイスがあれば是非コメントで頂きたいです。
GA4接続確認も結構簡単にいけました。
コンバージョンタグに関しては@Shuniが検証してくれたのでもし興味がある方は以下の記事もよろしくお願いします。
GTMとかGAとかは知識としてはあるけど実際に触るということはほぼありませんでしたが、今回のアドベントカレンダーをきっかけに触ることができたので楽しかったです。やっぱり新しいものを触るのは楽しいですね！！
今度は、FacebookコンバージョンAPIとか検証してみたいです。
Ateam Brides Inc. Advent Calendar 2021の9日目は、@oekazumaがお送りします！！どんなネタを用意してくるのか楽しみです！！