🐡

【1日1zenn - day4, 5】モーダル表示秒数をGA4のカスタムイベントで計測する方法

2024/12/13に公開

1日1zenn用の雑アウトプットです

はじめに

プロダクト内でとある訴求を検証したく、「そもそも訴求が読まれているか・認識されているか」を計測するために表示秒数を取得したい。
表示秒数があまりにも短い場合、そもそも認識されていないので別の見せ方を考えるか、もっと多くの面で訴求するかなどの根本部分の意思決定に役立ちます。逆に表示秒数は1秒以上あるがアクションを喚起できていない場合、訴求内容の磨き込みに移れます。

しかしざっくり調べているところ、表示秒数は簡単には送れない雰囲気。
じゃあどう実装する？

方針

セッションごとのサイト全体の滞在時間はカスタムイベントじゃなくても取得できてそう
パスとかが変わらないモーダルの場合、モーダル表示イベントが発火した時のタイムスタンプと、モーダルが閉じられた時のタイムスタンプを取得する流れになりそう

そもそもGA4について

もっと調べる余地はありそうですが、一旦。

GA4はevent_nameとevent_paramsをベースにし、event_paramsの内訳として色々ネストさせることで一気に複数のデータを送れたりする
- 分析をする時のことも考えて、カテゴリーと値の2つを送りたい
そもそも送る上で、データレイヤーという概念が大事そう
- https://developers.google.com/tag-platform/tag-manager/datalayer?hl=ja
  - データレイヤーという空の配列みたいなのに追加(push)するイメージ

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
 'event': 'Pageview',
 'pagePath': 'https://www.googleanalytics.dev/pancakes',
 'pageTitle': 'Pancake Event Signup',
 'visitorType': 'customer'
});
</script>

一旦書き始めてみよう。

実装

export const sendOpenModalEvent = () => {
  window.dataLayer = window.dataLayer || []

  dataLayer.push({
    'event': eventName,
    'eventCategory': eventCategory,
    'eventData': eventData,
  })
}

こうすると、
プロパティ 'dataLayer' は型 'Window & typeof globalThis' に存在しません。ts(2339)
と怒られた。
Windowを拡張しなきゃだめっぽい。

ググると以下の記事が出てきた

WindowにdataLayerを追加しなきゃダメっぽいね。

hooks.ts

daclare const window.Window & {
  dataLayer: any // 多分配列を受け入れる系にした方が良さそうな雰囲気はある
}

export const sendOpenModalEvent = () => {
  window.dataLayer = window.dataLayer || []

  window.dataLayer.push({
    'event': eventName,
    'eventCategory': eventCategory,
    'eventData': eventData,
  })
}

// modalを開く処理で上記を呼び出す
export const useHandleOpenModal = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const showModal = useCallback(() => {
    setIsOpen(true)
    const utcDate = new Date()
    const jscDate = new Date(utcDate.getTime() + 9 * 60 * 60 * 1000) //日本時間にする
    const timestamp = jscDate.toIOSString()
    sendOpenModalEvent(timestamp)
  })

  useEffect(() => {
    showModal()
  }, showModal)

  return { showModal, isOpen }
}

index.tsx

const { isOpen, showModal } = useHandleOpenModal()
showModal

プロダクトコードとちょっと変えた+私物PCで書いているので実際にmodalが開かれるかは確認してないけど、
プロダクトコードの方ではざっくり上記みたいな処理で実際に時間が送付できてた。のでこういうので合ってるっぽい。
またwindow.dataLayer.pushとかをいちいち書くのはイベントが増えると非効率なので、随時抽象メソッド化して行くのだろう。

感想

GA4の仕組み的な部分を少し深堀りできたが、自分でゼロからプロダクトを作った場合に正常に送れるレベルで作れるかはわからないし、抽象化して保守性上げるのもゼロから自分でだとまだ無理そう。
けど、昔LPとかでうまくCV計測できないみたいなのに悩まされた時もあったが、今だとあれ系一瞬で解決できるんだろうな。できるのかな。できるといいな。という気持ち。
この一週間ギリ1日1zenn続けているが、おかげでエラーの意味がわかったり、何も見ないで書けたり、基礎力が上がってる感じはめっちゃする。まだまだ足りないけど、やっていこう。
そもそもアローで書くのとそうじゃないのととかもフワッとした理解だったレベルだが、この一週間でそこいらへんもだいぶ慣れたとか。
個人的に今まで広告運用で培ったPDCA力をプロダクトに横展開して行きたいと思うので、データ設計に強くなりたいし、実装の速さも伸ばしていきたい。要は新しく検証が必要なプロダクトにはとりあえず呼ばれて、リリース後に判断が必要な仮説とその材料になるデータの取り方を設計した上で1日で実装し終えるしリリース後には分析やるみたいな人間になっておきたい。
となると、今はSQL書くのは最低限できるが、もっと可視化みたいなのにも強くなる必要がありそう、とか。

はじめに

方針

そもそもGA4について

実装

感想

Discussion