今回はNext.jsでGoogle Analytics(GA)を導入する方法を紹介します！
例として、実装したときのコードも載せたので、参考にしていただけたら！
まず、気をつけるポイントを押さえておきましょう。特に今回は、Next.jsならではのポイントあげておきます。
実装箇所と環境変数の埋め込み箇所を注意しましょう。
Next.jsの特性上、環境変数を受け取れる場所が異なります。
主に以下の二つに注目する必要があると思います。
①サーバー(SSR)で動いている箇所
・getServerSideProps
・_document.tsx
②ブラウザで動いている箇所
・ページ内のコンポーネントなど
①は環境変数が受け取れ、process.env.XXXで参照できます。
②は基本的には環境変数が受け取れないです。ですが、②でも環境変数を使いたいなら、NEXT_PUBLIC_XXXとすると取得可能となります。
Scriptタグの動きに注意しましょう。
Next.jsのスクリプトタグのデフォルトの動きはブラウザで開かれた時に一回のみ走ります。
この動きを利用して、GA用のタグマネジャーのタグの埋め込みを発火させます。
ちなみに、この動きはスクリプトタグのstrategyというpropsで変更できます。
useEffectを使い、適切なタイミングでスクリプトの発火やdatalayerの操作をすることにも注意してください。
CSPを設定している場合は、GAのjsを受け入れるように許可をしなければならないことにも注意しましょう。
Next.jsのデフォルトだと、特にこの設定はしていないようですが、プロジェクトのセキュリティを考慮するなら、設定しておきましょう。
設定する場合は以下のようになります。
script-srcに対して、https://www.googletagmanager.comを許可。
connect-srcに対して、https://www.google-analytics.comを許可。
では、実際にコードを実装していきましょう！
_document.page.tsx
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
// 環境変数に応じてGAを発火させるか判断している
{isGoogleAnalyticsActive && (
<Script
id="gtag-base"
strategy="afterInteractive"
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+'>m_auth=${googleTagAuthId}>m_preview=${gtmPreview}>m_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${googleTagManagerId}');`, }}
/>
)}
</Head>
<body>
<Main />
<NextScript />
{isGoogleAnalyticsActive && (
<noscript
dangerouslySetInnerHTML={{
__html:`<iframe src="https://www.googletagmanager.com/ns.html?id=${googleTagManagerId}>m_auth=${googleTagAuthId}>m_preview=${gtmPreview}>m_cookies_win=x"
height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
}}
/>
)}
</body>
</Html>
);
}
}
export default MyDocument;
hooks/google-analytics.ts
// windowでdataLayerを有効にしたいので。
interface GATWindow extends Window {
dataLayer: Record<string, unknown>[];
}
declare const window: GATWindow;
export function addDataLayer(data: Record<string, unknown>) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(data);
// GAが有効になっていない環境ならdatalayerをコンソールログに出して確認する
if (!isGoogleAnalyticsActive) {
console.log('ga-dataLayer-local', window.dataLayer);
}
}
// トップページを開いたとき
export const useTopPageOpen = () => {
const user = useXXX();
useEffect(() => {
if (user?.id) {
addDataLayer({
event: 'site_open',
sc_user_id: user.id,
});
}
}, [user?.id]);
};
type UseYYYArgs = {
active: boolean;
id: string;
};
// 特定の動作をしたとき
export const useYYY = ({ active, id }: UseYYYArgs) => {
useEffect(() => {
if (active) {
addDataLayer({
event: 'zzz',
aaa_id: id,
});
}
}, [active, id]);
};
Next.jsでGoogle Analyticsを実装するとなると、少し注意点もあるので、気をつけて実装していきましょう。
ともに考え、寄り添う。プロのデザインチームが即参戦。
販促ツールや一貫したデザインによるブランド構築などビジネスの成長をデザインの力で促進します。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
お得な情報がLINEに届く！！
LINE公式アカウントはこちらから。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
平日10:00〜19:00
© NEXTGATE LiSMOtech All rights reserved
