@next/third-partiesのsendGAEventでカスタムイベントが送れない

前提

• Next.jsを利用している
• @next/third-partiesというライブラリでGooglaAnalyticsを使っている
• sendGAEventを使ってGAのカスタムイベントを発火させたい
• 2024/03/11時点の話

問題

• 公式ドキュメントに書いてある記載通りにsendGAEventを使っても、カスタムイベントがGooglaAnalyticsに送られない

公式ドキュメントに書いてあるsendGAEventの使い方

app/page.js

'use client'
 
import { sendGAEvent } from '@next/third-parties/google'
 
export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Send Event
      </button>
    </div>
  )
}

解決方法

• sendGAEventの引数の与え方を変える
• @next/third-partiesは^14.1.2-canary.7を利用する
  の二つをする必要がある

sendGAEventの引数の与え方

app/page.js

sendGAEvent('event', 'buttonClicked', { value: 'xyz' })

ちなみに{ value: 'xyz' }の部分は好きなパラメータを利用できる。
{ os: 'ios', item: 'apple'}のように自分が集めたいパラメータを複数与える形で問題ない。

要するにgtag.jsのgtag関数と同じように引数を与える必要があるということ。

@next/third-partiesは^14.1.2-canary.7を利用する

npm install @next/third-parties@14.1.2-canary.7

でcanary.7をインストールする

sendGAEventが現在進行形でバグの修正を行なっているらしく、canary.7版なら動いたという報告があった。
実際にそれを試したら、自分でも正常に動くことを確認した。

おわりに

Xでも個人開発について発信しています
→https://twitter.com/ObataGenta

超イケてるデジタルカードサービス、Tagffyのほうに色々なリンクをまとめてます。
https://tagffy.com/GentaObata/