＜本記事のターゲット層＞
- カスタムイベントを作りたい人
- カスタムHTMLを自作したい人
- サイト解析にこだわりたい人
前回記事：
Googleタグマネージャーのタグの発火順序
Googleタグマネージャーのデバッグ方法
1. はじめに
2回に渡ってGoogleタグマネージャーについて記事を書かせて頂きましたが、今回はカスタムイベントを作りたい。しかし、このイベントをカスタムHTMLから発火させたいというこだわりがある人向けに解説をいたします。
こういう要望はどれくらいあるか分かりませんが、今回解説する理由は、カスタムHTMLからカスタムイベントを発行することが意外と難しかったからです。gtag関数を使えばよいだろうことはわかりましたが、それをどうすればよいか試してみると意外と見落としがちなポイントがあることに気が付きました。
そして、同じように詰まる人がいるのではないかと思い、この記事を書く価値があると考えました。
しかし、長々と説明するほどでもないので簡潔な内容になります。
2. 何をすればよいか
まず、理解しておくこととしては、GoogleタグマネージャーのカスタムHTMLでgtag関数を使うということは、「GTMタグとGA4タグの両方必要である」ということです
つまり、以下のような形で予めサイトに実装が必要になります。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>サイト</title>
<!-- gtag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YYYYYYYYYY"></script>
<!-- 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-XXXXXXXX');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) --> <div id="app">
GTMタグの他、gtagコメントの下にgtag関数を使うためのURLが配置されているのがお分かり頂けるでしょうか。
GA4タグの場合は以下のコードも必要になりますが、そちらはGoogleタグマネージャーのカスタムHTMLで配信します。
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YYYYYYYYYY');
</script>
3. カスタムイベントの発火方法
GA4イベントによる発火
以前の記事でも触れましたが、通常、カスタムイベントはこちらの方法で発火することが多いと思います。タグの種類でGoogle アナリティクス:GA4 イベントを選択し、イベント名にカスタムイベント名（任意の名称）を指定する方法です。
GA4で解析したい任意のパラメーターを追加したり、配信トリガーを工夫することである程度のことはカバーできると思います。また、配信トリガーにカスタムイベントを指定することで、発火タイミングはさらに柔軟にできることでしょう。試したことはないですが、サイト側のスクリプトでdataLayerのeventに任意のカスタムイベントを登録するようにすることもできるのではないでしょうか。
eventの登録についてはGoogleタグマネージャーのタグの発火順序をご参照ください。
gtag関数による発火
gtag関数を使う前に必ず実行されていなければいけない処理があります。
前述しましたが、以下のgtag関数初期化処理です。
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YYYYYYYYYY', { 'user_id': null });
</script>
こちらを初期化処理としてカスタムHTMLで真っ先に処理を実行しておく必要があります。
gtag関数を使うカスタムHTMLは、このgtag関数初期化処理とは別にしても大丈夫です。
優先順位について分からない方は、Googleタグマネージャーのタグの発火順序をご参照ください。
gtag関数は、event、イベント名、パラメーター(JSON形式)の順番で指定をします。
<script>
gtag('event', 'test_event', {
'app_name': 'myAppName',
'screen_name': 'Home'
});
</script>
以下のようにパラメーターを省略することも可能です。
<script>
gtag('event', 'test_event');
</script>
なお、GA4の推奨イベントの定義でカスタムイベントを発火させた場合、GA4の仕組みでサポートされているため、特別なレポートを作成することなく解析に使うことができます。
アプリケーション解析やシステム利用者の解析をする場合は、推奨イベント以外のカスタムイベントを作ることも考えられますね。例えば、新たに作成した機能の利用者を解析したい場合や、デザインのA/Bテストを実施したい場合などです。
4. まとめ
GoogleタグマネージャーでカスタムHTMLでgtag関数を使って、カスタムイベントを送信する方法について解説しましたがいかがでしたでしょうか。
最低限やらなければいけないことさえわかれば難しくないことでしょう。しかし、分からないと中々うまくいかないのではないでしょうか。
もし、複雑な条件でイベントを送信したい場合には知っておいたほうがよいことだと思います。