Google アナリティクスを使ってみる
ここではNext.jsからエクスポートした静的サイトを例にします。
pages/index.js など、全てのページで共通に含まれる部分で、下のようにHeadコンポーネントを使ってscriptタグを埋め込みます。
要は下の赤字部分の3行のscriptタグがHTMLのhead部分に含まれるようにすれば良いということですね。
export default function Home({ allPostsData }) {
return (
<Layout home>
<Head>
<title>{siteTitle}</title>
<script src="/__/firebase/7.14.2/firebase-app.js"></script>
<script src="/__/firebase/7.14.2/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
</Head>
<section className={utilStyles.headingMd}>
<p>[Your Self Introduction]</p>
</section>
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
<h2 className={utilStyles.headingLg}>Blog</h2>
<ul className={utilStyles.list}>
{allPostsData.map(({ id, date, title }) => (
<li className={utilStyles.listItem} key={id}>
<Link href="/posts/[id]" as={`/posts/${id}`}>
<a>{title}</a>
</Link>
</li>
))}
</ul>
</section>
</Layout>
);
}次に、下のドキュメントの通りにイベントを送信する必要があります。
イベントをロギングする
このために、「send-ga-event.js」 と 「use-send-screenview.js」という2つのファイルを作成しました。
send-ga-event.js
export function sendGAEvent(eventName, params) {
const firebase = window && window.firebase;
if (!firebase) return;
try {
firebase.analytics().logEvent(eventName, params);
} catch (error) {
console.error(error);
}
}use-send-screenview.js
import { useEffect } from 'react';
import { sendGAEvent } from './send-ga-event';export function useSendScreenView(screenName) {
return useEffect(() => {
const params = { screen_name: screenName };
sendGAEvent('screen_view', params);
}, []);
}上で定義したuseSendScreenView()という名前のフックを pages/index.jsから呼び出すことでAnalyticsにイベントを送信します。
pages/index.js
import { useSendScreenView } from '../utils/use-send-screenview';export default function Home({ allPostsData }) { useSendScreenView('home');return (
<Layout home>
<Head>
<title>{siteTitle}</title>
{process.env.NODE_ENV === 'production' && (
<>
<script src="/__/firebase/7.14.2/firebase-app.js"></script>
<script src="/__/firebase/7.14.2/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
</>
)}
</Head>
<section className={utilStyles.headingMd}>
<p>[Your Self Introduction]</p>
（以下省略...）
これらの変更を行ったあと、
npm run build && npm run export
firebase deploy
でデプロイしてサイトを更新します。
更新後のページを開くと、数秒でAnalyticsの画面にイベントが表示されるのが確認出来ます。
