【Next.js 13】Googleタグマネージャの設定方法。
2023/5/15
2023/5/15
Next.js 13でGoogle Tag Managerを設定する方法を調べてみました。
とりあえずは動く処理ができたので、その方法をメモしておきます。
目次
今回編集するファイル
- layout.tsx
- Analytics.tsx
- gtm.ts
- .env.local
ファイルを編集する
1. layout.tsx（一部修正する）
import "./globals.css";
import Analytics from "@/components/Analytics";
export const metadata = {
...
};
export default function RootLayout({children,}: {children: React.ReactNode;}) {
return (
<html lang="ja">
<body>
<Analytics/>
{children}
</body>
</html>
);
}
bodyタグ内に、<Analytics/>を追加します。
2. Analytics.tsx（新しく作成する）
"use client";
import { pageview } from "@/lib/gtm";
import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { useEffect } from "react";
export default function Analytics() {
const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
if (pathname && process.env.NEXT_PUBLIC_VERCEL_ENV === "production") {
pageview(pathname);
}
}, [pathname, searchParams]);
if (process.env.NEXT_PUBLIC_VERCEL_ENV !== "production") {
return null;
}
return (
<>
<noscript>
<iframe
src={`https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}`}
height="0"
width="0"
style={{ display: "none", visibility: "hidden" }}
/>
</noscript>
<Script
id="gtm-script"
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;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', '${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}');
`,
}}
/>
</>
);
}
（そのままコピペで問題ないはずです。）
3. gtm.ts（新しく作成する）
declare global {
interface Window {
dataLayer: Record<string, any>[];
}
}
export const pageview = (url: string) => {
window.dataLayer.push({
event: "pageview",
page: url,
});
};
（そのままコピペで問題ないはずです。）
4. .env.local
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXX
NEXT_PUBLIC_VERCEL_ENV=localGoogleタグマネージャでIDを確認し、GTM-XXXXXXXを書き換える。
本番環境で環境変数を設定する
Vercelなどの本番環境の環境変数を設定しましょう。（NEXT_PUBLIC_VERCEL_ENV=production）
最近の記事
音楽生成AI「Suno」の使い方まとめ！作詞作曲が簡単にできる？
簡単に曲が作れるAIということでよく聞く「Suno（Chirp）」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ｜GPT・DALL·E・Whisperなど
Open AIのAPI（一部）の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI（Upload file）で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。（Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12