GA4でユーザー動向を詳しく調べる

Top›devilsworkshop›

Access Log Event Details Record In Analytics

GA4のカスタム定義で、クリック場所、滞在時間やスクロール量などイベントの詳細をログに記録する

| 2023/06/30

開発発端

GA4にバージョンアップして困ったこと

GA4に移行するとevent_label,event_categoryなどのイベント詳細が取得できなくなった
GA4へバージョンアップするといきなりイベントの詳細が取得できなくなりました。
普通の構成のサイトだとそれほど気になりませんが、シングルページやLPだと結構重要です。
そこで前のバージョンと同じように取得する方法を調べてみました。
下記の記事『事前準備』の1～2は過去記事『どのくらいクリックされたか調べる』と内容的に重複していますので、すでにお読みであれば飛ばしても問題ないです。

イベント詳細を取得してできること

ユーザーイベントをGoogleアナリティクスへ登録し、詳細を調べる
イベント詳細の取得方法を解説する前にイベント詳細の取得で何が可能になるかを説明します。
Googleアナリティクスのイベントはカスタマイズすることができ、javascriptのユーザーイベントを取得することが可能になります。
たとえば、クリック。これを各種ボタンやリンクへ設置することでどこがクリックされたか調べることができるようになります。
スクロール。ページがどのくらいの距離をスクロールされたか調べることが可能になります。
タイマー。タイマーを設置することでユーザーが最低何時間そのページへとどまっていたかを調べることが可能になります。
当サイトでは上記の3っつを設置していますが、他にもマウスの軌道を調べるとUIのユーザビリティ度などが可能になります。

事前準備

事前準備は三つ必要

1. まず要素へ必要なパラメータを記載したHTMLを準備
まず目的のボタンなりリンク要素へ、取得したいパラメータを記述します。
サンプルとしてこのサイトのTOPページのスライダー部分のリンク要素のコードをお見せします。
wordpressだとこの部分はPHPで構築しますが、もちろん手書きでも問題ありません。
当サイトではパラメータを三つに分けています。
1.カテゴリー[：イベントが発生した場所、ページのどのエリアのボタンかなど(下記コードdata-c)
2.アクション：どういったタイプのイベントで発動したか。クリックか、スクロールか、時間かなど。(下記コードdata-a)
3.レベル：TOPから問合せへのページ遷移など、具体的な補足内容。(下記コードdata-l)
を記載しています。
最初はパラメータを3っつに小分けして使っていましたが、使っているうちに一つにまとめたパラメータ一個だけの方が効率が良いのでは？と感じています。
```

<a 
	data-c="[ blowaway_the_hackers ]TOPスライダーリンク" 
	data-a="innerPageTransition" 
	data-l="top -> blowaway_the_hackers" 
	href="https://studio-happyvalley.com/wp/webhealer/blowaway_the_hackers/" 
	class="display">
	<em>サイト改ざん被害もますます増加<br>怪しいアクセスも増えてきたぞ。</em>
</a>
```
2. 次にそれぞれの値を取得するためjavascriptを記述します。
基本はバージョン3と同じくgtagへパラメータを送信する形で作ります。クリックイベントに関しては普通にイベントを記載すればよいかと思います。それ以外のサンプルをいかに記載。

例えば、滞在時間を調べる場合は下記のように1分おきにイベントを発生するようし、gtagへページスラッグや経過時間などのパラメータを送るようにします。
```
let num= 0;
const pageid= document.querySelector('body').id;
setStaytime();
function setStaytime(){
	const action_name= 'stayIn';
	if(num>0){
		gtag('event', action_name, {
			'stay_type': pageid + '_stay'+num, 
			'stay_place': pageid, 
			'value': 1
		}
	);}
	num++;
	setTimeout(() => {setStaytime()}, 60*1000 );
}
```

スクロール値を調べる場合は、ブラウザの天地分の高さの倍数を超えるたびにイベントが発生するようなスクリプトを記述します。
下記のようなサンプル。

const item= document.querySelector('body');
const gaH= I.wH-100; let arr=[];
function setScrollOn(e){
	const H= -1*item.getBoundingClientRect().top + 100; //
	arr.push( i.latestCount);
	i.max = Math.max(...arr) || 0;
	i.scrollCount= Math.ceil(H/gaH);
	//console.log('H:  '+ i.scrollCount);
	if(i.scrollCount > i.max && i.scrollCount > i.latestCount) setCountGa(i);
	i.latestCount= i.scrollCount;
}
window.addEventListener('scroll', setScrollOn, i.passive);

クリック関連は、どこのボタンか、何のためのボタンかなどをパラメータで設定します。
また、パラメータ値の名前は『top->contact | transfer』などのようにひとまとめに一か所に記載した方が後々便利です。
また、下記は詳細画像を表示させた場合のパラメータの設定です。
```
function setExpImg(e){
	const expImg= e.currentTarget.querySelector('img').src;
	const action= e.currentTarget.dataset.a|| 'popup';
	const category= e.currentTarget.dataset.c || 'expImg';
	const label= e.currentTarget.dataset.l|| 'inCreation';
	gtag('event', action,{
		'event_category': category,
		'event_label': label,
		'value': 1
	});
　　/* 以下省略 */
```
3. 最後にアナリティクスの管理画面でカスタム定義を設定します。
対象のサイトの管理画面にアクセスします。
左側一番下の歯車マークが管理画面なのでクリックします。

Googleのカスタム定義の詳しい解説：https://support.google.com/analytics/answer/2709829?hl=ja#zippy=%2C%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E5%86%85%E5%AE%B9

結果

イベントの表示画面で確認します

実際にデータとして取得できているか確認します。
レポート→エンゲージメント→イベントで取得したイベント一覧を確認できます。
例えば、スクロール値の場合、ページ名とスクロール値を一緒に取得できます。

TOPページのスライダー部分の設定値『[ generate_events_at_regular_intervals ]TOPスライダーリンク』がgoogleアナリティクスのイベント表示ページで下記の様に表示されます。
1. TOPスライダーの表示サンプル
2. スクロール量の表示サンプル