初めまして、かねこです。
今回は最近業務でNextjsのプロジェクトにGA4でクリックイベントを計測できるようにしたので、
そのやり方を自分自身のメモがてら記事に残そうと思います。
NextjsのプロジェクトにGA4でクリックイベントを計測できるようするための設定について順に解説していきます。
GTMでの設定
1.変数の設定
GTMには事前に用意された「組み込み変数」というものがあります。
この変数を使うことでぺージURLやクリックされた要素の持つ情報を取得することができます。
GTMの管理画面にログインし、左側のメニューから「変数」＞「設定」を選択。
「クリック」カテゴリの「Click ID」にチェックを入れ、設定画面を閉じる。
※すでにチェックが入っている場合は操作は不要です。
※idに対して設定をするのではなく、classに対してイベントを設定したい場合は、「Click Classes」にチェックを入れるようにしてください。
2.トリガーの設定
GTMの管理画面の左側のメニューから「トリガー」＞「新規」を選択。
任意の「トリガー名」を入力する。
「トリガーの設定」を選択する。
「リンクのみ」を選択する。
「一部のリンククリック」にチェック。
計測条件に「Click ID」「等しい」「button_wrap」(該当のボタンのid名)を入力する。
※この時に設定するidはbutton要素がwrapされている場合はwrapしている側のidを指定する
<div id="buttton_wrap" onClick={() => console.log('clicked!')}>
<button id="buttton">Click!</button>
</div>
「保存」を選択する。
3.イベントタグの設定
GTMの管理画面の左側のメニューから「タグ」＞「新規」を選択。
任意の「タグ名」を入力する。
「タグの設定」を選択する。
おすすめのカテゴリにある「Googleアナリティクス」を選択する。
「Googleアナリティクス：GA4イベント」を選択する。
Googleアナリティクスの管理画面にログインする。
サイドバーの「管理」を選択する。
左側のメニューから「データ ストリーム」＞クリックイベントを設定する「データ ストリーム」を選択する。
ストリーム詳細内の「測定ID」をコピーする。
※測定IDは大文字の「G」から始まるものです。
GTMの管理画面に戻り、Googleアナリティクスの管理画面でコピーした「測定ID」を「測定ID」の項目に貼り付ける。
「イベント名」の項目には任意の名前を入力する。
「トリガー」を選択する。
2.トリガーの設定で作成したトリガーを選択する。
タグとトリガーの設定ができたら、「保存」をクリックする。
タグが追加できたら、「公開」をクリックする。
Next jsでの設定
NextjsのプロジェクトでGTMで管理しているイベントとGoogleアナリティクスのプロジェクトを紐づけるために下記の記述を追加する。
GTMの設定
/src/pages/_document.tsxの<Head>の中に以下の設定を追加。
GTMのIDにはGTMの管理画面の「GTM-」から始まるものを設定する。
<Head>
<script dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTMのID');`,
}} />
</Head>
GA4の設定
任意の場所にGA4の設定用のファイルを作成する。
私の場合は、/src/lib/gtag.tsという場所に作成しました。
※GA4_IDはenvファイルで定義しています。
GA4_IDは3.イベントタグの設定でGoogleアナリティクスの管理画面で確認した「測定ID」と同じものです。
/src/lib/gtag.ts
export const GA4_ID = process.env.GA4_ID || ''
export const pageview = (url: string) => {
if (GA4_ID === '') return
window.gtag('config', GA4_ID, {
page_path: url,
})
}
サイトのPV計測など全てのページ共通で計測するためにsrc/pages/_app.tsxを下記の様に実装する。
import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import * as gtag from 'lib/gtag'
import Script from 'next/script'
export default function App({ Component, pageProps }: AppProps) {
const router = useRouter()
useEffect(() => {
const handleRouterChange = (url: any) => {
gtag.pageview(url)
}
router.events.on('routeChangeComplete', handleRouterChange)
return () => {
router.events.off('routeChangeComplete', handleRouterChange)
}
}, [router.events])
return (
<>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA4_ID}`}
/>
<Script
id="gtag-init"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gtag.GA4_ID}');
`,
}}
/>
<Script type="text/javascript" src="https://app.spirinc.com/js/external/iframe.js" async />
<Component {...pageProps} />
</>
)
}
最後に
今回は、NextjsのプロジェクトにGA4でクリックイベントを計測できるようするための方法について紹介させていただきました。
今までアナリティクス周りの設定についてやったことがなかったので、今回はいい経験になりました。
今後もこういった自分の困りポイントだったり設定手順だったりを発信していけたらなと思います🐈
最後に、toraco株式会社ではエンジニアを積極採用中です。
フロントエンドエンジニア、バックエンドエンジニア、クラウドインフラエンジニアなど職種問わず、様々な技術領域にチャレンジできます。また、PM（プロジェクトマネージャー） や EM（エンジニアリングマネージャー）のキャリアパスも用意しています。
興味のある方は Wantedly,typeの募集をぜひ読んでください。
Discussion