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

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

まず目的のボタンなりリンク要素へ、取得したいパラメータを記述します。
サンプルとしてこのサイトの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>

基本はバージョン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
	});
　　/* 以下省略 */

対象のサイトの管理画面にアクセスします。
左側一番下の歯車マークが管理画面なのでクリックします。

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アナリティクスのイベント表示ページで下記の様に表示されます。