【Google Analytics4】Googleタグマネージャーでのカスタムイベント計測・データレイヤーへの変数追加について
2023年7月をもってユニバーサルアナリティクス(UA)での新規データの計測処理が停止された事に伴い、Googleアナリティクス4(GA4)への移行作業を行いました。
Googleタグマネージャー(GTM)を含めて、効率的なタグ管理やカスタムイベントの実装方法について見直す良い機会になりましたので、実際に作業した事を整理して備忘録代わりに書いていこうと思います。
では今回の本題です。
実現したい事
<audio>タグで埋め込まれている音声ファイルの再生回数を計測する。
付随して叶えたい事
- 後々の管理運用を簡便化するため、実装はGTM上で完結させる事。
- どのページのどの.mp3ファイルが再生されたのか判別できるよう、ページパスとファイルネームを変数で取得する事。
GTM上で実装を完結させる事の利点
ソースコードを直接修正せず、GTM上で実装を完結させることには、以下のようなメリットがあります。
まず、GTM上で取得しているデータを一覧化できるので、管理運用がしやすい点。
もう1つは、組織体制的にどうしても発生するタスクを削減できる点です。
例えば、
自社ECサイトの運用保守業務とそのサイト上で実施するマーケティング業務を
異なる部署が担っているような事業会社の場合はどうでしょうか。
新施策実施のために取得データを追加したい時。勿論別の部署が管理しているソースコードを勝手に触るのはご法度なので、要件を整理し担当エンジニアに実装を依頼、作業完了報告が来たら検証して…といったタスクの発生が想像されます。
また、Webサイトの運用保守をアウトソーシングしているケースでは、より多くのリードタイムがかかりそうです。
GTMとGAの編集権限を保有している事が前提ですが、ソースコードの管理権限を持っていなくてもGTMとGAで実装を完結させる事で、施策実施までにかかる工数とコミュニケーションコストを削減できる利点があると思います。
実装ステップ
実現したいデータ取得の流れはこんな感じです。
実装工程は大きく分けて3つになります。
Step1. ファイルが再生された時に、変数をデータレイヤーに送信する。
Step2. 受け取った変数をGTMが処理できるよう、GTMで変数を定義する。
Step3. GTMのタグとトリガー設定で、GA4に送信するイベント名とパラメータ、タグ発火タイミングを設定する。
Step1：ファイルが再生された時に、指定した変数をGTMのデータレイヤーに送信する。
Step1は下記順で進めます。
- ファイル再生時に指定した値をデータレイヤーに送信するJavascriptを作成。
- 作成したscriptをGTMのカスタムHTMLに設定する。
1. ファイル再生時に指定した値を送信するJavascriptを作成
各ページに埋め込まれている<audio>タグです。
<div class="sound">
<h2 class="h2_sound">hogehoge radio#01</h2>
<audio controls controlslist="nodownload" src="sound/yyyymmdd_00.mp3"></audio>
</div>
プレーヤーの再生ボタンのクリックはGA4の自動取得イベントには含まれていませんので、カスタムイベントとして設定します。
mp3ファイルが再生されると
下記3点をデータレイヤーに送信するscriptを作成します。
'event': 'click_audio_play',
'event_category': {{ページパス}} + 'mu_sound',
'event_label': {{mp3のfilename}}
scriptの全容はこちら。
<script>
function getAudioFileName(path) {
// ファイル名のみ取得
var ary_url = path.split("/");
var file_name = ary_url[ary_url.length - 1]
// ファイル名から拡張子を除く
var ary_file = file_name.split(".");
var base_name = ary_file[0];
return base_name;
};
function getPagePath() {
// 現在のページパスを取得
var path = location.pathname;
// ページパスからスラッシュを除く
var ary_path_name = path.split("/");
// パス文字列に応じてpath_nameを生成
var path_name_1 = ary_path_name[ary_path_name.length - 2];
var path_name_2 = ary_path_name[ary_path_name.length - 1];
if(path_name_2 == ""){
var path_name = path_name_1 + "_";
}else{
// htmlファイルが"index.shtml"以外のファイル名の場合
var path_name = path_name_1 + '/' + path_name_2 + '_';
};
return path_name;
};
<!-- audio 再生ボタンのクリック -->
$(
function() {
document.querySelectorAll('audio').forEach(
function(tag) {
tag.addEventListener('play', function() {
dataLayer.push({'event': 'click_audio_play', 'event_category': getPagePath() + 'sound', 'event_label': getAudioFileName(tag.src)});
});
});
}
);
</script>
↑のscriptについて
再生ボタンのクリック検知
<audio>タグではClickイベントがサポートされていないので、「再生が始まった」時に発生するplayイベントをフックにしています。
addEventListener()でplayイベントが発火されるたびにdataLayer.push()を実行させます。
addEventListener('play', function() {
dataLayer.push({
'event':hoge_event...
また、同一ページに複数のオーディオファイルが存在する場合もあるので、querySelectorAll().forEach...で同一htmlの全てのaudio要素を指定しています。
注意点
<!-- audio 再生ボタンのクリック -->$(function() {... でjQueryを指定しているので、jQueryライブラリ読み込み行以降に書きます。DOMの読み込みが終わってから関数を実行するためです。
2. 作成したscriptをGTMのカスタムHTMLに設定する。
計測対象ページが多い場合、作成したscriptを全てのhtmlに直書きするのは骨が折れるので、GTMでカスタムHTMLタグに先程のscriptを設定、必要なページで配信します。
Step2：受け取った変数をGTMが処理できるよう、GTM上で変数を定義する。
先程のscriptから送信されてくる値は↓です。
'event': 'click_audio_play',
'event_category': {{ページパス}} + 'mu_sound',
'event_label': {{mp3のfilename}}
-
'event'はGTMの組み込み変数に用意されているEventで受けます。（後ほどトリガーとして利用します） -
'event_category'と'event_label'は新規でユーザー定義変数を作成して受け取ります。
Step3：GTMのタグとトリガー設定で、GA4に送信するイベント名とパラメータ、タグ発火タイミングを設定する。
タグ設定
GAに送信するイベント名とイベントパラメータを設定します。
イベント名
任意で決められますが、データレイヤーに送信している 'event': 'click_audio_play'と同じにしています。
イベントパラメータ
「データレイヤーの変数」に指定した文字列と同様で良いと思います。値にはStep2で作成したユーザー定義変数を指定します。
トリガー設定
「'click_audio_play'というカスタムイベントがデータレイヤーにプッシュされたときに、タグを配信する」というトリガーを作成します。
最後に：GAのDebugViewで検証
GTMでタグを本番化したら、GAのDebugViewで設定したイベントとイベントパラメータが正しく飛んできているか検証します。
カスタムで取得したイベントパラメータを「レポート」と「探索」で利用する場合は、GA側のカスタムディメンションに設定しておきましょう。