【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=local
GoogleタグマネージャでIDを確認し、GTM-XXXXXXX
を書き換える。
本番環境で環境変数を設定する
Vercelなどの本番環境の環境変数を設定しましょう。(NEXT_PUBLIC_VERCEL_ENV=production
)
最近の記事
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-7.png&w=3840&q=75)
音楽生成AI「Suno」の使い方まとめ!作詞作曲が簡単にできる?
簡単に曲が作れるAIということでよく聞く「Suno(Chirp)」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-5.png&w=3840&q=75)
【Open AI】APIの料金まとめ|GPT・DALL·E・Whisperなど
Open AIのAPI(一部)の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-1-1.png&w=3840&q=75)
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI(Upload file)で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。(Vercelにデ...
2023/11/21
2023/11/22
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12